# React 学习第一天

ReactJS 简介

ReactJS 的背景和原理

三大主流前端框架 React、Vue、Angular

Vue 与 React 两个框架的区别和优势对比

React（虚拟 DOM，DIff 算法）

创建基本的 webpack4.x 项目（ 并且解决了之前的一个 bug ）

在项目中使用 react

把圈子变小 把语言变干净 把成绩往上提 把故事往心里收 现在想要的三年后都会有 ！o (￣ ▽ ￣) ブ

# 1、ReactJS 简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

# 2、ReactJS 的背景和原理

在 Web 开发中，我们总需要将变化的数据实时反应到 UI 上，这时就需要对 DOM 进行操作。而复杂或频繁的 DOM 操作通常是性能瓶颈产生的原因（如何进行高性能的复杂 DOM 操作通常是衡量一个前端开发人员技能的重要指标）。

React 为此引入了虚拟 DOM（Virtual DOM）的机制：在浏览器端用 Javascript 实现了一套 DOM API。基于 React 进行开发时所有的 DOM 构造都是通过虚拟 DOM 进行，每当数据变化时，React 都会重新构建整个 DOM 树，然后 React 将当前整个 DOM 树和上一次的 DOM 树进行对比，得到 DOM 结构的区别，然后仅仅将需要变化的部分进行实际的浏览器 DOM 更新。而且 React 能够批处理虚拟 DOM 的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从 A 变成 B，然后又从 B 变成 A，React 会认为 UI 不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟 DOM 树，但是因为虚拟 DOM 是内存数据，性能是极高的，而对实际 DOM 进行操作的仅仅是 Diff 部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的 DOM 元素，而只需要关心在任意一个数据状态下，整个界面是如何 Render 的。

如果你像在 90 年代那样写过服务器端 Render 的纯 Web 页面那么应该知道，服务器端所要做的就是根据数据 Render 出 HTML 送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段 HTML 发生了变化，而只需要根据数据刷新整个页面。换句话说，任何 UI 的变化都是通过整体刷新来完成的。而 React 将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是 React 框架要完成的事情。

借用 Facebook 介绍 React 的视频中聊天应用的例子，当一条新的消息过来时，你的开发过程需要知道哪条数据过来了，如何将新的 DOM 结点添加到当前 DOM 树上；而基于 React 的开发思路，你永远只需要关心数据整体，两次数据之间的 UI 如何变化，则完全交给框架去做。可以看到，使用 React 大大降低了逻辑复杂性，意味着开发难度降低，可能产生 Bug 的机会也更少。

---

# 清楚理解两个概念：

1. ibrary (库)：小而巧的库，只提供特定的 API；优点就是 船小好调头。可以很方便的从一个库切换到另外的库；但是代码几乎不会改变。

2. Framework (框架)：大而全的是框架；框架提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架，是比较困难的。

# 三大主流前端框架 React、Vue、Angular

React（ 最流行 ）起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。它有以下的特性：

1. 声明式设计：React 采用声明范式，可以轻松描述应用。

2. 高效：React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。

3. 灵活：React 可以与已知的库或框架很好地配合。

1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点：
React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

Vue ( 目前市场上的主流 ) 是尤雨溪编写的一个构建数据驱动的 Web 界面的库，准确来说不是一个框架，它聚焦在 V（view）视图层。

它有以下的特性：

1. 轻量级的框架

2. 双向数据绑定

3. 指令

4. 插件化

优点：
1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：
1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8

Angular（ 最早 ）是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

它有以下的特性：

1. 良好的应用程序结构

2. 双向数据绑定

3. 指令

4. HTML 模板

5. 可嵌入、注入和测试

优点：
1. 模板功能强大丰富，自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3. 自定义指令，自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
缺点：
1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.

# Vue 与 React 两个框架的区别和优势对比

Vue 与 React 的区别： 可以参考

如果你喜欢用模板搭建应用（或者有这个想法），请选择 Vue

Vue 应用的默认选项是把 markup 放在 HTML 文件中。数据绑定表达式采用的是和 Angular 相似的 mustache 语法，而指令（特殊的 HTML 属性）用来向模板添加功能。

相比之下，React 应用不使用模板，它要求开发者借助 JSX 在 JavaScript 中创建 DOM。

