React отображения HTML
React цели существуют во многом для отображения HTML веб страницы.
React отображает HTML код для веб страницы с помощью функции ReactDOM.render()
.
Функция Рендеринга
Функция ReactDOM.render()
принимает два аргумента, HTML код и HTML элемент.
Назначение функции заключается в отображении указанного HTML кода внутри указанного HTML элемента.
Пример
Отобразить пункт внутри элемента "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
Результат отображается в виде элемента <div id="root">
:
<body>
<div id="root"></div>
</body>
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'));