Учебник React для начинающих

Программа курса

1. 1 Введение в React

   1. Зачем нужен React

      Чем декларативный подход React лучше ручного управления DOM: компоненты, реактивность и переиспользование вместо querySelector и innerHTML.

   2. Создание проекта на Vite

      Как создать React-проект командой npm create vite, разобраться в структуре папок, запустить дев-сервер и понять роль main.jsx, App.jsx и index.html.

   3. JSX: что это и зачем

      JSX — это синтаксис, который позволяет писать разметку прямо в JavaScript. Разбираем, во что он превращается и почему это не строка и не HTML.

   4. Правила JSX

      Один корневой элемент, className вместо class, закрытие всех тегов, фрагменты и camelCase для атрибутов — главные правила JSX, на которых спотыкаются новички.

2. 2 Компоненты и пропсы

   1. Функциональные компоненты

      Что такое функциональный компонент в React: обычная функция, возвращающая JSX. Имя с большой буквы, экспорт и использование как тега.

   2. Пропсы: передача данных

      Props — это способ передать данные из родительского компонента в дочерний. Передача атрибутами, чтение через параметр и деструктуризация.

   3. props.children и композиция

      Как через props.children передать содержимое между тегами компонента и собирать сложные интерфейсы из мелких компонентов — композиция вместо наследования.

   4. Условный рендеринг

      Как показывать разметку по условию: оператор &&, тернарный оператор и возврат разных JSX. Частая ошибка с нулём и оператором &&.

   5. Списки и ключи (key)

      Как рендерить массивы через map, зачем нужен проп key, почему индекс массива — плохой ключ и к каким багам приводит его отсутствие.

3. 3 Состояние и хук useState

   1. Что такое состояние

      Чем состояние (state) отличается от пропсов, почему обычная переменная не перерисовывает компонент и зачем React нужен особый механизм памяти.

   2. Хук useState

      Объявление состояния через useState, обновление через setter и перерисовка. Синтаксис деструктуризации массива и начальное значение.

   3. Иммутабельность состояния

      Почему нельзя мутировать массивы и объекты в состоянии напрямую: React сравнивает по ссылке. Как обновлять иммутабельно через spread и map.

   4. Обработка событий

      Как навешивать обработчики onClick, onChange и другие, передавать аргументы, читать объект события и избегать ошибки с немедленным вызовом функции.

   5. Формы и controlled inputs

      Что такое управляемый компонент (controlled input): значение поля живёт в состоянии. Связка value + onChange и работа с несколькими полями.

4. 4 Эффекты и жизненный цикл

   1. Хук useEffect и зависимости

      Что такое побочный эффект, как работает useEffect, зачем нужен массив зависимостей и чем отличаются пустой массив, его отсутствие и список значений.

   2. Очистка эффекта

      Зачем useEffect возвращает функцию очистки, как убирать таймеры и подписки, и почему без очистки возникают утечки памяти и двойные подписки.

   3. Загрузка данных в useEffect

      Как загружать данные с сервера через fetch внутри useEffect: состояния loading, error и data, и почему бесконечный цикл — главная ошибка новичка.

   4. Правила хуков и useRef

      Два правила хуков: вызывать только на верхнем уровне и только из компонентов. Плюс хук useRef для ссылок на DOM и хранения значений без перерисовки.

5. 5 Передача данных и переиспользование

   1. Подъём состояния (lifting state up)

      Как двум компонентам делить общее состояние: поднимаем его в общего родителя и передаём вниз значение и функцию обновления.

   2. Prop drilling и Context

      Что такое prop drilling и почему он неудобен. Как Context и хук useContext передают данные сквозь дерево без промежуточных пропсов.

   3. Кастомные хуки

      Как вынести повторяющуюся логику с состоянием в собственный хук use-функцию: правила именования, возврат значений и переиспользование между компонентами.

   4. useMemo и useCallback

      Как useMemo кеширует результат вычисления, а useCallback — саму функцию, зачем это нужно для оптимизации и почему не стоит оборачивать в них всё подряд.

6. 6 Практика и экосистема

   1. Форма с валидацией

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

   2. Мини-проект: список дел

      Собираем классический todo-список: добавление, удаление и отметка выполнения задач через иммутабельные обновления массива в состоянии.

   3. Роутинг с react-router

      Обзор клиентского роутинга в React: что такое SPA, как react-router сопоставляет URL компонентам через Routes, Route и Link без перезагрузки страницы.

   4. Стилизация и что учить дальше

      Обзор способов стилизации React-компонентов (CSS-файлы, CSS-модули, инлайн) и дорожная карта дальнейшего обучения: state-менеджеры, Next.js, TypeScript.

7. 7 Производительность React

   1. Как работает рендеринг и реконсиляция

      Render против commit, почему компонент перерисовывается, реконсиляция по типу и key, и почему лишний рендер обычно дёшев.

   2. Лишние ре-рендеры и как их найти (Profiler)

      Сначала измерь, потом оптимизируй: React DevTools Profiler, flame graph, причины рендера и ручная диагностика через console.log.

   3. React.memo: мемоизация компонента

      Как React.memo пропускает рендер при равных пропсах, почему новые ссылки его ломают и когда memo вреден.

   4. useMemo и useCallback: равенство ссылок

      Равенство ссылок в JS, useMemo для значений и useCallback для функций, когда мемоизация нужна, а когда только вредит.

   5. Стабильные ключи и списки

      Зачем нужен key, почему индекс массива — плохой ключ, как сдвиг индексов ломает состояние и какие ключи правильные.

   6. Разделение кода, ленивая загрузка и виртуализация

      React.lazy и Suspense для code splitting по маршрутам, идея виртуализации длинных списков и когда эти техники оправданы.

8. 8 Продвинутые паттерны

   1. Кастомные хуки вглубь

      Что кастомный хук делает на самом деле, как он переиспользует логику (а не данные) и как хуки компонуются друг из друга.

   2. useReducer: reducer как чистая функция

      Когда useReducer удобнее useState, reducer как чистая функция (state, action) => newState, иммутабельность и тестируемость.

   3. Context правильно: без лишних ре-рендеров

      Контекст против prop drilling, стабилизация value через useMemo, разделение контекстов и отдельный стабильный dispatch.

   4. Compound components

      Составные компоненты: общий контекст, декларативная сборка как у select/option и статические свойства вроде Tabs.Tab.

   5. Render props и HOC (обзор)

      Классические паттерны переиспользования логики: render props и HOC, их минусы и почему сегодня предпочитают кастомные хуки.

   6. Error boundaries

      Как перехватить ошибку рендера и показать запасной UI: getDerivedStateFromError, componentDidCatch и что boundary не ловит.

   7. Portals и refs (forwardRef, useImperativeHandle)

      createPortal для модалок и тултипов, forwardRef для проброса ref и useImperativeHandle для узкого императивного API.