[javascript.ru] Курс по React.JS (декабрь 2015)

Складчина: [javascript.ru] Курс по React.JS (декабрь 2015)

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

Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру Flux, увидите ее плюсы и минусы, а в конце курса мы повторим создание приложения с использованием современной и наиболее популярной реализацией Flux - Redux.js

Курс состоит из 4-х блоков:

1. Спойлер: Знакомство с React.


   В этом блоке мы разберем основные идеи Реакта, научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход.
   
   

   • Обзор и сравнение популярных современных фреймворков: Angular, Ember, React .
   • Настройка Babel и Webpack, HMR и React-transform (react-hot-loader).
   • Основы работы с Реактом, JSX.
   • Два синтаксиса для компонентов: ES2015-классы и React.createClass.
   • Поток данных: передаем данные от родителя к дочерним элементам с помощью props.
   • Lifecycle: Жизнь React-компонента от инициализации до unmount.

   

2. Спойлер: Построение приложений с React, Flux-архитектура

   Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. Мы познакомимся с классической для Реакт-приложений архитектурой Flux, разберем ее в деталях, рассмотрим примеры синхронных действий и обращений к серверу. Создадим простое новостное приложение.
   
   

   • Facebook Flux - обзор и использование.
   • Создаем Store и Actions для управления данными, настраиваем потоки данных.
   • Концепция Умных и глупых компонентов, рекомендации по использованию.
   • Best-practice создания элементов, вспоминаем ООП.
   • Настаиваем коммуникацию с API, узнаем как не наступить на грабли.
3. Спойлер: React для SPA: react-router и продвинутые API Реакта.


   Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.
   
   

   • props.children: как в JSX передавать вложенные компоненты.
   • Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
   • Настраиваем вложенные роуты.
   • Выбираем и настаиваем history для нашего приложения.
   • Объеденяем с react-router и Flux.
   • Готовим компоненты к повторному использованию: propTypes, mixins, higher-order components.
   • Использование context для аутентификации.
   • Оптимизируем наше приложение с shouldComponentUpdate.
   • Узнаем как и зачем использовать иммутабельные данные.
4. Спойлер: Современный React: Redux.js.

   Архитектура Flux для Реакт приложений зарекомендовала себя прекрасным образом, это привело к появлению её новых, улучшенных реализаций. Мы с вами обговорим, чего не хватало в библиотеке Flux от Facebook. Построим приложение с использованием Redux.js и увидим, какие новые возможности дает нам эта библиотека.
   
   

   • Минусы FB Flux, как библиотки, обзор альтернативных реализаций.
   • Redux.js – функциональный подход, Redux dev tools, возможности для мониторинга и универсальных приложений.
   • Actions и Reducers, как чистые функции.
   • Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
   • React-redux для связи.
   • Варианты реализации асинхронных actions в Redux, использование Middlewares.
   • Redux c react-router.
   • Использование Redux для универсальных приложений.