open atlas

react

React с нуля до senior

Как React рендерит на самом деле — reconciliation, батчинг состояния, эффекты, мемоизация — глубже туториалов.

14 юнитов·51 уроков·~15 ч

Начать трек →
01

Рендер, коммит, reconciliation

React — это чистая функция фазы рендера плюс фаза коммита; reconciliation по типу и key решает, что переживёт обновление.
01 Render и commit: почему React вызывает компонент чаще, чем рисует 17 мин 02 Reconciliation и keys: где на самом деле живёт ваше состояние 18 мин 03 setState — это запрос: снимки, очереди обновлений и автоматический батчинг 19 мин
02

Эффекты, мемоизация, контекст

Эффекты синхронизируют с внешними системами, мемоизация меняет память на время рендера, контекст перерисовывает поддеревья.
01 useEffect — это синхронизация, а не lifecycle 18 мин 02 Мемоизация: ссылочное равенство — это контракт 18 мин 03 Контекст, идентичность value и шторм ререндеров 19 мин
03

Загрузка данных: эффекты, Suspense, query-библиотеки

Загрузка данных — проблема кеша, а не запроса: UX решают гонки, водопады и инвалидация, а не сам fetch.
01 Запросы в эффектах: гонки, водопады и зачем знать базовый вариант 17 мин 02 Suspense для данных: контракт «брось promise», use() и границы как UX-дизайн 19 мин 03 Query-библиотеки: идентичность queryKey, два таймера и что TanStack Query реально экономит 18 мин 04 Паттерны инвалидации кеша: invalidate против write-through, оптимистичный rollback и live-синхронизация 19 мин
04

Формы, экшены, optimistic UI

Форма — конечный автомат: кто владеет значением, когда валидировать и что UI обещает до подтверждения сервера.
01 Controlled и uncontrolled инпуты: кто владеет значением и сколько это стоит 17 мин 02 Состояние формы и валидация: values, errors, touched — и когда запускать проверку 18 мин 03 Form actions и useActionState: мутации как первоклассный примитив React 19 мин 04 Оптимистичный UI и useOptimistic: честно врать пользователю 19 мин
05

Перформанс: сначала измерь, потом режь

Профилируй до оптимизации: медленный React — это объём рендера; виртуализация, transitions и сплиттинг сильнее микро-мемоизации.
01 Profiler и измерения: найдите коммит на 600 мс прежде, чем трогать React.memo 17 мин 02 Цена рендера и виртуализация: таблица на 10 000 строк, рендерящая 30 18 мин 03 Transitions и useDeferredValue: медленный рендер делаем прерываемым, а не быстрым 19 мин 04 Code splitting через React.lazy: грузим экран, а не приложение 19 мин
06

Архитектура состояния: от колокации до внешних сторов

Держи состояние в самом нижнем компоненте, которому оно нужно; контекст, редьюсеры и внешние сторы — когда колокация ломается.
01 Подъём состояния и колокация: состояние живёт у ближайшего общего владельца 17 мин 02 Редьюсеры и контекст: из разрозненных setState — в тестируемые переходы 18 мин 03 Внешние сторы: useSyncExternalStore, подписки-селекторы и tearing 19 мин 04 Серверное против клиентского состояния: кто владеет какой истиной 19 мин
07

Тестирование React-приложений

Тестируй то, что видит пользователь, а не реализацию: RTL-запросы по роли, user-event для живого ввода, msw на сетевом шве.
01 RTL и user-event: тестируйте контракт, который видит пользователь 18 мин 02 Асинхронные тесты и MSW: мокайте сеть, а не fetch 19 мин 03 Тестирование хуков и контекста: renderHook, фейковые таймеры, устаревшие снимки 18 мин 04 Тестовые сьюты, которые масштабируются: контракты, таксономия флейков, бюджеты 19 мин
08

Конкурентный React

Конкурентность — это прерываемость: границы Suspense кроят загрузку, deferred-значения сбрасывают срочность, streaming SSR шлёт HTML волнами.
01 Границы Suspense: проектирование того, что исчезает вместе 17 мин 02 useDeferredValue и transitions: приоритет — это второй рендер 18 мин 03 Streaming SSR и селективная гидратация: HTML волнами 18 мин 04 React Compiler честно: автоматический memo с молчаливыми отказами 17 мин
09

Обработка ошибок и восстановление

