JSX语法

1.jsx的作用

react的作用：监听数据更新，帮助我们去渲染视图

render()函数实现了DOM的渲染的过程，这个过程我们可以分为两个阶段：

1. 获取虚拟DOM（JSX经过babel转译后的对象就是虚拟DOM）
2. 将虚拟DOM转化成真实DOM，并插入到HTML文档中

JSX javascript xml (xml 一般指的就是可扩展标记语言)

jsx是react提供的语法糖（syntax sugar）,能让我们在JS中去写HTML，在React中它的作用是描述UI，可以把它理解为虚拟DOM

2.jsx的基本语法

1. JSX只能有一个根标签
2. 不需要使用引号包裹
3. {/**/} 注释
4. {this.state.name} 插值表达式
5. jsx中可以是单标签，也可以是双标签，单标签必须闭合

jsx 中 null undefined boolean 不能被渲染的，如果需要显示，需要转换字符串
jsx中可以插入表达式，但是不可以插入语句

表达式最终会有返回值

绑定class className

要绑定style 在 {} 传入一个对象

jsx的本质其实就是React.createElement的语法糖

{/*单行注释*/}{/*多行注释多行注释*/}{/*插值表达式*/}<h1>{this.state.name}</h1>{/*数据渲染*/}// null undefined boolean 不能被渲染的，如果需要显示，需要转换字符串test: null,// 对象不能直接在jsx直接渲染，可以转换成字符串或者是直接调用<h1>{this.state.test+''}</h1><h1>{this.state.message.toString()}</h1>{/*三元表达式*/}<h1>{this.state.status ? '已登录' : '未登录'}</h1>{/*jsx中不能写if语句*/}{/*绑定属性*/}{/*单标签必须要闭合*/}<img src={img} alt="" /><a href={url}>百度一下，你就知道</a>{/*绑定class jsx 不是html class className*/}<div className="div1">我是div1</div>{/*要绑定style 在 {} 传入一个对象*/}<div style={ {color:'red',fontSize:'20px'} }>我也是div</div>