对于来自标准 Web 开发方式的新开发者，模板更容易理解。但是一些资深开发者也喜欢模板，因为模板可以更好的把布局和功能分割开来，还可以使用 Pug 之类的模板引擎。

但是使用模板的代价是不得不学习所有的 HTML 扩展语法，而渲染函数只需要会标准的 HTML 和 JavaScript。而且比起模板，渲染函数更加容易调试和测试。当然你不应该因为这方面的原因错过 Vue，因为在 Vue2.0 中提供了使用模板或者渲染函数的选项。

如果你喜欢简单和 “能用就行” 的东西，请选择 Vue

一个简单的 Vue 项目可以不需要转译直接运行在浏览器中，所以使用 Vue 可以像使用 jQuery 一样简单。当然这对于 React 来说在技术上也是可行的，但是典型的 React 代码是重度依赖于 JSX 和诸如 class 之类的 ES6 特性的。

Vue 的简单在程序设计的时候体现更深，让我们来比较一下两个框架是怎样处理应用数据的（也就是 state）。

React 中是通过比较当前 state 和前一个 state 来决定何时在 DOM 中进行重渲染以及渲染的内容，因此需要不可变（immutable）的 state。

Vue 中的数据是可变（mutated）的，所以同样的操作看起来更加简洁。

让我们来看看 Vue 中是如何进行状态管理的。当向 state 添加一个新对象的时候，Vue 将遍历其中的所有属性并且转换为 getter，setter 方法，现在 Vue 的响应系统开始保持对 state 的跟踪了，当 state 中的内容发生变化的时候就会自动重新渲染 DOM。令人称道的是，Vue 中改变 state 的状态的操作不仅更加简洁，而且它的重新渲染系统也比 React 的更快更有效率。

Vue 的响应系统还有有些坑的，例如：它不能检测属性的添加和删除和某些数组更改。这时候就要用到 Vue API 中的类似于 React 的 set 方法来解决。

如果你想要你的应用尽可能的小和快，请选择 Vue

当应用程序的状态改变时，React 和 Vue 都将构建一个虚拟 DOM 并同步到真实 DOM 中。 两者都有各自的方法优化这个过程。

Vue 核心开发者提供了一个 benchmark 测试，可以看出 Vue 的渲染系统比 React 的更快。测试方法是 10000 个项目的列表渲染 100 次，结果如下图。从实用的观点来看，这种 benchmark 只和边缘情况有关，大部分应用程序中不会经常进行这种操作，所以这不应该被视为一个重要的比较点。但是，页面大小是与所有项目有关的，这方面 Vue 再次领先，它目前的版本压缩后只有 25.6KB。React 要实现同样的功能，你需要 React DOM（37.4KB）和 React with Addon 库（11.4KB），共计 44.8KB，几乎是 Vue 的两倍大。双倍的体积并不能带来双倍的功能。

如果你打算构建一个大型应用程序，请选择 React

像文章开头那种同时用 Vue 和 React 实现的简单应用程序，可能会让一个开发者潜意识中更加倾向于 Vue。这是因为基于模板的应用程序第一眼看上去更加好理解，而且能很快跑起来。但是这些好处引入的技术债会阻碍应用扩展到更大的规模。模板容易出现很难注意到的运行时错误，同时也很难去测试，重构和分解。

相比之下，Javascript 模板可以组织成具有很好的分解性和干（DRY）代码的组件，干代码的可重用性和可测试性更好。Vue 也有组件系统和渲染函数，但是 React 的渲染系统可配置性更强，还有诸如浅（shallow）渲染的特性，和 React 的测试工具结合起来使用，使代码的可测试性和可维护性更好。

与此同时，React 的 immutable 应用状态可能写起来不够简洁，但它在大型应用中意义非凡，因为透明度和可测试性在大型项目中变得至关重要。

如果你想要一个同时适用于 Web 端和原生 APP 的框架，请选择 React

React Native 是一个使用 Javascript 构建移动端原生应用程序（iOS，Android）的库。 它与 React.js 相同，只是不使用 Web 组件，而是使用原生组件。 如果你学过 React.js，很快就能上手 React Native，反之亦然。

