React Рендеринг (відтворення) HTML
Метою React є багато способів відтворення HTML на вебсторінці.
React відтворює HTML на вебсторінці за допомогою функції ReactDOM.render().
Функція візуалізації
Функція ReactDOM.render() приймає два аргументи: код HTML та елемент HTML.
Призначення функції — відтворити вказаний HTML-код у вказаному елементі HTML.
Але де рендерити?
У кореневому каталозі вашого проєкту React є ще одна папка під назвою "public". У цій папці є файл index.html.
Ви помітите один <div> у тілі цього файлу. Тут буде відображено наш додаток React.
Приклад
Відображати параграф всередині елемента з id "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Результат відображається в елементі <div id="root">:
<body>
<div id="root"></div>
</body>
Зауважте, що ідентифікатор (id) елемента не обов’язково має називатися "root", але це стандартна угода.
Код HTML
HTML-код у цьому посібнику використовує JSX, який дозволяє писати HTML-теги в коді JavaScript:
Не хвилюйтеся, якщо синтаксис незнайомий, ви дізнаєтесь більше про JSX у наступному розділі.
Приклад
Створіть змінну, яка містить HTML-код, і відобразіть її у вузлі "root":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Кореневий (root) вузол
Кореневий (root) вузол — це елемент HTML, у якому потрібно відобразити результат.
Це як контейнер для вмісту, яким керує React.
Це НЕ ОБОВ’ЯЗКОВО має бути елементом <div> і НЕ ОБОВ’ЯЗКОВО містити id='root':
Приклад
Кореневий вузол можна називати як завгодно:
<body>
<header id="sandy"></header>
</body>
Відобразити результат в елементі <header id="sandy">:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));
