nmk

Лекція №14 (2 години). Вступ до компонентного підходу та React.

План лекції

1. Еволюція фронтенду: від JQuery до сучасних фреймворків.
2. Що таке React і чому він став стандартом індустрії.
3. Концепція Single Page Application (SPA).
4. Компонентний підхід в архітектурі UI.
5. Декларативне проти імперативного управління DOM.
6. Внутрішня механіка: Virtual DOM та процес Реконсиляції (Reconciliation).
7. Огляд екосистеми React та сучасних збірок (Vite vs CRA).

Перелік умовних скорочень

• UI (User Interface) — користувацький інтерфейс.
• SPA (Single Page Application) — односторінковий веб-додаток.
• DOM (Document Object Model) — об’єктна модель документа.
• VDOM (Virtual DOM) — віртуальний DOM.
• CRA (Create React App) — застарілий інструмент для створення React-додатків.

Вступ

Створення складного веб-додатку на “чистому” JavaScript (Vanilla JS), маніпулюючи DOM-елементами вручну через document.querySelector і перемальовуючи їх при кожній зміні даних — це важке, схильне до помилок і майже неможливе завдання для великих команд. Код швидко перетворюється на некеровану “спагетті-архітектуру”.

Щоб вирішити цю проблему, інженери компанії Meta (колишній Facebook) у 2013 році випустили бібліотеку React. Вона кардинально змінила спосіб мислення розробників. Замість того, щоб думати “як змінити цей абзац на сторінці”, React запропонував підхід: “ось мої дані, React, сам намалюй інтерфейс так, щоб він відповідав цим даним”.

Сьогодні React — це абсолютний лідер на ринку фронтенд-технологій. Знання React є обов’язковою вимогою для 80% вакансій Frontend-розробників у світі.

Мета цієї лекції — зрозуміти фундаментальну філософію React (компонентність та декларативність), дізнатися, що таке SPA, і зазирнути під капот магії Virtual DOM.

1. Еволюція фронтенду: від JQuery до фреймворків

Протягом довгого часу стандартом розробки була бібліотека jQuery. Вона спрощувала пошук елементів і анімації, але підхід залишався імперативним: розробник повинен був вручну керувати кожною зміною на сторінці.

Зі зростанням складності веб-додатків (поява Gmail, Facebook, де сторінки більше не перезавантажувалися після кожного кліку), виникла потреба в надійній архітектурі. Почалася ера MVC (Model-View-Controller) фреймворків на кшталт AngularJS та Backbone. Проте з часом і вони виявилися надто громіздкими або повільними через масове оновлення справжнього DOM.

І тоді з’явився React, який сказав: “Давайте розіб’ємо весь інтерфейс на незалежні шматочки (компоненти), і дозволимо їм самим вирішувати, як вони виглядають залежно від поточних даних”.

2. Що таке React?

Рекламний слоган на офіційному сайті каже: “React — це бібліотека для створення користувацьких інтерфейсів”.

Зверніть увагу на слово бібліотека. React — це не фреймворк (як Angular).

• Фреймворк — це величезна “кухня”, де є і плита, і холодильник, і набір ножів. Він диктує вам, як саме ви маєте готувати і де мають лежати продукти.
• React (бібліотека) — це лише висококласна “плита”. Вона робить тільки одну річ — відмальовує UI (інтерфейс). Але робить це найкраще у світі. Всі інші інструменти (маршрутизацію сторінок, управління станом) розробники вибирають і прикручують самостійно.

3. Концепція Single Page Application (SPA)

До появи SPA Інтернет працював за моделлю Многосторінкових додатків (MPA). Як це було: ви клікаєте на посилання “Про нас” -> екран на мить біліє -> браузер повністю завантажує з сервера нову HTML-сторінку (about.html). Це повільно і неекономно, бо шапка сайту (Header) і підвал сайту (Footer) завантажуються щоразу наново, хоча вони не змінилися.

