Модуль 3.4: React
Введение в React
Разбираемся, зачем нужен React, как он работает и почему стал стандартом индустрии. Компоненты, Virtual DOM, декларативный подход — объясняем простыми словами.
Создание проекта
Создаём React-проект с Vite за 5 минут. Разбираем структуру файлов, настраиваем алиасы путей и скрипты для разработки.
JSX
JSX — расширение синтаксиса JavaScript для описания UI. Разбираем синтаксис, атрибуты, стили, условный рендеринг и списки.
Компоненты
Компоненты — строительные блоки React. Props, children, композиция, структура файлов и паттерн «слот».
useState
useState — хук для состояния компонента. Иммутабельность, функциональные обновления, работа с объектами и массивами.
useEffect
useEffect — хук для побочных эффектов: загрузка данных, подписки, таймеры. Массив зависимостей, cleanup, AbortController.
Обработка событий
Обработка событий в React: синтаксис, типизация, контролируемые формы, preventDefault и stopPropagation.
Условный рендеринг
Условный рендеринг в React: тернарный оператор, &&, ранний return, маппинг статусов, паттерн Loading/Error/Data.
Списки и ключи
Рендеринг списков через map(), ключи (key) и почему индекс — плохой ключ. Fragment, фильтрация, сортировка.
useRef и useContext
useRef для DOM и хранения значений без ре-рендера. useContext для устранения prop drilling. Паттерн Provider + кастомный хук.
Кастомные хуки
Кастомные хуки — переиспользование логики. useFetch, useLocalStorage, useDebounce, useToggle, useWindowSize и композиция хуков.
React Router
Роутинг в React: BrowserRouter, Routes, Link/NavLink, параметры URL, вложенные маршруты, защищённые роуты и lazy loading.
Управление состоянием
Zustand и Redux Toolkit: когда что выбирать. Создание store, persist, createAsyncThunk и паттерн 2026.
Практика: полноценное приложение
Финальный проект модуля: Todo-приложение с TypeScript, Zustand, React Router и lazy loading. Пошаговая сборка.