[JavaScript知识库]React 使用antDesign

? ? ? ? 指令npm install antd --save（Ant Design - 一套企业级 UI 设计语言和 React 组件库）

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } 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 {
    //类中必有constructor函数 而且会最先执行
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <div style={{ marginTop: "10px", marginLeft: "10px" }}>
                <div>
                    <Input placeholder="todo info" style={{ width: "300px", marginRight: "10px" }}></Input>
                    <Button type="primary">提交</Button>
                </div>
                <List
                    style={{ marginTop: "10px", width: "370px" }}
                    bordered
                    dataSource={data}
                    renderItem={item =>
                        <List.Item>
                            {item}
                        </List.Item>
                    }
                />
            </div>
        )
    }
}
export default TodoList;