Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиFrontend розробка / Основи ReactJS

Основи ReactJS

Вигляд:

Модуль 1. Вступ до React

1

Що таке React?

Знайомство з бібліотекою React та її основними можливостями.

2

Встановлення середовища розробки

Налаштування Node.js, npm та редактора коду.

3

Створення проекту з Vite

Швидке створення React проекту за допомогою Vite.

4

Структура React проекту

Розбираємо файли та папки в React проекті.

5

Перший компонент

Створюємо та відображаємо перший React компонент.

Модуль 2. JSX

6

Що таке JSX?

Вивчаємо синтаксис JSX та його переваги.

7

JSX вирази

Використання JavaScript виразів у JSX.

8

Атрибути в JSX

Робота з атрибутами та className.

9

Умовний рендеринг в JSX

Відображення елементів за умовою.

10

Фрагменти

Групування елементів без додаткових DOM вузлів.

Модуль 3. Компоненти

11

Функціональні компоненти

Створення компонентів за допомогою функцій.

12

Композиція компонентів

Об'єднання компонентів для створення інтерфейсу.

13

Імпорт та експорт компонентів

Організація компонентів у окремих файлах.

14

Children props

Передача вмісту між тегами компонента.

15

Компонентна архітектура

Принципи побудови компонентної структури.

16

Найкращі практики компонентів

Правила написання чистих компонентів.

Модуль 4. Props

17

Передача props

Основи передачі даних у компоненти.

18

Деструктуризація props

Зручний доступ до властивостей props.

19

Props за замовчуванням

Встановлення значень за замовчуванням.

20

PropTypes валідація

Перевірка типів props у компонентах.

21

Передача функцій через props

Callback функції як props.

22

Spread оператор для props

Передача всіх властивостей об'єкта як props.

Модуль 5. State та useState

23

Концепція стану

Що таке стан та навіщо він потрібен.

24

Хук useState

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

25

Оновлення стану

Правила оновлення стану в React.

26

Стан з об\

Керування складним станом з об'єктами.

27

Стан з масивами

Робота з масивами у стані компонента.

28

Підняття стану (Lifting State Up)

Спільний стан для кількох компонентів.

29

Контрольовані компоненти

Керування значеннями форм через стан.

Модуль 6. Обробка подій

30

Синтетичні події React

Система подій у React.

31

Обробники подій

Створення функцій-обробників подій.

32

Передача аргументів в обробники

Передача додаткових даних в обробники.

33

Запобігання дефолтній поведінці

preventDefault та stopPropagation.

34

Делегування подій

Ефективна обробка подій для списків.

Модуль 7. Списки та ключі

35

Рендеринг списків

Відображення колекцій даних.

36

Метод map()

Трансформація масивів у JSX елементи.

37

Ключі (keys)

Важливість унікальних ключів для списків.

38

Фільтрація та сортування списків

Динамічна робота зі списками.

Модуль 8. Форми

39

Контрольовані форми

Керування формами через стан React.

40

Обробка текстових полів

Input та обробка введення тексту.

41

Select та textarea

Робота з випадаючими списками та textarea.

42

Checkbox та radio

Обробка чекбоксів та радіокнопок.

43

Валідація форм

Перевірка даних перед відправкою.

44

Бібліотека React Hook Form

Спрощення роботи з формами.

Модуль 9. useEffect

45

Побічні ефекти

Що таке side effects у React.

46

Хук useEffect

Використання useEffect для ефектів.

47

Масив залежностей

Контроль виконання ефектів.

48

Очищення ефектів

Cleanup функція в useEffect.

49

Завантаження даних

Fetch API в useEffect.

50

Обробка помилок при fetch

Error handling та loading states.

Модуль 10. Context API

51

Проблема prop drilling

Навіщо потрібен Context API.

52

createContext

Створення контексту в React.

53

useContext хук

Споживання контексту в компонентах.

54

Провайдери та споживачі

Архітектура Context API.

Модуль 11. React Router

55

Встановлення React Router

Налаштування маршрутизації в проекті.

56

Базова маршрутизація

Routes, Route та Link компоненти.

57

Параметри маршруту

Динамічні сегменти URL.

58

Вкладені маршрути

Nested routes та Outlet.

Модуль 12. Практика та збірка

59

Оптимізація продуктивності

React.memo, useMemo та useCallback.

60

Збірка та деплой React додатку

Build та розгортання на хостинг.

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів