React на практике

Ставим проект, разбираемся в структуре папок и синтаксисе JSX. Берём макет каталога из вёрстки и делим его на компоненты, которые дальше растут в магазин.

Учимся передавать данные вниз по дереву и собирать сложные блоки из простых. Разбираем children, значения по умолчанию и границу между компонентом и его настройками.

Состояние компонента, реакция на события и эффекты для работы с внешним миром. Выносим повторяющуюся логику в свои хуки и разбираем частые ошибки с зависимостями.

Рендерим каталог из массива, разбираемся с ключами и тем, почему список «прыгает». Показываем пустые состояния, фильтры и сортировку без лишних перерисовок.

Управляемые поля, состояние формы и валидация без сторонних библиотек. Собираем многошаговую форму заказа с понятными сообщениями об ошибках и блокировкой повторной отправки.

Запрашиваем каталог с сервера: async/await, отмена устаревших запросов и гонки ответов. Добавляем поиск и постраничную загрузку, не ломая состояние экрана.

Разбираем два состояния, о которых обычно забывают: пока грузится и когда сломалось. Скелетоны, повторные попытки, границы ошибок и понятные сообщения пользователю.

Разводим магазин по страницам: каталог, товар, корзина, оформление. Параметры URL, вложенные маршруты с общим layout, редиректы и доступ только для авторизованных.

Когда пропсов становится мало: контекст для темы и пользователя, useReducer для корзины. Сравниваем подходы и выносим корзину во внешний стор с сохранением между сессиями.

Ищем причины лишних перерисовок в профайлере и чиним их. memo, useMemo и useCallback по делу, виртуализация длинного каталога и измерения до и после.

Пишем тесты, которые проверяют поведение, а не разметку. Клик по кнопке, отправка формы, добавление товара в корзину и моки сетевых запросов.

Собираем продакшн-сборку, разбираемся с переменными окружения и размером бандла. Дописываем оплату заказа, выкладываем магазин в сеть и проверяем его на реальном домене.