Видеокурс

React + Redux Toolkit: Полный курс

уровень intermediate
5 (3)

Курс охватывает все ключевые аспекты React. Вы научитесь работать с хуками, организовывать маршруты, управлять состоянием через Redux Toolkit, обрабатывать формы и использовать библиотеки для стилизации. Отличный выбор для тех, кто хочет уверенно перейти от основ к реальным проектам.

Этот курс охватывает все ключевые аспекты разработки на React. Вы начнёте с основ — компонентов, JSX, props, рендеринга списков и обработки событий. Затем перейдёте к хукам (useState, useEffect, useMemo, useCallback, useReducer), созданию собственных хуков и оптимизации производительности.

Отдельный модуль посвящён React Router — от динамических маршрутов до защищённых страниц. Вы также освоите работу с формами при помощи React Hook Form, валидацию с использованием Yup и управление инпутами.

В разделе стилизации вы познакомитесь с CSS Modules, SCSS, Tailwind CSS и Material UI. Заключительная часть курса посвящена управлению состоянием с помощью Redux Toolkit — с практикой использования DevTools, createAsyncThunk и middleware.

После прохождения курса вы сможете создавать полноценные SPA-приложения, готовые к работе в продакшне

-20%3 300 ₴
2 640 ₴
12
12
24
12
9 часов видео
65 занятий
49 тестов
36 практических заданий
6 домашек с проверкой
язык курса украинский
  • Владислав Продан
    Владислав Продан Front-End Developer

Изучается на курсе

Огляд курсу React.js • 1 занятие

  • 1

    Знайомство та огляд модуля

    Бесплатно
    • Видео2 мин • смотреть видео

Основи React • 13 занятий

  • 2

    Огляд модуля

    Бесплатно
    • Видео1 мин • смотреть видео
  • 3

    Встановлення та налаштування React-проєкту

    Бесплатно
    • Видео5 мин • смотреть видео
    • Конспект
    • Практика
  • 4

    Огляд файлової структури React-додатку

    Бесплатно
    • Видео4 мин • смотреть видео
    • Конспект
  • 5

    Основи створення компонентів у React

    Бесплатно
    • Видео6 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 6

    Використання JSX у компонентах

    • Видео6 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 7

    Використання props для передачі даних

    • Видео13 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 8

    Передача вкладених елементів через children

    • Видео3 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 9

    Умовний рендеринг у React

    • Видео7 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 10

    Відображення списків елементів

    • Видео3 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 11

    Використання key при рендерингу списків

    • Видео9 мин • смотреть видео
    • Конспект
    • Тест
  • 12

    Обробка подій у React

    • Видео5 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 13

    SyntheticEvent та його особливості

    • Видео4 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 14

    Використання Fragment у React

    • Видео7 мин • смотреть видео
    • Конспект
    • Тест
    • Практика

React Hooks • 15 занятий

  • 15

    Огляд модуля

    • Видео2 мин • смотреть видео
  • 16

    Вступ до хуків у React

    • Видео4 мин • смотреть видео
    • Конспект
    • Тест
  • 17

    Використання useState для стану компонентів

    • Видео13 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
    • Домашка
  • 18

    Практична робота з useState

    • Видео44 мин • смотреть видео
    • Конспект
  • 19

    Основні правила використання хуків

    • Видео2 мин • смотреть видео
    • Конспект
    • Тест
  • 20

    Використання useEffect для побічних ефектів

    • Видео10 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 21

    Практична робота з useEffect

    • Видео13 мин • смотреть видео
    • Конспект
  • 22

    Використання Context API та useContext

    • Видео13 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 23

    Використання useReducer для складних станів

    • Видео16 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 24

    Оптимізація з React.memo

    • Видео11 мин • смотреть видео
    • Конспект
    • Тест
  • 25

    Мемоізація обчислень за допомогою useMemo

    • Видео8 мин • смотреть видео
    • Конспект
    • Тест
  • 26

    Оптимізація колбеків з useCallback

    • Видео3 мин • смотреть видео
    • Конспект
    • Тест
  • 27

    Використання useRef у React

    • Видео8 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 28

    Оптимізація роботи з Context у React

    • Видео10 мин • смотреть видео
    • Конспект
  • 29

    Створення власних custom hooks

    • Видео15 мин • смотреть видео
    • Конспект
    • Тест
    • Практика

