Stepik О курсе
Подробнее
В этом курсе мы изучим React, Redux Toolkit и React Router, написав 2 полноценных приложения. Этот курс подойдёт тем, кто только начинает свой путь во frontend разработку и готов начать работать со свои первым Frontend фреймворком. От вас требуется знание HTML и CSS, так как мы будем с нуля верстать наши проекты и конечно же JavaScript. Начальное знание TypeScript будет плюсом, так как второе приложение мы уже будет переводить на TypeScript.
Курс будет максимально практическим, ведь всю теорию мы разбираем прямо во время создания наших проектов применяя полученные знания на практике. Мы не используем банальные ToDo приложения, а работаем с реальными API и приближенными к реальности проектами. Так же для курса было сделано большое число упражнений, которые позволят вас закрепить полученные знания, дорабатывая созданные в курсе проекты.
Требования
Что нужно для старта
- Знание JavaScript, будет плюсом знакомство с TypeScript
Результат
Что вы получите
- Знать как работет React под капотом
- Использовать React Hooks
- Писать свои хуки
- Работать с контекстом
- Использовать React с TypeScript
- Делать запросы к API
- Обрабатывать загрузки и ошибки
- Работать с Redux Toolkit
- Использовать React Router
- Работать с asyncThunk
Аудитория
Для кого этот курс
- Курс подойдёт тем, кто хочет изучить React с нуля или структурировать свои знания и разобраться в React Router или Redux
Содержание
16 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- React и Redux
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройки VSCode
- Установка Node.js
- О работе NVM
- Создание проекта
03Компоненты
- Обзор проекта
- Настройка eslint
- Что такое компоненты
- JSX
- React Fragment
- Декларативное описание
- Создание первого компонента
- Стилизация
- Динамические данные
- Props
- Упражнение - Вывод даты
- Композиция
- Тест - Компоненты
04События и состояние
- Обработка событий
- Отрисовка компонент
- useState
- Декомпозиция на компоненты
- Упражнение - Вёрстка layout
- Работа с SVG
- Работа с input
- Управляемые контролы
- Отправка формы
- Statefull и Stateless
- Особенности useState
- Тест - События и состояние
05Отображение данных
- Работа со списком данных
- Упражнение - Добавление элементов
- Key в списках
- Отображение по условию
- React Dev Tools
- Отладка приложения
- Тест - Отображение данных
06Стилизация
- Изменение стилей
- Динамические классы
- CSS модули
- Библиотека classnames
- Упражнение - стилизация формы
- Тест - Стилизация
07Другие hooks
- Side Effects
- useEffect
- Зависимости эффекта
- Очистка эффекта
- useReducer
- Использование useReducer
- Упражнение - Очистка формы
- Exhaustive-deps
- useRef
- forwardRef
- Создание своего hook
- Правила hooks
- Тест - Другие hooks
08Контекст
- Зачем нужен Context API
- Создание контекста
- useContext
- Методы в контексте
- Custom context
- Упражнение - работа контекста
- Ограничения контекста
- Тест - Контекст
09Работа React
- Как работает React
- Пример работы
- Ререндер дочерних компонент
- Memo
- useCallback
- Планировщик state
- Batching
- useMemo
- Упражнение - Просмотр записи
- Упражнение - Удаление записи
- Тест - Работа React
10Переход на TypeScript
- Вводное видео
- Обзор проекта
- Создание проекта
- Типизация компонент
- Типизация hooks и событий
- Подготовка стилей проекта
- Упражнение - Создание кнопки и input
- Тест - Переход на TypeScript
11React Router
- О роутинге
- Создание роутов
- createBrowserRouter
- Link
- Outlet
- Упражнение - Создание Layout
- useLocation
- NavLink
- Упражнение - Заголовок и поиск
- Упражнение - Карточка товара
- Роуты с параметрами
- Тест - React Router
12Взаимодействие с сервером
- Работа с Insomnia
- Создание запросов
- Подключение axios
- Обработка загрузки
- Обработка ошибок
- loader
- errorElement
- lazy
- Suspense
- defer и Await
- Тест - Взаимодействие с сервером
13Авторизация
- Создание layout входа
- Упражнение - Форма логина
- Получение токена
- Работа JWT
- Приватные Routes
- Хранение в localstorage
- Тест - Авторизация
14Redux Toolkit
- Что такое Redux
- Создание хранилища
- Slice пользователя
- Первый action
- Хранение данных
- Запросы в actions
- Обработка ошибок
- Упражнение - Профиль пользователя
- Упражнение - Регистрация
- Корзина товаров
- Тест - Redux Toolkit
15Завершение проекта
- Упражнение - Поиск товаров
- Компонент корзины
- Редактирование корзины
- Упражнение - Хранение корзины
- Расчёт суммы
- Покупка товаров
16Заключение
- Куда дальше?
01Введение
- React и Redux
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройки VSCode
- Установка Node.js
- О работе NVM
- Создание проекта
03Компоненты
- Обзор проекта
- Настройка eslint
- Что такое компоненты
- JSX
- React Fragment
- Декларативное описание
- Создание первого компонента
- Стилизация
- Динамические данные
- Props
- Упражнение - Вывод даты
- Композиция
- Тест - Компоненты
04События и состояние
- Обработка событий
- Отрисовка компонент
- useState
- Декомпозиция на компоненты
- Упражнение - Вёрстка layout
- Работа с SVG
- Работа с input
- Управляемые контролы
- Отправка формы
- Statefull и Stateless
- Особенности useState
- Тест - События и состояние
05Отображение данных
- Работа со списком данных
- Упражнение - Добавление элементов
- Key в списках
- Отображение по условию
- React Dev Tools
- Отладка приложения
- Тест - Отображение данных
06Стилизация
- Изменение стилей
- Динамические классы
- CSS модули
- Библиотека classnames
- Упражнение - стилизация формы
- Тест - Стилизация
07Другие hooks
- Side Effects
- useEffect
- Зависимости эффекта
- Очистка эффекта
- useReducer
- Использование useReducer
- Упражнение - Очистка формы
- Exhaustive-deps
- useRef
- forwardRef
- Создание своего hook
- Правила hooks
- Тест - Другие hooks
08Контекст
- Зачем нужен Context API
- Создание контекста
- useContext
- Методы в контексте
- Custom context
- Упражнение - работа контекста
- Ограничения контекста
- Тест - Контекст
09Работа React
- Как работает React
- Пример работы
- Ререндер дочерних компонент
- Memo
- useCallback
- Планировщик state
- Batching
- useMemo
- Упражнение - Просмотр записи
- Упражнение - Удаление записи
- Тест - Работа React
10Переход на TypeScript
- Вводное видео
- Обзор проекта
- Создание проекта
- Типизация компонент
- Типизация hooks и событий
- Подготовка стилей проекта
- Упражнение - Создание кнопки и input
- Тест - Переход на TypeScript
11React Router
- О роутинге
- Создание роутов
- createBrowserRouter
- Link
- Outlet
- Упражнение - Создание Layout
- useLocation
- NavLink
- Упражнение - Заголовок и поиск
- Упражнение - Карточка товара
- Роуты с параметрами
- Тест - React Router
12Взаимодействие с сервером
- Работа с Insomnia
- Создание запросов
- Подключение axios
- Обработка загрузки
- Обработка ошибок
- loader
- errorElement
- lazy
- Suspense
- defer и Await
- Тест - Взаимодействие с сервером
13Авторизация
- Создание layout входа
- Упражнение - Форма логина
- Получение токена
- Работа JWT
- Приватные Routes
- Хранение в localstorage
- Тест - Авторизация
14Redux Toolkit
- Что такое Redux
- Создание хранилища
- Slice пользователя
- Первый action
- Хранение данных
- Запросы в actions
- Обработка ошибок
- Упражнение - Профиль пользователя
- Упражнение - Регистрация
- Корзина товаров
- Тест - Redux Toolkit
15Завершение проекта
- Упражнение - Поиск товаров
- Компонент корзины
- Редактирование корзины
- Упражнение - Хранение корзины
- Расчёт суммы
- Покупка товаров
16Заключение
- Куда дальше?
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Основы React, React Router и Redux Toolkit» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
