Курс React.js

Зачем изучать React.js?

React.js - это открытый JavaScript-фреймворк для создания интерфейсов пользователя. Технология поддерживается компаниями Facebook, Instagram и сообществом независимых веб-разработчиков. Преимущества React.js:

• React.js призван решать проблемы частичного обновления содержимого веб-страницы.
• Технология позволяет улучшить пользовательский опыт ваших сайтов и приложений.
• React используется при разработке высоконагруженных веб-приложений и позволяет увеличить скорость их разработки.
• Alipay, Airbnb, Dropbox, Facebook, Netflix, Reddit и сотни других крупных популярных сайтов и приложений разрабатываются с использованием React.

Программа курса React.js

Основы ES6
• Настройка окружения.
• Краткий обзор фич ES6.
• Create react app.

Введение в ReactJS
• Библиотека React.
• Пишем Hello World.
• Что такое реакт-элемент?
• Знакомимся с JSX.
• Компоненты.

Виртуальный DOM
• Stateful-компоненты, хранение состояния.
• State, props.
• Что такое виртуальный DOM?
• Как React отслеживает изменения (reconciliation).
• Жизненный цикл реакт-компонентов.

Подробнее о реакт-компонентах
• Обзор реакт-компонентов.
• "Умные" и "глупые" компоненты.
• Синтетические события.
• Управляемые и неуправляемые компоненты.
• Иерархия компонентов.
• Контекст.

React Router
• Что такое роутер, какие задачи решает.
• Основные версии, их отличия.
• Настройка роутера.
• Перенаправление, ленивая загрузка.
• Управление роутером.

FLUX
• Обзор FLUX.
• Структура FLUX.
• Диспетчер.
• Экшены (Действия).
• Хранилище.

Redux
• Чем Redux отличается от FLUX.
• Поток данных.
• Middleware.
• Архитектура React + Redux приложений.
• Библиотека react-redux.

Тестирование приложения
• Краткий обзор фреймворков для тестирования.
• Вспомогательные библиотеки (assertions).
• JEST.
• Утилиты.
• Enzyme.

Дополнительно о React
• Компоненты-контейнеры и презентационные компоненты.
• Стили.
• Селекторы.
• Иммутабельность.
• Структура проекта.

Создаем простое React-Redux приложение
• Создаем простой список добрых дел (TODO-list).
• Практические советы.
• Используем immutable.js.
• Использование библиотеки reselect.js.
• Скажем "НЕТ" каше в голове и в проекте!