react-04 Using Antd

 

1下载antd

cnpm install antd --save

2 引入 Antd(App.js)

在此处引用不会起作用，需要在index.js中引入全局样式才能起作用

/*
应用的根组件
* */
import React,{Component} from 'react'
import {Button,message} from 'antd'

export default class App extends Component{

    handleClick = () =>{
        message.success('success');
    }

    //必须有render且必须返回一个DOM虚拟对象
    render(){
        return <Button type="primary" onClick={this.handleClick}>Primary</Button>
    }
}

3 引入全局 Antd(index.js)

/*
应用的入口组件:作用是渲染组件
* */

import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'

import App from './App'

//将App组件标签渲染到index页面的div上
ReactDOM .render(<App/>,document.getElementById('root'));

4 实现按需加载

     无需每次加载所有的样式，使用时只需要在相应的组件中引入就可以了。

4.1 下载依赖

//yarn add react-app-rewired customize-cra babel-plugin-import
cnpm install  react-app-rewired customize-cra babel-plugin-import --save

4.2定义配置文件

添加配置文件：config-overrides.js(项目根目录),名字不能写错

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

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

4.3修改json配置文件

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

改成：
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

5 删除index.js中的全局样式

import 'antd/dist/antd.css'

在App.js组件中引入Antd就能够产生效果了。