Hello 小伙伴們，如果覺得本文還不錯，記得給個 star ， 小伙伴們的 star 是我持續更新的動力！GitHub 地址
一 目錄
不折騰的前端，和咸魚有什么區別
二 前言
Create React App 是一個官方支持的創建 React 單頁應用程序的方法。它提供了一個零配置的現代構建設置。
本文 絕大多數、99% 內容來自 Create React App 的文檔，1% 來自個人的整理。
如果對此話有所誤解，請跳至文：十九 總結
可加 QQ 群：
798961601，跟隨 jsliang 一起折騰
- 參考文獻：
三 安裝及初始目錄
- 下載 Node.js
- 安裝 Create React App：
npm i create-react-app -g
- 開啟新項目：
create-react-app todolistcd todolistnpm start
- 打包項目：
npm build
- 項目目錄：
- todolist
+ node_modules —————————— 項目依賴的第三方的包
- public ———————————————— 共用文件
- favicon.ico —— 網頁標簽左上角小圖標
- index.html —— 網站首頁模板
- mainfest.json —— 提供 meta 信息給項目，並與 serviceWorker.js 相呼應，進行離線 APP 定義
- src ——————————————————— 項目主要目錄
- App.css —— 主組件樣式
- App.js —— 主組件入口
- App.test.js —— 自動化測試文件
- index.css —— 全局 css 文件
- index.js —— 所有代碼的入口
- logo.svg —— 頁面的動態圖
- serviceWorker.js —— PWA。幫助開發手機 APP 應用，具有緩存作用
- .gitignore ——————————— 配置文件。git 上傳的時候忽略哪些文件
- package-lock.json ———— 鎖定安裝包的版本號，保證其他人在 npm i 的時候使用一致的 node 包
- package.json ————————— node 包文件，介紹項目以及說明一些依賴包等
- README.md ———————————— 項目介紹文件
復制代碼四 默認支持特性
-
支持所有現代瀏覽器（IE 9、10、11 除外，如果需要，請自行配置）
-
支持指數運算符 (ES2016)
-
支持
async/await(ES2017) -
支持
Object Rest(剩余) /Spread(展開) 屬性 (ES2018) -
支持動態
import()(stage 3 proposal) -
支持
Class字段和靜態屬性 (part of stage 3 proposal) -
支持 JSX, Flow 和 TypeScript
-
支持 PostCSS，無需手動添加 CSS 前綴，Create React App 會自動補全
五 配合 VS Code 調試
可以通過 Visio Studio Code 的插件 Debugger for Chrome 調試 Create React App：
- 安裝 -> Debugger for Chrome
- 調試 -> 添加配置：
launch.json
{
"version": "0.2.0", "configurations": [ { "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] } 復制代碼- 保存 -> 開始調試
- 通過上述步驟即可開始調試
如有問題可以參考下面資料
六 分析包大小
使用 source maps 分析 JavaScript 包。
這有助於你了解代碼膨脹的來源，從而配合其他插件來減少每個包的大小，優化項目。
- 安裝：
npm i source-map-explorer -S - 修改 package.json：
package.json
"scripts": {
"analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
}
復制代碼- 分析：
npm run build - 分析：
npm run analyze
七 模塊引入 CSS
在 Create React App 中，如果你的 react-scripts 版本是 2.0 或者更高，你可以通過模塊形式引入樣式：
Button.js
import React, { Component } from 'react'; import styles from './Button.module.css'; // 將 css modules 文件導入為 styles import './another-stylesheet.css'; // 導入常規 CSS 文件 class Button extends Component { render() { // 作為 js 對象引用 return <button className={styles.error}>Error Button</button>; } } 復制代碼這樣子不會導致樣式的沖突，就好比你 import JS 進來一樣。
八 Sass 安裝及使用
- 安裝
node-sass：npm i node-sass -S - 引入：
@import 'styles/_colors.scss'; // 假設 styles 目錄 在 src/ 目錄下
九 添加圖片、背景、SVG
- 添加圖片：通過
import引入即可。
import React from 'react'; import logo from './logo.png'; // 告訴 Webpack 這個 JS 文件使用了這個圖片 console.log(logo); // /logo.84287d09.png function Header() { // 導入結果是圖片的 URL return <img src={logo} alt="Logo" />; } export default Header; 復制代碼- 引用背景：通過
url引用即可。
.logo { background-image: url(./logo.png); } 復制代碼- 引用 SVG：
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> </header> </div> ); } export default App; 復制代碼或者：
import { ReactComponent as Logo } from './logo.svg'; const App = () => ( <div> {/* ReactComponent 導入名稱是特殊的 */} {/* Logo 是一個實際的 React 組件 */} <Logo /> </div> ); 復制代碼十 public 文件夾
在 Create React App 創建的項目中，有個 public 文件夾，該文件夾下通常有：
- favicon.ico - 網頁小標簽
- index.html - 項目首頁
- mainfest.json - 提供 meta 信息給項目，並與 serviceWorker.js 相呼應，進行離線 APP 定義
當然，它不僅可以擁有這些文件，還可以新增內容。
10.1 引用靜態資源
index.html 可以引用靜態資源。
在 index.html 中引用的靜態資源不會被 Webpack 打包，而是被復制到打包目錄中，使用方法：
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 復制代碼只需要加上 %PUBLIC_URL%/ 表示引用 public 下的資源即可。
在 JavaScript 中：
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; } 復制代碼這樣也會引用 public 中的資源，從而讓圖片 不會被 Webpack 打包。當然，需要犧牲的代價有：
- public 文件夾中的所有文件都不會進行后處理或壓縮。
- 在編譯時不會調用丟失的文件，並且會導致用戶出現 404 錯誤。
- 結果文件名不包含內容哈希值，因此你需要添加查詢參數或在每次更改時重命名它們（以便清除瀏覽器緩存）。
10.2 Mock 數據
此外，由於它內含 Node.js，所以還可以利用這點進行數據模擬（Mock），做法是：
- 在 public 文件夾中新建 api 目錄，然后創建文件 headerList.json，引用 axios 后，通過：
axios.get('/api/headerList.json').then()即可調用該文件進行 Mock。
api 下可以存放多個 json 文件
十一 代碼打包分割
在 Create React App 中，我們可以使用 React Loadable 來進行代碼的分割。
使用方式：
import Loadable from 'react-loadable';
const LoadableOtherComponent = Loadable({
loader: () => import('./OtherComponent'),
loading: () => <div>Loading...</div>,
});
const MyComponent = () => (
<LoadableOtherComponent/>
);
復制代碼- 參考文獻：
十二 引用 TypeScript
- 使用 TypeScript 啟動新的 Create React App項目：
npx create-react-app my-app --typescript - 往 Create React App 現有項目中添加 TypeScript：
npm i typescript @types/node @types/react @types/react-dom @types/jest -S。（記得修改所有 JS 文件為 TS 文件，例如src/index.js->src/index.tsx）
十三 React Router - 路由
由於 Create React App 並沒有規定路由解決方案，然后市面上比較收歡迎的路由解決方案是 React Router，所以可以嘗試使用：
- 安裝：
npm i react-router-dom -S - 使用：React Router
十四 自定義環境變量
- 定義環境變量：
process.env.REACT_APP_SECRET_CODE - 獲取特殊內置環境變量：
process.env.NODE_ENV。值為：test、development、production。對應三種環境。
render() {
return ( <div> <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small> <form> <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} /> </form> </div> ); } 復制代碼在開發環境，該頁面渲染為：
<div>
<small>You are running this application in <b>development</b> mode.</small>
<form>
<input type="hidden" value="abcdef" />
</form>
</div>
復制代碼十五 測試
Create React App 使用 Jest 作為其測試運行器。
但是很不幸的是，工作中並沒有用上，估計以后的工作也可能不會用上，所以咱們只需要知道有這回事，等有機會再進行嘗試。
- 參考文獻：
十六 開發環境代理
在開發項目的過程中，最擔心的莫過於瀏覽器告訴你跨域了：后端端口在 4000，或者主機在另一個 IP 地址……
所以，我們需要在開發環境中配置代理。
嗯，你問為什么生產（部署）環境我們不做代理？因為那屬於后端的活了，或許你是個 全棧 工程師，你可以自行解決下。
往 package.json 中添加字段：
package.json
"proxy": "http://localhost:4000",
復制代碼這樣當你調用接口：fetch('/api/todos') 時，它會請求代理到 http://localhost:4000/api/todos。
當然，有可能 proxy 不夠靈活，小伙伴們可以嘗試通過直接訪問 Express，並連接項目的代理中間件，詳情看參考文獻。
- 參考文獻：
十七 使用 Ajax 請求獲取數據
在 Create React App 中，可以通過下面兩種方法獲取 Ajax 數據：
fetch()APIaxios庫
當然，沒有限制死必須使用這兩種。
這兩種調用 Ajax 請求獲取數據的方式便捷在它返回 Promise 供鏈式調用數據。
十八 Title 和 Meta
- 動態更新 Title：
document.titleAPI - 根據 React 組件更改 Title：
React Helmet等第三方庫 - 動態更新 Meta：
<!doctype html> <html lang="en"> <head> <meta property="og:title" content="__OG_TITLE__"> <meta property="og:description" content="__OG_DESCRIPTION__"> </head> <body> </body> </html> 復制代碼然后讀取 index.html 並將 __OG_TITLE__ 和 __OG_DESCRIPTION__ 替換掉即可。