1. CDN 引入

和普通的 JS 庫或框架一樣，React 也可以從 CDN 引入。

在使用 CDN 引入之前需要了解兩種類型的 JS 文件，一個是 cjs ，一個是 umd。

cjs：全稱為 CommonJS，是 Node.js 支持的模塊規(guī)范

umd：全稱為 Universal Module Definition 是統(tǒng)一模塊定義，是包含 Node.js 使用的 cjs 的，兼容包含瀏覽器、Node.js 的模塊規(guī)范。

新模塊規(guī)范：最新的模塊規(guī)范是使用 import 和 export 關鍵字。

因此一般在引入 React 時，會優(yōu)先使用 umd 版本，可同時支持 Node.js 和瀏覽器。

React 的 CDN引入需要引入 2 個 JS 庫文件，即 react 和 react-dom，這里以 BootCDN 引入為例。

在下列的引入中也都是引入 umd 版本，并且其引入順序一定得是先引入 react ，后引入 react-dom。

1.1 react (先引入)

這里又分為 development 和 production 版本，一個是開發(fā)者版，一個是產(chǎn)品版，兩個都可以，產(chǎn)品版可能功能比開發(fā)者更全些，但占內(nèi)存更多些。這里以引入 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 配置環(huán)境下使用 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 開發(fā)的標準工具，即 create-react-app 工具，和 Vue cli 是類似的，都內(nèi)置了 Webpack ，幫我們配置好了 React 的開發(fā)環(huán)境，直接使用就好了。

對于新手來說，create-react-app 工具更容易上手。

//全局安裝 create-react-app
yarn global add create-react-app

//查看版本號
create-react-app --version

//創(chuàng)建 React 文件，進入到要創(chuàng)建的目錄中，執(zhí)行創(chuàng)建命令
create-react-app 項目名

以上就是淺談React 的引入的詳細內(nèi)容，更多關于React 的引入的資料請關注腳本之家其它相關文章！

最新評論