React入门：开发一个简单的TodoList应用

准备工作

安装nodejs和npm,设置淘宝镜像等，自行百度。
使用react脚手架来搭建应用

npx craet-react-app appName

执行完得到以下目录结构：

在安装目录下执行npm start，会在浏览器打开localhost:3000:

开始编写

先在src下新建一个TodoItem文件：

import React,{Component} from 'react';

class TodoItem extends Component{
    clickHandle(){
        this.props.clickHandle(this.props.index);
    }
    render(){
        return (
            <li onClick={this.clickHandle.bind(this)}>{this.props.item}</li>
        );
    }
}

export default TodoItem;

再新建一个TodoList.js文件。

import React,{Component} from 'react';
import TodoItem from './TodoItem';

class TodoList extends Component{
    constructor(){
        super();
        this.state = {
            item:['学习react','学习nodejs','学习ES6'],
            input:''
        }
    }
    btnClickHandle(){
        this.setState({
            item:[...this.state.item,this.state.input],
            input:''
        })
    }
    delItem(index){
        var list = [...this.state.item];
        list.splice(index,1);
        this.setState({
            item:list
        })
    }
    render(){
        return (
            <div>
                <input value={this.state.input}  onChange={(e)=>{this.setState({input:e.target.value})}}/>
                <button onClick={()=>{this.btnClickHandle()}}>add</button>
                <ul>
                    {
                        this.state.item.map((value,index)=>{
                            return (<TodoItem index={index} key={index} item={value} clickHandle={(i)=>{this.delItem(i)}}/>);
                        })
                    }
                </ul>
            </div>
        );
    }
}
export default TodoList;

修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

项目完成，运行npm start，就可以在浏览器体验一个TodoList基本功能了。

总结

1、大爱箭头函数。不需要在为函数绑定this,因为它的this是在定义时确定的，不像普通函数一样，由调用时决定。
2、JSX语法中，HTML标签嵌套的大括号相当一个JS代码的执行环境，里面可以放JS表达式，但不能写语句，如if else等
3、React更新页面不操作DOM节点，而是依靠数据驱动