13.使用antd实现TodoList页面布局19-05-15

1.百度搜索antd进入Ant Design官网
2.安装antd: yarn add antd
3.引入样式:import 'antd/dist/antd.css';
4.引入要使用的组件：import { Button,List,Input } from 'antd';
4.在官网中选择要使用的样式复制代码，完整示例：

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { Button,List,Input } from 'antd';

const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];
class TodoList extends Component{
     render() {
       return (
           <div style={{margin:'10px'}}>
              <div>
                <Input placeholder='todo info' style={{width:'300px', marginRight:'10px'}}/>
                <Button type="primary">提交</Button>
              </div>
             <List
               // size="large"
               // header={<div>Header</div>}
               // footer={<div>Footer</div>}
               style={{marginTop:'10px',width:'300px'}}
               bordered
               dataSource={data}
               renderItem={item => <List.Item>{item}</List.Item>}
             />
           </div>
       ) }
}
export default TodoList;