結合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項目