和taro一起做SPA 3.Ant.Design整合

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开始正式工作了.