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