React 渲染 HTML
React 的目标在很多方面都是在网页上渲染 HTML。
React 通过使用一个名为 createRoot() 的函数及其 render() 方法来渲染 HTML 到网页。
createRoot 函数
createRoot() 函数接受一个参数，即一个 HTML 元素。
该函数用于定义 React 组件应显示在哪个 HTML 元素中。
render 方法
然后调用 render() 方法来定义应该渲染的 React 组件。
但渲染到哪里？
在你的 React 项目的根目录下还有另一个文件夹，名为 "public"。在此文件夹中，有一个 index.html 文件。
你会注意到此文件 body 中有一个单独的 <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>);
