← назад к программе

Вы верстаете и пишете на React: компоненты рисуются, запросы уходят, продукт работает. А дальше начинаются вопросы, на которые нет ответа в документации библиотеки: почему страница дёргается, где держать состояние, как не уронить всё одной ошибкой рендера, почему сборка весит три мегабайта и что делать, когда просят «ещё и мобильное приложение».

Проблема почти никогда не в способностях. Знания собирались по частям: туториал по хукам, статья про flexbox, чей-то конфиг Vite. Эта программа складывает их в один маршрут: язык, браузер и CSS, React и данные, качество и выпуск, мобильное приложение из того же кода.

Земля под профессией поехала: написание кода перестало быть узким местом, узким стало понять, что именно нужно сделать, и убедиться, что сделано верно. Почему так и куда ведёт дорога — в общей статье «Зачем этот курс» и в «Кто такой продукт-инженер»; здесь дальше только про программу «Frontend · React + TS».

Что внутри программы

язык 2 фазы браузер и стили 2 фазы React 3 фазы качество 1 фаза мобильное 1 фаза процесс 1 фаза

Блоки идут по порядку, внутри блока фазы тоже упорядочены; следующая опирается на предыдущие.

  • язык — Основы языка: JavaScript и TypeScript, Глубокий JavaScript.
  • браузер и стили — JavaScript и браузер, Глубокий CSS.
  • React — Фундамент, Данные и состояние, Навигация и вид.
  • качество — Качество и производительность.
  • мобильное — Мобильное приложение из веба.
  • процесс — Методологии и процесс разработки.

Если нужен только кусок пути, ориентируйтесь по блокам: откройте список фаз и посмотрите, где вам неуютно, обычно это видно с первого взгляда.

Что вы будете уметь в конце

  • Понимать, что делает браузер. Цикл событий, критический путь рендера, события DOM и каскад: откуда берётся дёрганье и белый экран и как их чинить, а не прятать.
  • Строить приложение на React осознанно. Где живёт состояние, когда нужен стор, как грузить данные через кеш запросов, как ловить ошибки по зонам и не ронять экран целиком.
  • Проектировать структуру проекта, которая переживёт рост: раскладка по фичам, Feature-Sliced Design, границы, которые стережёт линтер.
  • Доводить до пользователей: доступность, производительность, тесты через Testing Library, окружение без секретов в бандле.
  • Собирать мобильное приложение из веба: PWA, Capacitor, push и офлайн, и честно понимать, где заканчивается WebView.

Как устроено прохождение

Фазы идут по порядку, и каждая опирается на предыдущие: прыгать вперёд обычно больно. Внутри фазы статьи помечены: ★ обязательно — скелет, без которого следующие статьи будут непонятны; дополнительно — глубина по желанию; костёр «что пощупать» — у статьи есть рабочий код в практикуме, и раздел с тем же названием ведёт в репозиторий, а «Сделаем сами» — в ветку с красными тестами.

После каждой фазы — тест. Не определения, а описанная ситуация и выбор, что в ней произойдёт. Порог один для всех фаз — 80% верных ответов, попытки не ограничены: кабинет показывает, какие вопросы не сошлись, вы возвращаетесь к статьям и сдаёте снова.

Тренажёры — практика: доска системного дизайна, алгоритмы на JavaScript, разбор инцидентов. На больших темах есть разбор: билет с задачами, которые надо показать руками и объяснить вслух.

Рядом ИИ-ментор и куратор. Ментору можно задать вопрос по абзацу статьи или попросить подсказку по задаче; расход считается в шишках, дневном запасе обращений. Куратор — живой человек, к нему уходит то, с чем модель не справилась.

Статьи открыты всем и читаются без входа. Тесты, тренажёры, разборы и ИИ-ментор живут в кабинете: вход через Яндекс ID даёт три дня полного доступа без карты, дальше подписка, условия на странице программ. Подробно про устройство программы, значки и помощь — в общей статье «Зачем этот курс».

Демо-пример: marketplace-system на GitHub

Веб-клиент маркетплейса из каталога web/ репозитория практикума: витрина, корзина, оформление с Idempotency-Key и экран заказа через BFF, воронка покупки с расчётом конверсии. Приложение нарочно маленькое, на React, TypeScript и Vite, с тестами на Vitest и Testing Library, где сеть подменена заглушкой.

клонировать репозиторий git clone поднять стенд: docker compose PostgreSQL и Redis в контейнерах прогнать тесты зелёные на настоящей базе запустить сервис и дёрнуть ручку curl отвечает карточкой переключиться на ветку шага

Пять команд от клона до первого задания; дальше каждая статья со значком костра ведёт в конкретный файл этого репозитория.

Что понадобится: Node.js 22 или новее. Для тестов и разработки с заглушками бэкенд не нужен; для живого стенда рядом поднимают сервисы из того же репозитория (нужны JDK 21 и Docker).

git clone https://github.com/remodov/marketplace-system.git
cd marketplace-system/web
npm install
npm test        # vitest и Testing Library, сеть подменена, браузер не нужен
npm run dev     # витрина на http://localhost:5173, адрес BFF задаёт VITE_BFF_URL

# живой стенд из того же репозитория, если хочется настоящих данных:
cd .. && docker compose -f infra/compose.yaml up -d && ./gradlew buildAll

Задание фронтенд-шага практикума — ветка step-14-web-and-funnel: условие в web/TASK.md, три теста воронки красные, остальное зелёное; step-14-web-and-funnel-solution рядом — эталон. Тот же web/ живёт и в Go-версии практикума с Vite-прокси к сервисам на Go.

Репозиторий: https://github.com/remodov/marketplace-system.

Сколько времени это займёт

ПрограммаСтатей и фазТолько чтениеС тестами, тренажёрами и практикумом
Frontend · React + TS69 статей, 10 фазоколо 6 часов25–30 часов

При часе в день по будням полный путь занимает 6 недель, только обязательные статьи с тестами — 3–4 недели; при двух часах в день сроки делятся примерно пополам. Чистое чтение посчитано по объёму текста, к нему добавлены тесты фаз, тренажёры и практикум.

Как проходить, чтобы дошло до конца

  • Не читайте подряд без практики. После фазы про базы данных откройте тренажёр и напишите десяток запросов: прочитанное без применения выветривается за неделю.
  • Не гонитесь за полнотой. Пройдите обязательные статьи, за остальными вернётесь, когда упрётесь в тему на работе.
  • Идите регулярно, а не рывками. Час в день лучше восьми часов в воскресенье.
  • Возвращайтесь к пройденному. Архитектура заиграет иначе после того, как вы увидите, как устроены данные.

Коротко

  • Программа «Frontend · React + TS»: 69 статей, 10 фаз, блоки идут по порядку, и каждая фаза опирается на предыдущие.
  • После фазы тест с порогом 80% и неограниченными попытками; тренажёры дают практику, ИИ-ментор и куратор отвечают по ходу.
  • Демо-пример живёт на GitHub: marketplace-system, пять команд от клона до первого задания, ветки step-NN-* с красными тестами и -solution с эталоном.
  • Полный путь при часе в день — 6 недель, обязательный скелет — 3–4 недели.
  • Доходят те, кто практикуется по ходу, не гонится за полнотой и идёт регулярно.

Что почитать дальше