结合antd（在 create-react-app 中使用）创建react项目（一）

大家可以根据官网到操作步骤来，我这里只是做了几点补充！路径：https://ant.design/docs/react/use-with-create-react-app-cn

1、创建空文件夹，启动命令行，输入

yarn create react-app antd-demo 
//执行语句来创建项目 antd-demo为项目名称

2、在命令行中进入到项目目录，启动项目，查看项目是否创建成功

cd antd-demo
yarn start
//这里也可用npm start来启动

3、从 yarn 或 npm 安装并引入 antd。

yarn add antd
//安装antd

4、使antd按需加载  安装   react-app-rewired customize-cra

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",
}

修改后代码

5、安装yarn add babel-plugin-import  、 一个用于按需加载组件代码和样式的 babel 插件

yarn add babel-plugin-import

6、在项目根目录创建一个 config-overrides.js 文件

 const { override, fixBabelImports } = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
 );

7、验证一下是否可行了、这里我将项目中src文件夹下面到文件全部删除了，重新创建了index.js和App.js

5、这里我在index.js中和App.js中简单到写了几行代码

在index.js中如下

import React from 'react';
import {render} from 'react-dom'
import App from './App'

render(
	<App />,
	document.querySelector('#root')
)

在App.js中如下

import React, { Component } from 'react'
import {Button} from 'antd'   //按需加载



class App extends Component {
	render() {
		return (
			<div>
				<Button type="primary">Button</Button>
			</div>
		);
	}
}

export default App

这样重新在命令行里运行   yarn start  说明antd已经可以使用了

6、自定义主题

下载 less less-loader

yarn add less less-loader

然后我在项目根目录中创建了一个lessVars.js文件用来配置主题   https://ant.design/docs/react/customize-theme-cn

module.exports = {
	'@primary-color': '#1890ff', // 全局主色
	'@link-color': '#1890ff', // 链接色
	'@success-color': '#52c41a', // 成功色
	'@warning-color': '#faad14', // 警告色
	'@error-color': '#f5222d', // 错误色
	'@font-size-base': '14px', // 主字号
	'@heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
	'@text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
	'@text-color-secondary ': 'rgba(0, 0, 0, .45)', // 次文本色
	'@disabled-color ': 'rgba(0, 0, 0, .25)', // 失效色
	'@border-radius-base': '4px', // 组件/浮层圆角
	'@border-color-base': '#d9d9d9', // 边框色
	'@box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
  }

修改 config-overrides.js文件

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const modifyVars = require('./lessVars')  //在这里引入创建的主题配置

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
   	style: true,
 }),
 addLessLoader({
   javascriptEnabled: true,
   modifyVars    //在这里添加配置
 }),
);

你可以修改'@primary-color': 'red'  的颜色查看是否可行

重新启动项目

 

7、添加装饰器模式写法

安装@babel/plugin-proposal-decorators 

npm i @babel/plugin-proposal-decorators -D

修改App.js文件

import React, { Component } from 'react';
import {Button} from 'antd'
import './index.less'


//高阶组件
const testHOC = (WrappedComponent) => {
	return class HOCComponent extends Component{
		render(){
			return(
				<>
					<WrappedComponent />
					<div>这是一个高阶组件</div>
				</>
			)
		}
	}
}

//添加高阶组件
@testHOC   

class App extends Component {
	render() {
		return (
			<div>
				<Button type="primary">Button</Button>
			</div>
		);
	}
}

export default App

修改config-overrides.js文件  其中引入addDecoratorsLegacy  并且在下面调用addDecoratorsLegacy()

const { override, fixBabelImports, addLessLoader ,addDecoratorsLegacy} = require('customize-cra');

const modifyVars = require('./lessVars')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
   	style: true,
 }),
 addDecoratorsLegacy(), 
 addLessLoader({
   javascriptEnabled: true,
   modifyVars
 }),
);

然后重新启动 npm start 

注意：这里我下载完@babel/plugin-proposal-decorators后报错create-react-app: command not found

我的解决办法就是将node_modules文件删除，然后  npm i 重新下载

然后重新启动 npm start 

这样就配置完了一个有装饰器和样式更改，按需引入的结合antd的react项目