2.4 create-react-app

現(xiàn)在的前端項(xiàng)目功能越加復(fù)雜，或者說已經(jīng)是一個(gè)運(yùn)行在Web端的應(yīng)用了。功能多了之后，不可避免地會產(chǎn)生一堆邏輯復(fù)雜的JS代碼，以及相關(guān)的依賴包。為了降低開發(fā)的復(fù)雜程度，涌現(xiàn)了很多好的解決方法。

1）模塊化開發(fā)。

2）Less、Sass等CSS語法擴(kuò)展。

3）TS等JS語法擴(kuò)展。

但是這些新的方法，要么需要進(jìn)行編譯，要么有大量的依賴需要進(jìn)行管理，包括在真實(shí)上線的時(shí)候，還需要對代碼進(jìn)行打包。開發(fā)者在面臨這些需求時(shí)，需要很多工具來完成代碼編譯、依賴管理以及打包合并，而webpack就是目前最熱門的一款工具。它可以幫助開發(fā)者非常好地管理生產(chǎn)環(huán)境以及開發(fā)環(huán)境中的各種依賴，并且可以幫助開發(fā)者進(jìn)行后期的打包合并。webpack的相關(guān)配置相對復(fù)雜，對于初學(xué)者來說可以基于一個(gè)現(xiàn)成的例子先快速上手。create-react-app是官方支持的一個(gè)React腳手架，它可以幫助開發(fā)者快速構(gòu)建一個(gè)React程序。

2.4.1 安裝create-react-app

create-react-app現(xiàn)在已經(jīng)有多個(gè)版本，本書基于當(dāng)下的最新版本3.4.1來進(jìn)行相關(guān)講解。在安裝create-react-app之前，用戶確保在計(jì)算機(jī)上已經(jīng)正確安裝了node.js環(huán)境。

不知道計(jì)算機(jī)是否安裝了node的讀者可以打開命令行，輸入命令node-v。如果可以看到版本號就說明計(jì)算機(jī)中已經(jīng)安裝了node。沒有安裝node的讀者，可以訪問node.js官網(wǎng)或中文網(wǎng)http://nodejs.cn，根據(jù)自己的操作系統(tǒng)進(jìn)行下載。

安裝好node之后，就可以進(jìn)行create-react-app的安裝。打開命令行工具，輸入命令npm i create-react-app-g，就可以快速安裝create-react-app了。安裝完成之后，輸入命令npm i create-react-app-V后按Enter鍵，可以看到版本號，就說明create-react-app安裝成功了。

2.4.2 項(xiàng)目構(gòu)建和啟動

安裝好create-react-app之后，就可以利用它來構(gòu)建項(xiàng)目了。在存放項(xiàng)目的文件目錄下打開命令行工具，輸入命令create-react-app my-app。運(yùn)行命令成功之后，會在當(dāng)前目錄創(chuàng)建一個(gè)名為my-app的子目錄。

注：my-app是自定義的名字，用戶可以把它定義成自己想要的名字，但不要用中文。

打開my-app目錄，可以看到以下結(jié)構(gòu)：

簡單的介紹一下這些文件，本書后文中有專門的工程化章節(jié)，這里就不對整個(gè)環(huán)境詳細(xì)展開介紹了。

1）README.md，這個(gè)文件用于編寫項(xiàng)目介紹使用，初學(xué)者可以跳過。

2）node_modules，在項(xiàng)目中安裝的依賴都會放在這個(gè)文件夾下。

3）package.json，是整個(gè)項(xiàng)目的描述文件，里邊有兩塊內(nèi)容這里詳細(xì)說一下。

①dependencies項(xiàng)目安裝的依賴名稱及版本信息?？梢钥吹皆跇?gòu)建完的項(xiàng)目中，已經(jīng)幫開發(fā)者安裝好了一些基本的依賴：＂react＂:＂^16.13.1＂，＂react-dom＂:＂^16.13.1＂，＂react-scripts＂:＂3.4.1＂。react和react-dom不需要再復(fù)述了。react-scripts是什么？create-react-app會把webpack、Babel、ESLint配置好合并在一個(gè)包里，方便開發(fā)人員使用，這個(gè)包就是react-scripts。

