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
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
