本文主要介绍一些关于 JSX 的知识，包括 JSX 是什么，以及它的用途等，力求让各位对 JSX 有一个简单的了解

JSX 是什么

JSX=JavaScript+XML，它看起来像是 HTML 和 JavaScript 的混合体，实际上它是一种 JavaScript 的语法扩展，用来在 React 中描述 UI 。

XML？HTML？

相信各位看到 XML 时都多多少少会想起这个名字相近的 HTML，实际上，XML 和 HTML 都是一种标记语言。但是 XML 不同于 HTML 的地方在于它拥有更严格的语法要求和它允许用户自定义标签。一般 XML 是描述数据用的，人们的关注点在于数据本身；而 HTML 更多的时候只需要显示数据，这时人们比较关心数据的外观而不是内容。

JSX 语法

来个最简单直观的例子

<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>

这个例子中 HTML 语言直接与 JavaScript 语言混用了，在实际的开发中，这可以有效的扩展 JavaScript 的语义。如果转化成完全的 JavaScript，就应该这么写

<script type="text/javascript">
      ReactDOM.render(
        React.DOM.h1(null,'hello,world!'),
            document.getElementById('example')
      );
</script>

简单的说，JSX 看到 HTML 就按 HTML 来对待，看到 JavaScript 就按 JavaScript 来对待

JSX 的使用

JSX 的语法

JSX 本身就和 XML 语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入 JavaScript 表达式，例如：

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

一般每个组件都定义了一组属性（props，properties的简写）接收输入参数，这些属性通过 XML 标记的属性来指定。大括号中的语法就是纯 JavaScript 表达式，返回值会赋予组件的对应属性，因此可以使用任何 JavaScript 变量或者函数调用。

上述代码经 JSX 编译就会得到：

var person = React.createElement(  Person,  {name: window.isLoggedIn ? window.name : ''});

在 JSX 中使用事件

就像这样

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

JSX 和原生 HTML 定义事件的唯一区别就是 JSX 采用驼峰写法来描述事件名称，大括号中仍然是标准的 JavaScript 表达式，返回一个事件处理函数。在 JSX 中你不需要关心什么时机去移除事件绑定，因为 React 会在对应的真实 DOM 节点移除时就自动解除了事件绑定。

在 JSX 中使用样式

尽管在大部分场景下我们应该将样式写在独立的 CSS 文件中，但是有时对于某个特定组件而言，其样式相当简单而且独立，那么也可以将其直接定义在 JSX 中。在 JSX 中使用样式和真实的样式也很类似，通过 style 属性来定义，但和真实 DOM 不同的是，属性值不能是字符串而必须为对象，例如：

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>

里面的大括号只是标准的 JavaScript 对象表达式，外面的大括号是 JSX 的语法。

在 JSX 中自定义组件

在 JSX 中，我们不仅可以使用 React 自带 div ,  input... 这些虚拟 DOM 元素，还可以自定义组件。组件定义之后，也都可以利用XML语法去声明，而能够使用的 XML Tag 就是在当前 JavaScript 上下文的变量名，这一点非常好用，你不必再去考虑某个 Tag 是如何对应到相应的组件实现。

JSX 学习的技巧

1.不要将 JSX 看作是模板，而应视为需要被编译的可替代的 JS 语法（语句）。也就是说，JSX 只是将类似 XML 的标记转换为 JavaScript 。

2.Babel 工具是 React 团队的主要选择，用于将 ES *代码和 JSX 语法转换为 ES5 代码。您可以通过 http://babeljs.io/ 了解更多关于Babel的信息，或阅读Babel手册。

3.JSX 的优点有四点：

（1）技术含量较低的人仍然能够理解和修改所需的部分。CSS 开发人员和设计人员会发现 JSX 比 JavaScript 更为熟悉。也就是说，使用 JSX 的 HTML 标记看起来像 HTML 标记，而不是 createElement() 函数的金字塔。

（2）您可以利用 HTML 中 JavaScript 的全部功能，避免学习或使用模板语言。JSX 不是模板解决方案。它是用于表示 UI 节点和组件的树结构的声明性语法。

（3）通过添加JSX转换步骤，你会发现一些在HTML中你可能会忽略的错误。

（4）JSX 提倡内联样式的思想。这可能是一件好事。

4.谨防 JSX Gotchas。

5.JSX 与 React 本身不同。JSX 不会试图遵守任何 XML 或 HTML 规范。JSX 被设计为 ECMAScript 特性，并且与 XML / HTML 的相似性仅在表面上（即它看起来像 XML / HTML，因此您可以只写一些熟悉的东西）。目前正在起草一份 JSX 规范，任何人都可以将其作为一个类似于 XML 的语法扩展到 ECMAScript，而不需要任何定义的语义。

6.在 JSX 中，<foo-bar />单独是有效的，而<foo-bar>不是。