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',
}),
);
之後重啓項目