FrontendMobile

Основы React, React Router и Redux Toolkit

Полный курс по современному React в 2025 - Hooks, Redux Toolkit, React Router

Обновлено 06 октября 2025 г.
ЗвездаЗвездаЗвездаЗвезда
Рейтинг 4.9на основании отзывов
Иконка аватараИконка аватараИконка аватараИконка аватараИконка аватара
40,000учеников
Иконка гарантии
Легкий возврат — 30 дней

Вернем 100% стоимости без объяснения причин — стартуйте без рисков!

изображение курса
кнопка запустить видеоО курсе
Цена от:3 999 ₽6 990 ₽
При покупке до 10.12.2025
Гарантия возврата денег — 30 дней
Неограниченный доступ
Сертификат об окончании
Знания

Чему вы научитесь?

После прохождения курса вы сможете:
Знать как работет React под капотом
Использовать React Hooks
Писать свои хуки
Работать с контекстом
Использовать React с TypeScript
Делать запросы к API
Обрабатывать загрузки и ошибки
Работать с Redux Toolkit
Использовать React Router
Работать с asyncThunk

Минимальные требования: Знание JavaScript, Будет плюсом знакомство с TypeScript

182урокавидео с конспектами
17 упражненийдля закрепления на практике
76 тестовдля проверки знаний
Технологии
ReactRedux ToolkitTypeScriptReact RouterHooksJWTInsomia
О курсе

Что в курсе?

В этом курсе мы изучим React, Redux Toolkit и React Router, написав 2 полноценных приложения. Этот курс подойдёт тем, кто только начинает свой путь во frontend разработку и готов начать работать со свои первым Frontend фреймворком. От вас требуется знание HTML и CSS, так как мы будем с нуля верстать наши проекты и конечно же JavaScript. Начальное знание TypeScript будет плюсом, так как второе приложение мы уже будем переводить на TypeScript.

Курс будет максимально практическим, ведь всю теорию мы разбираем прямо во время создания наших проектов применяя полученные знания на практике. Мы не используем банальные ToDo приложения, а работаем с реальными API и приближенными к реальности проектами. Так же для курса было сделано большое число упражнений, которые позволят вам закрепить полученные знания, дорабатывая созданные в курсе проекты.

Иконка гарантии
Легкий возврат — 30 дней

Вернем 100% стоимости без объяснения причин — стартуйте без рисков!

certificate
Ваш сертификат по окончанию курса
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 декабря 2025
Возможности обучения

Обучение в PurpleSchool

Собственная платформа

Интеграция с GitHub

Интеграция с GitHub

Все проекты для домашних заданий проверяются напрямую из GitHub

Поддержка всех устройств

Поддержка всех устройств

Обучайтесь в любом месте с десктоп и мобильных устройств

Подсветка синтаксиса

Подсветка синтаксиса

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

Проверенные форматы

Мини-лекции

Мини-лекции

Короткие видео (по ~5 минут) позволяют обучаться даже тогда, когда времени на полноценное обучение не хватает

Упражнения

Упражнения

Выполняйте задачи, а затем сравнивайте с верным процессом решения в видео для самопроверки

Конспекты

Конспекты

Каждая лекция сопровождается детальными конспектами для удобного поиска информации

Домашние задания

Домашние задания

Осваивайте материал на реальных задачах, которые потом пригодятся в работе

Тесты

Тесты

Закрепляйте знания и находите слабые места с помощью точечных тестов по темам курса

Тщательно следим за актуальностью технологий и регулярно обновляем курсы

AI и тренажёры

Livecode-тренажёр

Livecode-тренажёр

Решайте мини-задачи по темам курса и получайте мгновенный разбор ошибок в коде от AI-наставника

Mock-тренажёр

Mock-тренажёр

Практикуйтесь в прохождении собеседований и находите ошибки, которые мешают пройти на нужную вакансию

Проверка домашних заданий

Проверка домашних заданий

Отправляйте Pull Request наставнику и получайте детальный разбор с учётом лучших практик

AI-наставник обучен на реальных проектах, практике студентов, официальной документации и материалах курса

Реальная практика в студии

Проектная команда

Проектная команда

Подключитесь в коллектив и пройдёте проект плечом к плечу

