[javascript.ru] Курс по React.JS (декабрь 2015)
В этом курсе мы с вами шаг за шагом пройдем от знакомства с основными идеями до использования самых новых инструментов и инфраструктуры React, на практике будем развивать одностраничное приложение. Начнем с построения простых компонентов, научимся настраивать окружение, поговорим про системы сборки и особенности работы с ES2015 синтаксисом.
Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру Flux, увидите ее плюсы и минусы, а в конце курса мы повторим создание приложения с использованием современной и наиболее популярной реализацией Flux - Redux.js
Курс состоит из 4-х блоков:
В этом курсе мы с вами шаг за шагом пройдем от знакомства с основными идеями до использования самых новых инструментов и инфраструктуры React, на практике будем развивать одностраничное приложение. Начнем с построения простых компонентов, научимся настраивать окружение, поговорим про системы сборки и особенности работы с ES2015 синтаксисом.
Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру Flux, увидите ее плюсы и минусы, а в конце курса мы повторим создание приложения с использованием современной и наиболее популярной реализацией Flux - Redux.js
Курс состоит из 4-х блоков:
- Знакомство с React.
В этом блоке мы разберем основные идеи Реакта, научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход.
- Обзор и сравнение популярных современных фреймворков: Angular, Ember, React .
- Настройка Babel и Webpack, HMR и React-transform (react-hot-loader).
- Основы работы с Реактом, JSX.
- Два синтаксиса для компонентов: ES2015-классы и React.createClass.
- Поток данных: передаем данные от родителя к дочерним элементам с помощью props.
- Lifecycle: Жизнь React-компонента от инициализации до unmount.
- Построение приложений с React, Flux-архитектура
Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. Мы познакомимся с классической для Реакт-приложений архитектурой Flux, разберем ее в деталях, рассмотрим примеры синхронных действий и обращений к серверу. Создадим простое новостное приложение.
- Facebook Flux - обзор и использование.
- Создаем Store и Actions для управления данными, настраиваем потоки данных.
- Концепция Умных и глупых компонентов, рекомендации по использованию.
- Best-practice создания элементов, вспоминаем ООП.
- Настаиваем коммуникацию с API, узнаем как не наступить на грабли.
- 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.
- Узнаем как и зачем использовать иммутабельные данные.
- Современный 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 для универсальных приложений.