一、JSX语法干了啥？
首先同个一个例子引入JSX语法。对于一段html代码如：
<div class="red">
<button class="btn btn-info"></button>
</div>
在javascript中怎么描述上述的代码呢？
{
type:'div',
props:{
className:'red',
children:{
type:'button'，
props:{
className:['btn','btn-info']
}
}
}
}
描述一段html代码，在javascript中需要使用这么繁杂的结构。这种代码不利于优化，而且不利于维护。我们希望在javascript中也能够书html代码。因此，JSX语法由此而生。
JSX中代码的实现：
const MessageBtn = () =>(
<div className="red">
<button className="btn btn-info"></button>
</div>
)
上述代码是不是更加容易维护，实际上JSX在编译完成后，同样将html代码解析成了javascript版本的代码。只不过这份工作有能够解析 JSX的解析器帮助我们完成了。上述代码解析之后的源码为：
var MessageBtn=function(){
return React.createElement(
'div',
{className:'red'},
React.createElement(
'button',
{className:'btn btn-info'},
null
)
)
}
由以上代码可以看出，你同样能够用React.createElement来创建元素，而不用JSX语法。
二、JSX语法简介
1、JSX采用的类似XML语法的ECMAScript拓展，因此，标签可以任意嵌套，注意：定义标签时，只允许被一个标签包裹，标签一定要闭合，在使用JSX编写时候，这两种错误都会及时提示出来。对于第一种错误的原理请想一想转换之后的源码揣摩下。
2、元素类型：JSX规定，以大写字母开头的单词会被解析成组件，小写的解析为dom元素
注释： 在html中的注释注释，由于JSX实际上也是javascript，因此，JSX中使用{/* */}来进行注释，请千万注意一定要用{}扩起来，对于判断IE版本的条件注释，请使用javascript脚本判断来替代。
2、元素属性：由于html中的class和for都是javascript中的关键字，因此JSX进行了转换，使用className替代class，受用htmlFor替代for
3、布尔属性：JSX中默认的布尔类型的值都是true，例如<checkbox checked> 表示该 选框被选中，如果不想选中，可以这样<checkbox checked={false}>或者不写checked属性
4、自定义html属性：JSX不支持自定义属性，React也不会渲染自定义属性，例如<div d="ssss"></div>渲染的结果为<div></div>
当你需要使用自定义属性的时候，应该使用html中的自定义属性规范，即使用data-前缀。
5、JSX中使用javascript表达式：JSX中使用javascript表达式用{}替代“”即可，例如：
const person =<Person name={isLisi ? 'lisi' : 'zhangsan'} />;
6、html转义：为了防止XSS攻击，React会将字符实体进行转义。您可以使用以下几种方式进行解决。
a、直接使用utf-8的字符
b、使用对应Unicode编码
c、用数组包装下<div>{['cc','<span>©</span>','2015xxx']}</div>
d、直接使用原生的HTML
e、React提供了dangerouslySetInnderhtml 方法来避免转义。（不到万不得已不要使用）
