手册
目录
React 的目标是在网页中以多种方式呈现 HTML。
React 使用名为 ReactDOM.render() 的函数将 HTML 渲染到网页。
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 代码使用 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>
);
ReactDOM.render(myelement, document.getElementById('root'));
运行实例 »
Root 根节点是要显示结果的 HTML 元素。
它就像一个 容器，用于由 React 管理的内容。
它不必是 <div> 元素，也不必具有 id='root':
根节点可以任意命名:
<body>
<header id="sandy"></header>
</body>
在 <header id="sandy"> 元素中显示结果:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));
运行实例 »
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习
