React 渲染 HTML
React 的目标是在很多方面将 HTML 渲染到网页中。
React 通过使用名为 createRoot() 的函数及其 render() 方法将 HTML 渲染到网页中。
createRoot 函数
createRoot() 函数接受一个参数，一个 HTML 元素。
该函数的目的是定义应该显示 React 组件的 HTML 元素。
render 方法
render() 方法随后被调用以定义应该渲染的 React 组件。
但是渲染在哪里？
在 React 项目的根目录中还有另一个名为“public”的文件夹。在此文件夹中，有一个 index.html 文件。
您会注意到此文件主体中有一个 <div>。我们的 React 应用程序将在此处渲染。
示例
在 id 为“root”的元素内显示一个段落
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);
结果显示在 <div id="root"> 元素中
<body>
<div id="root"></div>
</body>
请注意，元素 id 不必称为“root”，但这是标准约定。
HTML 代码
本教程中的 HTML 代码使用 JSX，它允许您在 JavaScript 代码中编写 HTML 标签
如果语法不熟悉，请不要担心，您将在下一章中学习更多关于 JSX 的知识。
示例
创建一个包含 HTML 代码的变量，并将其显示在“root”节点中
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);
根节点
根节点是您想要显示结果的 HTML 元素。
它就像 React 管理的内容的容器。
它不必是 <div> 元素，也不必具有 id='root'
示例
根节点可以根据您的喜好命名
<body>
<header id="sandy"></header>
</body>
在 <header id="sandy"> 元素中显示结果
const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);
