淺談React 的引入
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è)是開(kāi)發(fā)者版,一個(gè)是產(chǎn)品版,兩個(gè)都可以,產(chǎn)品版可能功能比開(kāi)發(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 也支持上述寫(xiě)法引入。
3. create-react-app
Webpcak 引入 React 對(duì)于老手來(lái)說(shuō)更加靈活,但對(duì)于新手來(lái)說(shuō),Webpack 的配置很復(fù)雜,為了引入 React,還要配置復(fù)雜的 Webpack,就更加深了難度,因此,像 Vue 配備了 Vue cli 一樣,React 也配備了 React 開(kāi)發(fā)的標(biāo)準(zhǔn)工具,即 create-react-app 工具,和 Vue cli 是類似的,都內(nèi)置了 Webpack ,幫我們配置好了 React 的開(kāi)發(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)文章!
相關(guān)文章
從頭寫(xiě)React-like框架的工程搭建實(shí)現(xiàn)
這篇文章主要介紹了從頭寫(xiě)React-like框架的工程搭建實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04React Native自定義Android的SSL證書(shū)鏈校驗(yàn)
這篇文章主要為大家介紹了React Native自定義Android的SSL證書(shū)鏈校驗(yàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10react-native 封裝視頻播放器react-native-video的使用
本文主要介紹了react-native 封裝視頻播放器react-native-video的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂(lè)播放時(shí)間滾動(dòng))
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂(lè)播放使勁按滾動(dòng)),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2024-02-02簡(jiǎn)談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06