У попередніх розділах ми розглянули, як створювати 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:

Примітка

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

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

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