Пошук уроків, статей та іншого контенту
Яку проблему вирішує React, чому UI описують декларативно, і де React закінчується.
Без бібліотеки на кшталт React інтерфейс, що змінюється (додати елемент у список, показати помилку валідації, оновити лічильник), доводиться оновлювати вручну — знайти потрібний DOM-вузол і змінити його. У невеликому застосунку це терпимо; у застосунку з десятками взаємопов'язаних станів (чи змінилось поле? чи треба показати спінер? чи оновити лічильник?) ручне керування DOM перетворюється на джерело помилок: легко забути оновити один із залежних елементів після зміни даних.
React пропонує інший спосіб мислення: замість покрокових інструкцій «як» змінити DOM (імперативний підхід), розробник описує, як має виглядати інтерфейс для поточних даних (декларативний підхід) — компонент отримує дані й повертає опис UI, а React сам вираховує, які саме DOM-вузли потрібно змінити, щоб реальність відповідала цьому опису.
// Імперативно (без React): вручну шукаємо і змінюємо DOM
const counterEl = document.getElementById("counter");
counterEl.textContent = count;
// Декларативно (з React): просто описуємо, що має бути на екрані
function Counter({ count }) {
return <p>Лічильник: {count}</p>;
}React будує інтерфейс із компонентів — незалежних, повторно використовуваних шматків UI, кожен зі своєю логікою та розміткою. Великий застосунок — це дерево вкладених компонентів, а не один суцільний HTML-файл: кнопка, картка товару, форма логіну, сторінка цілком — усе це компоненти, які можна розробляти й тестувати окремо один від одного.
Щоб перевести опис UI (яким його повернув компонент) у реальні зміни DOM ефективно, React використовує проміжне легке представлення дерева — Virtual DOM: порівнює нове дерево з попереднім і застосовує до справжнього DOM лише мінімальний набір змін. Це окрема, глибша тема — детально розібрана в статті «Що таке Virtual DOM і навіщо він потрібен» у розділі Статті.
React — саме бібліотека для побудови інтерфейсів, а не фреймворк «все в одному»: сам React не включає маршрутизацію між сторінками, роботу з формами чи стандартний спосіб звертатись до сервера — ці задачі закривають додаткові бібліотеки або фреймворки на основі React (наприклад, Next.js, окремий курс якого є на платформі).
React не замінює знання JavaScript — компоненти, які ви писатимете, активно використовують замикання, деструктуризацію, spread, map/filter, класи та все інше з основного курсу JavaScript. Слабкі місця в JS одразу стають слабкими місцями в React-коді.
Починати вивчати React без міцної бази JavaScript — замикання, this, деструктуризація й методи масивів використовуються в React постійно, і прогалини в них проявляються саме тут.
Плутати React (бібліотеку для UI) з повноцінним фреймворком — за маршрутизацію, збірку, серверний рендеринг відповідають окремі інструменти, які підключаються додатково.
Очікувати, що React автоматично робить застосунок швидким — Virtual DOM зменшує кількість DOM-операцій, але сам React усе одно виконує JavaScript-код компонентів на кожен рендер.
React дозволяє описувати інтерфейс декларативно — як набір компонентів, що відображають поточні дані, — замість того, щоб вручну керувати DOM-операціями. Компонентна архітектура робить UI повторно використовуваним і тестованим частинами, а Virtual DOM ефективно синхронізує описаний стан з реальним DOM. Це бібліотека для UI-шару, а не завершений фреймворк, і вона не замінює базові знання JavaScript.