Рекомендательное письмо

Рекомендательное письмо

В случае успешной стажировки получите индивидуальное рекомендательное письмо от основателя студии PurpleCode

Реальные задачи

Реальные задачи

Реализуете действующий функционал, а не задачки из учебников

Еженедельное планирование

Еженедельное планирование

Освоите практики Agile, научитесь декомпозировать задачи, оценивать сроки, анализировать ретроспективу

Практикующие разработчики и HR

Проверка домашних заданий

Проверка домашних заданий

Получайте детальную обратную связь от разработчиков из ведущих компаний

Еженедельные консультации

Еженедельные консультации

Разбирайтесь с трудностями и вопросами на еженедельных встречах с наставником

Проверка резюме и мок

Проверка резюме и мок

Повышайте софтскиллы и проходите на вакансии выше уровнем

Гарантия: если в течение 30 дней после покупки поймёте, что курс не нравится и не прошли более 50% курса — вернём деньги без лишних вопросов.

Модули курса

План курса

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

кнопка запустить видеоПример лекции
1.1 React и Redux
6 мин
1.2 Как устроен курс
8 мин
1.3 Обзор проектов
2 мин
1.4 Проект домашних заданий
2 мин
1.5 Обзор курсов
2 мин
1.6 Работа на платформе
10 мин
1.7 AI и тренажёры
7 мин
1.8 Практика на проекте
4 мин
1.9 Рекомендуемый курс
1 мин
2.1 Настройка окружения
4 мин
2.2 Настройки VSCode
6 мин
2.3 Установка Node.js
6 мин
2.4 О работе NVM
15 мин
2.5 Создание проекта
8 мин
3.1 Обзор проекта
5 мин
3.2 Настройка eslint
7 мин
3.3 Что такое компоненты
6 мин
3.4 JSX
9 мин
3.5 React Fragment
4 мин
3.6 Декларативное описание
4 мин
3.7 Создание первого компонента
5 мин
3.8 Стилизация
6 мин
3.9 Динамические данные
10 мин
3.10 Props
7 мин
3.11 Упражнение - Вывод даты
2 мин
3.12 Композиция
8 мин
3.13 Тест - Компоненты
5 мин
С AI и тренажёрами3.14 Тренажёр - Компоненты
30 мин
С AI и тренажёрамиС наставником3.15 Занятие - Компоненты
15 мин
3.16 Домашнее задание AI
18 мин
3.17 Работа с gitflow
12 мин
С AI и тренажёрамиС наставником3.18 Домашнее задание - Компоненты
30 мин
4.1 Обработка событий
6 мин
4.2 Отрисовка компонент
5 мин
4.3 useState
11 мин
4.4 Декомпозиция на компоненты
6 мин
4.5 Упражнение - Вёрстка layout
13 мин
4.6 Работа с SVG
6 мин
4.7 Работа с input
4 мин
4.8 Управляемые контролы
5 мин
4.9 Отправка формы
10 мин
4.10 Stateful и Stateless
4 мин
4.11 Особенности useState
6 мин
4.12 Тест - События и состояние
5 мин
С AI и тренажёрами4.13 Тренажёр - События и состояние
30 мин
С AI и тренажёрамиС наставником4.14 Занятие - События и состояние
15 мин
С AI и тренажёрамиС наставником4.15 Домашнее задание - События и состояние
30 мин
5.1 Работа со списком данных
6 мин
5.2 Упражнение - Добавление элементов
8 мин
5.3 Key в списках
9 мин
5.4 Отображение по условию
10 мин
5.5 React Dev Tools
7 мин
5.6 Отладка приложения
8 мин
5.7 Тест - Отображение данных
5 мин
С AI и тренажёрамиС наставником5.8 Занятие - Отображение данных
15 мин
С AI и тренажёрамиС наставником5.9 Домашнее задание - Отображение данных
60 мин
6.1 Изменение стилей
12 мин
6.2 Динамические классы
7 мин
6.3 CSS модули
9 мин
6.4 Библиотека classnames
5 мин
6.5 Упражнение - стилизация формы
14 мин
6.6 Тест - Стилизация
5 мин
С AI и тренажёрамиС наставником6.7 Занятие - Стилизация
15 мин
С AI и тренажёрамиС наставником6.8 Домашнее задание - Стилизация
30 мин
7.1 Side Effects
5 мин
7.2 useEffect
8 мин
7.3 Зависимости эффекта
7 мин
7.4 Очистка эффекта
6 мин
7.5 useReducer
6 мин
7.6 Использование useReducer
16 мин
7.7 Упражнение - Очистка формы
9 мин
7.8 Exhaustive-deps
4 мин
7.9 useRef
7 мин
7.10 forwardRef
12 мин
7.11 Создание своего hook
13 мин
7.12 Правила hooks
4 мин
7.13 Тест - Другие hooks
5 мин
С AI и тренажёрами7.14 Тренажёр - Другие hooks
30 мин
С AI и тренажёрамиС наставником7.15 Занятие - Другие hooks
15 мин
С AI и тренажёрамиС наставником7.16 Домашнее задание - Другие hooks
30 мин
8.1 Зачем нужен Context API
9 мин
8.2 Создание контекста
8 мин
8.3 useContext
5 мин
8.4 Методы в контексте
5 мин
8.5 Custom context
5 мин
8.6 Упражнение - работа контекста
7 мин
8.7 Ограничения контекста
6 мин
8.8 Тест - Контекст
5 мин
С AI и тренажёрами8.9 Тренажёр - Контекст
30 мин
С AI и тренажёрамиС наставником8.10 Занятие - Контекст
15 мин
С AI и тренажёрамиС наставником8.11 Домашнее задание - Контекст
60 мин
9.1 Как работает React
7 мин
9.2 Пример работы
6 мин
9.3 Ререндер дочерних компонент
7 мин
9.4 Memo
7 мин
9.5 useCallback
4 мин
9.6 Планировщик state
6 мин
9.7 Batching
4 мин
9.8 useMemo
6 мин
9.9 Упражнение - Просмотр записи
11 мин
9.10 Упражнение - Удаление записи
13 мин
9.11 Тест - Работа React
5 мин
С AI и тренажёрамиС наставником9.12 Занятие - Работа React
15 мин
10.1 Вводное видео
3 мин
10.2 Рекомендуемый курс
5 мин
10.3 Обзор проекта
3 мин
10.4 Создание проекта
4 мин
10.5 Типизация компонент
15 мин
10.6 Типизация hooks и событий
5 мин
10.7 Подготовка стилей проекта
9 мин
10.8 Упражнение - Создание кнопки и input
11 мин
10.9 Тест - Переход на TypeScript
5 мин
С AI и тренажёрами10.10 Тренажёр - Переход на TypeScript
30 мин
С AI и тренажёрамиС наставником10.11 Занятие - Переход на TypeScript
15 мин
С AI и тренажёрамиС наставником10.12 Домашнее задание - Переход на TypeScript
30 мин
11.1 О роутинге
5 мин
11.2 Создание роутов
8 мин
11.3 createBrowserRouter
5 мин
11.4 Link
5 мин
11.5 Outlet
5 мин
11.6 Упражнение - Создание Layout
17 мин
11.7 useLocation
4 мин
11.8 NavLink
4 мин
11.9 Упражнение - Заголовок и поиск
16 мин
11.10 Упражнение - Карточка товара
25 мин
11.11 Роуты с параметрами
5 мин
11.12 Тест - React Router
5 мин
С AI и тренажёрамиС наставником11.13 Занятие - React Router
15 мин
С AI и тренажёрамиС наставником11.14 Домашнее задание - React Router
60 мин
12.1 Работа с Insomnia
6 мин
12.2 Создание запросов
10 мин
12.3 Подключение axios
4 мин
12.4 Обработка загрузки
4 мин
12.5 Обработка ошибок
6 мин
12.6 loader
7 мин
12.7 errorElement
5 мин
12.8 lazy
6 мин
12.9 Suspense
4 мин
12.10 defer и Await
11 мин
12.11 Тест - Взаимодействие с сервером
5 мин
С AI и тренажёрамиС наставником12.12 Занятие - Взаимодействие с сервером
15 мин
С AI и тренажёрамиС наставником12.13 Домашнее задание - Взаимодействие с сервером
30 мин
13.1 Создание layout входа
9 мин
13.2 Упражнение - Форма логина
14 мин
13.3 Получение токена
13 мин
13.4 Работа JWT
8 мин
13.5 Приватные Routes
5 мин
13.6 Хранение в localstorage
7 мин
13.7 Тест - Авторизация
5 мин
С AI и тренажёрамиС наставником13.8 Занятие - Авторизация
15 мин
С AI и тренажёрамиС наставником13.9 Домашнее задание - Авторизация
60 мин
14.1 Что такое Redux
7 мин
14.2 Создание хранилища
7 мин
14.3 Slice пользователя
6 мин
14.4 Первый action
9 мин
14.5 Хранение данных
12 мин
14.6 Запросы в actions
14 мин
14.7 Обработка ошибок
9 мин
14.8 Упражнение - Профиль пользователя
12 мин
14.9 Упражнение - Регистрация
9 мин
14.10 Корзина товаров
11 мин
14.11 Тест - Redux Toolkit
5 мин
С AI и тренажёрамиС наставником14.12 Занятие - Redux toolkit
15 мин
С AI и тренажёрамиС наставником14.13 Домашнее задание - Redux Toolkit
30 мин
15.1 Упражнение - Поиск товаров
12 мин
15.2 Компонент корзины
17 мин
15.3 Редактирование корзины
19 мин
15.4 Упражнение - Хранение корзины
3 мин
15.5 Расчёт суммы
10 мин
15.6 Покупка товаров
13 мин
С AI и тренажёрамиС наставником15.7 Домашнее задание - Завершение проекта
60 мин
16.1 Куда дальше?
3 мин
С AI и тренажёрамиС наставником16.2 Собеседование с AI наставником
30 мин
16.3 Финальное тестирование
15 мин
16.4 Рекомендуемый курс
1 мин
С AI и тренажёрами17.1 Основы Scrum
19 мин
С AI и тренажёрами17.2 Старт задачи
11 мин
С AI и тренажёрами17.3 Выполнение задачи
11 мин
С AI и тренажёрами17.4 Код ревью
8 мин
С AI и тренажёрами17.5 Обзор проекта
18 мин
С AI и тренажёрами17.6 Старт командного проекта
5 мин
О платформе

