Весь прошлый год я проводил длинные уроки по часу, полтора, где мы изучали React на практике, делали маленькие и большие приложения, всегда делали это с нуля и в прямом эфире. Я всегда транслировал эти сессии парного программирования и основную пользу они приносили именно напарнику и тем, кто кодил с нами в прямом эфире и задавал вопросы. Всё же практика в изучении технологий, наиболее важна.

Но выяснилось, что смотреть такие уроки невыносимо тяжело, час, полтора времени у экрана, постоянное повторение одного и того же, выискивание изюма знаний из длинных «нудных» реплик автора, а зачастую и с эхом в записи, по причине плохого микрофона или медленного интернета, это очень тяжело. Но тем не менее, большой процент разработчиков, опираясь на наши еженедельные сессии парного программирования, изучили новый для себя React и успешно выполняют сложные задачи больших проектов. Но смотреть их скучно. Что делать?

Так появились шортики. Я собрал весь изюм из прошлых уроков, часто задаваемых вопросов на практике и дыр у новичков в собеседованиях и превратил их в 3х-4х минутные ролики. Принцип шортиков: пример кода, не больше 5 минут, заранее набранный код, не банальный контент, подтверждение вопроса практикой.

Кто я такой? Вецель Евгений, создатель 4pda.ru, автор книг в жанре фантастики, техлид одной из команд большой frontend компании CSSSR.

CSSSR Shorts №1: Разворачиваем React Js в CodePen

Рассказ о минимальных настройках онлайн-редактора кода, которые позволяют писать код для React при помощи ES6 спецификации языка
Код шортика: codepen.io/Imater/pen/XpLbrg

CSSSR Shorts №2: Разворачиваем React Js + Redux в CodePen

Рассказ о минимальных настройках онлайн-редактора кода, которые позволяют писать код для React + Redux при помощи ES6 спецификации языка. Плюс пример минимального кода с использованием redux.
Код шортика: codepen.io/Imater/pen/JEQdGv

CSSSR Shorts №3: shouldComponentUpdate — управление обновлением компонента

То что React быстр, маскирует для новичков тот факт, что если ничего не предпринимать, то всё приложение будет перерисовываться по любому действию пользователя. В этом уроке я рассказываю основы производительности React, предотвращение лишних вызовов render функции.
Код шортика: codepen.io/Imater/pen/pRXJPe

CSSSR Shorts №4: Какие props портят производительность

Самая распространённая ошибка, приводящая к лишним вызовам render функции это передача props компоненту, ссылка на который каждый раз создаётся заново. Выглядит это обычно безобидно, поэтому нужно тренировать глаз, чтобы не допускать такого в больших приложениях. Также рассматривается назначение PureComponent, который сравнивает все props с их прошлыми значениями и избегает вызов render если ничего не изменилось.
Код шортика: codepen.io/Imater/pen/pRXJaw

CSSSR Shorts №5: Влияет ли смена state компонента на отрисовку PureComponent

На практике выясняем, будет ли вызвана render функция компонента pureComponent при вызове его this.setState()
Код шортика: codepen.io/Imater/pen/ZLdbwN

CSSSR Shorts №6: Сколько раз вызывается render при вызове трёх this.setState подряд

Нужно ли комбинировать несколько setState для ускорения работы React
Код шортика: codepen.io/Imater/pen/JEQYgX

CSSSR Shorts №7: Дебаг при помощи console.log без вмешательства в код

Пользуясь тем, что console.log возвращает `undefined`, при помощи выражения `console.log(var) || var` можно выводить переменные, минимально вмешиваясь в код. Это очень удобно в стрелочных функциях или в объектах.
Код шортика: codepen.io/Imater/pen/jyjWOd

CSSSR Shorts №8: Пишем свой Redux в 15 строк и используем без React

Чтобы понимать как redux работает внутри и рассеять всю магию, которая неизбежно окружает тех, кто не заглядывал внутрь кода, достаточно посмотреть этот урок или код из него.
Код урока: codepen.io/Imater/pen/pRMexM

CSSSR Shorts №9: Варианты записи функций в компоненте React и передача контекста this

Рассмотрим 6 вариантов записи функций в классе (компоненте React) и поймем, почему внутри функции — разный контекст this. Посмотрите код и вы навсегда запомните разные варианты, которые зачастую встречаются на собеседованиях и вызывают путаницу в реальных проектах.
Код шортика: stackblitz.com/edit/react-m32gzi

CSSSR Shorts №10: Memoizee кэширование, и зачем оно нужно для оптимизации React приложений

Реализация функции кэширования, и её использование для исключения лишних ререндеров компонентов React.
Код шортика: stackblitz.com/edit/react-7opmc8?file=index.js

