Для глибокого розуміння React недостатньо знати лише його API та синтаксис. Професійний розробник має розуміти, яку саме проблему вирішує цей інструмент, чому він з’явився та як його архітектура докорінно змінила підхід до створення користувацьких інтерфейсів (UI). Ця лекція присвячена еволюції веб-розробки та фундаментальним парадигмам, на яких базується React.
На початку свого існування Web (Web 1.0) був набором статичних HTML-документів, з’єднаних гіперпосиланнями. Роль JavaScript обмежувалася вкрай простими завданнями (перевірка форм, базові анімації).
З появою Web 2.0 та технології AJAX (Asynchronous JavaScript and XML), веб-сторінки навчилися оновлювати дані без повного перезавантаження браузера. Це стало початком ери динамічних систем.
Довгий час стандартом де-факто для роботи з DOM була бібліотека jQuery. Вона вирішувала проблеми кросбраузерності та спрощувала доступ до елементів сторінки.
Приклад jQuery (Пряма маніпуляція):
// Знайти елемент і додати обробник подій
$("#add-btn").on("click", function () {
// Прочитати значення з інпуту
const text = $("#todo-input").val();
// Створити новий HTML-елемент та вставити його в DOM
$("#todo-list").append("<li>" + text + "</li>");
// Очистити інпут
$("#todo-input").val("");
});
Цей підхід працював добре для простих сайтів. Але коли сторінка перетворилася на повноцінний додаток (SPA - Single Page Application) із сотнями інтерактивних елементів, ручна зміна DOM стала джерелом хаосу. Стан додатку (дані) був “розмазаний” по самому DOM-дереву.
Коли jQuery перестав справлятися зі складністю, з’явилися перші повноцінні фронтенд-фреймворки на базі патерна MVC (Model-View-Controller) або його варіацій (MVVM): Backbone.js, AngularJS, Ember.js.
Вони розділили дані (Модель) та інтерфейс (Вигляд). Коли Модель змінювалась, Вигляд мав оновитися. Проте у складних інтерфейсах (наприклад, Facebook) виникла проблема “каскадних оновлень”. Зміна однієї моделі викликала зміну іншої, що провокувало множинні та непередбачувані оновлення DOM. Знайти причину багу, коли непрочитане повідомлення світилося в одному місці та зникало в іншому, ставало майже неможливо.
В 2011 році команда Facebook (на чолі з Jordan Walke) зіткнулася з проблемою масштабування свого рекламного кабінету та системи сповіщень. Вони вирішили зламати усталені правила (зокрема міф про те, що HTML та JavaScript мають бути фізично розділені в різних файлах) і створили бібліотеку FaxJS (попередник React).
У 2013 році React став Open Source. Спочатку спільнота сприйняла його вкрай скептично: ідея писати HTML всередині JavaScript (через JSX) виглядала як крок назад і “порушення принципу розділення відповідальності” (Separation of Concerns). Але React довів, що відділяти треба не технології (окремо CSS, HTML, JS), а компоненти логіки.
Сьогодні React — це глобальний індустріальний стандарт, на якому працюють Airbnb, Netflix, Instagram та мільйони інших проектів.
Найголовніший зсув парадигми, який приніс React — це перехід від імперативного програмування до декларативного.
document.createElement, element.appendChild).Приклад (Імперативний JS):
const btn = document.createElement("button");
btn.className = "btn-primary";
if (user.isLoggedIn) {
btn.innerText = "Log Out";
} else {
btn.innerText = "Log In";
}
document.getElementById("header").appendChild(btn);
Приклад (Декларативний React):
const Header = ({ user }) => (
<header>
<button className="btn-primary">
{user.isLoggedIn ? "Log Out" : "Log In"}
</button>
</header>
);
У React розробнику більше не потрібно турбуватися про те, як саме додати або видалити кнопку з DOM при зміні стану user.isLoggedIn. React бере ці турботи на себе. Розробник лише відображає дані у UI: UI = f(state).
React позиціонує себе саме як бібліотека для створення користувацьких інтерфейсів, а не фреймворк (як Angular або Vue). У класичному розумінні патерну MVC, React є лише літерою “V” (View — Вигляд).
Він “з коробки” не знає, як робити HTTP-запити до сервера (як Axios), як будувати багатосторінкову навігацію (як React Router), або як керувати складним глобальним станом додатку (як Redux або Zustand). Ця композитність є головною силою React: вона дає повну свободу архітектору підібрати саме той набір інструментів, який найкраще вирішує бізнес-задачу конкретного проекту.
(Детально розглядатиметься в Лекції 2)
Чому пряма маніпуляція DOM вважається поганою практикою? Тому що DOM — це дуже “важкий” та повільний API браузера. Щоб забезпечити декларативний підхід, не перезавантажуючи сторінку повністю при кожній зміні даних, React впровадив концепцію Virtual DOM.
Virtual DOM — це легковага In-Memory (діє в оперативній пам’яті) копія реального DOM у вигляді звичайних JavaScript об’єктів.
Як це працює концептуально:
(Детально розглядатиметься в Лекції 3)
Сьогодні веб-розробник не просто підключає <script src="react.js"> до HTML. Сучасна розробка використовує складні конвеєри (Pipelines).
Типовий стек включає:
Створення нового проекту сьогодні виглядає так:
npm create vite@latest my-app -- --template react
(Детально розглядатиметься в Лекції 4)
JSX (JavaScript XML) — це синтаксичний цукор, що дозволяє писати деревоподібну розмітку прямо в JavaScript. Важливо розуміти, що браузер не розуміє JSX. До того, як код потрапить у браузер, транспайлер (напр. Babel) перетворює його.
JSX-код:
const element = <h1 className="greeting">Hello, world!</h1>;
Після трансляції (React 17+ / новий JSX Transform):
import { jsx as _jsx } from "react/jsx-runtime";
const element = _jsx("h1", {
className: "greeting",
children: "Hello, world!",
});
JSX змушує нас використовувати className замість class (адже class — зарезервоване слово в JavaScript), htmlFor замість for та використовувати camelCase для всіх обробників подій (onClick, onChange).
Сучасний React-розробник (Frontend Software Engineer) повинен орієнтуватися не лише на написання працюючого коду, але й на глобальні професійні стандарти:
<nav>, <main>, <button> замість <div> з кліками), ARIA-атрибутів та управління фокусом з клавіатури.React.lazy).<div>{userInput}</div>, використання атрибуту dangerouslySetInnerHTML вимагає 100% впевненості у безпеці джерела даних.UI = f(state) і як вона реалізується в React?