Перейти до контенту

fullstack.org.ua

Навчання Статті Практика Інструменти Roadmaps

Пошук

Пошук уроків, статей та іншого контенту

fullstack.org.ua

Українська освітня платформа для розробників: курси, статті, практика та інструменти.

Навчання Статті Практика Інструменти Roadmaps

© 2026 fullstack.org.ua

Політика конфіденційності Умови використання

Навчання / React

React

Середній

Бібліотека для побудови інтерфейсів: компоненти, хуки, стан та робота з даними.

140 уроків · ~31 год

Передумови: JavaScript, HTML & CSS

Вступ до React

Що таке React і навіщо він потрібен12 хв
React vs Vanilla JavaScript10 хв
SPA та компонентний підхід14 хв
Створення React-проєкту з Vite7 хв
Структура React-проєкту14 хв
JSX: синтаксис та основи11 хв
JSX Expressions та JavaScript у JSX11 хв
JSX: умовний рендеринг та списки13 хв
React Developer Tools14 хв

Компоненти та Props

React-компоненти: структура та роль у застосунку13 хв
Function Components: створення функціональних компонентів10 хв
Props: передача даних між компонентами10 хв
Деструктуризація Props та Default Values10 хв
Передача функцій через Props13 хв
children та композиція компонентів13 хв
Component Composition: гнучка побудова інтерфейсу15 хв
Props vs State: вхідні дані та внутрішній стан14 хв
Ключі (key) при рендерингу списків12 хв
Організація компонентів у проєкті21 хв

State та взаємодія з користувачем

Що таке State у React11 хв
Хук useState7 хв
Оновлення State9 хв
State та асинхронність11 хв
Об’єкти у State10 хв
Масиви у State10 хв
Immutability у React14 хв
Обробка подій у React11 хв
Форми та контрольовані компоненти12 хв
Lifting State Up12 хв
Derived State14 хв
Коли State потрібен, а коли ні20 хв

Hooks

Що таке Hooks11 хв
useState: локальний стан компонента10 хв
Правила використання Hooks12 хв
useEffect: побічні ефекти та залежності12 хв
useRef: посилання та змінні між рендерами9 хв
useContext: спільні дані без prop drilling13 хв
useReducer: керування складним станом14 хв
useMemo: мемоізація обчислень13 хв
useCallback: стабільні функції14 хв
Оптимізація рендерингу за допомогою Hooks18 хв
Custom Hooks: повторне використання логіки13 хв
Створення власного Hook на практиці13 хв
Як правильно вибирати Hook20 хв

Архітектура React-застосунку

Дерево компонентів React-застосунку16 хв
Контейнерні та презентаційні компоненти13 хв
Контрольовані та неконтрольовані компоненти10 хв
Композиція компонентів проти prop drilling13 хв
Context як спосіб передачі даних14 хв
Патерн Compound Components17 хв
Локалізація стану компонентів15 хв
Feature-based структура React-проєкту12 хв
Розділення UI та бізнес-логіки15 хв
Проєктування повторно використовуваних компонентів14 хв
Design Patterns у React21 хв

Робота з даними та API

Fetch API у React12 хв
Loading, Error та Success States10 хв
Отримання даних у useEffect8 хв
Робота з REST API11 хв
POST, PUT, PATCH та DELETE14 хв
AbortController та скасування запитів12 хв
Власний хук для роботи з API10 хв
Optimistic UI10 хв
Pagination14 хв
Infinite Scroll11 хв
Server State vs Client State16 хв
Кешування даних14 хв
TanStack Query26 хв

Forms та валідація

Controlled та Uncontrolled Forms9 хв
Робота з Input, Select та Textarea9 хв
Обробка Submit8 хв
Валідація форм13 хв
Client-side vs Server-side Validation19 хв
React Hook Form11 хв
Zod та TypeScript15 хв
Складні форми17 хв
Dynamic Fields16 хв
File Upload11 хв
Асинхронна валідація та серверні помилки14 хв
Практична форма реєстрації18 хв

React Router та навігація

Маршрутизація в SPA10 хв
React Router: встановлення та налаштування7 хв
Routes та Links9 хв
Динамічні маршрути9 хв
Вкладені маршрути11 хв
Параметри URL10 хв
Query-параметри URL13 хв
Навігація через код9 хв
Захищені маршрути11 хв
Маршрути з layout11 хв
404 та сторінки помилок13 хв
Code Splitting на рівні маршрутів13 хв

React та TypeScript

Типізація React-компонентів13 хв
Типізація Props12 хв
Типізація children11 хв
Типізація Events13 хв
Типізація useState, useRef та useReducer17 хв
Типізація Forms15 хв
Типізація Custom Hooks17 хв
Типізація Context11 хв
Generics у React21 хв
Типізація API Response12 хв
Типові помилки TypeScript у React20 хв

Тестування React

Навіщо тестувати React-застосунки13 хв
Vitest: налаштування та перші тести9 хв
React Testing Library: рендеринг компонентів10 хв
Queries та Assertions у тестах12 хв
Тестування компонентів13 хв
Тестування Events11 хв
Тестування Forms15 хв
Тестування async UI14 хв
Mocking API у React-тестах13 хв
Integration Testing React-застосунків15 хв
Організація та підтримка тестів19 хв
Що тестувати, а що ні16 хв

Продуктивність та Advanced React

Як React рендерить компоненти12 хв
Re-render та reconciliation15 хв
Virtual DOM9 хв
React Fiber: загальний принцип15 хв
Мемоізація компонентів за допомогою memo14 хв
useMemo та useCallback на практиці13 хв
Пошук зайвих ререндерів18 хв
React DevTools Profiler15 хв
Code Splitting12 хв
Lazy Loading11 хв
Suspense для асинхронного завантаження12 хв
Error Boundaries8 хв
Concurrent Rendering17 хв
useTransition для пріоритизації оновлень11 хв
useDeferredValue для плавного інтерфейсу12 хв
Performance Best Practices21 хв

Сучасний React

React Server Components: концепція16 хв
Server Components vs Client Components15 хв
Директива "use client"12 хв
Server Actions: концепція16 хв
Suspense та Streaming15 хв
React 19: сучасний підхід14 хв
Хук use для промісів і контексту12 хв
Actions та form actions18 хв
Optimistic UI з сучасним React12 хв

Пов'язані технології