React

Реактивные и составные интерфейсы

React - главная библиотека для создания пользовательских интерфейсов. Компоненты, JSX, состояние и хуки, затем работа с данными, производительность и архитектура: от твоего первого компонента до экспертных паттернов.

Основы

Новичок - база, шаг за шагом

• Почему React, твой первый компонент и JSXУзнай, что такое React, напиши свой самый первый компонент и освой базовые правила JSX.
• Props: передача данных в компонентНаучись делать свои компоненты переиспользуемыми, передавая им данные через props.
• Локальное состояние с useStateДай своим компонентам память с помощью useState, чтобы показывать значения, которые меняются при действиях пользователя.
• События и условный рендерингРеагируй на действия пользователя и показывай или скрывай элементы в зависимости от условий.
• Отрисовка списков и роль keysПреврати массив данных в список элементов на экране с помощью map и обозначь каждый элемент через keys.

Развитие

Средний уровень - создавай реальные проекты

• Контролируемые формыНаучись управлять каждым полем формы через состояние React, чтобы проверять и отправлять надёжные данные.
• useEffect: эффекты, зависимости, очисткаСинхронизируй свои компоненты с внешним миром через useEffect, освоив зависимости и очистку.
• Подъём состояния и обмен даннымиРазмещай каждое состояние в ближайшем общем предке, чтобы делиться данными между несколькими компонентами, не дублируя их.
• Композиция: children и разбиение на компонентыСоздавай переиспользуемые компоненты-контейнеры через проп children и разбивай свои экраны на понятные зоны ответственности.
• Вызов API: fetch, загрузка и ошибкиЗагружай удалённые данные через fetch внутри эффекта, аккуратно моделируя состояния загрузки и ошибки.

Продвинутый

Уверенный уровень - продвинутые паттерны и производительность

• useReducer для сложного состоянияСтруктурируй сложное состояние с помощью чистого редьюсера, который централизует переходы и исключает невозможные комбинации.
• Контекст: делись данными без prop drillingПередавай данные без prop drilling с помощью контекста, держа под контролем его перерисовки и ограничения.
• Свои хуки: выносим и переиспользуем логикуВыноси логику с состоянием в переиспользуемые, компонуемые и тестируемые хуки.
• Мемоизация: memo, useMemo, useCallbackРазберись, когда React.memo, useMemo и useCallback действительно ускоряют приложение, а когда только зря его усложняют.
• useRef и работа с DOMРаботай с DOM и храни значения экземпляра через useRef, не нарушая чистоту рендера.

Мастерство

Эксперт - архитектура, внутренности и крайние случаи

• Под капотом: согласование, батчинг, конкурентный рендерингРазберись, как Fiber согласует дерево, группирует обновления и делает работу рендеринга прерываемой.
• Suspense, lazy и разделение кодаОсвой механизм приостановки, ленивую загрузку компонентов и разделение бандла.
• Экспертные паттерны: составные компоненты, инверсия управленияПроектируй гибкие API компонентов с помощью составных компонентов, state reducer и верного выбора между render props и хуками.
• Современный React: Server Components, use, useTransition, useOptimisticИзучи серверные компоненты, чтение промисов через use и оптимистичные обновления React 19.
• Качество: Testing Library, StrictMode, ProfilerТестируй поведение, а не реализацию, используй двойные вызовы StrictMode и измеряй рендеры через Profiler.