Индивидуальный план развития: React

• Создаёт React-проект на Vite с TypeScript и запускает его
• Объясняет, почему React перерисовывает интерфейс при изменении состояния

Практика. Создать проект на Vite, сделать в нём счётчик и список с добавлением элементов.

• Пишет JSX с выражениями, условным рендерингом и фрагментами
• Знает ловушку && с нулём и экранирование вставленных строк

Практика. Сверстать карточку заказа в JSX со всеми состояниями — оплачен, не оплачен, с комментарием и без.

• Обрабатывает события и передаёт колбэки от родителя к дочерним компонентам
• Объясняет, почему обработчик видит состояние на момент рендера

Практика. Сделать компонент поиска, который сообщает родителю запрос по отправке формы.

• Разделяет props и state, поднимает общее состояние в ближайшего родителя
• Обновляет состояние неизменяемо и через функцию, если оно зависит от предыдущего
• Использует стабильные ключи в списках

Практика. Сделать список покупок с добавлением, удалением, отметкой и фильтром, разбитый на 4 компонента.

• Вычисляет производные значения при рендере вместо дублирующего состояния
• Объясняет согласование (reconciliation) и роль ключей

Практика. Найти в существующем коде дублирующее и производное состояние и упростить компоненты.

• Использует children и слоты для обёрток — модальные окна, карточки, раскладки

Практика. Сделать компонент Card со слотами для заголовка, действий и содержимого.

• Строит составные компоненты с общим контекстом
• Заменяет render props и HOC пользовательскими хуками

Практика. Сделать составной компонент Tabs (Tabs.List, Tabs.Tab, Tabs.Panel) с доступностью.

• Использует useState и useEffect с правильным массивом зависимостей и очисткой
• Соблюдает правила хуков и объясняет, почему их нельзя вызывать в условиях

Практика. Сделать компонент с таймером и подпиской на размер окна с корректной очисткой.

• Отличает задачи для эффекта от вычислений при рендере и убирает лишние эффекты
• Использует useReducer для сложного состояния

Практика. Переписать компонент с пятью useEffect, убрав эффекты, которые на самом деле вычисления или обработчики событий.

• Использует useRef для доступа к DOM и фокуса

Практика. Сделать поле, которое получает фокус при открытии модального окна.

• Передаёт ref в дочерние компоненты и открывает методы через useImperativeHandle
• Интегрирует сторонние библиотеки (карты, графики) через ref и эффекты

Практика. Обернуть стороннюю библиотеку графиков в React-компонент с корректным созданием и уничтожением.

• Выносит повторяющуюся логику в пользовательские хуки со стабильным возвращаемым значением
• Тестирует хуки через renderHook

Практика. Написать хуки useDebounce, useMediaQuery и useLocalStorage с тестами.

• Объясняет, когда компонент перерисовывается, и находит лишние рендеры в Profiler
• Применяет memo, useMemo и useCallback там, где это измеримо помогает
• Использует useTransition и виртуализацию для тяжёлых списков

Практика. Ускорить список на 5000 элементов с фильтром, измерив время рендера до и после.

• Объясняет архитектуру Fiber и конкурентный рендеринг на уровне идей

Практика. Подготовить для команды разбор, как работает React Compiler и какая ручная мемоизация становится не нужна.

• Разделяет код по маршрутам через lazy и Suspense
• Строит постепенное появление страницы вложенными границами Suspense

Практика. Перевести маршруты приложения на lazy с заглушками и измерить уменьшение начального бандла.

• Ставит границы ошибок на уровне страниц и виджетов с запасным интерфейсом и отправкой в мониторинг
• Объясняет, какие ошибки границы не ловят

Практика. Добавить границы ошибок в приложение и проверить, что ошибка в одном виджете не роняет страницу.

• Рендерит модальные окна и подсказки через порталы с управлением фокусом
• Объясняет всплытие событий из портала по дереву React

Практика. Сделать доступное модальное окно на портале с ловушкой фокуса и закрытием по Escape.

• Разделяет состояние на локальное, глобальное, серверное, в URL и в формах и выбирает инструмент для каждого

Практика. Провести аудит состояния проекта и перенести фильтры в URL, данные сервера — в кэш запросов.

• Обосновывает подход к состоянию для большого приложения и правила для команды

Практика. Описать правила работы с состоянием для команды с примерами и антипримерами.

• Передаёт тему или пользователя через Context

Практика. Сделать переключатель темы на Context.

• Избегает лишних перерисовок — мемоизация значения, разделение контекстов
• Объясняет, почему Context — не менеджер состояния

Практика. Найти и устранить лишние перерисовки из-за контекста с помощью React DevTools Profiler.

• Загружает и изменяет данные через useQuery и useMutation с инвалидацией
• Делает оптимистичные обновления с откатом при ошибке

