React快速上手开发

62

第 4 章

JSX

在本书前面的章节中，你已经学会了如何通过

render()

方法定义用户界面，以及如何调用

React.createElement()

方法和

React.DOM.*

函数家族（比如

React.DOM.span()

）。这种写法

有点麻烦，因为过多的函数调用会导致圆括号和花括号的闭合难以跟踪。接下来介绍一种

更便捷的写法：

JSX

。

JSX

是一项独立于

React

且完全可选的技术。如你所见，前面三章甚至没有使用过

JSX

。

当然，你可以选择不使用

JSX

。不过一旦尝试使用这项技术，你就很可能不会回到之前的

函数调用方法了。

JSX

的具体意义很难说清，但通常可以理解为

JavaScriptXML

或者

JavaScript

Syntax eXtension

（

JavaScript

语法扩展）的缩写。

JSX

开源项目的官网地址

是

http://facebook.github.io/jsx/

。

4.1

　

Hello JSX

首先回顾第

1

章的

Hello World

示例代码：

<script src="react/build/react.js"></script>

<script src="react/build/react-dom.js"></script>

<script>

ReactDOM.render(

React.DOM.h1(