SoftByte Learn

роадмап фронтенд

От новичка до мастера. 23 ступени. Каждый пункт — навык для работы.

01. HTML

Скелет веба. Научись создавать семантическую разметку, формы, таблицы, SEO-теги. Без этого никуда.

  • Семантические теги: header, main, section, article
  • Формы и валидация
  • Доступность (a11y) — aria-метки
  • SEO-разметка, Open Graph
1

02. CSS

Красота и отзывчивость. Освой Flex, Grid, анимации и препроцессоры.

  • Flexbox / Grid — полная верстка
  • Адаптивность, медиазапросы
  • Анимации, transition, keyframes
  • SCSS / модули / styled components
2

03. JavaScript

Мозг фронтенда. Переменные, циклы, функции, события, асинхронность.

  • ES6+: let, const, стрелки, деструктуризация
  • Промисы, async/await
  • DOM, события, обработчики
  • LocalStorage, fetch, работа с API
3

04. React

Библиотека для интерфейсов. Начни с компонентов и JSX.

  • Компоненты: функциональные vs классовые
  • JSX, props, children
  • Условный рендеринг, списки
  • Жизненный цикл, useEffect
4

05. React Hooks

Современный React без классов. Хуки — твои лучшие друзья.

  • useState, useEffect, useContext
  • useReducer, useMemo, useCallback
  • useRef, useLayoutEffect
  • Кастомные хуки — переиспользование логики
5

06. TypeScript

Типизация спасает от багов. Строгость и предсказуемость.

  • Интерфейсы, типы, enums
  • Generics — дженерики
  • Типизация пропсов React
  • Utility Types: Pick, Omit, Partial
6

07. Data Structures

Массивы, объекты, стеки, очереди. Для собесов и архитектуры.

  • Массивы: map, filter, reduce
  • Объекты и хеш-таблицы
  • Стек, очередь, связные списки
  • Деревья, графы — базово
7

08. Next.js

Фреймворк на React. SSR, SSG, файловая маршрутизация.

  • Pages & App Router
  • SSR, SSG, ISR
  • API routes
  • Оптимизация изображений и шрифтов
8

09. Next Router

Навигация в Next. Динамические роуты, middleware, layout.

  • Динамические маршруты [id]
  • useRouter, Link
  • Middleware для редиректов
  • Группировка и layout
9

10. Компоненты

Архитектура. Разделяй и властвуй, переиспользуй.

  • Атомарный дизайн (атомы, молекулы)
  • Композиция vs наследование
  • Render props, children as function
  • Выделение логики в хуки
10

11. Redux Toolkit

Глобальный стейт без боли. Слайсы, thunk, devtools.

  • configureStore, createSlice
  • Actions, reducers, immer
  • createAsyncThunk
  • Devtools, middleware
11

12. RTK Query

Работа с API в Redux. Кэширование, инвалидация, мутации.

  • createApi, fetchBaseQuery
  • Хуки useQuery, useMutation
  • Автоматическое кэширование
  • Инвалидация тегов
12

13. AJAX / NestJS

HTTP-запросы, REST, бэкенд-контекст. Понимай, с чем работаешь.

  • fetch, axios
  • REST-принципы
  • NestJS: контроллеры, провайдеры
  • CORS, заголовки
13

14. WebSocket

Реалтайм. Чаты, уведомления, live-обновления.

  • WebSocket-соединение
  • socket.io
  • Обработка событий
  • Комнаты, broadcast
14

15. Обработка ошибок

Не дай приложению упасть. try/catch, ErrorBoundary.

  • try/catch в асинхронных операциях
  • Error Boundary в React
  • HTTP-ошибки и статусы
  • Логирование ошибок
15

16. Переиспользуемые компоненты

Напиши один раз — используй везде. Гибкость и абстракция.

  • Составные компоненты (compound)
  • HOC (higher-order components)
  • Полиморфные компоненты
  • Слоты и контекст
16

17. Правильный UX

Забота о пользователе. Состояния загрузки, скелетоны, фокусы.

  • Скелетоны, лоадеры
  • Состояния ошибок
  • Фокус клавиатуры, tabindex
  • Микроанимации
17

18. React Hook Form

Формы без боли. Производительность, валидация.

  • useForm, register, handleSubmit
  • Валидация (Yup, Zod)
  • Контролируемые vs неконтролируемые
  • Массивы полей
18

19. Code Style

Код, который не стыдно показать. Линтеры, форматеры.

  • ESLint, Prettier
  • Husky, lint-staged
  • Соглашения в команде
  • Чистый код (Роберт Мартин)
19

20. Сборщики и импорты

Webpack, Vite. Алиасы, бандлы, окружения.

  • Vite / Webpack config
  • Алиасы (@/components)
  • Разделение чанков
  • Переменные окружения
20

21. Настройка сложных приложений

Архитектура, монорепа, env, конфиги.

  • Feature-Sliced Design
  • Монорепозитории (Turborepo)
  • Настройка CI/CD
  • Мультиокружение
21

22. Оптимизация

Скорость загрузки, рендеринга. Lighthouse 100.

  • Code splitting, lazy loading
  • Мемоизация (memo, useMemo)
  • Оптимизация изображений
  • Аудит Lighthouse
22

23. Тестирование (Vitest)

Уверенность в коде. Юниты, компоненты, e2e.

  • Настройка Vitest
  • describe, it, expect
  • React Testing Library
  • Моки и снепшоты
23