react开发——TodoList

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BeautyBeier/article/details/82461812

React现在很流行的前端开发框架，这次以TodoList 开发来介绍react

一、开发前的准备

1.开发前电脑要安装好NodeJS（nodeJs 官网地址）：`https://nodejs.org`
2.npm命令行安装； 安装成功后通过`node-v` 和 `npm-v`来查看是否安装成功； 
3.上面两个安装好后，运行命令行 `npm install -g create-react-app` ——安装react脚手架

二、使用react编写TodoList功能

上面就是todoList的效果组件效果图；
首先使用代码npm run start 来启动项目，它的入口文件在下图文件src目录的index.js;

新建一个todoList的js文件；
在index.js中引入import TodoList from './TodoList';

三、jsx语法

import React, {
    Component,
    Fragment
} from 'react'
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'this is input',
            list: []
        }
    }
    render() {
        return ( 
            < div > 
                < div > 
                    < input  
                    value = {this.state.inputValue}
                    onChange = {this.handleInputChange.bind(this)}
                    / > 
                    < button > 提交 < /button> 
                 < /div > 
                 < ul > 
                 < li > learn react < /li>
                  < li > it is amazing < /li > 
                  < /ul>
            < /div > )
    }

    handleInputChange(e) {
        this.setState({
            inputValue:e.target.value  //通过setState来改变input中的值
        })
    }
}
export default TodoList

react中通过this.state来定义数据，react是单向数据绑定，在改变数据的时候，使用this.State 来改变数据。