JSX，即javscript XML，是js内定义的一套XML语法。目前是使用babel作为JSX的编译器。这也是在前几期中载入babel的原因。
Facebook引入JSX是为了解决前端代码工程复杂、维护困难等问题。JSX为我们提供了一种虚拟DOM的实现方式。 通过使用类XML语法的JSX，定义虚拟的DOM，以减少真实DOM的操作，从而提高运行效率。由于JSX的使用，在React项目中创建Components变得相当简单，用户可以将程序逻辑（programming logic）和标记语言（markup）混合在一起使用，促进代码的可读性、可预测性，有效的提高代码的维护效率。
接下来我们讲讲JSX的基本语法：
1. JSX基本定义 const element = <h1>Hello World!</h1>; ReactDom.render( element, document.getElementById('root'); )从上述代码，我们可以理解JSX的XML语法相当于是一个js的表达式，它可以直接给变量赋值。（其实不是这样，真正的理解【看这里】)
2. JSX内定义表达式 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );在JSX的内部，我们可以执行方法（function），可以输入对象。可以直接输出字符串变量等.这里的{}类似于php中<?php ?>的语法。
3. JSX内定义属性（Attribute） const element = <div></div> const element = <div className="div-test"></div>JSX的属性定义遵循CamelCase原则。如果定义的是html标签默认的属性，则可以使用html的规则。上面这例子中，两行代码都是用来定义class的属性。
// 这两行的代码效果相同 const element = <div tabIndex="0"></div>; const element = <div tabindex="0"></div>;这则例子，定义一个名为tabindex的属性名字，在JSX中遵循使用camelCase格式。当然如果不使用也可以，React依旧可以执行。
const element = <a href=http://www.likecs.com/{person.link}> </a>同样的,在属性中也可以添加变量表达式，用{}来执行。
4. JSX内嵌子标签 const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );在这种情况下，必须使用（）来表示。同时JSX中，只能有一个根节点。不能两个节点并列存在，如下：
const element = ( <h1>Hello!</h1> <h2>Good to see you here.</h2> );这种情况，React是无法编译成功。
5.总结JSX是一个js内的XML语法，将程序逻辑和标记语言在同一个文件中显示。用利于代码开发和维护
JSX中，我们引入了虚拟DOM的概念【看这里】
JSX的基本语法相当灵活，可以表达式内嵌、定义属性等