1.6 JSX简单入门

在前文中介绍了如何通过React DOM的createElement()方法创建虚拟DOM，并将创建的虚拟DOM渲染到页面中的过程。但是，Facebook的React研发团队还是觉得不太满意，最终开发出来一种专属于React框架的JavaScript语法扩展—JSX。

所谓JSX其实就是JavaScript XML的缩写，直译过来就是基于JavaScript的XML。JSX看起来似乎是一种XML格式，其本质仍旧是一种JavaScript语言，只不过是将JavaScript脚本代码写成XML样式。其实，在【代码1-2】中的第02行代码就已经使用到了JSX语法，具体如下：

这里的<h1>标签元素就是通过JSX方式定义的，严格讲就是一个虚拟DOM。为了详细介绍React框架中JSX方式的使用方法，下面看一个具体的代码实例：

【代码1-5】（详见源代码目录ch01-react-jsx-intro.html文件）

关于【代码1-5】的说明：

●首先，在第14行代码中，<script type="text/babel">标签内使用了JSX语法要求的"text/babel"属性，这一点会在后续章节中进行详细介绍。

●第18~23行定义了一段完整的JSX代码，实现了一个虚拟DOM对象，具体内容如下：

► 第18~23行代码通过const关键字定义了一个常量（reactSpan），该常量使用小括号包含了通过<span>、<h3>和<p>标签定义的元素组合。

► 第19~22行代码定义的HTML标签符合XML格式，而常量（reactSpan）的定义完完全全符合JavaScript语法，因此该语法被称为JSX。

●第24行代码调用React DOM对象的render()方法，将JSX代码渲染到页面中进行显示。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图1.10所示。

图1.10中显示了通过React JSX方式渲染的效果。其实，通过React JSX方式定义的虚拟DOM，最终也会转换为通过createElement()方法实现虚拟DOM。