create react app學習筆記

2021-08-28 23:47:25 字數 1157 閱讀 7155

開始

cd aa

npm start

1,檔案結構

2,可用的指令碼命令

支援最新的js語法和墊層。 這個專案支援es6,es7,es8等

3,新增

4,使用public目錄

5,使用全域性變數

6,新增bootstrap

7,新增flow

8,新增環境變數

這些環境變數在構建的過程中會自動替換成想要的值,如果在執行的過程中,在靜態檔案中修改或者使用環境變數,專案不會做出響應,所以你可以重新編譯專案

有一種內建的環境變數叫做node_env,你可以通過process.env.node_env訪問到這個變數,react不允許自己設定這個變數的值,預設已經設定好了,有development,test,production這幾種情況

這些環境變數可以很方便的得到執行環境的相關資訊和專案本身之外的敏感資料資訊

9,解決後端api介面和前台跨域的問題,一般情況下,我們的後台伺服器和開發前台**的伺服器是不一樣的,解決這個問題可以直接在package.json檔案中新增 「proxy」: 「http://…」 這樣你在你的localhost下面訪問後台api如/api/todos直接**到上面指定的網域名稱中,所以跨域問題就解決了,要注意這種方式只能在開發環境中使用

特殊:如果你開發**的環境不是在locallhost下面,那麼上述方法也會是沒用的,關於解決辦法自行檢視官網

自定義設定proxy

幾種**路徑的方式,

// 匹配/bar/abc.html

「/bar/.html": ,

// 匹配 /baz/abc.html and /baz/sub/def.html

"/baz/**/.html」:

}// …}

設定的配置項的具體細節,請檢視

在開發環境中使用https ,可能你後台使用https的,所以你可以在cmd執行的時候輸入set https=true&&npm start

10,執行測試功能

react腳手架使用jest作為測試工具,jest工具用來做單元測試的,端到端的測試react不支援

jest找自己的測試檔案,放在src目錄下,有如下三條規則

create react app中新增less支援

npm run eject執行之後,我們發現多了乙個config資料夾 這樣就可以修改 webpack 相關配置了。在專案根目錄 使用 npm 或者 yarn 來安裝 less 和 less loader,我這裡使用的是 yarn yarn add less less loader我們需求修改 we...

create react app原始碼解讀

複製 複製 在實現 之前我們先梳理一上思路 通過commander獲取專案名稱 如果專案名稱為空 實際上還要對包名進行有效性檢查的,這裡暫且忽略 則退出程序,並提示使用者專案名稱不能為空,否則進行步驟3 在當前目錄下建立乙個子目錄,目錄名稱就是使用者輸入的專案名,並在裡面初始化乙個package.j...

dva與create react app的結合使用

接著把腳手架生成的src全部刪掉 用我們自己的專案目錄進行開發 首先 建立乙個index.js資料夾 作為我們專案的主入口 1 import dva from dva 34 注意這種引入方式已經報銷 在控制台會報警告5 import createhistory from history create...