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 项目名