Что учить фронтендеру (база → React)
Что учить фронтендеру: от базовой вёрстки к JavaScript, React и TypeScript. План освоения стека в правильном порядке для входа в профессию с нуля за 6–12 месяцев.
Коротко. Дорога фронтенд-джуна: HTML/CSS → JavaScript → Git → React → TypeScript → сборка и деплой. Порядок нарушать дорого: React без уверенного JS превращается в магию, TypeScript без React — в абстракцию. Срок до собеседований — 6–9 месяцев. О профессии — фронтенд с нуля, тренды и что не трогать — карта фронтенда 2026, полный маршрут — старт во фронтенд 2026.
Стек по приоритетам
| Приоритет | Навык | Что уметь | Срок |
|---|---|---|---|
| 1 | HTML + CSS | Семантика, Flexbox, Grid, адаптив, базовая доступность (a11y) | 4–6 недель |
| 2 | JavaScript | Массивы/объекты, функции, this, замыкания, промисы, async/await, DOM, fetch | 8–10 недель |
| 3 | Git | Ветки, PR, конфликты | 1 неделя |
| 4 | React | Компоненты, пропсы/стейт, хуки (useState/useEffect), списки, формы, роутер | 6–8 недель |
| 5 | TypeScript | Типы, интерфейсы, дженерики базово, типизация пропсов и API-ответов | 3–4 недели |
| 6 | Сборка и деплой | Vite, npm-скрипты, деплой на Vercel/Netlify/GitHub Pages | 1–2 недели |
| 7 | Качество | ESLint/Prettier, базовые тесты (Vitest/RTL), Lighthouse | 2–3 недели |
Глубже: вёрстка без боли, TypeScript для джуна, работа с API и состоянием, оптимизация и Lighthouse.
Порядок обучения: 6–9 месяцев
- Месяцы 1–2 — вёрстка. 5–7 свёрстанных макетов (бесплатные макеты в Figma-сообществе), обязательно адаптив. Критерий: верстаете страницу с макета за вечер без «а как сделать колонки».
- Месяцы 3–4 — JavaScript. Интерактив на чистом JS: табы, модалки, валидация форм, запросы к открытым API. Критерий: понимаете чужой код на 200 строк и находите в нём баг.
- Месяцы 5–6 — React + TypeScript. Переписываете один из проектов на React, добавляете роутинг и работу с API; затем типизируете. Критерий: SPA из 3–5 экранов с загрузкой/ошибками/пустыми состояниями.
- Месяцы 7–9 — портфолио и отклики. Деплой всех проектов, чистые README, резюме, 20–40 откликов в неделю. Параллельно закрываете пробелы по вопросам с собесов.
Почему React и что с остальными
- React — большинство джуновых вакансий в РФ 2026. Учите первым.
- Vue — второй по спросу, много в студиях и госпроектах. Осваивается за 2–3 недели после React — отдельно учить заранее не нужно.
- Angular — энтерпрайз и банки; джуну имеет смысл только под конкретную вакансию.
- Next.js и SSR — после уверенного React; в вакансиях джуна встречается как «плюсом», не как требование.
Инструменты вокруг кода
- DevTools — вкладки Elements, Console, Network: уметь смотреть запросы, статусы, тела ответов.
- Vite — стандарт сборки для новых проектов; понимать, что такое дев-сервер и прод-сборка.
- ESLint + Prettier — подключены в каждом проекте портфолио; на собесе это считывается как «привычка к команде».
- Lighthouse — прогнать свои проекты, поднять зелёные метрики: разговор про LCP/CLS выделяет джуна.
Проекты для портфолио
- Приложение со сторонним API: поиск, фильтры, пагинация, обработка загрузки и ошибок. База для разговора на собесе.
- CRUD-приложение: задачи/заметки/финансы — формы, валидация, состояние, localStorage или простой бэкенд.
- Свёрстанный лендинг с идеальным Lighthouse: адаптив, a11y, 95+ по перфомансу — демонстрация вёрстки как навыка.
Идеи с разбором реализации — 3 мини-проекта на React; оформление — портфолио и GitHub.
Что спрашивают на собеседовании
| Блок | Типовые вопросы джуну |
|---|---|
| JS | Замыкания, this, event loop «на пальцах», var/let/const, промисы vs async/await |
| Вёрстка | Flexbox vs Grid, специфичность CSS, как центрировать, адаптив без фреймворка |
| React | Зачем ключи в списках, useEffect и его зависимости, подъём состояния, контролируемые формы |
| TS | type vs interface, типизация пропсов, unknown vs any |
| Практика | Live-coding: компонент со списком и фильтром; разбор — live-coding без паники |
Что НЕ учить на старте
- ❌ Второй фреймворк параллельно с первым.
- ❌ Redux и сложный стейт-менеджмент до реальной нужды — хватает useState/useContext + TanStack Query.
- ❌ Webpack-конфиги с нуля — мир переехал на Vite.
- ❌ Три CSS-методологии сразу: возьмите одну (BEM или CSS-модули) и пишите одинаково.
- ❌ jQuery и устаревшие туториалы до 2020 года.
Частые вопросы
Сколько учить JavaScript до React?
2–3 месяца практики: если можете написать интерактивный виджет на чистом JS (модалка, табы, запрос к API) — пора в React.
Обязателен ли TypeScript джуну в 2026?
Фактически да: большинство вакансий указывают TS. Но учить его надо после React, на своих же компонентах — тогда это 3–4 недели.
Нужна ли вёрстка, если есть готовые UI-киты?
Нужна: на собесах регулярно просят сверстать блок без библиотек, а баги вёрстки — ежедневная работа джуна.
Где деплоить проекты?
Vercel, Netlify, GitHub Pages — бесплатно и за 10 минут. Ссылка на живое демо в резюме обязательна.
Реально ли войти во фронтенд в 2026?
Конкуренция среди джунов высокая, но рынок большой. Выигрывают кандидаты с доведёнными проектами и уверенным JS — а не с сертификатами курсов.