Single Page Application (SPA) — це додаток, у якому є лише один фізичний HTML-файл (index.html). Цей файл на 100% порожній (містить тільки <div id="root"></div>). Коли ви заходите на SPA-сайт:

1. Браузер завантажує цей порожній HTML та величезний файл bundle.js (весь ваш скомпільований React додаток).
2. JavaScript запускається і сам малює всю сторінку всередині #root порожнього HTML.
3. Коли ви клікаєте “Про нас”, екран НЕ біліє і браузер нічого не просить у сервера. React просто миттєво “стирає” вміст головної сторінки з екрану і “малює” на її місці вміст сторінки “Про нас”.

Майже всі сучасні веб-додатки (Instagram, Netflix, Spotify Web) написані як SPA через їхню неймовірну швидкість роботи (вони відчуваються як десктопні або мобільні додатки, а не як звичайні сайти).

4. Компонентний підхід в архітектурі UI

Замість того, щоб сприймати веб-сторінку як один величезний документ (як у класичному HTML), React пропонує сприймати її як набір конструктора Lego.

Компонент — це незалежний, ізольований шматок коду, який відповідає за свою власну розмітку (HTML), свої власні стилі (CSS) та свою власну поведінку (JS).

Наприклад, сторінку інтернет-магазину ми розбиваємо на:

• Компонент <Header>
• Компонент меню <Sidebar>
• Компонент <ProductList> (який у свою чергу складається з 10 компонентів <ProductCard>)
• Компонент <Footer>

Переваги:

1. Перевикористання коду (Reusability): Написавши компонент кнопки <Button> один раз, ви можете використовувати його на тисячі різних сторінок сайту просто написавши <Button />, передаючи їй різні кольори.
2. Ізоляція багів: Якщо зламалася логіка лайків на карточці товару, ви точно знаєте, що проблему треба шукати у файлі ProductCard.jsx, і це ніяк не зачепить інші частини сайту.
3. Командна робота: П’ять розробників можуть одночасно писати п’ять різних компонентів, не заважаючи один одному у єдиному файлі index.html.

5. Декларативне управління DOM

React радикально змінює підхід до написання коду з імперативного на декларативний.

• Імперативно (Vanilla JS): “Знайди кнопку по ID; повісь на неї обробник; коли клікнуть - зміни колір цього блоку на червоний, а текст на ‘Помилка’; якщо клікнуть ще раз - поверни як було”. (Ви розповідаєте ЯК це зробити).
• Декларативно (React): “Ось поточний стан додатка: { hasError: true }. У випадку помилки UI має бути червоним з текстом ‘Помилка’. Якщо ні - UI має бути зеленим.” (Ви не розказуєте як міняти DOM. Ви просто пов’язуєте візуальний стан із даними, а React сам подбає про застосування цих змін у DOM).

Ваш код стає передбачуваним. UI в React — це завжди пряма функція від поточних даних (State). UI = f(State)

6. Внутрішня механіка: Virtual DOM та Реконсиляція

Зміна реального DOM у браузері (наприклад, видалення дива і створення нового) — це найбільш ресурсомістка та повільна операція, яку тільки може робити веб-додаток (запускається перемальовка дерева CSS, перерахунок позицій Layout).

Якби React щоразу після кліку перемальовував весь справжній DOM, сайти б жахливо “гальмували”. Тому він використовує Virtual DOM (Віртуальний DOM).

Як це працює крок за кроком (Процес Реконсиляції):

1. VDOM — це просто легка копія справжнього DOM, збережена як звичайний JavaScript Об’єкт в оперативній пам’яті. Працювати з JS-об’єктом в тисячі разів швидше, ніж з реальним DOM.
2. Коли користувач щось натискає і дані (State) змінюються, React миттєво будує нове, оновлене дерево VDOM у пам’яті.
3. React запускає алгоритм Diffing, який порівнює нове дерево VDOM зі старим деревом VDOM (яке було до кліку).
4. Він знаходить абсолютно мінімальну різницю (наприклад, з’ясовує, що серед усього сайту змінився лише текст одного конкретного <span> тегу).
5. React звертається до справжнього, “повільного” DOM у браузері і вносить ОДНОРАЗОВУ, ХІРУРГІЧНО ТОЧНУ зміну (міняє текст у цьому <span>). Все інше на сторінці лишається недоторканим.

