Відеокурс

React + Redux Toolkit: Повний курс

рівень intermediate
5 (3)

Повний гайд по React: від основ до найновіших API та бібліотек. Ви розберетесь, як працює React під капотом, навчитеся використовувати хуки, керувати станом, створювати форми, налаштовувати маршрутизацію та оптимізовувати продуктивність. Ідеально для тих, хто хоче перейти від теорії до впевненого продакшену.

Цей курс охоплює всі ключові аспекти розробки на 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