它的意义在于，开发者只需要一套知识和工具就能开发 Web 应用和移动端原生应用。如果你想同时做 Web 端开发和移动端开发，React 为你准备了一份大礼。

阿里的 Weex 也是一个跨平台 UI 项目，目前它以 Vue 为灵感，使用了许多相同的语法，同时计划在未来完全集成 Vue，然而集成的时间和细节还不清楚。因为 Vue 将 HTML 模板作为它设计的核心部分，并且现有特性不支持自定义渲染，因此很难看出目前的 Vue.js 的跨平台能力能像 React 和 React Native 一样强大。

如果你想要最大的生态系统，请选择 React

毫无疑问，React 是目前最受欢迎的前端框架。它在 NPM 上每个月的下载量超过了 250 万次，相比之下，Vue 是 22.5 万次。人气不仅仅是一个肤浅的数字，这意味着更多的文章，教程和更多 Stack Overflow 的解答，还意味有着更多的工具和插件可以在项目中使用，让开发者不再孤立无援。

这两个框架都是开源的，但是 React 诞生于 Facebook，有 Facebook 背书，它的开发者和 Facebook 都承诺会持续维护 React。相比之下，Vue 是独立开发者尤雨溪的作品。尤雨溪目前在全职维护 Vue，也有一些公司资助 Vue，但是规模和 Facebook 和 Google 没得比。不过请对 Vue 的团队放心，它的小规模和独立性并没有成为劣势，Vue 有着固定的发布周期，甚至更令人称道的是，Github 上 Vue 只有 54 个 open issue，3456 个 closed issue，作为对比，React 有多达 530 个 open issue，3447 个 closed issue。

# 总结一下，我们发现的，Vue 的优势是：

模板和渲染函数的弹性选择

简单的语法和项目配置

更快的渲染速度和更小的体积

# React 的优势是：

更适合大型应用和更好的可测试性

Web 端和移动端原生 APP 通吃

更大的生态系统，更多的支持和好用的工具

然而，React 和 Vue 都是很优秀的框架，它们之间的相似之处多过不同之处，并且大部分的优秀功能是相通的：

用虚拟 DOM 实现快速渲染

轻量级

响应式组件

服务端渲染

集成路由工具，打包工具，状态管理工具的难度低

优秀的支持和社区

# React

# 1. 虚拟 DOM（Virtual Document Object Model）

• DOM 的本质什么：浏览器中的概念，用 JS 对象来表示 页面上的 元素，并提供了操作 DOM 对象的 API。
• 什么是 React 中的虚拟 DOM：是框架中的概念，是 程序员 用 JS 对象来模拟 页面上的 DOM 和 DOM 嵌套。

# DOM

先直接说一下，DOM 意思是文档对象模型（Dcoument Object Model），它是一个结构化文本的抽象。对于 Web 开发者，这个文本是一段 HTML 代码，DOM 也就被叫做 HTML DOM。HTML 的元素在 DOM 中变成了节点。

所以，HTML 是一段文本，DOM 就是这段文本在内存中的表示。

可以对比一个程序的一个进程实例。对于一个程序，可以存在多个进程，就像一段同样的 HTML 可以有多个 DOM 一样。（例：同一个页面被多个 tab 加载）。

在 HTML DOM 中提供了遍历和修改节点的接口（API）。像 getElementById 或者 removeChild 这样的方法。我们一般使用 JavaScript 来操作 DOM，这是因为…… 好吧，天知道为什么。😃

所以，只要我们想要动态修改网页的内容的时候，我们就修改 DOM。

var item = document.getElementById("myLI");
item.parentNode.removeChild(item);

所谓 document 就是根节点的抽象，而 getElementById，parentNode 和 emoveChild 则是 HTML DOM API 中的方法。

# 虚拟 DOM

首先 - 虚拟 DOM 不是 React 发明的，但是 React 用了它且免费提供。

虚拟 DOM 是 HTML DOM 的抽象。它是轻量的，是从浏览器特定（Browser-specific，这里意指特定的浏览器需要特定的实现）实现细节中提取出来的。由于 DOM 本身就已经是一个抽象了，所以虚拟 DOM，实际上，是一个抽象的抽象。

也许把虚拟 DOM 当做 React 的本地和简化版的 HTML DOM 更好。它允许 React 跳过既慢又限于特定浏览器的真实 DOM 操作，以在这个抽象世界中做自己的计算。

