29 Июля вышел React 15.3, и первым пунктом в release-notes значилось добавление поддержки React.PureComponent, который заменяет своего предшественника pure-render-mixin. В этой статье обсудим, почему же этот компонент так важен и где его использовать.
Читать полностью »
Рубрика «ReactJS» - 51
Разбор: как и зачем применять 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}]
};
Быстрый курс Redux + websockets для бэкендера
2016-12-21 в 15:21, admin, рубрики: python, ReactJS, redux, redux middleware, websocketsЭто краткое руководство и обучение по фронтэнеду для бэкендера. В данном руководстве я решаю проблему быстрого построения пользовательского интерфейса к серверному приложению в виде одностраничного веб-приложения (single page app).
Основной целью моего исследования является возможность за разумное время (для одного нормального человека) получить удобный и простой в использовании интерфейс-черновик к серверному приложению. Мы (как разработчики серверной части) понимаем, что наш приоритет — серверная часть. Когда (в гипотетическом проекте) появятся во фронте профи своего дела, они все сделают красиво и "правильно".
В роли учебной задачи представлена страничка чата с каким-то умозрительным "ботом", который работает на стороне сервера и принимает сообщение только через WebSocket. Бот при этом выполняет эхо ваших сообщений (мы тут не рассматриваем серверную часть вообще).
Angular2 + Websocket + RxJS + Rails5
2016-12-20 в 11:05, admin, рубрики: angular2, AngularJS, ReactJS, ruby on rails, Разработка веб-сайтов
Всем привет! Эта статья о том как связать клиентское приложение Angular2 с Rails 5 сервером используя Websocket.
Читать полностью »
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()», посредством удвоенной переменной и зарегистрировали ее следующим образом:
Читать полностью »
Можно ли обойтись без jsx и зачем?
2016-12-09 в 12:58, admin, рубрики: ES6, es6x, javascript, jsx, React, ReactJSЯ уверен, большинство из вас, кто использует react используют jsx. Благодаря своему лаконичному синтаксису jsx улучшает читабельность шаблонов. Сравните:
render() {
return React.createElement('div', { className: 'block'}, 'Text of block');
}
// vs
render() {
return <div className='block'>
Text of block
</div>;
}Второй вариант даже в таком простом примере выглядит намного понятнее. Если усложнить пример, то разница будет еще очевиднее.
Чем плох jsx
Все бы хорошо, если бы jsx был бы стандартной возможностью javascript, но это не так. Для работы с jsx вам потребуется транспилятор. Решив использовать jsx вы навечно становитесь зависимы от транспиляции. Еще недавно, такая зависимость никого не пугала, так как для использования новых возможностей из ecmascript 2015 вам в любом случае необходим транспилятор. Но все меняется, уровень поддержки es6 близок к 100%
По крайней мере, в develop-окружении уже можно избавляться от транспиляции. Представляете, какие возможности это открывает? Не нужно при дебаге ковыряться в выходе babel, который многое изменил, не нужны source map, после изменения файла нет необходимости ждать, пока закончится пересборка. И jsx в данном случае будет главной помехой… Есть ли альтернативы jsx?
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, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты
2016-12-05 в 4:59, admin, рубрики: angular, components, html, javascript, jquery, preact, React, ReactJS, web components, Блог компании DevExpress, будущее, Программирование
Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать
- как React-компонент;
- как Preact-компонент;
- как Angular-компонент;
- как Web Component;
- как jQuery функцию для рендеринга в DOMElement;
- как нативную функцию для рендеринга в DOMElement.
Зачем и кому это нужно
Мир JavaScript-разработки очень фрагментирован. Есть десятки популярных фреймворков, большая часть из которых абсолютно несовместима друг с другом. В таких условиях разработчики JavaScript-компонентов и библиотек, выбирая один конкретный фреймворк, автоматически отказываются от очень большой аудитории, которая данный фреймворк не использует. Это серьезная проблема, и в статье предложено ее решение.
Electrode — open source платформа от WalmartLabs для ReactJS-NodeJS приложений
2016-12-05 в 0:03, admin, рубрики: javascript, node.js, nodejs, ReactJS, redux
Меньше чем за год Wallmart.com завершил миграцию на React/Node.js, и мы рады сообщить вам об этом! Цель миграции заключалась в создании новой платформы для повышения эффективности WalmartLabs и ее инженеров в будущем.
Мы рады сообщить о том, что мы выложили в open source Electrode — платформу, на которой построен Walmart.com.
Читать полностью »
Logux: Connection lost, data synchronized – интервью с Андреем Ситником (Злые Марсиане)
2016-12-02 в 15:08, admin, рубрики: holyjs, javascript, JS, React, ReactJS, андрей ситник, Блог компании JUG.ru GroupЧто происходит, если вдруг на клиенте пропадает интернет? Возможно, на долю секунды, а может быть, на более ощутимый период? Все мы как пользователи сталкиваемся с нестабильным сигналом, плавающим качеством связи. Иногда это неважно, ведь хочется посмотреть какое-то весёлое видео, иногда от этого может зависеть очень многое – представьте, что вам срочно надо купить билет на поезд или оплатить тот же самый интернет.
Те сферы, где очень важен конечный пользователь – например, СМИ, говорят, что уже 13% пользователей уходят, если ваш сайт открывается больше четырёх секунд, не разбираясь в причинах. А теперь давайте представим такого пользователя, который еще пробует отправить комментарий, и он постоянно «отваливается» из-за проблем со связью?
Процент уходов и отказов будет заведомо больше. Как этого избежать? Что можно сделать в ситуации, когда данные должны быть гарантированно отправлены как от клиента, так и со стороны сервера?
На этот и другие вопросы отвечает Андрей Ситник – автор PostCSS и Автопрефиксера, ведущий фронтендер в «Злых Марсианах».
– Почему мы вообще говорим о проблемах связи? Разве это не вопрос, исключительно связанный с физическими/сетевыми возможностями?
– OSI тут не совсем в тему. Logux заменяет REST и AJAX. То есть это чисто прикладной уровень. Logux решает следующие проблемы:
Читать полностью »