使用UI组件库antd

npm install --save antd，安装antd。App.js中引入antd的样式文件，引入antd的Button组件。

import React, { Component } from 'react'
import { Button } from 'antd';

// import 'antd/dist/antd.css';
import 'antd/dist/antd.min.css'

export default class App extends Component {
  render() {
    return (
      <div>
        <button>点我</button>&nbsp;
        <Button type="primary">按钮1</Button>&nbsp;
        <Button type="default">按钮2</Button>&nbsp;
        <Button type="link">按钮4</Button>
      </div>
    )
  }
}

导入antd的css文件：antd/dist/antd.css时，npm start 启动应用时遇到如下警告：
Failed to parse source map: ‘webpack://antd/./components/time-picker/style/index.less’ URL is not supported
所以改用了antd/dist/antd.min.css。

App.js从antd的子库@ant-design/icons中引入图标组件，如微信图标、微博图标。

import React, { Component } from 'react'
import { Button } from 'antd';
import {WechatOutlined,WeiboOutlined} from '@ant-design/icons'

import 'antd/dist/antd.min.css'

export default class App extends Component {
  render() {
    return (
      <div>
        <button>点我</button>&nbsp;
        <Button type="primary">按钮1</Button>&nbsp;
        <Button type="default">按钮2</Button>&nbsp;
        <Button type="link">按钮4</Button>&nbsp;
        
        <WechatOutlined />&nbsp;
        <WeiboOutlined />
      </div>
    )
  }
}