淺談React 的引入

Posted on by

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

以上就是淺談React 的引入的詳細內容，更多關於React 的引入的資料請關註WalkonNet其它相關文章！

推薦閱讀：