- 进入Ant Design官网,点开始使用
- 进入菜单栏:Ant Design of React,找到安装命令,在命令行中执行安装
npm install antd --save
- 安装完成后,若想使用组件库,需将样式引入:
在index.js中,引入代码import 'antd/dist/antd.css';
- 在component中引入要使用的组件:
若要引入button:
import { Button } from 'antd';
之后就可使用Button组件
5. 使用button组件:
render() {
return (
<Fragment>
<Button type="primary">Primary Button</Button>
<div onClick={this.handleClick.bind(this)}>
hello world
</div>
</Fragment>
)
}
完整代码:
index.js中:
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './counter'
import 'antd/dist/antd.css';
// 将内容挂载到页面上
ReactDOM.render(<Counter />, document.getElementById('root'));
counter.js中
import React, {Component, Fragment} from "react";
import axios from "axios";
import {Button} from 'antd';
class Counter extends Component {
handleClick() {
window.addEventListener('click', ()=> {
console.log('window click')
})
}
render() {
return (
<Fragment>
<Button type="primary">Primary Button</Button>
<div onClick={this.handleClick.bind(this)}>
hello world
</div>
</Fragment>
)
}
}
export default Counter