随着版本的更新，搭建过程有所不同，安装时候以官网最新为准，目前安装版本react16.8.6 react-router5.0 axios0.19.0 antd3.20.1 脚手架版本3.0
1、安装react脚手架
https://react.docschina.org/docs/create-a-new-react-app.html#create-react-app
npx create-react-app my-app
cd my-app
npm start
yarn介绍
https://yarn.bootcss.com/
比npm更快速方便
npm install -g yarn //安装
//相关命令
yarn init
yarn add
yarn remove
yarn/ yarn install
2、安装插件
⚠️首先要知道antD在修改主题时候需要less，我们需要在react中做less-loader的配置，react脚手架3.0是隐藏了配置文件，这里由于建议先暴露配置文件再安装插件，不然可能暴露完node module里就找不到插件了，还要重新装一次
yarn eject //暴露配置文件
⚠️
1、yarn eject 只能用一次，用完即止，多出来config文件，我们要在config文件夹下的webapck.config.js里配置
2、react脚手架2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并，只有一个webpack.config.js
- 安装less-loader
yarn add less-loader
- 修改配置
新加less匹配项
copy 一份跟 sassRegex,sassModuleRegex 一样的声明即可：
const lessRegex = /.less/
const lessModuleRegex = /.module.less$/
在sass的配置下新增less配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
重新启动 yarn start 完成less配置
⚠️如果报错提示缺少less，那就根据安装less
yarn add less
- 安装 router axios
yarn add react-router-dom axios
react-router-dom为react-router4.0以后最新的router插件，也可以安装react-router，看需求
安装antD
https://ant.design/docs/react/introduce-cn
yarn add antd
这个时候在组件中引用
import { Button } from 'antd'
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
image.png
看到样子就成功了
- 按需加载
我们不能每个组件都引用css，需要完成按需加载
删除 import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
yarn add babel-plugin-import
根据官网添加配置
// .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"style": true // `style: true` 会加载 less 文件
}]
]
}
具体位置看下面完整代码在congfig中找，位置不要写错
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
重启，完成
补充 如果出现less报错
Inline JavaScript is not enabled. Is it set in your options
需要将less降级到2.X以下或者改webpack配置
安装 redux
yarn add redux
yarn add react-redux
redux调试工具安装
- 首先在Chrome中安装Redux Devtools扩展
- 安装插件
yarn add redux-devtools-extension
未完待续
网友评论