29 Июля вышел React 15.3, и первым пунктом в release-notes значилось добавление поддержки React.PureComponent, который заменяет своего предшественника pure-render-mixin. В этой статье обсудим, почему же этот компонент так важен и где его использовать.
Читать полностью »
Рубрика «react.js» - 10
Разбор: как и зачем применять PureComponent в React
2016-12-26 в 12:33, admin, рубрики: javascript, react.js, ReactJS, redmadrobot, Блог компании REDMADROBOT, оптимизацияОптимизируем redux хранилище для более производительных изменений
2016-12-22 в 21:14, admin, рубрики: javascript, performance, performance optimization, React, react.js, ReactJS, redux, web-разработка, производительность, производительность javascriptЭтот пост является продолжением поста про оптимизацию производительности списка в React приложении.
Внимание. В данном посте примеры подготовлены специально для Redux приложений. Но сам подход возможно применить и с другими библиотеками. Так же нижеприведенный совет работает в react-redux версии 5. Я не смог достичь желаемого результата в версии 4. Глубоко разбираться в причинах я не стал.
И так, стандартный способ хранить некоторое множество элементов в приложении — это хранить их в массиве:
const state = {
targets: [{id: 'target1', radius: 10}, {id: 'target2', radius: 2}]
};
Быть настоящим и писать код VS перебирать и казаться
2016-12-22 в 9:08, admin, рубрики: angular, coffeescript, framework, IT-стандарты, javascript, react.js, КодоБредОтличный фреймворк!
Простой, чистый, производительный!
Так на его могиле и напишем...
Полсотни интернет-зависимых не спят. Прижав тощие и не очень задницы к стульям, они флудят в самописном чатике. Удовольствие стоит 6 рублей в час (цена «городского интернета» в далеких
2000-х с одним сервером на город-полумиллионник).
На это хватало сэкономленного на студенческих обедах. На выход в Глобальный Интернет по 33 рубля (хренасе!) в час — уже нет. Писк модема на 33600. Ночь.
React.js на русском языке. Часть восьмая
2016-12-11 в 10:10, admin, рубрики: javascript, mongodb, node.js, react.js, ReactJS, redux
Перевод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая — Списки и ключи
9 — Часть девятая (скоро)
Списки и ключи
Для начала, давайте рассмотрим, как преобразовать списки в JavaScript.
В приведенном ниже примере, мы используем функцию «map()», чтобы считать массив устройств «numbers» и удвоить их значения. Мы задаем новый массив устройств, возвращенный с помощью «map()», посредством удвоенной переменной и зарегистрировали ее следующим образом:
Читать полностью »
React.js на русском языке. Часть седьмая
2016-12-05 в 19:11, admin, рубрики: javascript, mongodb, node.js, react.js, ReactJS, redux
Перевод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая (скоро)
Условный рендеринг
В React вы можете создавать отдельные компоненты, которые воплощают нужную вам модель поведения. Затем можно будет отобразить только некоторые из них, в зависимости от состояния приложения.
Условный рендеринг в React работает точно так же, как и в JavaScript. Используйте операторы JavaScript, как "if" или условный оператор для создания элементов, которые отображают текущее состояние, и чтобы позволить React обновлять пользовательский интерфейс, чтобы им соответствовать.
Читать полностью »
React.js на русском языке. Часть шестая
2016-12-01 в 8:55, admin, рубрики: javascript, mongodb, node.js, react.js, ReactJS, redux
Перевод официальной документации библиотеки 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 на русском языке. Часть пятая
2016-11-28 в 8:38, admin, рубрики: javascript, mongodb, node.js, react.js, ReactJS, redux
Перевод официальной документации библиотеки 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-Node.js для робота на Ардуине
2016-11-27 в 16:08, admin, рубрики: arduino, babbler, javascript, Node, node.js, React, react.js, ReactJS, программирование микроконтроллеров, Разработка робототехники, роботыСегодня делаем настольное приложение с графическим интерфейсом для управления роботом на Ардуине через последовательный порт. На языке JavaScript на платформе Electron с виджетами ReactJS+MaterialUI.
Теперь пульт управления для своего станочка с ЧПУ сделать не сложнее, чем написать сайтик.
React.js State of the art (интервью с Max Stoiber)
2016-11-21 в 14:15, admin, рубрики: javascript, React, react.js, ReactJS, Блог компании JUG.ru Group
Современная разработка веб-интерфейсов сосредоточена вокруг нескольких больших сообществ. На протяжении последних пяти лет React завоевывал симпатии программистов из самых разных отраслей. React – это одна-единственная библиотека, сделавшая MVC рудиментарным в программировании веб-интерфейсов. Сегодня React используется крупнейшими компаниями для разработки самых разнообразных продуктов — Facebook, Airbnb, BBC, Coursera, eBay, Expedia, IMDB, список можно продолжать.
Одной из уникальных особенностей мира React является крупнейшее и очень активное сообщество опенсорс-разработчиков вокруг него. Max Stoiber — один из людей, благодаря которым React стал тем, чем он является на сегодня как проект. На протяжении последних нескольких лет он работал над популярнейшим boilerplate проектом в сообществе и внедрял новейшие и лучшие технологии в массовое использование.
Мы поговорили с Максом о новых веяниях в сообществе, о статической типизации для разработки с React, о новом подходе стилизации компонентов и о snapshot-тестировании.
К секретам разработки на React можно приобщиться ниже в интервью.
Читать полностью »
React.js на русском языке. Часть третья
2016-11-21 в 8:01, admin, рубрики: javascript, mongodb, node.js, php, react.js, ReactJS, redux
Перевод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая
2 — Часть вторая
3 — Часть третья
Отрисовка элементов
Элементы являются самыми мелкими компонентами приложения. Элемент описывает то, что вы хотите увидеть на экране:
const element = <h1>Hello, world</h1>;
В отличие от DOM-элементов браузера, элементы React являются простыми объектами, которые создаются проще. React DOM постоянно следит за обновлением элементов в DOM.
Примечание:
Элементы можно перепутать с более широким понятием, таким как «компоненты». В следующем разделе мы изучим компоненты. Элементы являются строительным материалом для компонентов и прежде, чем двигаться дальше, мы советуем вам ознакомиться с этим разделом.