React之jsx语法特性

jsx 语法，直接可以在js中使用html标签。

还可以通过花括号的形式，在html标签中，写js表达式。

<div>
    { 1 + 2 }
    hello,world！
</div>

事件是大写

<button onClick={this.handleBtnClick.bind(this)}>add</button>

React中的编程思想是，面向数据编程。只要定义数据就OK了，数据变了，页面展示的内容就会变了。

React删除不需要操作dom，只需要操作数据就可以了。将对应的数据从删除，自动就会移除dom。只要找到对应的下标就可以了。

组件拆分。大组件，可以引用小组件。组件之间可以传递数据。

return <TodoItem content={item}>

{this.props.content}

父子组件，父组件通过属性的形式向子组件传递参数。
子组件通过props接受父组件传递过来的参数。

子组件，向父组件传值，要调用父组件传递过来的方法。

针对知识点，以点带面，打开知识盲区。

constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
}

jsx中使用css，对象方式处理样式。

<button style={{backgroud:'red',color:'#fff'}}></button>

className替代之前的class属性来处理class。
需要在index.js入口文件中，引入css文件。

<React.Fragment>
</React.Fragment>

外层包裹标签，替代div标签。

优化代码，让它优雅。

官网学习，读官方文档，建议阅读英文文档。

或者视频学习。