X.XSTREAM.SPACE / DAVID
Roadmap 2026Обсудить участие

FRONTEND MENTORSHIP · REACT / TYPESCRIPT

FRONTEND ROADMAP.
2026

Маршрут от первых инструментов до оффера. Открывай темы, проверяй себя на практике и отмечай пройденное.

0 из 34 обязательных тем
ЭТАП 01

Инструменты

Настроить рабочее место один раз и дальше использовать его в каждом проекте.

VS Code и браузер

Обязательно

Node.js, npm и Vite

Обязательно

Git и GitHub

Обязательно

Терминал и структура проекта

Обязательно
РЕЗУЛЬТАТ ЭТАПАОткрыть проект, запустить локальный сервер и сохранить первую версию в GitHub.
ЭТАП 02

HTML + CSS

Научиться собирать понятный, адаптивный интерфейс без борьбы с версткой.

Семантический HTML

Обязательно

Формы и доступность

Обязательно

CSS: основа

Обязательно

Flexbox и позиционирование

Обязательно

Адаптивность

Обязательно

CSS Grid

Полезно позже
РЕЗУЛЬТАТ ЭТАПАСверстать адаптивную страницу с формой по макету, проверить на телефоне и с клавиатуры.
ЭТАП 03

JavaScript

Понять язык настолько, чтобы писать поведение интерфейса и разбирать ошибки.

Типы, переменные, условия

Обязательно

Функции и область видимости

Обязательно

Объекты и массивы

Обязательно

DOM и события

Обязательно

Асинхронность и Fetch API

Обязательно

Модули и отладка

Обязательно
РЕЗУЛЬТАТ ЭТАПАСделать интерактивный интерфейс с формой, списком, фильтрацией и запросом к API.
ЭТАП 04

TypeScript

Типизировать обычную продуктовую работу, не уходя в сложную теорию типов.

Типы и вывод типов

Обязательно

Union и narrowing

Обязательно

Utility types

Обязательно

Дженерики на практике

Обязательно
РЕЗУЛЬТАТ ЭТАПАПереписать интерфейс и ответы API на TypeScript без any «на всякий случай».
ЭТАП 05

React

Собирать приложение из компонентов и управлять состоянием без лишней магии.

Компоненты, JSX и props

Обязательно

Состояние и формы

Обязательно

Эффекты и ref

Обязательно

Хуки и повторное использование

Обязательно

Роутинг

Обязательно

Серверные данные

Обязательно
РЕЗУЛЬТАТ ЭТАПАСделать React-приложение с несколькими страницами, формой и серверными данными.
ЭТАП 06

Рабочий проект

Соединить стек в задаче, похожей на то, что дают в команде.

API и HTTP в продукте

Обязательно

TanStack Query

Обязательно

UI-библиотека

Обязательно

Командный цикл

Обязательно

AI-инструменты

Обязательно

Деплой и README

Обязательно
РЕЗУЛЬТАТ ЭТАПАОпубликовать 1–2 законченных проекта: репозиторий, демо, README, адаптивность и реальные сценарии.
ЭТАП 07

Выход на рынок

Не ждать, пока будут изучены все технологии: готовить отклики параллельно с проектами.

Портфолио и резюме

Обязательно

Собеседования

Обязательно

Отклики и обратная связь

Обязательно
РЕЗУЛЬТАТ ЭТАПАПоказать работодателю рабочее демо, объяснить свои решения и пройти технический разговор.
ЭТАП 08

Полезно позже

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

Next.js

Полезно позже

Тесты

Полезно позже

Архитектура и производительность

Полезно позже

Состояние и другие библиотеки

По вакансии
РЕЗУЛЬТАТ ЭТАПАВыбрать следующую тему по вакансии или проблеме проекта, а не по длине списка технологий.
ЭТАП 09

Оффер — следующий шаг

Цель маршрута — рабочие навыки и доказуемые проекты, а не галочка напротив каждого термина.

РЕЗУЛЬТАТ ЭТАПАПродолжать учиться на реальных задачах после первого оффера.

XSTREAM.SPACE / DAVID

РАЗОБРАТЬ СВОЙ МАРШРУТ?

В Telegram делюсь опытом frontend-разработки, разборами карьеры и кейсами учеников. Там же можно узнать о менторстве.

Перейти в Telegram