第02节的HelloWorld程序从本质上能完成所有的工作。只是有一些开发效率问题，比如JavaScript代码与标签混写在一起等。而使用JSX，则可以有效解决这些问题。
1.JSX定义
JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件。是一种 JavaScript 的语法扩展。乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
2.重写HelloWorld
import React from 'react';
import ReactDOM from 'react-dom';
var element=<h1>Hello, world!</h1>;
ReactDOM.render(
element, document.getElementById('root'));
我们来观察一下声明的这个变量：
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它就被称为 JSX。
3.JSX实现原理
我们想要在浏览器里直接运行采用 JSX 语法的 JavaScript 显然暂时是不可能实现的，在实际的生产过程中，我们需要利用 Babel 一类的转译器来将我们的 JSX 语法或者 ES6 语法转译成浏览器可以直接运行的 JavaScript，事实上 JSX 在经过转译之后，会变成 React 创建 Element 的一个方法。即第二节所写demo实际就是babel转换后的代码来宫浏览器识别。
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('container')
)
//babel转换后
ReactDOM.render(
React.createElement('h1',null,`Hello world!`),
document.getElementById('container')
)
4.JSX好处
通过上边的demo你可以发现JSX的好处。
- 可以使用熟悉的语法仿照HTML来定义虚拟DOM。
- 程序代码更加直观。
- 与JavaScript之间等价转换，代码更加直观。
- 可以任意地在 JSX 当中使用 JavaScript 表达式,具体见下章。