Обзор платформы

Наша платформа создана так, чтобы вы могли не просто прослушать лекции, а действительно освоить материал. Здесь вы сможете пройти видеолекции, потренироваться на интерактивных тренажёрах, выполнить домашние задания, поработать с AI-наставником и проверить свои знания с помощью тестов. Всё это помогает закрепить теорию на практике и быстрее достичь результата.

Видео
Тренажёры
Домашние задания
Занятия с AI
Тесты
Командный проект
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 декабря 2025
О проектах

Что будем писать?

Самостоятельный

Дневник

Дневник

Персональный дневник, где пользователь сможет фиксировать свои мысли и хранить воспоминания.

Самостоятельный

Сервис заказа еды

Сервис заказа еды

Приложение доставки еды, которое позволяет оформить заказ на пиццу на Redux Toolkit и React Router.

Наставник и практика

Сайт с рейтингами

Сайт с рейтингами

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

О PurpleSchool

Наши проекты

Антон Ларичев

Антон Ларичев

Основатель PurpleCode, школы обучения разработки PurpleSchool. 14 лет опыта разработки, более 10 лет управления ИТ проектами и интернет маркетинга.

PurpleSchool

Школа PurpleSchool

Направления
40 000

учеников по всему миру

30 дней

гарантия возврата денег

