中国农村大学生学习了这个【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 常量。

相关文章
|
6天前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
24 10
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
30天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
3月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
143 2
|
JavaScript 前端开发 网络架构
React 学习笔记 1 React 是什么
实例 https://codepen.io/pen image.png https://github.com/facebook/react A declarative, efficient, and flexible JavaScript library for building user interfaces.
1094 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
83 0
|
3月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
30 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0