React. Разработка сложных клиентских приложений [HTML Academy]

React. Разработка сложных клиентских приложений
4 июля — 5 сентября 2022

=Стоимость курса на данный момент неизвестна.=

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.

Спойлер: Программа курса:

Программа курса
Первая неделя
Обучение Участие в живых лекциях, работа над проектом с личным наставником.

Раздел 1
Знакомство с TypeScript
Рассмотрим схему работы на курсе. Узнаем что такое TypeScript, и какие задачи он решает. Познакомимся с системой типов и разберёмся, как происходит процесс типизации. Научимся конфигурировать компилятор и рассмотрим основные настройки. Затем перейдём к практике и разберёмся с особенностями написания типизированного кода: кортежи, интерфейсы, дженерики и так далее.

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

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

Введение в TypeScript.

• Что такое TypeScript, и какие задачи он решает.
• Система типов.
• Как код на TypeScript превращается в JavaScript.
• Инфраструктура: настройки компилятора.
• Аннотации и автоматический вывод типов.

Практика применения TypeScript.

• Типизация объектов, массивов, функций.
• Дженерики.
• Кортежи.
• Интерфейсы, псевдонимы типов.

Раздел 2
React
Знакомство с библиотекой React. Узнаем, какие проблемы она решает и как может упростить разработку фронтенда. Подготовим основу проекта с помощью инструмента «Create React App» (CRA). Научимся применять шаблоны для CRA. Затем познакомимся с основными возможностями библиотеки React (JSX, компоненты, передача данных между компонентами).

Раздел 3
Маршрутизация (React Router)
Узнаем как организована маршрутизация в SPA. Добавим в проект React Router и разберёмся с возможностями пакета: маршруты, перенаправления, приватные маршруты и так далее.

• Маршрутизация в SPA.
• History API.
• Компоненты Route, Link, Redirect.
• Управление маршрутами.

Практика

• Реализация маршрутизации в приложении.

Вторая неделя
Раздел 4
React-компоненты. Hooks
Расширим знания о React и компонентах. Научимся управлять состоянием, использовать события и методы жизненного цикла компонентов. Познакомимся с React Hooks и узнаем, как заменить ими классовые компоненты. Научимся работать с формами.

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

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

React и формы.


Практика

• Добавление состояния к компонентам.
• Обработка форм.

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

Проектирование.

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

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

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

Паттерны в React.

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

Практика

• Улучшение проекта, применение паттернов на практике.

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

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

Redux.

Middlewares.

• Расширение функциональности Redux.

Подключение к проекту Redux.

• Обновление кодовой базы.
• Создание middleware.

Раздел 7
Асинхронность в Redux
Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware. Узнаем как взаимодействовать с сервером при помощи пакета Axios. Познакомимся с интерцепторами.

Redux-thunk.

Axios.

• Подключение к проекту redux-thunk.
• Взаимодействие с сервером.

Четвёртая неделя
Раздел 8
Оптимизация производительности
Обсудим производительность React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь. Затем познакомимся с пакетом Redux Toolkit и узнаем как с его помощью избавиться от шаблонного кода при работе с Redux.

• Профилирование компонентов.
• Управление обновлением компонентов.
• Мемоизация.
• Redux Toolkit.

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

• Применение хуков useMemo, useCallback.
• Особенности useEffect.
• Redux Toolkit: createAction, createReducer, createSlice.

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

• Jest.
• React Testing Library.

Практика

• Настройка инфраструктуры для тестирования.
• Применение методик тестирования.
• Тестирование компонентов.
• TDD.

Шестая неделя
Защита проекта Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.

Первая неделя защиты
Завершение работы над проектом и подготовка к итоговой защите.

Седьмая неделя
Вторая неделя защиты
Первая оценка проекта проверяющим наставником по критериям качества.

Восьмая неделя
Третья неделя защиты
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.

Девятая неделя
Раздел 10
Финал
Подведём итоги курса и определим дальнейший вектор изучения React и его экосистемы. Затем обсудим новые возможности React, которые ожидаются в будущих релизах.

Четвёртая неделя защиты
Внесение финальных правок и получение итоговой оценки.