Ця магія робить React надзвичайно швидким.

7. Огляд екосистеми та збірок (Vite vs CRA)

Оскільки сучасний React-додаток пишеться в компонентному стилі, з використанням модулів і нового синтаксису (JSX), код перед відправкою у браузер потрібно “зібрати” та трансформувати в зрозумілий для всіх браузерів звичайний bundle.js.

Тривалий час абсолютним стандартом для швидкого старту була утиліта від самих розробників React — CRA (Create React App). Вона була побудована на базі збірка Webpack. Але з часом вона стала надзвичайно повільною (проект міг запускатися 10-20 секунд). Сьогодні CRA офіційно визнана застарілою (Deprecated).

Сучасний стандарт — Vite. Vite (французькою — “швидкий”) — це нове покоління інструментів для фронтенд-озробки. Він запускає сервер розробки за долі секунди завдяки використанню нативних ES-модулів браузера, та здійснює гарячу заміну коду (HMR — Hot Module Replacement) майже миттєво. Саме Vite ми використовуватимемо на практичних заняттях для створення наших React-проектів.

Висновки

1. Перехід до використання таких бібліотек, як React, зумовлений потребою створення складних, швидких та інтерактивних веб-додатків без “спагетті-коду” чистого JS.
2. React — це бібліотека виключно для відмальовки UI.
3. Архітектура Single Page Application (SPA) гарантує швидкість роботи, порівнянну з нативними додатками: сторінка ніколи не перезавантажується повністю, а вміст перемальовується динамічно всередині єдиного вузла <div id="root">.
4. Компонентний підхід ділить інтерфейс на незалежні “цеглинки” з власною логікою, що дозволяє легко їх перевикористовувати та тестувати.
5. Декларативна природа React звільняє розробника від ручного управління DOM. Ми описуємо, “як має виглядати UI у цьому стані”, а React робить все інше.
6. Легковаговий Virtual DOM (VDOM) і алгоритм порівняння дерев гарантують, що реальний DOM зазнає лише мінімально необхідної кількості повільних оновлень.
7. Vite повністю замістив застарілий Create React App як сучасний стандарт розгортання робочого середовища (Dev Server) для нових проектів.

Джерела

1. React Official Documentation (react.dev) — нова офіційна і найактуальніша документація React.
2. Vite (vitejs.dev) — документація сучасного збірка проектів.
3. The History of React.js on a Timeline — цікава стаття про історію створення бібліотеки.

Запитання для самоперевірки

1. Чому розробка великих веб-додатків тільки з використанням Vanilla JS (та інструментів на зразок document.querySelector) є поганою практикою сьогодні?
2. Поясніть своїми словами ключову різницю між фреймворком (наприклад, Angular) та бібліотекою (наприклад, React).
3. Що таке механіка SPA (Single Page Application)? Як вона впливає на користувацький досвід та споживання трафіку порівняно зі старими багатосторінковими сайтами?
4. Які три головні переваги дає розбиття великого сайту на маленькі незалежні компоненти?
5. Наведіть приклад імперативного та декларативного підходу до вирішення побутової проблеми за межами програмування (на кшталт поїздки на таксі). Як це стосується React?
6. Що таке Virtual DOM? Чому React не вносить зміни безпосередньо у справжній DOM браузера одразу після кліку користувача?
7. Поясніть крок за кроком, що робить алгоритм Реконсиляції (Reconciliation), коли у додатку змінюються дані.
8. Чому індустрія масово відмовилася від Create React App на користь інструментарію Vite?