注:最后有面试挑战,看看自己掌握了吗
🌸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
。 在这个过程中,转换器 Babe
l 是一个很受欢迎的工具。 后续挑战已经在后台引入了 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 常量。