Практика. Перевести список заказов на TanStack Query с пагинацией, отменой заказа и оптимистичным обновлением.

• Описывает состояние слайсами, читает его селекторами и отлаживает в Redux DevTools
• Объясняет action, reducer, middleware и почему редьюсер должен быть чистым

Практика. Перенести корзину приложения на Redux Toolkit с селекторами и тестами редьюсеров.

• Создаёт хранилище Zustand и подписывается на его часть селектором

Практика. Сделать корзину на Zustand с сохранением в localStorage.

• Делает контролируемые и неконтролируемые формы и объясняет разницу

Практика. Сделать форму обратной связи с валидацией на контролируемых полях.

• Строит формы на React Hook Form со схемой Zod и доступными ошибками

Практика. Сделать форму оформления заказа на React Hook Form и Zod с зависимыми полями.

• Настраивает маршруты, параметры и вложенные раскладки в React Router

Практика. Сделать приложение из 4 страниц с вложенной раскладкой и страницей 404.

• Загружает данные до показа страницы, защищает маршруты и хранит фильтры в URL

Практика. Добавить загрузчики данных, защищённые маршруты и фильтры каталога в параметрах адреса.

• Стилизует компоненты CSS Modules или Tailwind и использует clsx для условных классов

Практика. Перевести стили React-проекта на CSS Modules или Tailwind.

• Применяет один подход к организации стилей последовательно — БЭМ, CSS Modules или Tailwind

Практика. Перевести стили учебного проекта на CSS Modules или Tailwind без глобальных конфликтов.

• Обосновывает выбор подхода к стилям для проекта с учётом SSR и команды
• Выносит токены дизайна в переменные и поддерживает темы

Практика. Добавить тёмную тему на токенах в CSS-переменных без изменения компонентов.

• Тестирует компоненты через Testing Library и user-event

Практика. Покрыть тестами 3 компонента приложения.

• Тестирует компоненты с провайдерами и сетью через MSW, хуки — через renderHook

Практика. Сделать общую функцию renderWithProviders и покрыть тестами страницу с загрузкой данных.

• Пишет юнит-тесты на Vitest для чистых функций
• Пишет тест компонента через Testing Library, находя элементы по роли и подписи

Практика. Покрыть тестами утилиты и 3 компонента учебного проекта.

• Подменяет сеть через MSW и тестирует асинхронное поведение
• Покрывает тестами ключевые сценарии компонентов, а не детали реализации

Практика. Написать тесты формы оформления заказа с подменой API через MSW — успех, ошибка сервера, валидация.

• Пишет сквозные тесты ключевых сценариев на Playwright без фиксированных задержек
• Запускает их в CI с трассировкой упавших тестов

Практика. Покрыть Playwright 3 ключевых сценария (вход, поиск, оформление заказа) и запустить в CI в двух браузерах.

• Определяет, какие сценарии покрывать сквозными тестами, и борется с нестабильными тестами

Практика. Провести аудит набора e2e-тестов — убрать дублирующие, починить нестабильные, сократить время прогона.

• Типизирует props, состояние и события в React-компонентах

Практика. Перевести React-проект на TypeScript в режиме strict.

• Пишет дженерик-компоненты и типизирует контекст с проверкой провайдера

Практика. Сделать типизированный дженерик-компонент таблицы с колонками и сортировкой.

• Строит приложение на App Router — маршруты по файлам, раскладки, загрузка данных на сервере
• Использует Server Actions для форм

Практика. Сделать на Next.js блог или каталог с серверными компонентами, формой на Server Actions и метаданными для SEO.

• Проектирует кэширование и стратегии рендеринга страниц Next.js

Практика. Разобрать и описать поведение кэша Next.js в своём приложении и настроить инвалидацию по событию.

• Разделяет серверные и клиентские компоненты и ставит границу "use client" осознанно
• Объясняет отличие серверных компонентов от SSR

Практика. Перевести страницу с загрузкой данных в useEffect на серверный компонент и сравнить объём JS на клиенте.

• Объясняет CSR, SSR, SSG, ISR и гидратацию и выбирает стратегию для страницы
• Исправляет ошибки гидратации

Практика. Сделать на Next.js сайт, где лендинг статический, каталог пересобирается по времени, а личный кабинет рендерится на клиенте.

• Проектирует рендеринг продукта — какие страницы как рендерятся, кэширование и нагрузка на сервер

Практика. Описать стратегию рендеринга и кэширования для интернет-магазина с оценкой нагрузки на сервер.

• Создаёт мобильное приложение на Expo с навигацией и нативными компонентами
• Объясняет отличия от веба — стили, раскладка, жизненный цикл

Практика. Сделать на Expo мобильный клиент своего веб-приложения из трёх экранов.