Create React App是FaceBook的React團隊官方出的一個構建React單頁面應用的腳手架工具。它本身集成了Webpack，並配置了一系列內置的loader和默認的npm的腳本，可以很輕松的實現零配置就可以快速開發React的應用。
Quick Start（快速入門）
全局安裝
首先確保你電腦上安裝最新的
# 全局安裝 npm install -g create-react-app # 構建一個my-app的項目 npx create-react-app my-app cd my-app # 啟動編譯當前的React項目，並自動打開 http://localhost:3000/ npm start 以上命令執行完成后，則自動打開： http://localhost:3000/
如果你不能確保最新版本，可以先嘗試卸載：
npm uninstall -g create-react-app,然后再全局安裝。
構建React項目的其他方式
- npm
# npm init <initializer> is available in npm 6+ npm init react-app my-app - Yarn
# yarn create is available in Yarn 0.25+ yarn create react-app my-app 項目目錄
項目的默認目錄：
├── package.json ├── public # 這個是webpack的配置的靜態目錄 │ ├── favicon.ico │ ├── index.html # 默認是單頁面應用，這個是最終的html的基礎模板 │ └── manifest.json ├── src │ ├── App.css # App根組件的css │ ├── App.js # App組件代碼 │ ├── App.test.js │ ├── index.css # 啟動文件樣式 │ ├── index.js # 啟動的文件（開始執行的入口）！！！！ │ ├── logo.svg │ └── serviceWorker.js └── yarn.lock 默認的npm的腳本
啟動開發
npm start
# or yarn start 啟動測試
npm test #or yarn test 構建生產版本
npm run build
#or yarn build 解壓默認的webpack配置到配置文件中
npm run eject
啟用sass
react-scripts@2.0.0 以上版本才適用。
安裝依賴
要使用Sass必須首先安裝node-sass
$ npm install node-sass --save
$ # or $ yarn add node-sass 安裝完之后，我們就可以直接把原來的CSS文件后綴直接改為 .scss 或者.sass,然后組件中導入的文件不再是 css文件而給我scss文件即可。
import React, {Component} from 'react'; import store from './Store/Index'; import {AddNumCreator, MinusNumCreator} from './Store/ActionCreaters'; import './App.scss'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <h1>瀟灑</h1> </header> </div> ); } } export default App; 在sass文件中引入其他sass文件
-
引入src中的scss文件
@import 'styles/_colors.scss'; -
引入
node_modules中的樣式：@import '~nprogress/nprogress';
~ 就代表： node_modules
CSS Modules支持
導入CSS文件或者Sass文件的時候，可以用一個變量接收一下返回值。那么就可以直接通過它來訪問CSS或者Sass中的內部樣式類了。比如：
- Button.module.css
.error { background-color: red; } - Button.js
import React, { Component } from 'react'; import styles from './Button.module.css'; // Import css modules stylesheet as styles class Button extends Component { render() { // reference as a js object return <button className={styles.error}>Error Button</button>; } } 結果：
<!-- This button has red background --> <button class="Button_error_ax7yz">Error Button</button> 了解更多關於CSS模塊化
公共目錄
公共目錄里面的內容不會被webpack進行處理，僅僅會拷貝到最終生成的項目的根目錄下。
HTML模板修改
在public目錄中有個index.html是單頁面應用的基本模板，所有react生成的代碼都會注入到此HTML中。所以此處可以添加一些cdn腳本或者全局的html。
添加全局的資源（圖片、字體、svg、視頻等）
在公共目錄下，你可以放字體文件、圖片、svg等文件，訪問這些文件最好添加 %PUBLIC_URL%作為根目錄。
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
環境變量
巧妙的使用環境變量可以幫我們在項目中區分開生產環境還是編譯環境，從而執行不同的代碼。
命令行直接添加環境變量
- Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start - Windows (Powershell)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start) - Linux, macOS (Bash)
REACT_APP_NOT_SECRET_CODE=abcdef npm start
添加自定義環境變量文件.env
項目根目錄下創建.env文件，文件內部添加 key=value的配置可以直接應用於項目的編譯中。
REACT_APP_NOT_SECRET_CODE=abcdef
Note: 如果創建自定義的環境變量必須以
REACT_APP_開頭.
在項目中使用環境變量
在項目中可以直接用process.env.XXX訪問我們的自定義的環境變量。比如：
- js中使用
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_NOT_SECRET_CODE} /> </form> </div> ); } 再比如：判斷是否是生產環境
if (process.env.NODE_ENV !== 'production') { analytics.disable(); } - HTML中使用
<title>%REACT_APP_WEBSITE_NAME%</title>
配合TypeScript
第一種方式：創建項目的時候直接配置好TypeScript.
npx create-react-app my-app --typescript
#or yarn create react-app my-app --typescript 第二種方式：為現有的React項目添加TypeScript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or yarn add typescript @types/node @types/react @types/react-dom @types/jest 配置代理
package.json配置代理
配置簡單代理，直接在package.json文件中添加proxy節點即可：
{
...
"proxy": "http://localhost:4000", ... } 自定義配置代理
第一步：安裝 http-proxy-middleware
$ npm install http-proxy-middleware --save
$ # or $ yarn add http-proxy-middleware 第二步：創建： src/setupProxy.js 添加如下內容:
const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api', { target: 'http://localhost:5000/' })); }; ## Visual Studio Code配置React開發環境 ### React集成VSCode測試 第一步: 首先安裝：[`Debugger for Chrome`](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)插件。 第二步： 項目根目錄下創建 `.vscode`文件夾。 第三步：創建`launch.json`文件 文件內容： ```json { "version": "0.2.0", "configurations": [ { "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] } 此時可以F5直接啟動測試了。
插件
- Reactjs code snippets
- Prettier - Code formatter
- ES7 React/Redux/GraphQL/React-Native snippets
- eslint
HTTPS托管靜態站
有時候需要用HTTPS進行調試相關結構，所以需要把靜態站也做成HTTPS的，那么以下配置：
配置HTTPS的環境變量為true然后再用npm start啟動dev server就是HTTPS的了。
- Windows (cmd.exe)
set HTTPS=true&&npm start - Windows (Powershell)
($env:HTTPS = "true") -and (npm start) - Linux, macOS (Bash)
HTTPS=true npm start 瀏覽器可能有安全警告，不用管，直接測試，enjoy it！
分析包結構的大小
Source map explorer可以幫助我們分析代碼最終打包的bundles的代碼來自哪里，
安裝：
npm install --save source-map-explorer #or yarn add source-map-explorer 添加分析腳本到package.json的scripts中：
"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
其他react的默認配置
- 直接可以使用sass（安裝node-sass模塊后）
- 直接可以使用css（import）
- 直接可以導入 圖片、svg、字體文件等，已經配置好相應的loader
- ES67代碼直接可以用
- class
- 箭頭函數
- 私用變量
- 靜態屬性
- 繼承
- 裝飾器（XXX不能用）
參考
AICODER官網地址：https://www.aicoder.com/
AICODER分享地址： https://www.aicoder.com/news/5c1afb763139e4295bd5330a/news.html