淺談React 的引入
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 關(guān)鍵字。
因此一般在引入 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 的配置很復(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)境,直接使用就好了。
對于新手來說,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)容,更多關(guān)于React 的引入的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React Native自定義Android的SSL證書鏈校驗
這篇文章主要為大家介紹了React Native自定義Android的SSL證書鏈校驗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10react-native 封裝視頻播放器react-native-video的使用
本文主要介紹了react-native 封裝視頻播放器react-native-video的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01React實現(xiàn)歌詞滾動效果(跟隨音樂播放時間滾動)
這篇文章主要為大家詳細介紹了React實現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2024-02-02簡談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,,需要的朋友可以參考下2019-06-06