В последнее время набирает популярность стандарт JSON API для разработки веб-сервисов. На мой взгляд, это очень удачное решение, которое наконец хоть немного стандартизирует процесс разработки API, и вместо очередного изобретения велосипеда мы будем использовать библиотеки как на стороне сервера, так и клиента для обмена данными, фокусируясь на интересных задачах вместо написания сериалайзеров и парсеров в сто первый раз.
Недавно команда Qwintry начала активную миграцию на Vue.js во всех наших старых и новых проектах:
Почему наши программисты остановили выбор на Vue.js, рассказывает руководитель департамента разработки Qwintry LLC. Антон Сидашин ➔
Читать полностью »
29 Июля вышел React 15.3, и первым пунктом в release-notes значилось добавление поддержки React.PureComponent, который заменяет своего предшественника pure-render-mixin. В этой статье обсудим, почему же этот компонент так важен и где его использовать.
Читать полностью »
Этот пост является продолжением поста про оптимизацию производительности списка в React приложении.
Внимание. В данном посте примеры подготовлены специально для Redux приложений. Но сам подход возможно применить и с другими библиотеками. Так же нижеприведенный совет работает в react-redux версии 5. Я не смог достичь желаемого результата в версии 4. Глубоко разбираться в причинах я не стал.
И так, стандартный способ хранить некоторое множество элементов в приложении — это хранить их в массиве:
const state = {
targets: [{id: 'target1', radius: 10}, {id: 'target2', radius: 2}]
};
Отличный фреймворк!
Простой, чистый, производительный!
Так на его могиле и напишем...
Полсотни интернет-зависимых не спят. Прижав тощие и не очень задницы к стульям, они флудят в самописном чатике. Удовольствие стоит 6 рублей в час (цена «городского интернета» в далеких
2000-х с одним сервером на город-полумиллионник).
На это хватало сэкономленного на студенческих обедах. На выход в Глобальный Интернет по 33 рубля (хренасе!) в час — уже нет. Писк модема на 33600. Ночь.
Перевод официальной документации библиотеки React.js на русском языке.
1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая — Списки и ключи
9 — Часть девятая (скоро)
Для начала, давайте рассмотрим, как преобразовать списки в JavaScript.
В приведенном ниже примере, мы используем функцию «map()», чтобы считать массив устройств «numbers» и удвоить их значения. Мы задаем новый массив устройств, возвращенный с помощью «map()», посредством удвоенной переменной и зарегистрировали ее следующим образом:
Читать полностью »
Перевод официальной документации библиотеки React.js на русском языке.
1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая (скоро)
В React вы можете создавать отдельные компоненты, которые воплощают нужную вам модель поведения. Затем можно будет отобразить только некоторые из них, в зависимости от состояния приложения.
Условный рендеринг в React работает точно так же, как и в JavaScript. Используйте операторы JavaScript, как "if" или условный оператор для создания элементов, которые отображают текущее состояние, и чтобы позволить React обновлять пользовательский интерфейс, чтобы им соответствовать.
Читать полностью »
Перевод официальной документации библиотеки React.js на русском языке.
1 — Часть первая
2 — Часть вторая
3 — Часть третья
4 — Часть четвертая
5 — Часть пятая
6 — Часть шестая
7 — Часть седьмая (скоро)
Обработка событий с элементами React очень схожа с обработкой событий с элементами DOM.
Существует несколько синтаксических различий:
Названия событий React создаются с помощью camelCase, а не lowercase. С JSX вы передаете функцию как обработчик события, а не строку. Например, HTML:
<button onclick="activateLasers()">
Activate Lasers
</button>
В React это выглядит немного по-другому:
Читать полностью »
Перевод официальной документации библиотеки React.js на русском языке.
1 — Часть первая
2 — Часть вторая
3 — Часть третья
4 — Часть четвертая
5 — Часть пятая
6 — Часть шестая (скоро)
На данный момент, мы знаем только один способ как обновить пользовательский интерфейс.
Мы отправляем сигнал в ReactDOM.render() чтобы изменить выводимые данные:
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
Попробуйте повторить этот пример в CodePen.
Читать полностью »
Сегодня делаем настольное приложение с графическим интерфейсом для управления роботом на Ардуине через последовательный порт. На языке JavaScript на платформе Electron с виджетами ReactJS+MaterialUI.
Теперь пульт управления для своего станочка с ЧПУ сделать не сложнее, чем написать сайтик.