JSX简介
JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.
使用jsx语法的时候：组件外层包裹原则
这是一个很重要的原则，写在jsx中的代码都是需要一个外层标签进行包裹的，比如最外层是 Div 标签， 我们去掉最外层的<Div>，就回报错，因为React要求必须在一个组件的最外层进行包裹。
这时候如果有新的布局需求就偏不需要这个最外层的标签怎么办?React16已经有所考虑了，为我们准备了<Fragment>标签。
Fragment标签讲解
引入方式
import React,{Component,Fragment } from 'react'使用方式把最外层的<div>标签，换成<Fragment>标签，代码如下。
render(){
return (
<Fragment>……</Fragment>
)React数据绑定注意项：
一个是this作用域，你需要用bind设置一下指向(ES6的语法)。
另一个是React中改变值需要使用this.setState方法。
JSX中的class陷阱：
class换成className，它是防止和js中的class类名 冲突，所以要求换掉。这也算是一个小坑吧。
JSX中的html解析问题，可以使用dangerouslySetInnerHTML属性解决。例子：
JSX中<label>标签的坑，如果想通过Label 标签激活文本框，方便输入。按照html的原思想，是直接加ID就可以了。
<label for="jspang">加入服务：</label>
<input id="jspang" className="input"
value={this.state.inputValue}
onChange={this.inputChange.bind(this)} />这时候你浏览效果虽然可以正常，但console里还是有红色警告提示的。大概意思是不能使用for.它容易和javascript里的for循环混淆，会提示你使用htmlfor。
<label htmlFor="jspang">加入服务：</label>
<input id="jspang" className="input"
value={this.state.inputValue}
onChange={this.inputChange.bind(this)} />
