Курс · JavaScript-трек
React · Redux SPA
От компонентной модели React 18 до production-ready SPA: компоненты и хуки • Redux Toolkit и RTK Query • React Router Vite · Vitest · RTK Query
Учитесь на задачах из коммерческой разработки
Сборка SPA: маршрутизация, состояние, запросы и тестирование.
Основные занятия ведёт Сергей Валерьевич Герасименко — практикующий разработчик и основатель ТЕРАКОР и ТЕРАКОР Digital.
- React 18
- Redux
- RTK Query
- SPA
Чему вы научитесь
Компетенции React-разработчика — от JSX и хуков до production-ready SPA TaskBoard Pro
React 18 и JSX
Компонентная модель, props, state, composition и современные паттерны UI
Redux Toolkit
Store, slice, createAsyncThunk и предсказуемое управление состоянием
RTK Query
Асинхронная загрузка данных, кэширование и интеграция с REST API
TaskBoard Pro
Kanban-доска с drag-and-drop, фильтрами, auth и React Router — готовый проект
Состав программы
Что входит в программу
📚 Объём программы: 120 академических часов
• 40 академ/часов — занятия с преподавателем (лекции + практика)
• 80 академ/часов — самостоятельная работа, домашние задания, проекты
объём 120 ак. ч. (40 с преподавателем) · 8 модулей по 5 ч · финал — TaskBoard Pro
Модуль 1
React 18 и JSX
5 чМодуль 2
Props и state
5 чМодуль 3
Хуки
5 чМодуль 4
React Router
5 чМодуль 5
Redux Toolkit
5 чМодуль 6
RTK Query
5 чМодуль 7
Тесты и memo
5 чМодуль 8
TaskBoard Pro
5 ч- Экосистема React: SPA, Virtual DOM, reconciliation и роль React 18 в современном фронтенде
- JSX: синтаксис, выражения в фигурных скобках, атрибуты и className vs class
- Функциональные компоненты, return и правила рендеринга списков с key
- Vite + React: структура проекта, dev-сервер, HMR и первый компонент
- Практика: каркас TaskBoard Pro — layout, заголовок доски и placeholder-колонки
- Props: передача данных сверху вниз, типизация через PropTypes и defaultProps
- useState: локальное состояние, immutability и паттерн «поднятие состояния»
- Композиция: children, слоты и декомпозиция UI на переиспользуемые компоненты
- Компоненты TaskCard, Column и Board: props для задачи, колонки и счётчика
- Практика: добавление задачи в колонку через локальный state и controlled input
- useEffect: side effects, зависимости, cleanup и типовые сценарии (fetch, подписки)
- useRef, useMemo, useCallback: когда оптимизировать и когда не стоит
- Custom hooks: вынос логики в useTasks, useLocalStorage и useDebounce
- Хук useTaskFilter: фильтрация задач по статусу, приоритету и тексту поиска
- Практика: useEffect для синхронизации фильтров с URL-параметрами
- React Router v6: BrowserRouter, Routes, Route, Link и NavLink
- Вложенные маршруты, layout-компоненты и Outlet для общей оболочки
- useParams, useNavigate, useSearchParams и программная навигация
- Маршруты TaskBoard Pro: /boards, /board/:id, /settings и ProtectedRoute
- Практика: страница входа, редирект после auth и 404-страница
- Зачем Redux в React: однонаправленный поток данных, store и принцип immutability
- configureStore, createSlice, reducers и actions — современный API Redux Toolkit
- useSelector, useDispatch и Provider: подключение store к дереву компонентов
- Slice tasksSlice: добавление, редактирование, удаление и перемещение задач между колонками
- Практика: authSlice — состояние пользователя, login/logout и persist в sessionStorage
- createAsyncThunk: pending/fulfilled/rejected, extraReducers и обработка ошибок
- RTK Query: createApi, endpoints, tags и автоматическое кэширование запросов
- useQuery, useMutation, invalidation и optimistic updates для UX
- API-слой TaskBoard Pro: загрузка досок, задач и колонок с mock REST-сервера
- Практика: индикаторы loading/error, retry и синхронизация drag-and-drop с сервером
- Vitest + React Testing Library: render, screen, userEvent и тестирование компонентов
- React.memo, useMemo, useCallback: профилирование и осознанная оптимизация
- Error Boundaries, lazy loading (React.lazy + Suspense) и code splitting
- Unit-тесты для TaskCard, tasksSlice и custom hook useTaskFilter
- Практика: lazy-загрузка страниц настроек, сборка production через Vite
- Финальная архитектура TaskBoard Pro: feature-slices, routing, store и API-слой
- Drag-and-drop UI: перемещение задач между колонками с обновлением Redux и RTK Query
- Фильтры, поиск, auth-flow и защищённые маршруты — полная интеграция модулей
- Демонстрация проекта, code review и подготовка кейса для портфолио
- Итоговая аттестация и разбор типовых задач React/Redux на собеседованиях
Итоговый проект — TaskBoard Pro
SPA на React 18 и Redux Toolkit: kanban-доска задач с drag-and-drop интерфейсом, фильтрами по статусу и приоритету, асинхронной загрузкой через RTK Query, состоянием авторизации и маршрутизацией через React Router. Проект собирается поэтапно на протяжении всего курса — модули 1–4 формируют UI и routing, модули 5–6 добавляют store и API, модули 7–8 доводят TaskBoard Pro до production-ready.
- Kanban-доска с drag-and-drop
- Фильтры, поиск и приоритеты задач
- Redux Toolkit — store и slices
- RTK Query · async loading · auth state
- React Router · Vite · Vitest
- Готовый кейс для портфолио и собеседований
Официальный сертификат
Знак качества, который ценят работодатели
Наш сертификат — это не просто бумага за прослушивание курса. Это подтверждение того, что вы прошли строгую проверку знаний, написали работающий код и готовы к реальным коммерческим задачам.
- Два языка: Выдается на русском и английском языках для работы в РФ и за рубежом.
- Уникальный номер: Каждый документ имеет свой номер для проверки подлинности работодателем.
- Интеграция с резюме: Идеально дополняет профиль на hh.ru, Хабр Карьере и LinkedIn.
- Лицензия: Выдается лицензированным учебным центром.
Стоимость курса
объём 120 ак. ч. (40 с преподавателем + 80 самостоятельно) · онлайн
React и Redux: архитектура SPA
объём 120 ак. ч. (40 с преподавателем) · Redux Toolkit · RTK Query · TaskBoard Pro
48 000 ₽
Оплата за весь курс
- 8 модулей с практикой
- Итоговый проект — TaskBoard Pro
- Группа до 8 человек
- Сертификат УЦ ТЕРАКОР
Отзывы о курсе
Мнения выпускников курса «React и Redux: архитектура SPA»
25
отзывов
5.0
средняя оценка
Обучение лично у основателя ТЕРАКОР
Сергей Валерьевич Герасименко
Руководитель ТЕРАКОР Digital · ведущий преподаватель
Записаться на курс к Сергею →
Ближайший поток стартует в первый понедельник следующего месяца · осталось 4 места
Возможны вечерние занятия и обучение в выходные.
Все основные программы центра ведёт Сергей Валерьевич Герасименко — практикующий full-stack разработчик, технический директор и основатель ТЕРАКОР и ТЕРАКОР Digital.
Вы обучаетесь не у преподавателя-теоретика, а у специалиста, который сам разрабатывает программные системы и применяет технологии в коммерческих проектах.
Один руководитель.Два направления.Единая инженерная практика.
Сергей Герасименко — ведущий преподаватель и практикующий разработчик с многолетним опытом преподавания в ведущих учебных центрах страны. Проектирует современные программные системы и переносит рабочие инженерные практики в обучение.
-
17+
лет в Enterprise-разработке
-
25 000+
специалистов подготовил
-
5 000+
технических собеседований провёл
Enterprise-опыт, а не пересказ документации
Создавал программное обеспечение для Управления ОАО «РЖД» и спроектировал корпоративную систему «САОС» для массовых опросов. Система победила в конкурсе инновационных проектов РЖД и сегодня используется в крупных организациях. На занятиях Сергей разбирает именно те задачи, с которыми разработчики сталкиваются в реальных коммерческих компаниях.
Знает требования рынка изнутри
Проводит tech-собеседования для банков и IT-команд. На курсе — Spring Boot 4, Kafka 4, Core, SQL и архитектура. Mock-собеседования для выпускников включены.
Программа курса выстроена на основе реальных требований работодателей — именно тех, которые Сергей проверяет на собеседованиях каждый день.
Ключевые компетенции
-
Enterprise-архитектура — проектирование высоконагруженных систем (опыт в ОАО «РЖД»)
-
Java-экосистема — Java 21, Spring Boot 4, Spring AI: от основ до production-паттернов
-
Распределённые системы — практический опыт с Kafka 4 и микросервисной архитектурой
-
Базы данных — PostgreSQL на уровне production: оптимизация запросов, проектирование схем
-
System Design — подготовка к архитектурным секциям собеседований уровня Middle+
-
Техническое интервью — 5 000+ проведённых собеседований для банков и IT-компаний
Индивидуальный формат
Индивидуальное обучение по выбранным темам
Не нужно проходить весь курс, если вам нужны конкретные темы. Выбирайте модули из программы, разбирайте свой проект, закрывайте пробелы и двигайтесь в удобном темпе с преподавателем-практиком.
Стоимость индивидуального занятия
от 3 000 ₽
за 1 академический час
- Темы можно выбирать: берём только то, что нужно для работы, собеседования или проекта.
- Индивидуальный план под ваш уровень: от базы до продвинутой архитектуры и практики.
- Помощь с кодом, домашними заданиями, pet-проектом или рабочими задачами.
Место нахождения
г. Саратов, 1-й проезд имени С.Т. Разина, 3/7, 306, индекс 410054
Фактический адрес для встреч и консультаций в г. Москве
ул. Каланчёвская, д. 15, м. Каланчёвская (по предварительной записи)
Фактический адрес для встреч и консультаций в Московской области, г. Королёв
ул. Грабина, 5/2 (по предварительной записи)
ТЕРАКОР · ул. Каланчёвская, д. 15, м. Каланчёвская (по предварительной записи)
Открыть на Яндекс.Картах