常规 DOM 和虚拟 DOM 二者并没有什么大的不同。这也是为什么 React 代码的 JSX 部分可以看起来几乎跟纯 HTML 很像的原因。

var CommentBox = React.createClass({
  render: function () {
    return (
      <div className="commentBox">
        <div>Hello, world! I am a CommentBox.</div>
      </div>
    );
  },
});

在大多数情况下，当你有一段 HTML 代码且想要将其写成一个 React 组件时，你只需要做这个。

1. 在 render 方法中返回 HTML 代码；
2. 将 class 属性替换成 className 属性，因为 class 在 JavaScript 中是一个保留关键字。

二者之间还有一些，相当细微的区别。

• 虚拟 DOM 的这些属性不在真实的 DOM 中出现 ——key，ref 和 dangerouslySetInnerHTML。查看更多
• React 范的 DOM 引入了一些限制

# 为什么需要虚拟 DOM？

先介绍浏览器加载一个 HTML 文件需要做哪些事，帮助我们理解为什么我们需要虚拟 DOM。webkit 引擎的处理流程，一图胜千言：

所有浏览器的引擎工作流程都差不多，如上图大致分 5 步：创建 DOM tree –> 创建 Style Rules -> 构建 Render tree -> 布局 Layout –> 绘制 Painting

• 第一步，用 HTML 分析器，分析 HTML 元素，构建一颗 DOM 树。

• 第二步：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表。

• 第三步：将上面的 DOM 树和样式表，关联起来，构建一颗 Render 树。这一过程又称为 Attachment。每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象（又名 renderer）。这些 render 对象最终会被构建成一颗 Render 树。

• 第四步：有了 Render 树后，浏览器开始布局，会为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标值。

• 第五步：Render 数有了，节点显示的位置坐标也有了，最后就是调用每个节点的 paint 方法，让它们显示出来。

当你用传统的源生 api 或 jQuery 去操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。比如当你在一次操作时，需要更新 10 个 DOM 节点，理想状态是一次性构建完 DOM 树，再执行后续操作。但浏览器没这么智能，收到第一个更新 DOM 请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程。显然例如计算 DOM 节点的坐标值等都是白白浪费性能，可能这次计算完，紧接着的下一个 DOM 更新请求，这个节点的坐标值就变了，前面的一次计算是无用功。

即使计算机硬件一直在更新迭代，操作 DOM 的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。真实的 DOM 节点，哪怕一个最简单的 div 也包含着很多属性，可以打印出来直观感受一下：

虚拟 DOM 就是为了解决这个浏览器性能问题而被设计出来的。例如前面的例子，假如一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地的一个 js 对象中，最终将这个 js 对象一次性 attach 到 DOM 树上，通知浏览器去执行绘制工作，这样可以避免大量的无谓的计算量。

# Virtual DOM 算法

可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异。记录下来的不同就是我们需要对页面真正的 DOM 操作，然后把它们应用在真正的 DOM 树上，页面就变更了。这样就可以做到：视图的结构确实是整个全新渲染了，但是最后操作 DOM 的时候确实只变更有不同的地方。

这就是所谓的 Virtual DOM 算法。包括几个步骤：

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3. 把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

# DIff 算法

比较两棵 DOM 树的差异是 Virtual DOM 算法最核心的部分。简单的说就是新旧虚拟 dom 的比较，如果有差异就以新的为准，然后再插入的真实的 dom 中，重新渲染。、 借网络一张图片说明:

比较只会在同层级进行，不会跨层级比较。
比较后会出现四种情况：
1、此节点是否被移除 -> 添加新的节点
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变 -> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换

# 创建基本的 webpack4.x 项目

1. 运行 npm init -y 快速初始化下项目
2. 在项目根目录创建 src 源代码目录 和 dist 产品目录
3. 在 src 目录下创建 index.html
4. 使用 npm 安装 webpack，运行 npm i webpack webpack-cli -D
5. 注意：webpack4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积。
   • 默认约定了
     • 打包的入口是 src -> index.js
     • 打包的输出文件是 dist -> main.js
     • 4.x 中新增的 mode 项：development 和 production

mode 介绍

