1、創(chuàng)建環(huán)境

環(huán)境 Node >= 14.0.0 和 npm >= 5.6 或 yarn

官方react創(chuàng)建項目方法

npx create-react-app my-app
cd my-app
npm start

使用yarn創(chuàng)建react項目

?。?！錯誤方法

yarn create-react-app my-app 

正確方法

yarn create react-app my-app 

2、安裝ant-design

根據(jù)ant官網(wǎng)安裝依賴

yarn add antd

配置按需加載

$ yarn add react-app-rewired customize-cra

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后在項目根目錄創(chuàng)建一個 config-overrides.js 用于修改默認配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

安裝babel-plugin-import

$ yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

3、多環(huán)境打包配置

參考文章三分鐘教你搞定 React 項目多環(huán)境配置

yarn add dotenv-cli -D

根目錄新建兩個文件

新建文件.png

?。?！一定是REACT_XXXX，就像vue項目VUE_XXXX

# .env.development
NODE_ENV=development
REACT_APP_BASE_API='http://xxxxxxx'
# env.production
NODE_ENV=production
REACT_APP_BASE_API='https://xxxxxxxx'

修改 package.json 中的 scripts來指定環(huán)境

"scripts": {
    "start": "react-app-rewired start",
    "build:dev": "dotenv -e .env.development react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

可以在 config-overrides.js打印出當前打包的BASE_URL

控制臺打印.png

4、路由

yarn add react-router-dom

5、狀態(tài)管理

redux、react-redux配合使用

yarn add redux
yarn add react-redux