create-react-app 使用詳解

1. 快速開始

   npm install -g create-react-app create-react-app my-app cd my-app/ npm start 經過http://localhost:3000/查看你的app 使用 npm run build 編譯打包程序 npm test 文件修改後測試，這部份內容後面講

2. 更新到最新版本

   建立react app的主要分爲兩個包，一個包是create-react-app命令行，一個包是react-scripts，這個是用來生成具體項目的第三方依賴，若是要更新的話，基本上不須要更新create-react-app包，它就是使用最新版本的react-scripts包建立項目的，因此你建立的項目可以獲取最新的特性和改進而不須要更新create-react-app包，而只用更新react-scripts包，而要更新這個包，能夠打開https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md找到你當前的react-scripts版本，而後經過給定的命令一步步更新，這樣可能會很麻煩，可是你也能夠直接修改package.json中的版本號，而後直接npm install安裝，可是這樣可能致使潛在的破壞變化，咱們儘可能保證這個破話最小化

3. 文件結構

   注意以下幾點：
   1.項目目錄下面的public和src目錄下的index文件必須存在不能更名，其餘的文件能夠刪除和更名，你可能在src目錄下面建立子目錄，react爲了達到最快速的代碼重建，只有在src根目錄下的文件會被webpack編譯，因此必須把文件放在src根目錄下面，不然webpack不會識別 2.只用public目錄下的文件纔會被public/index.html引用，請閱讀下面的說明，從而使用js和html靜態資源 3.你可以建立更多的和public同級的頂級目錄，他們不會包含在項目構建中，你可使用他們做爲項目文檔

4. 可用的腳本命令

   1.npm start 在http://localhost:3000下監視文件，文件修改將自動更新，你能夠在控制檯中看到檢測錯誤 2.npm test 在交互監視模式下啓動測試運行程序。後面細講 3.npm run build 在生產環境中編譯代碼，並放在build目錄中 可以正確的打包代碼，而且優化，壓縮，使用hash重命名文件 4.npm run eject 注意：這是一個單向操做，一旦你使用eject，那麼就不能恢復了 使用說明：若是你對create-react-app這個構建工具和配置項不滿意，你能夠在任什麼時候候eject，從而導出可配置的模板，這個命令能夠移除到項目的單一構建依賴，取而代之的是將配置文件和項目依賴到導入到你的項目中，你能夠隨意支配他們，以後除了eject命令之外其他的命令都是可用的，這些命令也是可配置的，因此這時候你就能夠操做他們了，不得不說這個逼裝的能夠，不就是變成vue-cli相似了嗎，關於react的配置文件，容我往後再總結出來 你不是非要使用這個功能，原來的模板指定的功能在中小項目中有很好的表現，你沒有必須使用npm run eject的義務，可是做爲牛逼的咱們意識到若是這個構建工具不能自定義那麼鳥用都沒有

5. 支持最新的js語法和墊層

   這個項目除了支持es6的特性外還支持其餘的語法如es7,es8,jsx等 注意：這個react項目只支持Object.assign()（使用object-assign插件） Promise（使用promise插件） fetch（使用whatwg-fetch插件） 的墊層，若是要使用其餘的es6特性須要手動添加合適的墊層，本身到npm中找吧，說實話這點和vue-cli比起來就遜色了

6. 編輯器中的語法高亮

   若是你使用vsCode自動支持es6語法高亮

7. 在編輯器中展現檢測輸出

   就是在編輯器中使用eslint，下載編輯器的ESlint插件，而後在項目中添加.eslintrc文件，這個東西用起來很不爽有種約束感，不推薦使用，感受react的這套腳手架作的通常

8. 在vsCode中調試代碼

   這個功能可謂是vsCode的神做，對於調試前端框架中的代碼很是給力，強烈推薦使用
   點擊你的vsCode上面的調試按鈕中的添加配置，把裏面的配置項刪除，而後添加以下代碼
   { "version": "0.2.0", "configurations": [{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "userDataDir": "${workspaceRoot}/.vscode/chrome", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }] } 重啓你的編輯器，而後按F5就能夠在編輯器中調試了 

9. 自動格式化代碼（略）
10. 根據頁面的內容動態的更改html頁面的title
    • 能夠直接使用document.title便可，官網還介紹了其餘幾種作法，能夠自行查閱

11. 安裝第三方依賴

    例如react-router npm install --save react-router

12. 導入組件

    使用import導入和export導出，推薦在組件中使用export default導出組件，只能出現一次該語法