React Router • 10 занятий

  • 30

    Огляд модуля

    • Видео1 мин • смотреть видео
  • 31

    Основи роботи з React Router

    • Видео12 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 32

    Динамічні маршрути та параметри

    • Видео9 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 33

    Використання вкладених маршрутів

    • Видео3 мин • смотреть видео
    • Конспект
  • 34

    Створення Layout та використання Outlet

    • Видео4 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 35

    Захищені маршрути у React

    • Видео8 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 36

    Ліниве завантаження з React.lazy та Suspense

    • Видео5 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 37

    Навігація між сторінками з useNavigate

    • Видео10 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 38

    Отримання інформації про шлях за допомогою useLocation

    • Видео9 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 39

    Робота з рядком запиту через useSearchParams

    • Видео13 мин • смотреть видео
    • Конспект
    • Тест
    • Домашка

Робота з формами • 6 занятий

  • 40

    Огляд модуля

    • Видео1 мин • смотреть видео
  • 41

    Основні проблеми роботи з формами без бібліотек

    • Видео5 мин • смотреть видео
    • Конспект
    • Тест
  • 42

    Використання бібліотеки React Hook Form

    • Видео9 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 43

    Використання useForm для керування формою

    • Видео11 мин • смотреть видео
    • Конспект
    • Тест
  • 44

    Контролювання інпутів за допомогою Controller

    • Видео11 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 45

    Валідація форм із використанням Yup

    • Видео15 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
    • Домашка

Просунутий React • 8 занятий

  • 46

    Огляд модуля

    • Видео1 мин • смотреть видео
  • 47

    Використання useActionState у React

    • Видео10 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 48

    Оптимізація оновлень стану за допомогою useTransition

    • Видео7 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 49

    Використання useOptimistic у React

    • Видео7 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 50

    Використання експериментального хука use()

    • Видео6 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 51

    Використання useFormStatus для стану форми

    • Видео6 мин • смотреть видео
    • Конспект
    • Тест
  • 52

    Відкладені обчислення з useDeferredValue

    • Видео9 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 53

    Генерація унікальних ідентифікаторів з useId

    • Видео3 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
    • Домашка

Стилізація та UI • 6 занятий

  • 54

    Огляд модуля

    • Видео1 мин • смотреть видео
  • 55

    Використання CSS та SCSS у React

    • Видео7 мин • смотреть видео
    • Конспект
    • Тест
  • 56

    Використання CSS Modules та SCSS Modules

    • Видео9 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 57

    Використання CSS-in-JS бібліотек

    • Видео6 мин • смотреть видео
    • Конспект
    • Тест
  • 58

    Стилізація компонентів за допомогою Tailwind CSS

    • Видео6 мин • смотреть видео
    • Конспект
    • Тест
  • 59

    Використання Material-UI у React

    • Видео11 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
    • Домашка

Керування станом • 6 занятий

  • 60

    Огляд модуля

    • Видео1 мин • смотреть видео
  • 61

    Основи стейт-менеджменту в React

    • Видео4 мин • смотреть видео
    • Конспект
    • Тест
  • 62

    Використання Redux Toolkit для керування станом

    • Видео10 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
  • 63

    Використання Redux DevTools для відладки

    • Видео8 мин • смотреть видео
    • Конспект
  • 64

    Використання createAsyncThunk у Redux Toolkit

    • Видео15 мин • смотреть видео
    • Конспект
    • Тест
    • Практика
    • Домашка
  • 65

    Практична робота з Redux Toolkit

    • Видео21 мин • смотреть видео

После прохождения курса вы получите сертификат

-20%3 300 ₴
2 640 ₴
12
12
24
12

Можешь попробовать курс, прежде чем платить

Каждый урок в Hillel Max – это чёткий и простой план. Удобный и понятный путь к знаниям. Сначала ты смотришь короткое видео, потом работаешь с примерами и теорией, рабочими материалами. Чтобы закрепить знания, ты проходишь тест или выполняешь практическое задание. И на финал – можешь проверить себя и усвоенное, просмотрев готовый видеоразбор этой практики от наших экспертов.

Смотри видеоуроки, когда удобно

Учись в своём темпе — без давления и дедлайнов. Перематывай, останавливай, возвращайся к сложным темам или пропускай уже знакомые и выбирай именно ту тему, которая тебе нужна здесь и сейчас.

Имей крепкую теорию под рукой

Чёткие и понятные объяснение помогут систематизировать знания. Каждую тему мы разбили на удобные блоки с примерами и ключевыми моментами для лучшего усвоения.

Практикуйся на реальных задачах и тестах

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

Выбрать курс
Возможностей
Обучения
Знаний
Практики
Возможностей
Обучения
Знаний
Практики
Bonuses block background image

Получи бонусы
за обучение

Получи XP за обучение
Выполняй ежедневные задания
Закрывай недельные отрезки
Собирай награды
Качай уровень
Получай бонусы, на которые можно купить следующий курс
Gift