90%

студентов рекомендуют курсы

4.8
ЗвездаЗвездаЗвездаЗвездаЗвезда
4.8
ЗвездаЗвездаЗвездаЗвездаЗвезда
4.7
ЗвездаЗвездаЗвездаЗвездаЗвезда

Студия PurpleCode

Направления
50+

проектов за последний год

15

лет опыта

7

команд разработки

Практика в PurpleCode

1
Собеседуем выбранных участников
2
Прошедших отбор берём на оплачиваемую стажировку
3
После 3-х месяцев успешной стажировки - оффер
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 декабря 2025
О тарифе

Тариф с командным проектом

  • Реальный проект

    Вы будете работать вместе с командой на реальным проектом

  • Практика

    2 недели интенсивной практики и погружения в процессы разработки

  • Наставничество

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

  • Командная работа

    Вы научитесь синхронизироваться с командой и совместно реализовывать сложные фичи

  • Практика Agile

    Вы будете работать по Scrum и познакомитесь с Agile процессами

team project
  1. 1

    Планируем спринт

    1 раз в неделю мы проводим звонок и планируем спринт, декомпозируем задачи и начинаем работать над итерацией.

  2. 2

    Синхронизируемся

    Каждый день мы синхронизуемся в чате, а наставники помогают с задачами и отвечают на вопросы.

  3. 3

    Выполняем задачи

    Работая по GitFlow вы выполняете задачи и отправляете их на ревью. Код ревью проводят наставники, которые проверяют качество кода и дают рекомендации.

  4. 4

    Проводим ретроспективу

    В конце спринта мы проводим звонок-ретроспективу, где разбираем сделанные задачи и анализируем спринт.