CSSSR Shorts №11: Memoizee кэширование для передачи данных функции до её выполнения

Рассмотрим ещё один способ использования memoizee: закэшировать функцию, возвращающую функцию, для того, чтобы передать ей аргументы до выполнения.
Код шортика: stackblitz.com/edit/memoizee-on-click?file=index.js

CSSSR Shorts №12: Используем имя компонента из константы, облегчаем вёрстку при разных условиях

Необычный способ хранить имя используемого компонента в переменной. Помогает при вёрстке, изменяющейся при разных условиях.
Код шортика: stackblitz.com/edit/component-name?file=index.js

CSSSR Shorts №13: Выводим переменные в консоль, действительно не меняя код

Conditional breakpoint в Chrome удобен для добавления кода вывода в консоль или условия остановки debug
Код шортика: stackblitz.com/edit/component-name?file=index.js

CSSSR Shorts №14: Reselect – более умная функция кэширования

Reselect помогает исключать лишние rerender компонентов React и делать сложные селекторы с авто-кэшированием. Основное удобство, что все функции, которые возвращают ключи кэширования, получают на вход один и тот же набор аргументов. В случае redux на вход лучше отправлять хранилище целиком, тогда глобальный селектор «всесилен» и может собрать выходные данные из всего состояния приложения. Таким образом, если вы как аргумент используете хранилище целиком, то всё приложение можно сделать на селекторах, которые комбинируются друг с другом.
Код шортика: stackblitz.com/edit/reselect?file=index.js

CSSSR Shorts №15: Reselect кэширование в connect функции Redux

Reselect кэширование в connect функции Redux позволяет устранить лишний перерендер компонента. Используем redux с одним хранилищем на одном reducer. Демонстрируем лишний перерендер, когда данные не поменялись, но поменялась ссылка на них. Используем четыре функции RamdaJs: path, sortBy, prop, compose.
Код шортика без reselect: stackblitz.com/edit/redux-simple-bad?file=index.js
Код шортика с reselect: stackblitz.com/edit/redux-simple-with-reselect?file=index.js

CSSSR Shorts №16: Redux-form минимальный вариант использования

Redux-form минимальный вариант использования; инициализация начальных значений из других хранилищ; рассказ о том, как устроен минимальный код подключения redux-form. Комбинирование нескольких редьюсеров. Использование R.compose для минимизации количества скобок при создании компонента, подключенного к хранилищу и reduxForm.
Код шортика: stackblitz.com/edit/redux-form-v1?file=index.js

CSSSR Shorts №17: Маски в Field reduxForm через normalize

Что делать, если нужно 8922884848 преобразовать во время ввода в 8-922-88-48-48 или 12012017 в 12.01.2017? Ответ: используйте normalize, он получает новое, прошлое значение не только текущего поля ввода, но и все значения всех полей формы. Используя эту информацию, вы вычисляете новое значение текущего Field.
Код шортика: stackblitz.com/edit/redux-form-v2-normalize?file=index.js

CSSSR Shorts №18: Собственные компоненты ввода для reduxForm

Посмотрим простой компонент ввода, который создадим как класс. Обсудим свойства, которые получает этот компонент
Код шортика: stackblitz.com/edit/redux-form-v3-component?file=index.js

CSSSR Shorts №19: Что будет, если забыть type у button внутри формы

Если вы забыли type=«button» у кнопки, то при отправке формы эта кнопка будет вызывать onClick
Код шортика: codesandbox.io/s/y2ql953m9j

CSSSR Shorts №20: Вложенные структуры данных в reduxForm

Использование FormSection для указания вложенной структуры данных с любой глубиной
Код шортика: codesandbox.io/s/8x02q1jro8

CSSSR Shorts №21: Как изменить значение Field из формы

Использование change функции формы для установки значения поля с любой вложенностью
Код шортика: codesandbox.io/s/8x02q1jro8

CSSSR Shorts №22: Изменение нескольких полей одной функцией

Использование change функции для изменения нескольких полей за один раз в redux-form
Код шортика: codesandbox.io/s/7wxkvww01j

CSSSR Shorts №23: Заставляем reduxForm слушать хранилище для initialValues

enableReinitialize свойство reduxForm заставляет форму обновлять initialValues при изменении данных в хранилище
Код шортика: codesandbox.io/s/7wxkvww01j

Спасибо за внимание. Не ругайте микрофон в первых 4х роликах, он уже ритуально сожжён, а дикцию и неправильное произношение сжечь не удалось.

Шортики по React, а потом и Angular 2+, будут выходить весь этот год каждую неделю. Подписывайтесь на youtube канал. Смотрите там ролики с нашей летней конференции. Приходите к нам на работу.