​ mode 参数：（development 和 production ）：决定了 配置代码 （压缩代码体积）是否被压缩。

# 配置 webpack-dev-server (自动打包)

webpack-dev-server 能够用于快速开发应用程序

1. 安装：运行： npm i webpack-dev-server -D
2. 配置 package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
}

• 可以在webpack.config.js 配置相应的 devServer（自动打开窗口，配置端口号，首页路径展示情况）

# 配置 html-webpack-plugin

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个 HTML 文件，使用 lodash 模板提供你自己的模板，或使用你自己的 loader。

1. 安装：运行： npm i html-webpack-plugin -D
2. 配置 package.json

# 配置 Babel

Babel 是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码

webpack 中使用 Babel 官方文档

1. 安装 npm install -D babel-loader @babel/core @babel/preset-env webpack

2. 在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中，就像下面这样

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    },
  ];
}

---

# 解决之前遇到的一个 BUG

解决方案：

1. 安装： npm i @babel/plugin-proposal-class-properties -D
2. 配置 webpack.config.js

运行结果：

# 在项目中使用 react

1. 运行 npm i react react-dom -s 安装包
   • react：专门用于创建组件和虚拟 DOM 的，同时组件的生命周期都在这个包中
   • react-dom：专门进行 DOM 操作的，最主要的应用场景，就是 ReactDOM.render ()

尝试写一个 react 项目：

index.js:

//第一步：导入包
import React from "react"; //创建组件，虚拟DOM元素，生命周期
import ReactDOM from "react-dom"; //把创建好的 组件 和 虚拟DOM 放到页面上展示的

//第二步：创建虚拟DOM元素
//参数1：创建的元素的类型，字符串，表示元素的名称
//参数2：是一个对象或 null，表示 当前这个DOM 元素的属性
//参数3：子节点（包括 其它 虚拟DOM 获取 文本子节点）
//参数n：其它子节点
const myh1 = React.createElement(
  "h1",
  { id: "myh1", title: "this id h1" },
  "这是一个大大H1！"
);

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
//参数一：要渲染的那个虚拟DOM元素
//参数二：指定页面上的DOM元素，当作容器
ReactDOM.render(myh1, document.getElementById("app"));

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

# 创建 DOM 结构

# 方式一：（~ 基本不用）

index.js:

//第一步：导入包
import React from "react"; //创建组件，虚拟DOM元素，生命周期
import ReactDOM from "react-dom"; //把创建好的 组件 和 虚拟DOM 放到页面上展示的

//第二步：创建虚拟DOM元素
const myh1 = React.createElement(
  "h1",
  { id: "myh1", title: "this id h1" },
  "这是一个大大H1！"
);
const mydiv = React.createElement("div", null, "这是一个div元素", myh1);

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(mydiv, document.getElementById("app"));

# 方式二：JSX 语法 （~ important）

JSX 语法：看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

JSX 语法的本质，还是在运行的时候，被转换成了 React.createElement 形式来执行的

使用 babel 将 JSX 语法转换为 React.createElement 形式 JSX 官方详细介绍

关键包：运行 npm install --save-dev @babel/preset-react 可以参考 babel 官方文档

原因：少写了中括号。（粗心大意了）不该！！~~~

配置 webpack.config.js

//配置 @babel/preset-react
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-env",
            [
              "@babel/preset-react",
              {
                pragmaFrag: "DomFrag", // default is React.Fragment
                throwIfNamespace: false, // defaults to true
              },
            ],
          ],
          plugins: ["@babel/plugin-proposal-class-properties"],
        },
      },
    },
  ];
}

---

# 在 JSX 中使用表达式： JSX 中使用表达式

//第一步：导入包
import React from "react"; //创建组件，虚拟DOM元素，生命周期
import ReactDOM from "react-dom"; //把创建好的 组件 和 虚拟DOM 放到页面上展示的

let a = 10;
let str = "zc";
let arr = [<h1>这是h1</h1>, <h2>这是h2</h2>];
let arr1 = ["周琛", "张三", "李四", "王五"];

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(
  <div title={str}>
    {a + 11}
    <hr />
    {arr}
    <hr />
    {arr1.map((item) => {
      return <h3>{item}</h3>;
    })}
  </div>,
  document.getElementById("app")
);