1.Ant.Design的整合
在开始redux模块前,让我们先介绍一下Ant.Design模块.
到目前为止,我们自己开发的组件都是基于html的原生元素.实际上,Ant.Design已经帮我们精心设计了大量优秀的组件,我们可以直接使用,这一部分,我们将介绍给大家如何使用Ant.Design
2引入Ant.Design
首先,让我们安装Ant.Design
yarn add antd
修改你的App.css,在第一行加入:
@import '~antd/dist/antd.css';
让我们新增加一个antd的组件,简单演示一下如何使用Ant.Design.让我们在/src目录下增加一个antd.js文件,简单实现一个无状态的组件.
这个组件里我们简单使用了Row,Col,Button,Calendar,Rate,Card,Steps 几个组件.
import React from 'react'
import "./App.css"
import {Row,Col,Button,Calendar,Rate,Card,Steps } from 'antd'
export default function(){
const Step = Steps.Step;
return (
<Row>
<Col span={12}>
<Card title="Antd 示例">
<Rate allowHalf defaultValue={2.5} />
<Steps current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Button type="primary">hello,world</Button>
</Card>
</Col>
<Col span={12}><Calendar/></Col>
</Row>
)
}
下一步,修改index.js文件
//导入刚才新建的组件
import Antd from './antd'
//渲染该组件
ReactDOM.render(<Antd/>, document.getElementById('root'));
现在我们应该可以看到Ant.Design开始正式工作了.
