相信看完前面的 6 个 Demo，你已经对 React 有了一个基本的了解了，那么接下来，就让我们来正式的认识 React。
首先，我们来看下 jsx：
jsx 是一门独立的语言，只不过它的语法跟 js 是重叠的，所以给你一种感觉，jsx 就是 js，其实它是另一门语言，跟 ts 差不多的感觉。
jsx 其实本质上是希望改进 js 的很多问题，但是在 ES6 出现了以后，jsx 绝大部分的功能都已经没有了用武之地，因为 ES6 已经把 jsx 里面的很多东西全部吸收进去了，所以导致了 jsx 和 ES6 基本长的差不多。
jsx 最主要的特性就是可以帮我们直接的生成元素。
比如我们想创建一个 div 元素：
// 普通创建
let div = document.createElement('div')
div.title = 'aaa'
div.innerHTML = 'box'
// jsx 方式
let div = <div title="aaa">box</div>可以看到，jsx 是非常方便的。
其实我们这里写的 <div title="aaa">box</div> 会被编译成一个虚拟 DOM 元素，它并不会真正的去创建一个 DOM 元素，因为将来我们还需要经过渲染的步骤，才能把它变成一个真正的 div 元素。那么虚拟 DOM 又是什么呢？
简单来说，虚拟 DOM 就是一个 json，真正的 DOM 元素，它的操作是非常缓慢的，资源开销会比操作虚拟 DOM 多出 4000 多倍。所以在这种情况下，如果什么操作都直接用 DOM，那这个速度是非常缓慢的。
所以在 Vue，React，Angular 等等很多框架里面，它们都会有虚拟 DOM 这个概念，包括你去平常写代码操作这个东西的时候，其实操作的都是虚拟 DOM，因为这种情况下，操作 json 的速度就会快很多，然后框架会在主进程空闲时批量更新 DOM 节点。从而对性能有很大的提高。
那么接下来，我们就来看下 React 应该如何使用：
首先，我们需要先将 React 引入进来，我们可以直接用官网上面的 development 版本：
除此以外，我们还需要一个 babel，也就是它里面的 browser.js。
那么我们先来解释下这三个东西是什么。
首先，jsx 不是 js，而浏览器它只支持 js，所以我们直接写 jsx 是没有办法在浏览器中直接工作的，那么我们就需要 browser.js 来帮助我们做一个编译的操作，然后才能够去用 react。（babel 如果不太理解的话，可以看下我前面写的 webpack 基础一，有非常详细的介绍。）
react.development.js 是 React 的核心库，没有它，就用不了。它提供了一些核心功能，比如定义组件，管理状态。但是它没有办法跟真正的 DOM 做任何交互。而 react-dom.development.js 就可以帮助我们把组件渲染成真正的 DOM 元素，这样的话，它才能用。
那么接下来，我们就开始写代码了，因为我这里已经下载过 react 的相关文件，所以就不用官网提供的 CDN 了。同时也为了方便引入和理解， 这里将 react.development.js 改成 react.js，react-dom.development.js 改成 react-dom.js。
首先，我们必须得有一个元素放到页面里面，比如 div。为什么呢？
这个 div 它是挂载点，或者叫做容器。
因为 React 如果想要往页面里面放东西，它不能乱放。得有一个地方给到它放。也就是说，只有这个 div，及它里面的东西归 React 管。其他部分，React 都不碰。
然后我们在写 script 标签的时候需要注意，在 script 标签中要写入 type = "text/babel"（babel 如果不太理解的话，可以看下我前面写的 webpack 基础一，有非常详细的介绍。）
可以看到，我们直接用 ReactDOM.render 就可以直接渲染了。
其实它的渲染也很简单，就是把一个虚拟 DOM 元素，拿去创建成一个真实 DOM 这样的一个动作。
ReactDOM.render 函数有两个参数，第一是你要渲染啥，第二是往哪里渲染。
然后，在上面可以看到，我们引入了 3 个 js 库，但是 react.js 这个库，我们还没有真正的用起来，因为我们现在并没有真的去定义 React 组件，我们现在用的只是一个 ReactDom.render。
那么这个小例子看完之后，我们在再回过头来看下虚拟 DOM：
jsx 并不会真正的去创建 DOM 元素。就比如我们在编辑器上面写的 span，它并不是一个真正的 span，它只是一个 type = span 的虚拟 DOM 元素，jsx 它只能做到去解析你的模板语法 <span>aaa</span>，并且把它生成相应的对象。
我们可以打印出来看下：
我们可以看到，它里面其实是个 react.element，也就是 react 元素。
那么为什么要用虚拟 DOM？就是为了性能。
其实对于计算机来说，如果有什么东西你看着很奇怪，不理解为什么它非得转个弯，在去做一些事？
那么一般就2个理由，要么就是为了性能，要么就是为了安全。
然后需要注意的是，我们在引入这 3 个文件的时候，是有一定的顺序的。
browser.js 无所谓，放哪都一样，比如我们放最后面，页面也是正常渲染。
但是 react.js 和 react-dom.js 就不同了，必须是 react.js 在前面的。
因为 react.js 是核心，而 react-dom.js 是依赖于 react.js 的。
那如果我们将 react-dom.js 放前面会怎么样？
这样就会报错。
它会告诉你，ReactDOM 在 React 之前加载进来是不对的，你要确保你的 React 先加载，然后再加载 ReactDOM。
所以我们这里需要注意下它们的加载顺序。
然后我们再来说几个小细节，在 React 里面有几个属性是比较特殊的。
比如，我们想给 span 加个 title 属性：
可以看到，是没有问题的。
那如果我们再加一个 class 属性呢？
可以看到，报错了，它会告诉你，你是不是想加 className？
这里，我们需要再次明确一点，<span>aaa</span> 不是 HTML。所以有一些东西它是带不了的。
那么为什么会报错呢？
因为 <span title="abc" class="xyz">aaa</span> 它是 jsx 里面的东西，所以它其实是一个 js 语法。
在 js 里面 class 是个关键字，所以在它里面，你就不能直接用 class 这个关键字来当作某一个属性来用。
那么这样做肯定就是不对的。
可以看到，现在就不会报错了。
并且 span 标签上面，也真的多了一个 class。
所以， 在 jsx 中，class 要写成 className。
然后还有另外一个，我们也来试试，比如我们现在有一个 label 和 input 标签：
可以看到，报错了，它说 jsx 必须得包裹在一个闭合标签里面。
什么意思呢？
就是说你在写 jsx 的时候，它必须得有一个单一的最外层元素，如果你用过 Vue，就知道这里和 Vue 是一样的。
但是我们这里，顶层其实是有两个元素的：
我们可以把它们包在某一个标签里面，比如 div：
然后我们改完之后，它仍然是报错的，它说你这里的 for 是不是 htmlFor？
这里同样需要注意一点，for 也是 js 里面的东西，它是做循环的。
所以我们不能直接拿一个循环来当做属性来用，那么我们需要改个名，叫做 htmlFor：
然后我们还需要注意一点的是：
我们平常在写单标签的时候是这么写的：
<input id="username" type="text">
也可以写成：
<input id="username" type="text" />也就是，平常我们再写单标签的时候，最后那个斜杠可有可无。
但是注意，这是 html 的规定，但如果你放在了 jsx 里面，它就会报错了：
它会告诉你，在 jsx 里面，你必须得有一个结束的标志。
所以，在 jsx 里面，单标签必须得有一个斜杠。包括我们平常用的比较多的 br：
加上斜杠，就不会报错了：
所以：
class 写成 className
for 写成 htmlFor，这个也不是很常用，所以知道就行。
并且 jsx 里面，它要求：
1，有且仅有一个顶层父级元素，作为一个包裹。
2，单标签必须得闭合，也就是记得加斜杠。
相信到此，我们对 React 就有了一些基本的认识。
