注：最后有面试挑战，看看自己掌握了吗
文章目录
- React
- 创建一个简单的 JSX 元素
- 创建一个复杂的 JSX 元素
- 在 JSX 中添加注释
- 渲染 HTML 元素为 DOM 树
🌸I could be bounded in a nutshell and count myself a king of infinite space.
特别鸣谢：木芯工作室 、Ivan from Russia
React
React 是一个流行的 JavaScript 库，用于为网页或应用程序构建可重用的组件驱动的用户界面。
React 将 HTML 与 JavaScript 结合在了一起，以此创建出一个新的标记语言 JSX。React 还使得管理整个应用程序的数据流变得更容易。
在这个课程中，你将学习如何创建不同的 React 组件，以 state props 管理数据，以及使用不同的生命周期方法（例如 componentDidMount）和更多内容。
创建一个简单的 JSX 元素
简介：React 是由 Facebook 创建和维护的开源视图库。 它是渲染现代 Web 应用程序用户界面（UI）的好工具。
React 使用名为 JSX 的 JavaScript 语法扩展，可以直接在 JavaScript 中编写 HTML。 这有几个好处。 可以在 HTML 中使用 JavaScript 的完整程序功能，并有助于保持代码的可读性。 在大多数情况下，JSX 类似于已经学过的 HTML，但是在这些挑战中将会涉及一些关键差异。
例如，因为 JSX 是 JavaScript 的语法扩展，所以实际上可以直接在 JSX 中编写 JavaScript。 要做到这一点，只需在花括号中包含希望被视为 JavaScript 的代码：{ 'this is treated as JavaScript code' }（这被视为 JavaScript 代码）。 请牢记这个写法，将会在接下来的挑战中使用。
但是，由于浏览器不能解析 JSX，因此必须将 JSX 代码编译为 JavaScript。 在这个过程中，转换器 Babel 是一个很受欢迎的工具。 后续挑战已经在后台引入了 Babel，可以直接写 JSX 代码。 如果代码不符合 JSX 语法，那么挑战中的第一个测试就不会通过。
值得注意的是，这些挑战在底层调用 ReactDOM.render(JSX, document.getElementById('root'))。 这个函数调用将 JSX 置于 React 自己的轻量级 DOM 中。 然后，React 使用自己的 DOM 快照来实现增量更新。
创建一个复杂的 JSX 元素
上一个挑战是 JSX 的一个简单示例，但 JSX 也可以表示更复杂的 HTML。
关于嵌套的 JSX，需要知道的一件重要的事情，那就是它必须返回单个元素。
这个父元素将包裹所有其他级别的嵌套元素。
例如，几个作为兄弟元素编写的 JSX 元素而没有父元素包裹将不会被转换。
这里是一个示例：
有效的 JSX：
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
</div>
无效的 JSX：
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
定义一个新的常量 JSX，渲染一个 div，其中依次包含以下元素：
一个 h1，一个 p，一个包含三个 li 项的无序列表。 可以在每个元素中包含任意文本。
注意： 当像这样渲染多个元素时，可以把它们都用圆括号括起来，但是这并不是必须的。 另外，此挑战使用 div 标签把所有子元素包裹在里面。 如果删除 div，JSX 将不会编译这些元素。 请记住这一点，因为在 React 组件中返回 JSX 元素时也适用。
在 JSX 中添加注释
JSX 是一种可以编译成 JavaScript 的语法。 有时，为了便于阅读，可能需要在代码中添加注释。 像大多数编程语言一样，JSX 也有自己的方法来实现这一点。
要将注释放在 JSX 中，可以使用 {/* */} 语法来包裹注释文本。
代码编辑器中的 JSX 元素与在上一个挑战中创建的元素类似。 在提供的 div 元素里添加注释，不修改现有的 h1 或 p 元素。
渲染 HTML 元素为 DOM 树
到目前为止，已经了解到 JSX 是一种在 JavaScript 中编写可读 HTML 的便捷工具。 在 React 中，可以使用它的的渲染 API（ReactDOM）将此 JSX 直接渲染到 HTML DOM。
ReactDOM 提供了一个简单的方法来将 React 元素呈现给 DOM，如下所示：ReactDOM.render(componentToRender, targetNode)，其中第一个参数是要渲染的 React 元素或组件，第二个参数是组件将要渲染到的 DOM 节点。
如你所料，必须在 JSX 元素声明之后调用 ReactDOM.render()，就像在使用变量之前必须声明它一样。
代码编辑器有一个简单的 JSX 组件。 使用 ReactDOM.render() 方法将该组件渲染到页面。 可以将定义好的 JSX 元素直接作为第一个参数传入，然后使用 document.getElementById() 来选择要渲染到的 DOM 节点， 在这个挑战中，请渲染到 id='challenge-node'的 div 中。 确保没有修改 JSX 常量。
