React實戰 -- todoList

時間 2019-12-07

標籤 react 實戰 todolist 欄目 React 简体版

原文原文鏈接

0x01 前言

React如今比較火的前端組件化開發框架，近段時間開始慢慢的關注前端相關技術，本篇主要來介紹一個React的入門Demo todoList，相信不少剛剛開始接觸React開發的人都會去實踐一下。好了，下面就來感覺下React的魔力。css

0x02 搭建開發環境

用React開發一個應用，我該怎麼定義工程，如何去開發？html

create-react-app React應用開發腳手架工具，經過他咱們能夠快速的搭建好React開發工程。前端

一、npm install -g create-react-app yarn
二、create-react-app todo-list
三、cd todo-list
四、yarn start

按照上面的步驟操做就能夠搭建好一個完整的React開發工程。若是對npm和yarn命令不熟的能夠本身行百度他們之間的用法和差別性。node

基於這個構建好的工程，若是你想要剖析下這個工程爲何經過yarn start就能夠啓動起來、JSX語法在哪一個階段被打包成瀏覽器可以識別的JS文件的須要進一步對webpack進行了解。react

webpack簡介

若是將webpack當作一個黑盒子那麼它就是一個對JS擴展(Jsx)、CSS擴展（Scss，Less）等進行預處理、文件打包工具。（因爲Jsx、Scss、Less瀏覽器無法直接解析）webpack

其最主要的特性：web

loads：不一樣的文件加載解析的方式不同，能夠經過不一樣的load加載其對應的文件。npm
plugins：用於擴展webpack功能，是再一次構建過程當中插入不一樣的操做處理邏輯。編程

webpack入門篇瀏覽器

0x03 編碼實踐

實踐效果圖

實踐思路

本次todoList 使用了antd組件的支持。

React開發基本能夠理解爲是React組件的開發，上面的todoList應用能夠分爲三個組件。

一、整個應用組件

class TodoList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            todoList: []
        }
    }

    handleChange(todo) {

        var rows = this.state.todoList;
        rows.push(todo);

        this.setState({
            todoList: rows
        });
    }

    render() {
        return (
            <div>
                <TypeNew onAdd={this.handleChange.bind(this)}  />
                <ListTodo todo={this.state.todoList} />
            </div>
        );
    }
};

TodoList註冊了回調給TypeNew在新增todo item的時候觸發ListTodo去從新渲染。

二、新增todo組件

class TypeNew extends Component{

    constructor(props) {
        super(props);
        this.state = {
            inputText : ''
        }
    }

    addTodo(e) {

        if(this.state.inputText) {
            this.props.onAdd(this.state.inputText);
        }

    }

    changeInputVal(e) {
        this.setState({
            inputText: e.target.value
        })
    }

    addTodoForBut() {
        var value = this.inputTextRef.refs.input.value
        if(value) {
            this.props.onAdd(value);
        }
    }

    emitEmpty() {
        this.inputTextRef.focus();
        this.setState({ inputText: '' });
    }

    render () {
        const {inputText} = this.state;
        const suffix = inputText ? <Icon type="close-circle" onClick={this.emitEmpty.bind(this)}/> : null;
        return (
            <div>
                <Input
                    placeholder="代辦事項"
                    suffix={suffix}
                    value={inputText}
                    //type="textarea"
                    style={{ width: 500 }}
                    onPressEnter={this.addTodo.bind(this)}
                    onChange={this.changeInputVal.bind(this)}
                    ref={node => this.inputTextRef = node}
                />
                <Button type="primary" onClick={this.addTodoForBut.bind(this)}>添加代辦事項</Button>
            </div>
        );
    }
};

TypeNew渲染antd的Input組件，給組件註冊了onChange事件，用於Icon的渲染與否，同時註冊了enter事件觸發TodoList組件狀態的變化進行從新渲染。
三、顯示todo列表組件

class ListTodo extends Component{

    constructor(props) {
        super(props)

        this.state = {
           data: []
        };

        this.refreshState();
    }

    getNowFormatDate() {
        var date = new Date();
        var dateSeperator = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + dateSeperator + month + dateSeperator + strDate;
        return currentdate;
    }

    refreshState() {

        var rows = [];
        for(var i=0; i < this.props.todo.length; i++) {
            var row = {
                key: i,
                date:this.getNowFormatDate(),
                todo:this.props.todo[i]
            };
            rows.push(row);
        }

        this.setState({
            data:rows
        });
    }

    componentWillReceiveProps() {
        this.refreshState();
    }

    render () {

        const columns = [{
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        }, {
            title: '代辦事項',
            dataIndex: 'todo',
            key: 'todo',
        }, {
            title: '管理',
            key: 'action',
            render: (text, record) => (
                <span>
                  <a href="#">Edit</a>
                  <span className="ant-divider"/>
                  <a href="#">Delete</a>
                </span>
            ),
        }];

        return (
            /* 其中顯示數據列表 */
            <Table columns={columns} dataSource={this.state.data} />

        );
    }
};

ListTodo在收到props的時候改變其自身的狀態後渲染Table組件。
編輯和刪除的功能都沒有開發完，開發的思路基本和上面的思路相似，你們有興趣能夠本身實現一版。

React入門篇