1、创建环境
环境 Node >= 14.0.0 和 npm >= 5.6 或 yarn
官方react创建项目方法
npx create-react-app my-app
cd my-app
npm start
使用yarn创建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",
}
然后在项目根目录创建一个 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、多环境打包配置
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来指定环境
"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、状态管理
redux、react-redux配合使用
yarn add redux
yarn add react-redux
