react安装,通过npm命令的方式来安装环境.
1.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
如果安装react项目的时候出现错误,比如:
就将淘宝镜像换成如下所示:
npm config set registry https://registry.npm.taobao.org
2.创建react项目
cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
如果遇到create-react-app不是内部或者外部命令的,可以使用npx create-react-app my-app
3.运行react项目
npm run build
npm install -g serve
serve -s build
4.安装路由
npm i -S react-router react-router-dom
5.使用antd组件
npm i antd
6.使用antd的按需加载
npm i react-app-rewired customize-cra
安装完毕之后再package.json中修改内容
/* package.json */
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
}
修改成
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
然后创建config-overrides.js文件,然后安装babel-plugin-import插件
npm i babel-plugin-import
之后在config-overrides.js中添加内容:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css', }),
);
这里就完成ant组件的按需加载
安装路由懒加载
npm i react-loadable
安装样式组件
npm i styled-components
配置装饰器
const {
override,
fixBabelImports,
addDecoratorsLegacy
} = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
之后重启项目