可以在return中使用对象的方式，输出表达式。

也就是花括号的方式{1+2}

jsx里只能写表达式，不能写语句。

return 中可以直接使用html标签的这种语法称为jsx

定义一个React组件。

• import {Component} from 'react'

• 多个包逗号分隔开
  

• extends Component

• 也可以写做class clsName extends React.Component,同时去掉import {Component}

• 实现render()函数，当然也存在不同的事件可以实现。
  

语法规范，以及React的约定。

大写字母开头的都是组件

ReactDom.render(..,dom) 负责渲染到dom

JS定义变量有三种方式

1. const  不可改变

2. let 区块代码内有效

3. var 可以修改 初始化是undefined

[...this.state.list ]中的 ... 是等价运算符

(x) => x + 6

相当于

function(x){    
   return x + 6;
};

LTS版本 = long time sport 永久支持稳定版 

/*组件拆分
* 父组件通过属性的形势向子组件传递参数
* 子组件通过props接收父组件传递过来的参数*/

//子组件想和父组件通信,子组件要调用父组件传递过来的方法

//添加绑定事件 
<li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>

//删除列表的绑定事件
handleItemClick(index){
    const list = [...this.state.list]; //复制副本操作
    list.splice(index,1); //删除对应角标列表
    this.setState({
        list:list //新list替换老list
    })
}

constructor(props){
    super(props);
    this.state={
        list:[],
        inputValue:'' //清空
    }
}
//2.当点击提交时,列表添加
handleBtnClick(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:'' //清空
    });
}
//1.先执行输入框的监听事件,当值改变时监听
handleInputChange(e){
    this.setState({
        inputValue:e.target.value //获取input框的值
    })
}
render() {
    return (
        <div>
           <div>
               <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
               <button onClick={this.handleBtnClick.bind(this)}>add</button>
           </div>
            <ul>
                {/*表达式*/}
                {
                    this.state.list.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
}

//父组件通过属性的形式向子组件传递参数

//子组件通过props接受父组件传递过来的参数

父组件：TodoList

子组件：TodoItem

子组件 想和父组件通信，子组件要调用父组件传递过来的方法

子组件 TodoItem.js函数中 ————this.props.delete(this.props.index) 

父组件TodoList.js 中————

handleDelete是父组件的函数,将传递给子组件的是delete 、content、index

<TodoItem delete={this.handleDelete.bind(this)}   key={index}  content={item}  index={index} />

父组件通过属性的方式向子组件传递参数
如父组件中 TodoList.js 中

            // 告诉子组件 父组件将展示 item

    return  <TodoItem key={index} content={item}/>  


子组件TodoItem.js通过 props 的形式接收从父组件传递过来的参数

子组件中 
     <div>{this.props.content}</div>

react 操作数据，不需要操作dom ;
在react 中操作 state中的数据，尽量不直接操作state的数据，而是拿一个变量接收后，再操作该变量
如删除函数 

handleItemClick (index){

    const newList = [...this.state.list];  // 拿newList接收 state中list的值

    newList.splice(index,1); //删除newList中de 该 index的值

    //将删除后的数组放置在state中，

        this.setState({

            list:newList

        })

}

在render() 函数中的return 中，写入 ————

//onChange 事件监听 input框的value值发生变化

<input onChange={this.handleInputChange.bind(this)}/>

在handleInputChange 函数中，时刻监听 value 值 e.target.value