react 的安装和案列Todolist

react 的安装和案列Todolist

1.react的安装和环境的配置

首先检查有没有安装node.js和npm

node -v 

npm -v

查看相关版本

2.安装脚手架工具

2.构建：create-react-app 快速脚手架

create-react-app的安装

npm install -g create-react-app       # Windows
sudo npm install -g create-react-app  # Linux

创建React项目

create-react-app todolist

 进入文件夹和执行项目

cd todolist
npm start

3.创建案例Todolist

Tolist.js

import React, { Component,Fragment } from 'react';
class Todolist extends Component {
    constructor(props) { //最优先执行的函数
        super(props);
        this.state={
            inputValue:'',
            list:[]
        }
    }
    render() {
        return ( 
            <Fragment>
                <div>
                    <input 
                        value={this.state.inputValue}
                        onChange={this.handleinputChange.bind(this)}
                    />
                    <button onClick={this.handlebuttonClick.bind(this)}> 提交 </button> 
                </div> 
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return(
                                <li 
                                    key={index} 
                                    onClick={this.handleItemdelt.bind(this,index)}
                                >
                                    {item}
                                </li>
                                )
                        })
                    }
                </ul> 
            </Fragment>
        );
    }
    handleinputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handlebuttonClick(e){　　//增加列表
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    handleItemdelt(index){　　// 删除列表
        // immutable
        // state 不允许我们坐任何的改变
        const list=[...this.state.list];   // list的一个副本
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
}
export default Todolist;

index.js

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

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

1.完整的使用了state这个东西

2.使用了onChange,onClick 事件绑定的语法，还做了事件方法的this的绑定

3.如何往bind里面传递回调函数的参数

4.state不允许做改变，immutable的一个特性

5.map函数

6.splice函数