React实战 -- todoList

0x01 前言

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

0x02 搭建开发环境

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

create-react-app React应用开发脚手架工具，通过他我们可以快速的搭建好React开发工程。

1、npm install -g create-react-app yarn
2、create-react-app todo-list
3、cd todo-list
4、yarn start

按照上面的步骤操作就可以搭建好一个完整的React开发工程。如果对npm和yarn命令不熟的可以自己行百度他们之间的用法和差异性。

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

webpack简介

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

其最主要的特性：

loads：不同的文件加载解析的方式不一样，可以通过不同的load加载其对应的文件。
plugins：用于扩展webpack功能，是再一次构建过程中插入不同的操作处理逻辑。

webpack入门篇

0x03 编码实践

实践效果图

实践思路

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

React开发基本可以理解为是React组件的开发，上面的todoList应用可以分为三个组件。

1、整个应用组件

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去重新渲染。

2、新增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组件状态的变化进行重新渲染。
3、显示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学习过程的一个入门篇，后面如果有机会在大型工程中进行实践的过程中肯定会还有更多的挑战需要面临，后面遇到问题再填坑总结吧。