1. CDN 引入

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

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

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

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

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

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

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

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

1.1 react (先引入)

這里又分為 development 和 production 版本，一個(gè)是開發(fā)者版，一個(gè)是產(chǎn)品版，兩個(gè)都可以，產(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 版本，最好版本號(hào)和 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 兩個(gè)對(duì)象就是引入成功！

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 對(duì)于老手來(lái)說(shuō)更加靈活，但對(duì)于新手來(lái)說(shuō)，Webpack 的配置很復(fù)雜，為了引入 React，還要配置復(fù)雜的 Webpack，就更加深了難度，因此，像 Vue 配備了 Vue cli 一樣，React 也配備了 React 開發(fā)的標(biāo)準(zhǔn)工具，即 create-react-app 工具，和 Vue cli 是類似的，都內(nèi)置了 Webpack ，幫我們配置好了 React 的開發(fā)環(huán)境，直接使用就好了。

對(duì)于新手來(lái)說(shuō)，create-react-app 工具更容易上手。

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

//查看版本號(hào)
create-react-app --version

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

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

最新評(píng)論