React学习系列Antd的使用

一个方便极速开发应用的插件 Ant Design ,这些相当于帮我们封装了常用的组件,我们直接拿来用就行。

在vue中也有这样的插件如:element-ui 和 ivew

链接:https://ant.design/docs/react/introduce-cn

React学习系列Antd的使用

快速使用步骤:

1、安装插件

 cnpm install antd --save

2、在用到的地方引入组件和css (css可以在全局css的上面引入)

import {DatePicker,Button} from 'antd';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS 

3、在render方法中使用 

<DatePicker />
<Button type="primary">Hello</Button>

源码:

import React,{Component} from 'react'
import {DatePicker,Button} from 'antd';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
class AntdDemo extends Component {
    constructor(props){
        super(props);
    }


    render(){
        return (
            <div>
                <DatePicker />
                <Button type="primary">Hello</Button>
            </div>

        )
    }
}

export default AntdDemo;

效果图:

React学习系列Antd的使用

 React学习系列Antd的使用