Курс React
Создавайте интерактивные интерфейсы на React: компоненты, состояние, маршруты и запросы к API.
О курсе
React используют для интерфейсов, в которых экран меняется вслед за действиями пользователя и ответами сервера. Вы начнёте с компонентов и JSX, затем добавите формы, запросы, маршруты и соберёте цельное приложение.
Чему научитесь
- Структура приложения, props и композиция компонентов.
- События, useState, управление формами и вывод списков.
- Эффекты, HTTP-запросы и навигация между экранами.
- Контекст, повторное использование логики и знакомство с Redux.
Программа обучения
Для каждого раздела указан ориентировочный объём в парах. Одна пара — два академических часа. Состав и темп занятий можно уточнить под вашу цель и подготовку.
Структура приложения и JSX2 пары
- Структура проекта и точка входа приложения
- JSX: выражения, атрибуты и условный вывод
- Функциональные компоненты и разбиение экрана на части
- Импорт компонентов и организация файлов
- Первая страница из нескольких повторяемых блоков
Компоненты, props и события2 пары
- Передача данных через props
- События кнопок и полей ввода
- Списки, ключи и условное отображение элементов
- Композиция компонентов вместо дублирования разметки
- Разница между данными родителя и дочернего компонента
Состояние и формы3 пары
- Локальное состояние с useState
- Контролируемые поля и отправка формы
- Проверка ввода и сообщения об ошибках
- Обновление массива объектов без изменения исходных данных
- Согласование состояния формы и списка на странице
Работа с API и эффектами3 пары
- useEffect и загрузка данных из API
- Состояния загрузки, пустого ответа и ошибки
- Очистка эффекта и повторный запрос при изменении параметров
- Обработка ответа и вывод карточек на страницу
- Отмена устаревшего запроса при смене экрана
Маршрутизация2 пары
- Маршруты и ссылки между экранами
- Параметры адреса и страница отдельного объекта
- Экран для неизвестного адреса
- Навигация без полной перезагрузки приложения
- Структура маршрутов в React Router
Контекст и повторное использование логики2 пары
- Контекст для данных нескольких компонентов
- Пользовательский хук для повторяемой логики
- Разделение компонентов, данных и запросов
- Когда контекст уместнее передачи props
- Проверка удобства API собственного хука
Архитектура и итоговый проект3 пары
- Когда нужен общий store и знакомство с Redux
- Отладка состояния и поиск лишних обновлений
- Сборка учебного приложения с формой и API
- Проверка сценария от списка до карточки объекта
- Финальная чистка кода и подготовка проекта к показу
Проверка и доступность приложения1 пара
- Проверка компонентов на типичных сценариях
- Доступные подписи полей и управление с клавиатуры
- Понятные сообщения при ошибке и пустом результате
- Подготовка сборки приложения к показу
Практическая работа и результат
Собираете одностраничное приложение с несколькими экранами и данными из API.
В процессе вы применяете темы программы к одной задаче, проверяете результат и исправляете ошибки вместе с преподавателем. Так после занятий у вас остаётся законченная учебная работа, а не только записи с объяснениями.
С чего начать
Нужны HTML, CSS и уверенные основы JavaScript. Если часть тем уже знакома, программу можно сместить в сторону более сложной практики.
Продолжить обучение
Эта тема входит в программу «Frontend-разработчик». Если вам нужно освоить направление целиком, обсудите с менеджером полную программу или отдельные занятия по этой теме.
Как проходят занятия
Аудитории, оборудование и практика — как это выглядит изнутри.
