1、JSX的介绍
什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。
在实际开发中，JSX 在产品****打包阶段****都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。
2、特点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
3、JSX的语法
JSX就是把html代码写在javascript中，那么，写在javascript中有啥要求（与原来在html中的区别），这就是jsx语法要说的内容。
示例：
var msg="哥们！"
const element = <h1>Hello, world!{msg}</h1> 没有双引号，不是字符串
const List = () => (
<ul>
<li >list item</li>
<li>list item</li>
<li>list item</li>
</ul>
);
XML基本语法
-
只能有一个根标签，养成外面加上圆括号的习惯。
-
标签要闭合（单边标签得有斜杠）
元素类型
元素属性
-
内联样式的style：样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px（px不用写）
let _style = { backgroundColor:"red" };
ReactDOM.render(
<h1 style={_style}>Hello, world!</h1>,
document.getElementById('box')
);
-
外部样式的class：HTML中曾经的 class 属性改为 className（因为class是js的关键字），外部样式时使用
ReactDOM.render(
<h1 className="bluebg">Hello, world!</h1>,
document.getElementById('box')
);
-
for 属性改为 htmlFor（因为for是js的关键字）。（for属性在html标签中是扩充单选框|复选框的选择范围）
-
事件名用驼峰命名法。HTML是全小写（onclick），JSX中是驼峰(onClick)
javascript表达式
-
使用单花括号。
react里没有vue中的指令，任何地方需要javascript的变量，表达式等等，只需要套上 单花括号就行。
const element = <h1>Hello, {120+130}!</h1>
const element = <h1>Hello, {getName("张三疯")}!</h1>
<input type="text" value={val ? val : ""} />
注意：单花括号里只能写表达式，不能写语句（如：if，for）
总结：
对比原生，JSX相当于把原生里的html和javascript代码混写在一起，
vue中有很多的指令，react中只需要使用单花括号就行。
