У попередніх розділах ми навчилися створювати 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-елемент або компонент, що вказує, що саме має бути відрендерено в кореневому контейнері.

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

// Import the necessary method from the react-dom package.
import { createRoot } from "react-dom/client";

// Obtain a reference to the DOM container with the "root" id.
const root = createRoot(document.getElementById("root"));

// Define the React element you want to render.
const elementToRender = <YourReactElement />;

// Use the render() method to place the element in the root container.
root.render(elementToRender);

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

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

Примітка

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

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

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