写在前面
React 相比于 Vue ，更注重对 JS 的掌握，Vue 把能做的都做了，只剩下最简单的让开发者使用，开发者需要充分记忆 Vue 的特定指令后就可很轻松很舒服地开发。相反，React 是提供了一种思路和方式，没有过多的限制，可以让开发者很灵活、很自由地进行开发，但要求会相对高些，需要开发者对 JS 达到几乎精通的地步才能真正运用好 React。二者都需要掌握。
本篇博客是 React 的起手式，开启 React 探索之路，从 React 的引入开始。
React 的引入有如下几种方式：
1. CDN 引入
和普通的 JS 库或框架一样，React 也可以从 CDN 引入。
在使用 CDN 引入之前需要了解两种类型的 JS 文件，一个是 cjs ，一个是 umd。
cjs：全称为 CommonJS，是 Node.js 支持的模块规范
umd：全称为 Universal Module Definition 是统一模块定义，是包含 Node.js 使用的 cjs 的，兼容包含浏览器、Node.js 的模块规范。
新模块规范：最新的模块规范是使用 import 和 export 关键字。
因此一般在引入 React 时，会优先使用 umd 版本，可同时支持 Node.js 和浏览器。
React 的 CDN引入需要引入 2 个 JS 库文件，即 react 和 react-dom，这里以 BootCDN 引入为例。
在下列的引入中也都是引入 umd 版本，并且其引入顺序一定得是先引入 react ，后引入 react-dom。
1.1 react (先引入)
这里又分为 development 和 production 版本，一个是开发者版，一个是产品版，两个都可以，产品版可能功能比开发者更全些，但占内存更多些。这里以引入 production 版本为例：
<script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>
1.2 react-dom (后引入)
同上述的 react，react-dom 的引入方式类似， production 版本，记得是 umd 版本，最好版本号和 react 的一样。
<script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
1.3 查看是否成功引入 react
<script>
console.log(React);
console.log(ReactDOM);
</script>
如果能成功输入 React 和 ReactDOM 两个对象就是引入成功！
2. Webpack 引入
在 Webpack 配置环境下使用 import ... from 引入，命令如下：
//安装 react react-dom
yarn add react react-dom
//引入 react react-dom
import React from "react"
import ReactDOM from "react-dom"
除了 Webpack 外，rollup、parcel 也支持上述写法引入。
3. create-react-app
Webpcak 引入 React 对于老手来说更加灵活，但对于新手来说，Webpack 的配置很复杂，为了引入 React，还要配置复杂的 Webpack，就更加深了难度，因此，像 Vue 配备了 Vue cli 一样，React 也配备了 React 开发的标准工具，即 create-react-app 工具，和 Vue cli 是类似的，都内置了 Webpack ，帮我们配置好了 React 的开发环境，直接使用就好了。
对于新手来说，create-react-app 工具更容易上手。
//全局安装 create-react-app
yarn global add create-react-app
//查看版本号
create-react-app --version
//创建 React 文件，进入到要创建的目录中，执行创建命令
create-react-app 项目名