Рендеринг Елементів у React

У попередніх розділах ми навчилися створювати JSX-елементи для побудови користувацьких інтерфейсів. Настав час вивести ці елементи на екран, відрендеривши їх у нашому React-додатку.

Пакет react-dom/client

Для рендерингу React-елемента в DOM-дерево ми скористаємося пакетом react-dom/client, який надає два основних методи:

1. createRoot(container): Цей метод створює корінь React, посилаючись на існуючий DOM-елемент. У більшості React-додатків цим елементом є елемент div з ідентифікатором root, який зазвичай визначається у файлі index.html. Цей корінь слугує контейнером, в якому буде рендеритись весь React-додаток.
2. render(element): Метод render очікує посилання на React-елемент або компонент, що вказує, що саме має бути відрендерено в кореневому контейнері.

Ось базова структура коду, що ілюструє, як працює цей процес:

Практичний приклад

Давайте застосуємо цю теорію на практиці. Розглянемо наступний приклад, де ми створюємо React-елемент і рендеримо його в DOM:

Примітка

Всі приклади та завдання будуть представлені в CodeSandbox, щоб ви могли працювати з кодом без перерв на налаштування середовища.

За замовчуванням ми бачимо попередній перегляд сторінки. Будь ласка, перетягніть повзунок у лівій частині CodeSandbox, щоб переглянути код.

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