中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰

简介: 中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰

注:最后有面试挑战,看看自己掌握了吗


🌸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 常量。

相关文章
|
16天前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
62 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
30 0
|
7天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
21 2
|
22天前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
10 1
|
27天前
|
前端开发 JavaScript CDN
React 教程
10月更文挑战第6天
44 3
|
22天前
|
JSON 前端开发 JavaScript
React 进阶阶段学习计划
React 进阶阶段学习计划
|
2月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
25 2
|
2月前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化
|
2月前
|
前端开发 JavaScript
react学习(21)受控组件
react学习(21)受控组件