React中使用Antd教程文檔：
https://ant.design/docs/react/getting-started-cn

介紹：antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù),一個(gè)方便極速開發(fā)應(yīng)用的插件 ，這些相當(dāng)于幫我們封裝了常用的組件，我們直接拿來(lái)用就行。

步驟

1：安裝Antd

cnpm  install  antd --save

2：全局css樣式

在react項(xiàng)目的css文件里面引入Antd的css

@import '~antd/dist/antd.css';

我這里是在app.css里面

3：根據(jù)文檔教程

https://ant.design/docs/react/use-with-create-react-app-cn
打開任意一個(gè)新建的組件
先引入全局css樣式：

import '../asset/css/App.css';

再引入需要用到文檔里面的按鈕組件

import Button from 'antd/es/button';

在render()模板里面，復(fù)制按鈕組件

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

最簡(jiǎn)單的按鈕就實(shí)現(xiàn)啦

import React, { Component } from 'react';
//引入Antd
import Button from 'antd/es/button';
import '../asset/css/App.css';
class News extends Component {
    constructor(props) {
        super(props);
        //react定義數(shù)據(jù)
        this.state = {
            
        }
    }
    render() {
        return (
            <div>           
            <Button type="primary">Button</Button>                      
            </div>
        )
    }
}
export default News;

這個(gè)時(shí)候就可以看到了按鈕啦，這是最簡(jiǎn)單基本的操作哦，后續(xù)會(huì)更新更多關(guān)于Antd這個(gè)框架的文章，因?yàn)橛闷饋?lái)還是很順利的哦。

繼續(xù)使用一些評(píng)分組件

import React, { Component } from 'react';
//引入Antd

import '../asset/css/App.css';

import { Rate } from 'antd';
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
class News extends Component {
    constructor(props) {
        super(props);
        //react定義數(shù)據(jù)
        this.state = {
            value: 3,
        }
    }

    handleChange = value => {
        this.setState({ value });
      };

    render() {
    const { value } = this.state;
    return (
      <span>
        <Rate tooltips={desc} onChange={this.handleChange} value={value} />
        {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
      </span>
    );
  }
}
export default News;

附：react系列教程

從零開始學(xué)習(xí)React-開發(fā)環(huán)境的搭建（一）
http://www.itdecent.cn/p/97f3a1ba168e
從零開始學(xué)習(xí)React-目錄結(jié)構(gòu)，創(chuàng)建組件頁(yè)面（二）
http://www.itdecent.cn/p/5b950b8cb73a
從零開始學(xué)習(xí)React-屬性綁定（三）
http://www.itdecent.cn/p/2c251795d1b3
從零開始學(xué)習(xí)React-路由react-router配置(四)
http://www.itdecent.cn/p/2b86d5f4d9d7
從零開始學(xué)習(xí)React-axios獲取服務(wù)器API接口（五）
http://www.itdecent.cn/p/81ca5cc94923
從零開始學(xué)習(xí)React-解析json、渲染數(shù)據(jù)（六）
http://www.itdecent.cn/p/1a998147b09b
從零開始學(xué)習(xí)React-在react項(xiàng)目里面使用mock（七）
http://www.itdecent.cn/p/2a5f296a865c
從零開始學(xué)習(xí)React-引入Ant Design 組件（八）
http://www.itdecent.cn/p/e7e905d89673