使用Antd实现TodoList的页面布局

yarn add antd
#然后代码中引入css样式
import 'antd/dist/antd.css'

先用 ant design 做一个简单的页面布局(ant design更适合做后台布局)：

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

import {
    Input,
    Button,
    List,
    Typography

} 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={{marginTop:"10px",marginLeft:'10px'}}>
                <Input placeholder = 'todo info' style={{width:'300px',marginRight:'10px'}}/>
                <Button type='primary'>提交</Button>
                <List
                      bordered
                      dataSource={data}
                      renderItem={item => (
                        <List.Item>
                          <Typography.Text mark>[info]</Typography.Text> {item}
                        </List.Item>
                      )}
                />
            </div>
        )
    }
}

export default TodoList;