React roadmap: что изучать для работы

React roadmap под найм — это не обзор фреймворков года и не гонка за каждым новым хуком. В CIS junior frontend в 2026-м чаще всего проверяют так: сверстать кабинет по макету, собрать форму без поломки состояния, сходить в API, не стыдиться Git. Next.js, SSR, «свой дизайн-системный кит» — уже ветка, не обязательный старт.

Ниже — карта до роли, которую можно закрыть тестовым. Что считать базой до React, какой учебный кабинет собирать 90 дней, что не писать в skills и как понять, что вы готовы к вакансиям React-разработчика, а не к ещё одному курсу.

Коротко:

• HTML, CSS, JavaScript без дыр важнее «подключить Redux на третий день».
• Один способ сборки: Vite достаточно. Не коллекционируйте CRA, Webpack «с нуля» и три бандлера.
• Проект — кабинет: список, фильтр, форма, ошибки сервера, пустые состояния. Лендинг с анимацией не закрывает junior-вакансию.
• TypeScript подключайте, когда JS-кабинет уже живой, или сразу, если все целевые вакансии на TS — см. TypeScript roadmap.
• Готовность — демо плюс README, а не «знаю React» списком хуков.

Роль, которую вы покупаете этой картой

Junior frontend с React в русскоязычных командах — кабинеты, админки, формы, таблицы, иногда лендинги внутри продукта. Не «инженер рендерера». Если хотите сразу fullstack, это другая нагрузка: как стать frontend-разработчиком описывает вход, здесь — порядок React под работу.

Прочитайте пять объявлений. Если везде TypeScript — не откладывайте типы «на потом навсегда». Если везде Next.js — ваш 90-дневный проект должен хотя бы касаться маршрутов приложения, не только SPA из туториала. Если Next.js в одной вакансии из десяти — не меняйте всю карту. Отдельная ветка: Next.js roadmap.

До React: то, на чём сыплются тестовые

Без уверенного DOM и CSS React превращается в копирование JSX. Минимум:

• семантика, формы, доступность на уровне лейбла и фокуса — не «ARIA-эксперт», но и не div-кнопка без причины;
• Flex/Grid, адаптив, что ломается на узком экране;
• JavaScript: замыкания, массивы, промисы, fetch, ошибки сети;
• Git и осмысленные коммиты.

Не сидите квартал на «чистом JS, чтобы уважать фундамент», если уже можете собрать список. Фундамент доучивается внутри кабинета. Обратное — вечный курс без репозитория — хуже.

Сеть: fetch, статус, JSON.parse, abort/игнор устаревшего ответа. Не обязательно знать все флаги Request. Обязательно — показать ошибку пользователю текстом, который вы сами написали, не молчаливый catch. CSS: если макет из Figma, научитесь снимать отступы и типографику без «примерно как на скрине». Junior-тестовое часто валят вёрсткой формы, не выбором стейт-менеджера.

Инструменты: ESLint с разумным пресетом, Prettier по желанию, не десять плагинов. Git: ветка на фичу фильтра, коммиты по смыслу, не один «final» на весь кабинет. Это видно в репозитории за две минуты.

Сам React: порядок, который стыкуется с вакансиями

1. Компонент как функция, пропсы, дети, композиция. Не классовые компоненты как основа 2026 года, если вакансия не легаси.
2. Состояние: useState, подъём состояния, когда стейт в родителе. Формы: контролируемые поля, ошибки валидации.
3. Эффекты: загрузка списка, отмена/игнор устаревшего ответа, зависимости. Здесь сыплются новички.
4. Маршруты: react-router или маршруты фреймворка — один способ.
5. Список и ключи, мемоизация только когда измерили проблему, не «обернуть всё в memo».

Глобальное состояние: для кабинета часто хватает контекста или лёгкого хранилища. Redux с курса при одном списке заказов выглядит как копипаст. Если в вакансиях Redux/RTK повторяется — соберите один кусок на нём и напишите в README зачем.

CSS: модули, обычный CSS, один UI-kit. Не Tailwind + CSS-in-JS + modules сразу. Тесты: хотя бы пара на форму (валидация, ошибка API) — Testing Library. Не покрытие 100% ради галочки.

Что не учить первыми 90 днями

• обзоры Vue/Svelte/Solid «для широты»;
• свой бандлер с нуля;
• микрофронтенды;
• GraphQL, если в вакансиях REST;
• три stale-while-revalidate библиотеки одновременно.

Английский нужен на чтение документации. Созвон на английском — только по объявлению.

Пример 1. 90-дневный кабинет

Кабинет заказов: список, фильтр по статусу, карточка, форма создания, состояния загрузки/пусто/ошибка. React, TypeScript по возможности, mock API или простой backend. Демо на любом статическом хостинге.

1. Дни 1–15. Список и вёрстка без библиотек-монстров. Пустое состояние.
2. Дни 16–40. Фильтры, форма, клиентская валидация, сообщение серверной ошибки.
3. Дни 41–65. Маршрут на карточку, сохранение черновика фильтра в URL, доступность формы.
4. Дни 66–90. README: стек, запуск, что не сделано (нет авторизации / нет пагинации на сервере). Два теста на форму. Резюме: резюме frontend.

