15.2 React JSX

JSX是什么

JSX是Facebook提出的一个预处理脚本，可以在 JavaScript 的代码中直接使用 HTML 标签来编写界面组件。 其使用的是类XML语法，需要通过 JSXTransformer 来编译转换成原生 JavaScript 代码才能真正执行。 如果不使用JSX，要插入HTML元素，会出现大段的字符串拼接，难以维护，另外界面组件的行为和结构是分离开的。 在React中，我们可以不使用JSX，但是JSX可以使代码更简洁易读。

JSX基本语法

和 XML一样，JSX标签包含标签名称，属性，和子元素。如果属性值以引号括起来，则该值为字符串，用大括号封装起来的是JavaScript表达式。

在线实例代码如下：

点击JS面板中的“编译”按钮，你可以看到对应的原生JS代码，对比可以发现两者的差异。你就会明白JSX带来的代码简化。

JSX逻辑语句

我们还可以在JSX中使用逻辑语句，但必须是一次性执行完成的语句：

关键字冲突

因为 JSX 是直接将 HTML 写在 JavaScript 代码中，为避免和JavaScript关键字冲突，属性命名需要做下转换，比如class 要换成 className，for 要换成 htmlFor。

内置样式

React 希望一个组件可以是独立的（即结构、行为和样式一体）。我们可以将样式直接通过 JavaScript 的对象插入到 JSX 中，这样就可以在组件内部来定义样式了：

var paraStyle = {
  color: '#fff',
  fontSize: '14px'
};
var para = (
  <p style={paraStyle}></p>
);