Сергей Куликов фронтенд-разработчик

Верстаю и разрабатываю сайты на Drupal. Живу и работаю в Днепропетровске.

Погружаемся в React

Каждый, кто интересуется новинками фронтенд-разработки, уже наверняка слышал о библиотеке React. О преимуществах и возможностях Реакта написано предостаточно. Но разобраться в этом море информации неподготовленному новичку крайне сложно. Лично я продираюсь через дебри туториалов и документации самостоятельно, а потому знаю, о чём говорю. Надеюсь, эти заметки помогут тем, кто решит пойти по моим стопам.

Начну с минимальных требований. Прежде всего, понадобится хороший английский. Вы должны свободно читать документацию, гуглить решения проблем и понимать, что пишут на Stackoverflow. Далее, нужно осознание своего уровня. Если ваши достижения ограничиваются успешным завершением курсов htmlacademy и парой свёрстанных макетов, вам ещё многое предстоит освоить. Не бойтесь, это реально (но наверняка займёт не один месяц).

Прежде всего, JavaScript. Русскоязычным разработчикам здесь повезло: к их услугам Современный учебник JavaScript от Ильи Кантора. Тем, кому совсем тяжело, стоит начать с книги Антона Шевчука jQuery для начинающих — достаточно первых 3 глав, там даются самые основы. Для закрепления понимания специфики языка крайне желательно почитать серию You Don’t Know JS. Все упомянутые книги написаны хорошим и понятным языком.

Далее, возможности ES6 (ES2015). Необходимый минимум: синтаксис классов, стрелочные функции, let и const, деструктуризация, шаблонные строки, оператор Spread. Стоит читать соответствующий раздел в учебнике Кантора и You Don’t Know JS: ES6 & Beyound. Также очень помогут статьи Николаса Беваквы, переводы которых можно найти на CSS-live, а его же обстоятельный «Обзор ES6 в 350 пунктах» — также и на хабре (часть 1, часть 2).

Следующий шаг — Node.js. Снова на помощь приходит Илья Кантор и его Скринкаст по Node.js. Как минимум, нужно просмотреть первые 9 видео и понимать принцип модульной системы. Версия Node.js для работы с Реактом понадобится свежая: на данный момент это 4.x (LTS-версия) или 5.x (Stable-версия). Для разработки под Windows также нужно будет установить Python 2.7 и Microsoft Visual Studio (для компиляции некоторых npm-пакетов).

Не менее важный этап — знакомство с так называемой экосистемой Реакта. Прежде всего, Webpack — несмотря на наличие альтернатив, этот сборщик вы будете встречать почти повсеместно. Илья Кантор выручает и здесь, его Скринкаст по Webpack обязателен к просмотру. Далее, нужно разобраться с Babel — уже можно использовать 6 версию. О связке Babel и Webpack есть неплохая статья. Готовый пример конфига найдёте в шаблоне React Hot Boilerplate.

Ещё один момент: среда разработки. Лично я остановился на Atom и достаточно легко перешёл на него с Sublime. Для подсветки синтаксиса понадобится пакет react. Есть в Атоме и другие полезности: я поставил себе сниппеты для Реакта и крутые иконки для разных типов файлов. Обязательно настройте линтинг ES6 и JSX для предотвращения ошибок — мне помогла эта инструкция. Ещё один шаблон проекта с примером конфига: React ES6 Webpack Boilerplate.

Наконец, можно приступать к изучению. Начать советую с туториала survive.js. Там предлагается написать несколько прокачанную версию традиционного TodoMVC, точнее, Kanban-доску наподобие trello. Советую проработать до главы React and Flux включительно, а далее придумать что-то своё — желательно простое, но полезное (чтобы было интересно потом использовать на практике). Я, например, начал делать словарик для записи изученных английских слов.

В качестве дополнительного материала советую Воркшоп «React.js и архитектура Flux». По многим темам автор пробегает поверхностно, но их стоит взять на заметку для дальнейшего изучения: тестирование, рендеринг на сервере и прочее. Более информативна в этом плане первая часть, вторая в основном посвящена объяснению авторской реализации архитектуры Flux на примере небольшого приложения.

К слову, об архитектуре — самое время над ней подумать. Сейчас обычно выбирают Redux. Очередное море информации прилагается. Впрочем, есть полезные материалы и на русском, начать стоит с документации. Ещё одна очень полезная штука — Redux DevTools. Правда, с их подключением придётся немного повозиться, но результат того стоит. Очередной шаблон проекта с примером конфига: React Redux Starter Kit.

На этом подготовительный этап завершён. Если всё вышеописанное вы уже знаете, могу только поздравить: у вас уже неплохой багаж :) Для дальнейшего изучения могу предложить Full-Stack Redux Tutorial. Так или иначе, разбираться с TDD и иммутабельными структурами данных придётся в любом случае. Если же вам понравился учебник survivejs, советую их Redux demo. И да, свой шаблон проекта у этих ребят тоже имеется: React Component Boilerplate.

Всем, кто изучает React, искренне желаю успехов. Sky is the limit!