React实战 -- todoList

0x01 前言

React如今比较火的前端组件化开发框架，近段时间开始慢慢的关注前端相关技术，本篇主要来介绍一个React的入门Demo todoList，相信不少刚刚开始接触React开发的人都会去实践一下。好了，下面就来感觉下React的魔力。

0x02 搭建开发环境

用React开发一个应用，我该怎么定义工程，如何去开发？

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命令不熟的能够本身行百度他们之间的用法和差别性。

基于这个构建好的工程，若是你想要剖析下这个工程为何经过yarn start就能够启动起来、JSX语法在哪一个阶段被打包成浏览器可以识别的JS文件的须要进一步对webpack进行了解。

webpack简介

若是将webpack当作一个黑盒子那么它就是一个对JS扩展(Jsx)、CSS扩展（Scss，Less）等进行预处理、文件打包工具。（因为Jsx、Scss、Less浏览器无法直接解析）

其最主要的特性：

1. loads：不一样的文件加载解析的方式不同，能够经过不一样的load加载其对应的文件。

2. 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入门篇

0x04 总结

学了React理论仍是要本身动手写个demo体会下怎么写，否则学习的过程当中感受也就那么回事，一说本身来实现发现彻底动不了手，跟着学习教程多实践实践慢慢的就会领悟到其中的编程思想。

这也只是本身在React学习过程的一个入门篇，后面若是有机会在大型工程中进行实践的过程当中确定会还有更多的挑战须要面临，后面遇到问题再填坑总结吧。