写在前面

React 相比于 Vue ，更注重对 JS 的掌握，Vue 把能做的都做了，只剩下最简单的让开发者使用，开发者需要充分记忆 Vue 的特定指令后就可很轻松很舒服地开发。相反，React 是提供了一种思路和方式，没有过多的限制，可以让开发者很灵活、很自由地进行开发，但要求会相对高些，需要开发者对 JS 达到几乎精通的地步才能真正运用好 React。二者都需要掌握。

本篇博客是 React 的起手式，开启 React 探索之路，从 React 的引入开始。

React 的引入有如下几种方式：

1. CDN 引入

和普通的 JS 库或框架一样，React 也可以从 CDN 引入，但并不是只引入一个 JS 文件，而是需要引入 2 个 JS 库文件，这里以 BootCDN 引入为例。

在使用 CDN 引入之前需要了解两种类型的 JS 文件，一个是 **cjs ，一个是 umd**。

cjs：全称为 CommonJS，是 Node.js 支持的模块规范
umd：全称为 Universal Module Definition 是统一模块定义，是包含 Node.js 使用的 cjs 的，兼容包含浏览器、Node.js 的模块规范。
最新的模块规范是使用 import 和 export 关键字

因此一般在引入 React 时，会优先使用 umd 版本，可同时支持 Node.js 和浏览器。在下列的引入中也都是引入 umd 版本，并且其引入顺序一定得是先引入 react ，后引入 react-dom。

1.1 react (先引入)

Snipaste_2020-04-10_16-10-51.png

这里又分为 development 和 production 版本，一个是开发者版，一个是产品版，两个都可以，产品版可能功能比开发者更全些，但占内存更多些。这里以引入 production 版本为例：

  1. <script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>

1.2 react-dom (后引入)

Snipaste_2020-04-10_16-11-48.png

同上述的 react，react-dom 的引入方式类似， production 版本，记得是 umd 版本，最好版本号和 react 的一样

  1. <script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

1.3 查看是否成功引入 react

  1. <script>
  2.   console.log(React);
  3.   console.log(ReactDOM);
  4. </script>

如果能成功输入 React 和 ReactDOM 两个对象就是引入成功！

2. Webpack 引入

在 Webpack 配置环境下使用 import … from 引入，命令如下：

  1. //安装 react react-dom
  2. yarn add react react-dom
  4. //引入 react react-dom
  5. import React from "react"
  6. 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

  1. //全局安装 create-react-app
  2. yarn global add create-react-app
  4. //查看版本号
  5. create-react-app --version
  7. //创建 React 文件，进入到要创建的目录中，执行创建命令
  8. create-react-app 项目名