Описание

Организационные вопросы.

• Обзор проектов.
• Схема работы на курсе.

React.

• Что такое React.
• Как работает React.
• Какие задачи эффективно решает.
• Virtual DOM.

JSX.
Инфраструктура

• Webpack.

Дополнительные инструменты.
Компонентный подход.

• Компоненты React.
• Свойства компонентов.
• Передача данных через свойства.
• Вложенные компоненты.

Рендеринг компонентов.

• Рендеринг списков.
• Условный рендеринг.

Раздел 2
Тестирование React
Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для созданных компонентов.

• Jest.
• Enzyme.
• PropTypes.

Вторая неделя
Раздел 3
state
Теоретическая лекция
Улучшим знания о React и компонентах. Разберём state, события и методы жизненного цикла компонента.

• state.
• Однонаправленный поток данных.
• Функциональные компоненты, классовые компоненты, PureComponent.

Методы жизненного цикла.
React и формы.

Раздел 4
React и паттерны
Разбираемся с вопросом, что такое архитектура программного обеспечения и как её проектировать. Знакомимся и учимся на практике применять паттерны проектирования.
Проектирование.

• Чем отличается хорошая программа от плохой.
• Зачем проектировать программное обеспечение. Цели проектирования.
• Архитектура программного обеспечения.
• Инструменты для проектирования.

Паттерны проектирования.

• Какие проблемы решают паттерны.
• Из чего состоит паттерн.
• Виды паттернов проектирования.

Паттерны в React.

• Дочерние компоненты.
• Компоненты-обёртки (Proxy component).
• Компоненты высшего порядка (Higher-order component).
• Render Props.
• Провайдер (Provider).

Третья неделя
Раздел 5
Redux
Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.

• Flux-архитектура.
• Хранилище, диспетчер, действия.

Redux.
Middlewares.

Раздел 6
Оптимизация производительности
Поговорим о производительности React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь.

• Профилирование компонент.
• Управление обновлением компонент.

Четвёртая неделя
Раздел 7
Асинхронность в Redux
Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware.
redux-thunk

Пятая неделя
Раздел 8
React Router
Знакомимся с маршрутизацией в SPA-приложениях. Добавляем в проект пакет react-router-dom, создаём публичные и приватные маршруты.

• Роутинг.
• History API.
• Компоненты Route, Link.
• Приватные маршруты.
• Редиректы.

Раздел 9
React и типизация
Познакомимся со статической типизацией. Обсудим, какие проблемы она решает. Добавим к проекту TypeScript.
Статическая типизация.

• Что это такое?
• Плюсы минусы статической типизации.
• Статическая типизация для JS.

TypeScript и React.

• Поддержка React в TypeScript.
• Интерфейсы.