Для вас подготовлены дополнительные материалы
  • additional material

    Макеты для вёрстки и создания компонент

  • additional material

    Техническое задание на итерацию от ProductOwner

  • additional material

    Процессы по работе в команде и код ревью

Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 декабря 2025
Команда курса

Автор курса

фото команды
Автор курса

Антон Ларичев

Основатель PurpleSchool

Основатель PurpleSchool и ex-CTO. Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Изучи направление Фронтенд разработчик

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

7
7 месяцевдлительность направления
11
11 проектовдля портфолио
1 раз
в неделю живые встречи
Этот курс является частью направления Мобильный разработчик

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

10
10 месяцевдлительность направления
8
8 проектовдля портфолио
1 раз
в неделю живые встречи
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 10 декабря 2025

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile

Курсы с наставником и без

Для компаний

Все курсы доступны для приобретения для сотрудиков компаний по безналичному расчёту. Процесс получения доступа очень простой, нужен только ваш ИНН и число сотрудников.

Свяжитесь со мнойЧерез форму ниже или по почтеcontact@purpleschool.ru
Оплата счётаВы оплачиваете счёт на нужное число мест и курсов
СтартНа email сотрудников открывается доступ
Наши курсы выбирают:
Остались вопросы?

Частые вопросы

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

Вы получаете неограниченный по времени доступ к курсу и можете проходить его в темпе, в который комфортен вам. Но занятия с наставником и проверка домашнего задания ограничена 2-мя и 3-мя месяцами для 2-х тарифов.
Для тарифов с наставником доступен прямой чат с наставником, где вы можете задавать вопросы. А для всех тарифов есть общий чат и комментарии под каждой лекцией.
После приобретения курса у вас открывается доступ на приватный Telegram канал, где созданы отдельные чаты для каждого курса и есть возможность задавать вопросы наставнику напрямую. Там же проводятся голосовые звонки с наставником.
Оплата доступна по всему миру. Стоимость курса будет автоматически сконвертирована в валюту вашей страны по текущему курсу.
Если в течение 30 дней курс вам не понравился или не подошёл, вы можете запросить возврат средств если не прошли более 50% курса, написав на электронную почту contact@purpleschool.ru. После возврата средства зачисляться в течение 3-х рабочих дней.
Да, сертификат будет вам автоматически отправлен после завершения курса на электронную почту, указанную при регистрации.
На все тарифы с наставником доступна рассрочка на 2 и 3 месяца в зависимости от тарифа.
Конечно, мы дорожим своей репутацией и работаем полностью открыто, платим налоги и формирует чеки. Всю информацию о компании можно найти на сайте ФНС по ИНН, указанному в подвале сайта.
Основная ценность курса в том, что весь материал структурирован и подан в правильной последовательности. Благодаря этому вы можете получить знания быстро, качественно и структурировано. А поддержка наставника обеспечивает вам быструю обратную связь и поддержку от профессионального разработчика.
Мы рекомендуем выделять на курс от 10 до 20 часов в неделю, чтобы двигаться в хорошем темпе. Если вы приобретаете курс для самостоятельного обучения, то можете двигаться в своём темпе.
Мы всегда идём на встречу и в индивидуальном порядке продлеваем время с наставником, если вам необходим перерыв в изучении материала.
Остались вопросы? Их можно задать в чате Telegram.