Error boundary ловит только краш рендера: хендлеры, эффекты и промисы мимо — восстановление это reset-ключи, ретраи, частичный UI.
01 Error boundary: страховка только из классов и её четыре слепые зоны 17 мин 02 Восстановление и деградация: сброс состояния, ретраи с backoff, честные отказы 16 мин 03 Ошибки вне рендера: глобальная сеть и пайплайн отчётов React 19 18 мин
10

Доступность в React

Сначала семантика, ARIA как контракт: фокус — состояние, которым управляешь ты, композитные виджеты следуют WAI-ARIA, a11y тестируется в CI.
01 Семантика и роли: дерево доступности не видит ваши div 18 мин 02 Управление фокусом: фокус — состояние приложения, и владеете им вы 18 мин 03 Композитные ARIA-виджеты: паттерны APG — клавиатурные контракты 19 мин 04 Тестирование доступности: слои, ловящие то, что не видит axe 17 мин
11

React Server Components

RSC делит дерево по среде: серверные компоненты рендерятся в сериализуемый payload, клиентские острова гидрируются — пропсы идут по проводу.
01 Модель RSC: две среды, одно дерево 18 мин 02 Граница сериализации: use client режет граф модулей 18 мин 03 RSC вне Next.js: фреймворк — это бандлер 17 мин
12

Дизайн-системы в React

Дизайн-система — это API: композиция вместо конфигурации, headless-логика + стилевые обёртки, полиморфный asChild, токены как контракт.
01 Паттерны композиции: compound-компоненты вместо булевых пропсов 18 мин 02 Headless-компоненты: купите стейт-машину, владейте скином 17 мин 03 Полиморфные компоненты: проп as против asChild и Slot 16 мин 04 Дизайн-токены и темизация: контракт между дизайном и кодом 18 мин
13

Анимации и интерактивность

Анимируй transform и opacity на компоузере; FLIP имитирует layout-анимацию, View Transitions снимают снапшот DOM, жестам нужны бюджеты.
01 Компоновщик и бюджет кадра: какие свойства бесплатны 18 мин 02 FLIP: анимация layout без layout на каждом кадре 18 мин 03 View Transitions и жесты: снапшоты, пружины и перехват значений на лету 19 мин
14

React в проде

React в проде — это эксплуатация: миграции версий без переписывания, RUM по релизам, профилирование живых пользователей, разборы инцидентов. Уверенно здесь? Следующий шаг — трек react-patterns: паттерны композиции, состояния и границ, которые держат большие кодовые базы React изменяемыми.
01 Миграции версий React: проект — это аудит зависимостей 18 мин 02 RUM и полевое профилирование: лаборатория врёт, поле решает 18 мин 03 Перф-регрессии: медленное сползание, которое никто не выкатывал нарочно 17 мин 04 Постмортемы инцидентов: три продакшен-отказа React под микроскопом 19 мин

Проекты по этому треку

Guided-проекты, которые закрепляют изученное здесь.

◆ Проекты

Совместные курсоры

Показать живой курсор и выделение каждого подключённого пользователя в общем документе, без конфликтов, через WebSocket.
◆ Проекты

Палитра команд

Палитра команд ⌘K с нечётким ранжированием, асинхронными источниками действий и полным клавиатурным управлением (стрелки, Enter, Escape, области видимости) — интерактивный слой, который нужен каждому профессиональному инструменту.
◆ Проекты

React-фича под нагрузкой

Выкати одну настоящую production-фичу на React — живой совместный дашборд активности — а потом эксплуатируй её: оптимистичные правки, стриминговые обновления, бюджет на кадр, полную доступность и разбор инцидента, когда render-шторм замораживает вкладку.
◆ Проекты

Мини-сигналы

Собери реактивную библиотеку сигналов примерно в 100 строк (signal/computed/effect) с автоматическим отслеживанием зависимостей и безглючными батч-обновлениями — та же модель, что лежит в основе Solid, Preact Signals и Vue 3.
◆ Проекты

Виртуальная таблица данных

Отрисуй и плавно прокручивай 100 тыс. строк на 60fps с windowing-виртуализацией, залипающими заголовками и полной клавиатурной навигацией — без библиотек, только математика.
Следующий трек

Next.js с нуля до senior

Стратегии рендеринга, App Router, серверные компоненты и слои кеширования — Next.js в продакшене.