Реагировать на визуализацию HTML
Цель React — во многих отношениях отображать HTML на веб-странице.
React отображает HTML на веб-странице с помощью функции с именем
ReactDOM.render().
Функция рендеринга
Функция ReactDOM.render()принимает два аргумента: код HTML и элемент HTML.
Цель функции — отобразить указанный код HTML внутри указанного элемента HTML.
Но рендерить где?
В корневом каталоге вашего проекта React есть еще одна папка с именем «public». В этой папке есть index.htmlфайл .
Вы заметите сингл <div>
в теле этого файла. Здесь будет отображаться наше приложение React.
Пример
Отобразить абзац внутри элемента с идентификатором «root»:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Результат отображается в <div id="root">элементе:
<body>
<div id="root"></div>
</body>
Обратите внимание, что идентификатор элемента не обязательно должен называться «root», но это стандартное соглашение.
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
HTML-код
HTML-код в этом руководстве использует JSX, что позволяет вам писать теги HTML внутри кода JavaScript:
Не беспокойтесь, если синтаксис вам незнаком, вы узнаете больше о JSX в следующей главе.
Пример
Создайте переменную, содержащую HTML-код, и отобразите ее в «корневом» узле:
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'));
Корневой узел
Корневой узел — это элемент HTML, в котором вы хотите отобразить результат.
Это похоже на контейнер для контента, которым управляет React.
Это НЕ обязательно должен быть <div>элемент и НЕ обязательно иметь id='root':
Пример
Корневой узел можно назвать как угодно:
<body>
<header id="sandy"></header>
</body>
Отобразите результат в <header id="sandy">элементе:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));