Откликаюсь на junior frontend (React). Собрал кабинет заказов: список, фильтры, форма, обработка ошибок API. Стек: React, TypeScript, CSS-модули. Демо и репозиторий: [ссылки]. Коммерческого стажа нет. На созвоне разберу форму и как не терял состояние фильтра. Готов к тестовому 4–8 часов.

Так выглядит отклик, который открывают. Навыковый список без кабинета — нет. Как писать skills — навыки frontend. Перед рассылкой прогоните файл через проверку резюме: стена из хуков и пустой GitHub — типичный рассинхрон.

Как вести 90 дней без выгорания: две-три вечера в неделю на кабинет лучше, чем воскресный марафон раз в месяц. Каждый кусок должен открываться в браузере. Не копите «потом соберу». Если застряли на состоянии — нарисуйте на бумаге, где лежит фильтр и кто его меняет. Это та же схема, что на созвоне.

Макет: возьмите простой кабинет из открытых UI-китов или набросайте сами серым. Не ждите идеальный Figma от выдуманного заказчика. Важно повторяемое поведение: фильтр, пусто, ошибка, успех. Цвета вторичны. Если целитесь в сильную вёрстку — один экран доведите до пикселей, остальные оставьте честно «учебная сетка» в README.

Пример 2. Roadmap-ловушка и рабочий план

Было. Неделя хуков наизусть. Неделя Redux. Неделя Next. Неделя «анимации». Репозиторий: туториал с гифкой.

Стало. Недели 1–2: JS/CSS внутри макета кабинета. Недели 3–8: React и данные. Недели 9–10: TS или тесты — что чаще в вакансиях. Недели 11–12: демо, резюме, отклики.

Второй план не модный. Он даёт, что посмотреть на созвоне. Вопросы к интервью — вопросы на собеседовании frontend.

Критерии готовности

Демо открывается без «сейчас подниму». Форма показывает ошибку, а не молчит. Вы объясняете, зачем ключ в списке и что будет, если запрос вернулся поздно. В skills нет Vue, если в GitHub его нет. Файл согласован с заголовком «Frontend, React».

Прогоните резюме через cv-review. Письмо — короткий факт и ссылка, не «с детства люблю интерфейсы». Черновик: генератор письма.

Тестовое frontend часто и есть маленький кабинет. Тренируйтесь на своём проекте в том же жанре, не на новой технологии в ночь перед дедлайном. Про жанр тестовых — тестовое задание на работу.

Состояние, запросы и ошибки — то, что ломает тестовое

Большая часть junior-тестовых на React — не «напишите свой Virtual DOM». Это список с фильтром и форма с ошибкой сервера. Типичные дыры:

• фильтр в стейте, а URL пустой — после обновления страницы всё сбросилось, рекрутер не понял, что вы умеете;
• два быстрых запроса, на экране результат старого;
• ошибка API показывается как пустой список, без текста;
• кнопка Submit не дизейблится на время запроса, двойной POST;
• ключ в списке — индекс, при фильтре строки «прыгают».

Закройте это в учебном кабинете раньше, чем подключите новый стейт-менеджер. На созвоне вас попросят рассказать про ключи, про эффекты и про контролируемую форму. Ответ «это в документации» слабее, чем «в карточке заказа я сделал так, потому что иначе терялся статус фильтра».

Доступность не как отдельный курс: лейбл связан с полем, фокус виден, кнопка не div. Для CIS junior этого часто достаточно, чтобы не провалить короткий аудит тестового. Не обещайте в skills «a11y expert».

Как искать работу с кабинетом, а не с лендингом

В резюме заголовок Frontend / React. Пули: список, фильтр, форма, обработка ошибок, демо-ссылка. Не «адаптивная вёрстка лендингов и знание Figma» как главная строка, если цель — кабинет. Макеты в портфолио — плюс, не замена. Файл: как составить резюме, без стажа — резюме без опыта.

Письмо указывает на демо и на одну задачу вакансии: «у вас формы кабинета — у меня форма заказа с серверной ошибкой». Шаблон без опыта: сопроводительное без опыта. Откликайтесь на объявления, где React в must-have, не на «HTML/CSS стажёр» и не на senior с Next и графовым стейтом, если этого нет в репозитории.

Фильтровать живые роли удобно в каталоге React-вакансий и во входных junior-ролях. Если тишина на десяток писем — сначала проверьте, открывается ли демо с телефона, а не увеличивайте список хуков в skills. Почему так бывает — в почему не отвечают на отклики.

Частые вопросы

Что сделать сейчас

Выберите макет кабинета, не «интернет-магазин на миллион строк». Соберите список-фильтр-форму за первые две недели в черновом виде. Доведите демо и честный README. Затем ищите совпадение стека в каталоге React-вакансий, а не «frontend вообще».

Roadmap без открывающейся ссылки — конспект хуков. Работа начинается, когда рекрутер может кликнуть и увидеть состояние ошибки, а не идеальный скрин. Если демо не открывается с телефона, почините вёрстку и мета-теги до массовой рассылки откликов на вакансии.