Оглавление
React
Библиотека для интерфейсов: компоненты, JSX, состояние, эффекты, маршруты и работа с сервером.
1.Начало работы
- Что такое ReactЗачем нужен React, чем он отличается от работы с DOM вручную и что будет в курсе.
- Создание проектаНовый проект на Vite, запуск сервера разработки и обзор файлов и папок.
- JSXРазметка внутри JavaScript: выражения в фигурных скобках, атрибуты и отличия от HTML.
- КомпонентыКак вынести часть интерфейса в отдельный компонент, положить его в свой файл и вывести на странице.
- ПропсыКак передать данные в компонент через пропсы, задать значения по умолчанию и передать числа и объекты.
- Children и композицияПроп children: компоненты-обёртки, в которые можно вложить любую разметку.
- Списки и ключиКак вывести массив данных методом map и зачем каждому элементу списка нужен key.
- Условный рендерингКак показывать разную разметку в зависимости от данных: if, тернарный оператор и &&.
2.Состояние и события
- СобытияКак реагировать на клики, ввод и другие действия пользователя через onClick, onChange и объект события.
- Состояние: useStateХук useState: как компонент запоминает данные между отрисовками и обновляет страницу при их изменении.
- Объекты и массивы в состоянииКак добавлять, удалять и изменять элементы массива и поля объекта в состоянии, не меняя их на месте.
- Вычисляемые значенияЧто хранить в состоянии, а что вычислять при отрисовке: счётчики, фильтры и итоги из уже имеющихся данных.
- Подъём состоянияКак дочерний компонент меняет состояние родителя: функции в пропсах и общее состояние для нескольких компонентов.
- Формы и управляемые поляУправляемые поля ввода, отправка формы без перезагрузки страницы и форма добавления задачи.
- useReducerХук useReducer: вся логика изменения состояния в одной функции-редьюсере и действия вместо прямых вызовов сеттера.
3.Эффекты и хуки
- Эффекты: useEffectЧто такое побочный эффект, как его запустить после отрисовки и как массив зависимостей управляет повторными запусками.
- Очистка эффектаФункция очистки в useEffect: как остановить таймер и снять обработчик события, когда компонент исчезает.
- Загрузка данных из APIЗапрос к API в эффекте, состояния загрузки и ошибки и защита от устаревших ответов на примере блога.
- useRefХук useRef: доступ к DOM-элементу, например для фокуса на поле, и хранение значения без перерисовки.
- КонтекстcreateContext и useContext: как передать данные глубоко вложенным компонентам без цепочки пропсов.
- Собственные хукиКак вынести повторяющуюся логику компонентов в свой хук: useFetch для блога и правила хуков.
- useMemo и useCallbackКак запомнить результат вычисления или функцию между отрисовками и когда это действительно нужно.
4.Маршрутизация
- React Router: установка и маршрутыНесколько страниц в одном приложении: установка React Router, маршруты, ссылки Link и NavLink и страница 404.
- Параметры маршрута и навигацияСтраница статьи по адресу /posts/:id, хук useParams, ссылки на неё и переход из кода через useNavigate.
- Вложенные маршруты и макетыОбщий макет страниц с Outlet, индексные маршруты и вложенные адреса вроде /posts/:id/comments.
5.Настоящее приложение
- СтилиКак оформлять компоненты: обычные CSS-файлы, className, CSS-модули, атрибут style и несколько слов о Tailwind.
- Формы с действиямиВозможности React 19: функция в атрибуте action формы, хук useActionState и useFormStatus для кнопки отправки.
- Библиотеки состоянияКогда встроенных useState и контекста мало: обзор библиотек состояния и короткий пример на Zustand.
- Библиотеки загрузки данныхЗачем нужны библиотеки для запросов к серверу и короткий пример на TanStack Query: useQuery, кэш и ключи запросов.
- Производительность и memoКогда компоненты перерисовываются, как найти медленное место в Profiler и как memo пропускает лишние перерисовки.
- Границы ошибокКак не дать ошибке в одном компоненте сломать всё приложение: компонент ErrorBoundary и запасной интерфейс.
- ТестированиеТесты компонентов с Vitest и Testing Library: установка, настройка Vite, проверка текста и действий пользователя.
- Сборка и публикацияКоманда npm run build, папка dist, переменные окружения Vite и размещение приложения на статическом хостинге.