13. 代碼分割

    此即按需加載，要實現這個功能就是使用import函數，注意這和導入組件的import是有差異的，下面直接上demo 假設模塊A中寫以下代碼 const moduleA = 'hello'; export { moduleA }; 在app.js中按需導入模塊A import('./moduleA').then( ({moduleA}) => { // 在這裏面可使用模塊A } ).catch( err => { // ... } )

    模塊A的代碼就單獨放到一個代碼塊中，實現按需加載

14. 導入css文件

    也是藉助webpack的導入css文件的功能，在js文件中導入css文件代表依賴關係
    可是請注意，react在這裏裝了一個逼，咱們不須要這個功能，儘管咱們支持這個，可是做爲react開發工程師，我強烈建議你看完下面的內容
    如下是webpack導入css的缺點：
    1.若是你使用webpack在js中導入代碼了，那麼你的項目很難移植到其餘構建工具和開發環境中 2.在開發環境中，若是你修改了你的組件，那麼會致使你的css文件不必的重載 3.在生產環境中，全部的css文件都會被打包到一個單獨的壓縮後的css文件中，這樣看來有幾把用？ 因此react建議你把css文件都放到src目錄下的index.js文件中，這樣一來若是要更換構建工具直接把index.js中的import拿掉就能夠了

15. css文件後處理

    這部份內容是來對css文件壓縮和自動添加css兼容性前綴的，其實使用的就是webpack的postcss-loader，這個loader，react的腳手架已經配置好了，vue-cli也用了這個

16. css文件的預處理

    react配置的sass預處理器，若是你必需要用sass，關於這部分配置能夠去查看官網，我我的以爲沒有必要使用sass，使用框架開發，有不少配套的ui框架，而你只須要簡單的調整一下佈局就能夠了，在這一節你要知道，react腳手架並無對sass作配置，須要你手動配置

17. 添加圖片，字體和文件

    添加這類的靜態資源和添加css文件相似
    你使用import導入一個圖片或者一個文件好比PDF，返回的是會是一個路徑，這和css的import是不一樣的，返回的這個路徑值能夠當作src或者href的屬性值，爲了減小http請求，react腳手架對不超過10000字節的圖片作了data URI處理，SVG格式的圖片不支持這項設置，下面是demo import logo from './logo.png'; logo就是絕對路徑，因此當你的項目中須要使用圖片等相似靜態資源的時候，必須這樣顯示的import否則打包編譯後的路徑就不是你想要的。 注意點：在css文件中導入圖片等靜態資源，使用相對路徑，webpack在編譯的時候會自動的替換成絕對路徑。 你要知道react在這裏又裝了一個逼，用他本身的方式處理靜態資源，請看下一節

18. 使用public目錄

    1.修改html 這個html是能夠修改的，編譯完成的js文件是自動插入到這個文件中的，其實就是用的webpack的html插件，切。。。 2.添加其餘的靜態資源 你能夠把不須要webpack編譯的文件放在public文件夾裏面，這裏面的文件都不會被編譯，可是react又說，最好不要這樣放靜態資源，怎麼樣怎麼樣很差，可是若是你執意要本身導入文件，不須要webpack編譯，能夠看下面的介紹 放在public目錄下面的文件只是簡單的複製到build目錄中，那麼想要正確的引入這個文件須要使用PUBLIC_URL這個變量，以下代碼 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 也就是說你寫路徑的時候 "%PUBLIC_URL%" + "/img/logo.png" 這種格式就ok了 注意點：這個變量只能在上述的狀況下使用，若是你想導入src目錄或者node_modules目錄中的文件，你要把他複製過來，在編譯的時候上面的變量會替換成絕對路徑，若是你在js中導入能夠如 return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />  反正注意一點這樣作是很是不合理的，這裏只是應急方案 3.何時應該使用public文件夾？  如下幾種狀況：  1.你須要一些文件有特殊的文件名  2.當你有不少圖片，而且這些圖片的路徑是動態添加的，懂不？？就好比你在頁面上展現一個圖片，這個圖片要一直變，使用webpack編譯後的文件不能作到這點，思考一下  3.若是你使用其餘的很小的js庫，而且這個庫已經壓縮和優化了，你能夠直接用  4.還有一些js庫和webpack是有衝突的，你必需經過script標籤的形式導入  注意：若是你經過script導入的js是有全局變量的，你還要參考下一節的介紹

19. 使用全局變量

    若是你在你的src目錄中的js文件中使用上面所述的js文件中的全局變量，那麼會報錯，由於eslint並不知道這個變量是什麼，爲了不這個錯誤的發生能夠經過window來訪問，即const $ = window.$;這樣相似的結構就能夠訪問到全局變量，若是你不想經過window訪問能夠在使用變量的那一行代碼的後面添加 // eslint-disable-line 此註釋便可

20. 添加bootstrap

    隨着前端框架的盛行，原始的bootstrap已經快死了，react抄襲bootstrap作了一個react-bootstrap，用來充當本身的ui組件庫，真的太low了，好好跟人家vue學學啊 https://react-bootstrap.github.io/，這時react-bootstrap的官網 安裝 npm install --save react-bootstrap bootstrap@3 css還要單獨的引入，在src/index.js中導入 import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap-theme.css'; 在src/App.js中導入你本身要的組件 import { Navbar,Jumbotron,Button } from 'react-bootstrap' 注意點：這裏react官網上，叫咱們本身發佈基於bootstrap的樣式包，而後本身安裝，本身體會吧，不得不吐槽

21. 添加Flow

    Flow是一個靜態數據類型檢測工具，像java,c++這樣的語言都是靜態類型的，js和python都是動態類型的，也就是說js的數據類型能夠隨便修改，可是這個隨便修改可能出現不少錯誤，打個很簡單的比方，這個問題也是我日常遇到的，就是給一個值賦值數字，而後通過後臺傳遞的數據修改爲了字符串版的數字，就致使程序運行失敗，可是谷歌也不報錯，這尼瑪就尷尬了，我找這個問題找了很長時間，因此若是此時js可以有靜態版的數據類型這樣的錯誤就能夠避免了，TypeScript就是幹這個的，可是react和Flow搭配的比較好，因此想成爲一名徹徹底底的超級前端工程師仍是看看flow吧，https://flowtype.org/，下面是將flow引到react中來 npm install --save flow-bin 在package.json文件中添加命令 "flow": "flow" 運行 npm run flow init 會生成 .flowconfig配置文件，不用動他 而後在你須要檢測的文件的頂部添加 // @flow 註釋，看沒看到，在咱們用註釋註釋代碼的時候人家已經用註釋編程了，當你把代碼寫好後運行npm run flow，就能夠檢測是否有數據類型錯誤了

22. 添加環境變量

    1.在項目中可使用聲明在環境中的變量，就好像這個變量是定義在項目的js文件中同樣，默認狀況下，可使用的環境變量有NODE_ENV(這個環境變量已經定義好了)，和其餘以REACT_APP_開頭的環境變量 2.這些環境變量在構建的過程當中會自動替換成想要的值，若是在運行的過程當中，在靜態文件中修改或者使用環境變量，項目不會作出響應，因此你能夠從新編譯項目 3.普通的環境變量的建立必需要添加REACT_APP_開頭，而且其餘的環境變量除了NODE_ENV之外，都會被忽略，這是爲了不和系統本機的公鑰衝突，若是修改了環境變量，必須重啓你的項目 4.這些環境變量會被定義在process.env上面，好比你有一個環境變量叫作REACT_APP_SECRET_CODE當你在js中使用必須經過process.env.REACT_APP_SECRET_CODE才能訪問到 5.有一種內置的環境變量叫作NODE_ENV，你能夠經過process.env.NODE_ENV訪問到這個變量，react不容許本身設置這個變量的值，默認已經設置好了，有development,test,production這幾種狀況 6.這些環境變量能夠很方便的獲得運行環境的相關信息和項目自己以外的敏感數據信息 7.使用環境變量以前須要本身定義變量，定義變量的方式有兩種，第一種是在你的命令行工具中定義，第二種是新建一個.env文件，在public中的index.html中也可使用環境變量%REACT_APP_WEBSITE_NAME%必須以REACT_APP開頭，全部的環境變量都是編譯的時候插入 第一種方式：經過命令行的方式臨時的添加環境變量，只介紹windows set REACT_APP_SECRET_CODE=abcdef&&npm start 第二種方式：將環境變量定義在.env文件中 在項目根目錄中建立.env文件，在裏面定義變量 REACT_APP_SECRET_CODE=abcdef，還有其餘類型的文件，自行了解

23. 能不能使用Decorators

    這個語法是將一個函數定義的功能，幹到另一個函數裏面，目前不穩定，react不支持這個

24. 整合後端API

    主要用來解決後端api接口和前臺跨域的問題，通常狀況下，咱們的後臺服務器和開發前臺代碼的服務器是不同的，由於沒有幾個公司使用node開發服務器，域名端口不同因此存在跨域問題，解決這個問題能夠直接在package.json文件中添加 "proxy": "http://..." 這樣你在你的localhost下面訪問後臺api如/api/todos直接代理到上面指定的域名中，因此跨域問題就解決了，要注意這種方式只能在開發環境中使用 特殊：若是你開發代碼的環境不是在locallhost下面，那麼上述方法也會是沒用的，關於解決辦法自行查看官網

25. 自定義設置proxy

    幾種代理路徑的方式
    { // ... "proxy": { // 以/api的請求都匹配 "/api": { "target": "<url_1>" }, // 匹配/bar/abc.html "/bar/*.html": { "target": "<url_3>" }, // 匹配 /baz/abc.html and /baz/sub/def.html "/baz/**/*.html": { "target": "<url_4>" } } // ... } 設置的配置項的具體細節，請查看https://github.com/chimurai/http-proxy-middleware#options

26. 在開發環境中使用HTTPS

    可能你後臺使用https的，因此你能夠在cmd運行的時候輸入set HTTPS=true&&npm start便可

27. 運行測試功能

    react腳手架使用jest做爲測試工具，jest工具用來作單元測試的，端到端的測試react不支持
    jest找本身的測試文件，放在src目錄下，有以下三條規則
        1.__tests__目錄下的.js文件 2.後綴.test.js文件 3.後綴.spec.js文件 建議最好將測試文件和源文件放一塊兒，減小搜索路徑 命令行接口 當你運行npm run test，jest會開啓watch模式，一旦以保存文件，就會從新更新