| Найменування показників | Галузь знань, спеціальність, ступінь вищої освіти | Характеристика навчальної дисципліни |
|---|---|---|
| Денна форма навчання | ||
| Кількість кредитів - 4 |
Галузь: 12 Інформаційні технології Спеціальність або освітня програма: 122 Комп'ютерні науки |
Статус дисципліни нормативна |
| Залікових модулів - 1 | Рік підготовки | |
| Змістових модулів - 4 | 4 | |
| Загальна кількість годин - 120 | Семестр | |
| 8 | ||
| Лекції (год.) | ||
| 36 | ||
|
Тижневих годин для денної форми навчання: аудиторних: 8 семестр – 3 години |
Ступінь вищої освіти: бакалавр |
Практичні, семінарські (год.) |
| 18 | ||
| Лабораторні (год.) | ||
| 18 | ||
| Самостійна робота (год.) | ||
| 48 | ||
| Індивідуальне завдання (год.) | ||
| — | ||
| Вид контролю: | ||
| Залік |
Метою дисципліни є формування у студентів теоретичних знань і практичних навичок розробки сучасних веб-застосунків з використанням бібліотеки React. Дисципліна охоплює концепції компонентного підходу, управління станом, маршрутизації, інтеграції з API та оптимізації продуктивності веб-застосунків. Курс спрямований на підготовку студентів до розробки інтерактивних, масштабованих та ефективних веб-інтерфейсів, використовуючи сучасний технологічний стек, зокрема React, React Router, Zustand/Redux, TypeScript, Next.js та інші інструменти екосистеми React.
Програма навчальної дисципліни складається з 4 змістових модулів
Тема 1. Еволюція веб-технологій та місце React у сучасній розробці
Перша лекція присвячена аналізу переходу від статичного HTML до динамічних веб-інтерфейсів. Розглядається концепція Single Page Application (SPA) та порівняння імперативного підходу (DOM API) з декларативним, який пропонує React. Важливим аспектом є розуміння того, що React не є фреймворком у класичному розумінні, а бібліотекою, яка фокусується на рівні представлення (View). Обговорюється історія створення бібліотеки компанією Facebook та її вплив на індустрію через впровадження компонентно-орієнтованої архітектури.
Тема 2. Механізми роботи React: Virtual DOM та Reconciliation
Детальне вивчення алгоритмів, що забезпечують високу продуктивність React. Розглядається структура Virtual DOM як абстракції над реальним DOM-деревом. Аналізується алгоритм Reconciliation, який дозволяє React мінімізувати кількість операцій з реальним DOM шляхом обчислення різниці (diffing) між станами. Це критично для розуміння того, як React досягає ефективного оновлення інтерфейсу при зміні великих масивів даних.
Тема 3. Середовище розробки та сучасний інструментарій (Tooling)
Аналіз екосистеми Node.js, менеджерів пакетів (npm, yarn, pnpm) та систем збірки. Особлива увага приділяється Vite як сучасному стандарту, що замінив Create React App, завдяки використанню Native ESM та швидкій гарячій заміні модулів (HMR). Студенти вивчають роль Babel у трансляції сучасного JavaScript (ES6+) та SWC як високопродуктивної альтернативи.
Тема 4. JSX: Синтаксис, обмеження та можливості
Вивчення JavaScript XML (JSX) як синтаксичного розширення, що дозволяє описувати структуру інтерфейсу всередині JavaScript-коду. Розглядається процес перетворення JSX у виклики React.createElement, правила вкладеності, використання виразів у фігурних дужках та відмінності між атрибутами HTML та пропсами JSX (наприклад, className замість class).
Тема 5. Функціональні компоненти та пропси (Props)
Перехід від класових компонентів до функціональних як сучасного стандарту розробки. Розглядається концепція “чистих функцій” у контексті компонентів. Вивчення механізму передачі даних через пропси, їх незмінності (read-only) та односпрямованого потоку даних (one-way data flow), що є ключовим для передбачуваності стану додатка.
Тема 6. Хук useState: Робота з локальним станом
Введення в систему хуків React. Детальне вивчення useState: синтаксис, ініціалізація та асинхронна природа оновлення стану. Обговорюється проблема пакетного оновлення (batching) та правила використання хуків (Rules of Hooks), такі як виклик тільки на верхньому рівні функцій.
Тема 7. Обробка подій та робота з формами
Вивчення системи синтетичних подій (Synthetic Events), які забезпечують кросбраузерну сумісність. Порівняння керованих (controlled) та некерованих (uncontrolled) компонентів форм. Розглядається використання useRef для доступу до DOM-елементів у специфічних сценаріях, таких як інтеграція зі сторонніми бібліотеками.
Тема 8. Життєвий цикл та хук useEffect
Аналіз етапів життєвого циклу компонента: монтування, оновлення та розмонтування. Вивчення хука useEffect як універсального інструменту для роботи з побічними ефектами (side effects), такими як мережеві запити, підписки або маніпуляції з таймерами. Розглядається масив залежностей та функція очищення (cleanup function) для запобігання витоку пам’яті.
Тема 9. Списки, ключі та умовний рендеринг
Методи ітерації по масивах даних для генерації списків компонентів. Важливість атрибута key для алгоритму дифінгу React та наслідки використання індексів масиву як ключів. Розглядаються патерни умовного рендерингу за допомогою логічних операторів (&&) та тернарних операторів для створення гнучких інтерфейсів.
Тема 10. Оптимізація продуктивності: useMemo та useCallback
Вивчення механізмів мемоїзації для запобігання зайвим обчисленням та рендерингам. Аналіз випадків, коли використання цих хуків є виправданим, а коли — надлишковим. Розглядається React.memo як засіб поверхневого порівняння пропсів для компонентів.
Тема 11. Глобальне керування станом: Context API
Вирішення проблеми “prop drilling” (прокидання пропсів через багато рівнів). Створення контексту, використання Provider та хука useContext. Обговорюються обмеження контексту в контексті частого оновлення даних та сценарії, коли варто використовувати зовнішні бібліотеки керування станом, такі як Redux або Zustand.
Тема 12. Маршрутизація у SPA: React Router
Концепція клієнтської маршрутизації. Налаштування BrowserRouter, Routes та Route. Вивчення динамічних параметрів шляху (useParams), вкладених маршрутів (nested routes) та програмної навігації (useNavigate).
Тема 13. Взаємодія з API та асинхронність
Методи отримання даних з сервера за допомогою fetch та axios. Обробка станів завантаження (loading) та помилок (error). Патерни інтеграції API запитів у хук useEffect та створення кастомних хуків для фетчингу даних.
Тема 14. TypeScript у React: Типізація для надійності
Впровадження TypeScript у розробку React-додатків. Типізація пропсів, станів, подій та рефів. Переваги статичної типізації для великих команд та проєктів, що корелює з вимогами до якості ПЗ у комп’ютерних науках.
Тема 15. Тестування React-додатків
Важливість тестування для забезпечення стабільності систем. Вивчення Jest та React Testing Library для тестування компонентів з точки зору користувача. Огляд інструментів для наскрізного тестування (Playwright, Cypress) та їх роль у CI/CD процесах.
Тема 16. Стилізація та дизайн-системи
Огляд підходів до стилізації: CSS Modules, CSS-in-JS (Styled Components) та Utility-first CSS (Tailwind CSS). Розглядається роль бібліотек компонентів, таких як Material UI або Ant Design, у прискоренні розробки корпоративних систем.
Тема 17. Next.js та Server-Side Rendering (SSR)
Огляд фреймворку Next.js як розширення можливостей React. Порівняння стратегій рендерингу: Static Site Generation (SSG), Server-Side Rendering (SSR) та Incremental Static Regeneration (ISR). Вивчення концепції React Server Components (RSC) як майбутнього веб-розробки.
Тема 18. Деплоймент, безпека та етика розробки
Процес розгортання додатків на платформах Vercel, Netlify або AWS. Розглядаються питання безпеки (XSS, CSRF) та етичні аспекти використання ШІ (GitHub Copilot, ChatGPT) у процесі написання коду, що є актуальним згідно з опитуваннями 2024 року.
| Назви змістових модулів і тем | Кількість годин всього |
У тому числі (годин) | ||||
|---|---|---|---|---|---|---|
| лк | пр | лаб | інд | с.р. | ||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Заліковий модуль 1 | ||||||
| Змістовий модуль 1. Основи декларативного програмування та екосистема розробки | ||||||
| Тема 1. Еволюція веб-технологій та місце React у сучасній розробці | 7 | 2 | 2 | — | — | 3 |
| Тема 2. Механізми роботи React: Virtual DOM та Reconciliation | 7 | 2 | — | 2 | — | 3 |
| Тема 3. Середовище розробки та сучасний інструментарій (Tooling) | 9 | 2 | 2 | 2 | — | 3 |
| Тема 4. JSX: Синтаксис, обмеження та можливості | 5 | 2 | — | — | — | 3 |
| Разом за змістовий модуль 1 | 28 | 8 | 4 | 4 | — | 12 |
| Змістовий модуль 2. Компонентна модель та керування станом | ||||||
| Тема 5. Функціональні компоненти та пропси (Props) | 7 | 2 | 2 | — | — | 3 |
| Тема 6. Хук useState: Робота з локальним станом | 7 | 2 | — | 2 | — | 3 |
| Тема 7. Обробка подій та робота з формами | 6 | 2 | — | 2 | — | 2 |
| Тема 8. Життєвий цикл та хук useEffect | 6 | 2 | 2 | — | — | 2 |
| Тема 9. Списки, ключі та умовний рендеринг | 6 | 2 | — | 2 | — | 2 |
| Разом за змістовий модуль 2 | 32 | 10 | 4 | 6 | — | 12 |
| Змістовий модуль 3. Просунуті концепції та архітектурні патерни | ||||||
| Тема 10. Оптимізація продуктивності: useMemo та useCallback | 7 | 2 | 2 | — | — | 3 |
| Тема 11. Глобальне керування станом: Context API | 6 | 2 | — | 2 | — | 2 |
| Тема 12. Маршрутизація у SPA: React Router | 7 | 2 | 2 | — | — | 3 |
| Тема 13. Взаємодія з API та асинхронність | 6 | 2 | — | 2 | — | 2 |
| Тема 14. TypeScript у React: Типізація для надійності | 4 | 2 | — | — | — | 2 |
| Разом за змістовий модуль 3 | 30 | 10 | 4 | 4 | — | 12 |
| Змістовий модуль 4. Сучасна екосистема та професійні стандарти | ||||||
| Тема 15. Тестування React-додатків | 9 | 2 | 2 | 2 | — | 3 |
| Тема 16. Стилізація та дизайн-системи | 7 | 2 | 2 | — | — | 3 |
| Тема 17. Next.js та Server-Side Rendering (SSR) | 9 | 2 | 2 | 2 | — | 3 |
| Тема 18. Деплоймент, безпека та етика розробки | 5 | 2 | — | — | — | 3 |
| Разом за змістовий модуль 4 | 30 | 8 | 6 | 4 | — | 12 |
| Разом за заліковий модуль 1 (120 годин / 4 кредити ECTS) | 120 | 36 | 18 | 18 | — | 48 |
| № з/п | Тема лабораторного заняття | Кількість годин |
|---|---|---|
| 1 | Створення каркаса додатка та базових UI-компонентів | 2 |
| 2 | Реалізація стрічки новин або списку об'єктів | 2 |
| 3 | Інтеграція системи фільтрації та пошуку | 2 |
| 4 | Розробка багатосторінкової навігації | 2 |
| 5 | Створення системи автентифікації | 2 |
| 6 | Підключення до зовнішнього API | 2 |
| 7 | Впровадження TypeScript | 2 |
| 8 | Написання тестів | 2 |
| 9 | Фінальна збірка та деплоймент | 2 |
| Разом | 18 |
| № з/п | Тема практичного заняття | Кількість годин |
|---|---|---|
| 1 | Налаштування оточення та робота з Git | 2 |
| 2 | Трансформація масивів даних | 2 |
| 3 | Логіка умовного відображення | 2 |
| 4 | Валідація введених даних | 2 |
| 5 | Побудова ієрархії компонентів | 2 |
| 6 | Налагодження коду (Debugging) | 2 |
| 7 | Робота з URL-параметрами | 2 |
| 8 | Абстракція бізнес-логіки | 2 |
| 9 | Аналіз продуктивності | 2 |
| Разом | 18 |
| № з/п | Тема самостійної роботи | Кількість годин |
|---|---|---|
| 1 | Дослідження екосистеми Next.js | 10 |
| 2 | Опанування інструментів тестування | 8 |
| 3 | Вивчення State Management бібліотек | 8 |
| 4 | Розробка власного кастомного хука для складних задач | 6 |
| 5 | Підготовка до захисту проєкту | 16 |
| Разом | 48 |
Індивідуальні (практичні) заняття робочою програмою не передбачені.
Лекції із застосуванням мультимедійних технологій для вивчення теоретичних основ веб-розробки, практичні заняття для набуття навичок створення клієнт-серверних застосунків, лабораторні роботи з розробки інтерактивних веб-додатків, проєктування баз даних, інтеграції бекенд-функціоналу та адаптивного дизайну. Використання сучасних фреймворків, бібліотек і хмарних сервісів у розробці веб-рішень. Консультації для поглиблення знань з управління життєвим циклом веб-застосунків, оптимізації запитів до баз даних та забезпечення конфіденційності даних.
Оцінювання якості знань студентів здійснюється шляхом поточного, підсумкового (семестрового) контролю за 100-бальною шкалою оцінювання, за шкалою EСTS та національною шкалою оцінювання.
Поточний контроль - оцінювання засвоєння студентом навчального матеріалу під час проведення практичних занять, виконання індивідуальних домашніх завдань, консультацій. Результати поточного контролю заносяться в журнал у балах (5, 4, 3, 2, 1). Сума балів за поточний контроль максимально дорівнює 60.
Підсумковий (семестровий) контроль – комплексне оцінювання якості засвоєння навчального матеріалу дисципліни на заліку. Сума балів за залік максимально дорівнює 40.
Для поточного та підсумкового контролю успішності здобувачів вищої освіти використовується модульно-рейтингова система, яка передбачає роз- поділ балів за виконання усіх запланованих видів робіт. Така система оціню- вання виключає можливість суб’єктивного відношення викладача і орієнтує здобувача вищої освіти на підрахунок своїх балів за конкретні види робіт.
(денна форма навчання, підсумковий контроль - залік)
| Поточне оцінювання та самостійна робота | Підсумковий тест (Залік) | Разом | |||
|---|---|---|---|---|---|
| Змістовий модуль 1 |
Змістовий модуль 2 |
Змістовий модуль 3 |
Змістовий модуль 4 |
||
| 20 | 20 | 20 | 20 | 20 | 100 |
| Сума балів за всі види навчальної діяльності |
Оцінка ECTS |
Оцінка за національною шкалою для екзамену, курсового проекту (роботи), практики |
Оцінка за національною шкалою для заліку |
|---|---|---|---|
| 90–100 | A | відмінно | зараховано |
| 82–89 | B | добре | зараховано |
| 74–81 | C | добре | зараховано |
| 64–73 | D | задовільно | зараховано |
| 60–63 | E | задовільно | зараховано |
| 35–59 | FX | незадовільно з можливістю повторного складання | не зараховано з можливістю повторного складання |
| 1–34 | F | незадовільно з обов'язковим повторним вивченням дисципліни | не зараховано з обов'язковим повторним вивченням дисципліни |
Програма навчальної дисципліни; робоча програма навчальної дисцип- ліни; наочні навчальні матеріали (слайди), завдання та методичні вказівки до самостійної роботи та практичних занять.
Базова література:
Додаткова література: