Рендеринг Елементів у React
У попередніх розділах ми розглянули, як створювати JSX-елементи для побудови користувацьких інтерфейсів. Тепер настав час відобразити ці елементи на екрані, відрендеривши їх у нашому React-додатку.
Пакет react-dom/client
Щоб відрендерити React-елемент у DOM-дереві, використовується пакет react-dom/client, який надає два основних методи:
- createRoot(container): цей метод створює корінь React, посилаючись на існуючий DOM-елемент. У більшості React-додатків цим елементом є
divз ідентифікаторомroot, який зазвичай визначений у файліindex.html. Цей корінь слугує контейнером, у якому буде відображатися весь React-додаток; - 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 і відображається у вказаному кореневому контейнері.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain what the `createRoot` function does in more detail?
What is the difference between `createRoot` and the old `ReactDOM.render` method?
Can you show another example of rendering a different React element?
Чудово!
Completion показник покращився до 2.17Рендеринг Елементів у React
Свайпніть щоб показати меню
У попередніх розділах ми розглянули, як створювати JSX-елементи для побудови користувацьких інтерфейсів. Тепер настав час відобразити ці елементи на екрані, відрендеривши їх у нашому React-додатку.
Пакет react-dom/client
Щоб відрендерити React-елемент у DOM-дереві, використовується пакет react-dom/client, який надає два основних методи:
- createRoot(container): цей метод створює корінь React, посилаючись на існуючий DOM-елемент. У більшості React-додатків цим елементом є
divз ідентифікаторомroot, який зазвичай визначений у файліindex.html. Цей корінь слугує контейнером, у якому буде відображатися весь React-додаток; - 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 і відображається у вказаному кореневому контейнері.
Дякуємо за ваш відгук!