②scripts中定義的是在命令行工具中可以使用到的一些命令。在當(dāng)前目錄my-app中，啟動命令行工具，一起來測試一下這些命令。

● npm start。這個(gè)命令用于啟動項(xiàng)目。create-react-app內(nèi)置了一個(gè)熱更新服務(wù)器，項(xiàng)目啟動之后，默認(rèn)會打開http://localhost:3000，運(yùn)行項(xiàng)目。

● npm test。這個(gè)命令用于項(xiàng)目測試，測試相關(guān)的內(nèi)容在“第7章工程化配置”中會詳細(xì)介紹。

● npm run build打包命令。該命令會將項(xiàng)目中的代碼打包編譯到build文件夾中，它會將React正確地打包為生產(chǎn)模式中需要的代碼并優(yōu)化構(gòu)建以獲得最佳性能。將來要把項(xiàng)目發(fā)布在生成環(huán)境的時(shí)候，只需要把build文件夾的內(nèi)容發(fā)布上去即可。

● npm run eject。該命令會把項(xiàng)目所有配置文件暴露出來，用于對項(xiàng)目構(gòu)建重新配置。但該命令是單向操作，不建議初學(xué)者使用。

4）.gitignore文件。該文件的內(nèi)容用于描述項(xiàng)目中哪些文件不需要添加到git管理中。

5）public文件夾。用來存放html模板。public文件夾中的index.html就是項(xiàng)目的html模板，不建議讀者修改名字，否則需要重新配置html文件。

6）src文件夾。該文件夾中index.js是整個(gè)項(xiàng)目的入口文件。為了加快重新構(gòu)建的速度，webpack只處理src中的文件。注意要將JS和CSS文件放在src中，否則該文件不會被webpack打包。

關(guān)于create-react-app的使用先說到這里，對于初學(xué)者來說，在這個(gè)階段可以安裝腳手架npm i create-react-app-g、可以利用腳手架構(gòu)建項(xiàng)目create-react-app＜項(xiàng)目名稱＞、可以正常啟動項(xiàng)目npm start、可以知道React所有的代碼都寫在src目錄中就夠了。關(guān)于create-react-app更高級的用法，可以在學(xué)完工程化內(nèi)容之后再來探索。

2.4.3 項(xiàng)目入口文件

打開create-react-app構(gòu)建好的項(xiàng)目，打開src文件夾，在這個(gè)文件夾中，可以看到很多文件，刪除index.js和App.js以外的文件。

打開index.js，把多余的代碼刪除，只留下以下內(nèi)容：

然后打開App.js，修改為以下內(nèi)容：

現(xiàn)在有了一個(gè)最基礎(chǔ)的React項(xiàng)目，index.js作為項(xiàng)目的入口文件，對項(xiàng)目進(jìn)行配置，如后期學(xué)到的router和redux，App.js中的App組件則作為項(xiàng)目的入口組件，在App中開始寫項(xiàng)目的正式內(nèi)容。

2.4.4 React.StrictMode

StrictMode是用來檢查項(xiàng)目中是否有潛在風(fēng)險(xiǎn)的檢測工具，類似于JavaScript中的嚴(yán)格模式。StrictMode跟Fragment類似，不會渲染任何真實(shí)的DOM。只是為后代元素觸發(fā)額外的檢查和警告。

StrictMode可以在代碼中的任意地方使用，當(dāng)然也可以直接用在index.js中，開啟全局檢測。除上述描述的特征外，StrictMode檢查只在開發(fā)模式下運(yùn)行，不會與生產(chǎn)模式?jīng)_突。具體來看一下StrictMode都能進(jìn)行哪些檢測。

1）識別具有不安全生命周期的組件。

2）有關(guān)舊式字符串ref用法的警告。

3）關(guān)于已棄用的findDOMNode用法的警告。

4）檢測意外的副作用。

5）檢測遺留的context API。

在StrictMode模式下，如果檢測到代碼有以上問題，React會在控制臺中打印出相應(yīng)的警告。