Create React App 是官方支持的創建單頁 React 應用程序的方法。提供了一個現代的構建設置，無需配置。它雖然只是一個包，但不建議全局安裝。如果本地安裝過可先卸載，這樣能保證每次創建項目時使用最新版本的功能。
開始使用
可以使用npx， npm， yarn指令都可以， 這里先以npx為例說明
### 全局卸載npm uninstall -g create-react-app### 創建工程，my-app-name為自定義的工程文件夾名稱
npx create-react-app@latest my-app-name### 也可以采用官方提供的模板創建，模板網站 https://www.npmjs.com/search?q=cra-template-*
npx create-react-app my-app --template [template-name]
### 比如
npx create-react-app my-app --template typescript
安裝完成后，可使用以下指令來操作工程
### 運行，測試，壓縮打包，刪除重新構建
npm start
npm test
npm run build
npm run eject
工程結構
my-app/README.mdnode_modules/package.jsonpublic/index.htmlfavicon.icosrc/App.cssApp.jsApp.test.jsindex.cssindex.js # js入口文件logo.svg
調試開發
在 WebStorm 菜單 Run 中選擇 Edit Configurations…。然后單擊 + 并選擇 JavaScript Debug。將 http://localhost:3000 粘貼到 URL 字段并保存配置。
樣式表設計
添加普通的.css文件
這是一種正常引用的方式
import './Button.css';
模塊化csss文件
就是[name].module.css 這樣命名，然后react有一個自動綁定的功能
import styles from './Button.module.css';
解決重復導入問題
可以比如index.css或App.css這新的總文件入口添加@import-normalize;，但需要注意瀏覽器是否支持
@import-normalize; /* bring in normalize.css styles *//* rest of app styles */
添加圖像、字體
import logo from './logo.png';
import { ReactComponent as Logo } from './logo.svg';return <img src={logo} alt="Logo" />;
加載 .graphql 文件
先安裝
npm install --save graphql graphql.macro
然后程序中這樣使用
import { loader } from 'graphql.macro';const query = loader('./foo.graphql');
工程部署
通過build打包后就可以部署應用了，通常需要借助一個nginx或tomcat來部署，但也可能通過一個靜態服務器來部署（node運行環境）。
- 端口沖突：若端口被占用，serve 會提示并退出，需手動指定其他端口。
- 跨域問題：serve 默認不處理CORS，需通過代理或后端配置解決。
- 生產環境：serve 僅用于開發環境，生產環境建議使用 nginx 或 Express。
安裝
## 在端口 3000 上為您的靜態站點提供服務，安裝后就可以使用serve指令了
npm install -g serve
serve -h # 查看所有幫助選項
全局配置
安裝后可通過指令配置端口等
serve -p 8080 #serve --port 8080
serve -s build -l 4000 # 調整端口為4000#---------------------------------------------------
-p, --port <port> 指定端口（默認 3000）
-s, --single 單頁應用模式（SPA，路由重定向到 index.html）
-o, --open 自動打開瀏覽器
-c, --config 指定配置文件（如 serve.json）
-a, --auth 啟用基礎認證（需用戶名:密碼）
#啟用 HTTPS
serve --ssl --cert /path/to/cert.pem --key /path/to/key.pem
#啟動認證
serve --auth username:password
# 允許外部訪問
serve --listen 0.0.0.0React工程配置
需要在工程中創建一個名為serve.json的文件，然后配置以下內容
{"port": 8080,"single": true,"open": true,"ignore": ["node_modules"]
}
運行React工程
進入到當前工程目錄下，輸入以下指令
serve # 啟動當前目錄為服務器， 訪問地址：http://localhost:3000
server --open # 啟動并打開瀏覽器
)
