注：本文部分内容来自官网，如有问题请参考如下网站

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

1. 请先完成掉坑之路（1）的内容再进行本文内容。

2. 安装antd依赖：

> npm install --save-dev antd

3. 安装babel-plugin-import：

> npm install --save-dev babel-plugin-import

4. 在根目录下创建一个.babelrc文件：

//.babelrc
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}

5. 测试：

首先引入antd包

import {Button, Layout} from 'antd';
const {Header, Content, Footer} = Layout;

然后调用Button组件以及布局组件，下面只展示Button使用示例

<Button htmlType={'submit'}>Button</Button>

附录

//app/main.js
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, Layout} from 'antd';
const {Header, Content, Footer} = Layout;

class App extends Component{
    render(){
        return (
        <div>
            <Header>
                Hello, world!
            </Header>

            <Content style={{width:'1200px', height: '500px', textAlign:"center"}}>
                <Button htmlType={'submit'}>
                    Button
                </Button>
            </Content>

            <Footer style={{textAlign: 'center'}}>
                This is Footer<br/>
                By Victor Lin
            </Footer>
        </div>
    );
    }
}

ReactDOM.render(
<App/>,
    document.getElementById('root')
)