Модуль 3.4: React
Введение в React
Разбираемся, зачем нужен React, как он работает и почему стал стандартом индустрии. Компоненты, Virtual DOM, декларативный подход — объясняем простыми словами.
Создание проекта
Создаём React-проект с Vite за 5 минут. Разбираем структуру файлов, настраиваем алиасы путей и скрипты для разработки.
JSX
Разбираем JSX изнутри: как вставлять JavaScript-выражения, правила атрибутов, условный рендеринг, списки с ключами и фрагменты.
Компоненты
Учимся строить UI из компонентов: props, children, композиция. Разбираем паттерны переиспользования и правильную структуру файлов.
useState
Добавляем компонентам память с useState. Иммутабельность, функциональное обновление, работа с объектами и массивами в состоянии.
useEffect
Разбираем useEffect: загрузка данных, подписки, таймеры. Учимся писать cleanup и правильно управлять зависимостями без утечек памяти.
Обработка событий
Обрабатываем клики, ввод, отправку форм. Разбираем контролируемые компоненты, preventDefault и паттерны для надёжных форм.
Условный рендеринг
Показываем разный контент в зависимости от состояния. Тернарный оператор, &&, ранний return и паттерн Loading/Error/Data.
Списки и ключи
Рендерим массивы через map. Разбираем, почему ключи важны, как React использует их для оптимизации и какие ключи выбирать.
useRef и useContext
useRef — прямой доступ к DOM и хранение значений без ре-рендера. useContext — передаём данные через всё дерево без prop drilling.
Кастомные хуки
Создаём свои хуки для переиспользования логики. useFetch, useLocalStorage, useDebounce, useToggle — разбираем популярные паттерны.
React Router
Добавляем роутинг в SPA: маршруты, параметры URL, вложенные страницы, защищённые маршруты и lazy loading.
Управление состоянием
Redux Toolkit и Zustand — разбираем оба варианта. Когда useState недостаточно и как выбрать между этими инструментами.
Практика: полноценное приложение
Собираем Todo App с нуля: TypeScript типы, Zustand store, роутинг, компонентная архитектура. Всё из модуля — в одном проекте.