react-总结4-引入组件库

蚂蚁金服组件库 Ant deign

1.构建一个项目
2.引入组件库 antd  通过yarn add antd安装  或者  npm i antd 安装
3. yarn add react-app-rewired customize-cra    packjson修改配置
	/* 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",
		} 	
4.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
	module.exports = function override(config, env) {
	  // do stuff with the webpack config...
	  return config;
	};	
5.使用 babel-plugin-import  来按需引入
	yarn add babel-plugin-import

	然后修改config-overrides.js的内容
	+ const { override, fixBabelImports } = require('customize-cra');

	- module.exports = function override(config, env) {
	-   // do stuff with the webpack config...
	-   return config;
	- };
	+ module.exports = override(
	+   fixBabelImports('import', {
	+     libraryName: 'antd',
	+     libraryDirectory: 'es',
	+     style: 'css',
	+   }),
	+ );
然后引入完成  使用组件即可

import '../style/Banner.css'
import React,{ Component,Fragment } from 'react'
import { Carousel } from 'antd';


class Banner extends Component {
    render(){
        return (
            <Fragment>
                <div style={{
                    width:"800px",
                    margin:'0 auto'
                }}>
                    <Carousel autoplay
                            dotPosition={'top'}
                            //可以在组件标签里添加api里的配置  操作组件样式
                    >
                        <div>
                            <h3>1</h3>
                        </div>
                        <div>
                            <h3>2</h3>
                        </div>
                        <div>
                            <h3>3</h3>
                        </div>
                        <div>
                            <h3>4</h3>
                        </div>
                    </Carousel>
                </div>
            </Fragment>
        )
    }
}

export default Banner