Перша лекція присвячена аналізу переходу від статичного HTML до динамічних веб-інтерфейсів. Розглядається концепція Single Page Application (SPA) та порівняння імперативного підходу (DOM API) з декларативним, який пропонує React. Важливим аспектом є розуміння того, що React не є фреймворком у класичному розумінні, а бібліотекою, яка фокусується на рівні представлення (View). Обговорюється історія створення бібліотеки компанією Facebook та її вплив на індустрію через впровадження компонентно-орієнтованої архітектури.
Детальне вивчення алгоритмів, що забезпечують високу продуктивність React. Розглядається структура Virtual DOM як абстракції над реальним DOM-деревом. Аналізується алгоритм Reconciliation, який дозволяє React мінімізувати кількість операцій з реальним DOM шляхом обчислення різниці (diffing) між станами. Це критично для розуміння того, як React досягає ефективного оновлення інтерфейсу при зміні великих масивів даних.
Аналіз екосистеми Node.js, менеджерів пакетів (npm, yarn, pnpm) та систем збірки. Особлива увага приділяється Vite як сучасному стандарту, що замінив Create React App, завдяки використанню Native ESM та швидкій гарячій заміні модулів (HMR). Студенти вивчають роль Babel у трансляції сучасного JavaScript (ES6+) та SWC як високопродуктивної альтернативи.
Вивчення JavaScript XML (JSX) як синтаксичного розширення, що дозволяє описувати структуру інтерфейсу всередині JavaScript-коду. Розглядається процес перетворення JSX у виклики React.createElement, правила вкладеності, використання виразів у фігурних дужках та відмінності між атрибутами HTML та пропсами JSX (наприклад, className замість class).
Перехід від класових компонентів до функціональних як сучасного стандарту розробки. Розглядається концепція “чистих функцій” у контексті компонентів. Вивчення механізму передачі даних через пропси, їх незмінності (read-only) та односпрямованого потоку даних (one-way data flow), що є ключовим для передбачуваності стану додатка.
Введення в систему хуків React. Детальне вивчення useState: синтаксис, ініціалізація та асинхронна природа оновлення стану. Обговорюється проблема пакетного оновлення (batching) та правила використання хуків (Rules of Hooks), такі як виклик тільки на верхньому рівні функцій.
Вивчення системи синтетичних подій (Synthetic Events), які забезпечують кросбраузерну сумісність. Порівняння керованих (controlled) та некерованих (uncontrolled) компонентів форм. Розглядається використання useRef для доступу до DOM-елементів у специфічних сценаріях, таких як інтеграція зі сторонніми бібліотеками.
Аналіз етапів життєвого циклу компонента: монтування, оновлення та розмонтування. Вивчення хука useEffect як універсального інструменту для роботи з побічними ефектами (side effects), такими як мережеві запити, підписки або маніпуляції з таймерами. Розглядається масив залежностей та функція очищення (cleanup function) для запобігання витоку пам’яті.
Методи ітерації по масивах даних для генерації списків компонентів. Важливість атрибута key для алгоритму дифінгу React та наслідки використання індексів масиву як ключів. Розглядаються патерни умовного рендерингу за допомогою логічних операторів (&&) та тернарних операторів для створення гнучких інтерфейсів.
Вивчення механізмів мемоїзації для запобігання зайвим обчисленням та рендерингам. Аналіз випадків, коли використання цих хуків є виправданим, а коли — надлишковим. Розглядається React.memo як засіб поверхневого порівняння пропсів для компонентів.
Вирішення проблеми “prop drilling” (прокидання пропсів через багато рівнів). Створення контексту, використання Provider та хука useContext. Обговорюються обмеження контексту в контексті частого оновлення даних та сценарії, коли варто використовувати зовнішні бібліотеки керування станом, такі як Redux або Zustand.
Навчитися аналізувати архітектуру власного React-додатку, виявляти недоліки односпрямованого потоку даних (Prop Drilling) та обґрунтовано обирати інструменти для глобального керування станом.
Концепція клієнтської маршрутизації. Налаштування BrowserRouter, Routes та Route. Вивчення динамічних параметрів шляху (useParams), вкладених маршрутів (nested routes) та програмної навігації (useNavigate).
Методи отримання даних з сервера за допомогою fetch та axios. Обробка станів завантаження (loading) та помилок (error). Патерни інтеграції API запитів у хук useEffect та створення кастомних хуків для фетчингу даних.
Впровадження TypeScript у розробку React-додатків. Типізація пропсів, станів, подій та рефів. Переваги статичної типізації для великих команд та проєктів, що корелює з вимогами до якості ПЗ у комп’ютерних науках.
Важливість тестування для забезпечення стабільності систем. Вивчення Jest та React Testing Library для тестування компонентів з точки зору користувача. Огляд інструментів для наскрізного тестування (Playwright, Cypress) та їх роль у CI/CD процесах.
Огляд підходів до стилізації: CSS Modules, CSS-in-JS (Styled Components) та Utility-first CSS (Tailwind CSS). Розглядається роль бібліотек компонентів, таких як Material UI або Ant Design, у прискоренні розробки корпоративних систем.
Огляд фреймворку Next.js як розширення можливостей React. Порівняння стратегій рендерингу: Static Site Generation (SSG), Server-Side Rendering (SSR) та Incremental Static Regeneration (ISR). Вивчення концепції React Server Components (RSC) як майбутнього веб-розробки.
Процес розгортання додатків на платформах Vercel, Netlify або AWS. Розглядаються питання безпеки (XSS, CSRF) та етичні аспекти використання ШІ (GitHub Copilot, ChatGPT) у процесі написання коду, що є актуальним згідно з опитуваннями 2024 року.
На практиці студенти ініціалізують проєкти, налаштовують ESLint та Prettier, а також відпрацьовують флоу роботи з гілками в Git.
Відпрацювання методів map, filter та reduce для підготовки даних до відображення в React-компонентах.
Створення складних інтерфейсів, що змінюються залежно від стану (наприклад, багаторівневі меню або таби).
Реалізація кастомної логіки валідації для форм без використання зовнішніх бібліотек для глибокого розуміння процесів.
Практична задача з декомпозиції складного макета на дрібні, перевикористовувані модулі.
Використання React DevTools та точок зупинки (breakpoints) у браузері для пошуку помилок у стані та пропсах.
Створення динамічних посилань та обробка фільтрів пошуку через Query String.
Створення кастомних хуків для повторного використання логіки (наприклад, хук для визначення розміру вікна або стану онлайн/офлайн).
Використання панелі Profiler у React DevTools для ідентифікації “важких” компонентів та їх оптимізації.
Використання атомарного дизайну для створення кнопок, інпутів та карток.
Робота з реальними даними, впровадження списків та ключів. Мета: Реалізувати компонент “Стрічка новин” (News Feed) або “Список товарів”, використовуючи масив об’єктів (JSON). Навчитися використовувати метод map() для генерації інтерфейсу та зрозуміти важливість пропа key для алгоритму Reconciliation.
Робота з локальним станом для забезпечення миттєвого відгуку інтерфейсу на дії користувача.
Впровадження React Router та створення сторінок профілю та налаштувань.
Реалізація форм входу/реєстрації та захищених маршрутів (Protected Routes) за допомогою Context API.
Використання JSONPlaceholder або власного бекенду для синхронізації даних додатку.
Повний рефакторинг коду лабораторних робіт з додаванням типізації для підвищення надійності системи.
Покриття основних функцій додатку (наприклад, додавання коментаря або зміна профілю) юніт-тестами.
Оптимізація бандлу та розміщення проєкту в мережі Інтернет з налаштуванням CI/CD пайплайну.
Самостійне вивчення App Router, Server Actions та методів оптимізації зображень.
Глибоке занурення в інтеграційне тестування та мокінг API за допомогою MSW (Mock Service Worker).
Порівняльний аналіз Redux Toolkit та Zustand. Реалізація невеликого модуля з використанням однієї з бібліотек.
Наприклад, хук для роботи з WebSockets або IndexedDB.
Написання документації, підготовка презентації та проведення фінального тестування розробленого додатка.