Ant Design制作UI界面

1.安装

 2.制作一个TodoList

在使用Ant Design时，第一件事就是先引入CSS样式，有了样式才可以让UI组件显示正常。可以直接在/src/TodoList.js文件中直接用import引入。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);

TodoList.js

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

const data = [
    '早8点开晨会，分配今天的代码任务',
    '早9点开需求沟通会',
    '早9点开需求沟通会',
]

class TodoList extends Component{
    render() {
        return (
            <div style={{marginLeft: '10px', marginTop: '10px'}}>
                <div>
                    <Input
                        placeholder='请输入...'
                        style={{width:'250px', marginRight: '10px'}}/>
                    <Button type='primary'>增加</Button>
                </div>
                <div style={{marginLeft: '10px', marginTop: '10px', width: '300px'}}>
                    <List
                        bordered
                        dataSource={data}
                        renderItem={item => <List.Item>{item}</List.Item>}
                    />

                </div>
            </div>
        )
    }
}

export default TodoList