本文译自React官方文档全文翻译及相关代码，请参看我的Github

首先看看以下代码段：

const element = <h1>Hello, world!</h1>;

这个有趣的标签表达式既不是一个字符串，也不是一个HTML标签。它叫做JSX，是JavaScript的扩展。我们推荐在React中使用JSX描述UI。 JSX也许会使你想起某种模板语言，它可以充分利用JavaScript的特性。 JSX创建React元素。我们将再下一章节学习如何将其渲染至DOM。接下来，我们将学习JSX的基本用法。

1.在JSX中嵌入表达式

在JSX中，您可以通过 {} 的方式嵌入任何JavaScript表达式。如 2+2, user.firstName, 和 formatName(user) 等均为有效的表达式：

function formatName(user) {
          return user.firstName + ' ' + user.lastName;
          }
        const user = {
          firstName: 'Harper',
          lastName: 'Perez'
          };
        const element = (
          <h1>
            Hello, {formatName(user)}!
          </h1>
          );
        ReactDOM.render(
          element,
          document.getElementById('root')
          );

在CodePen中尝试

从可读性的角度考虑，我们将JSX分成了多行。但这并不是强制性的。当需要分行时，我们推荐使用圆括号 () 将其括起，从而避免JS的自动插入机制ASI

2.JSX也是表达式

通过编译后，JSX表达式变成了常规的JavaScript对象。这意味着您可以使用JSX中使用 if 语句和 for 循环等:

function getGreeting(user) {
          if (user) {
            return <h1>Hello, {formatName(user)}!</h1>;
          }
          return <h1>Hello, Stranger.</h1>;
          }

3.使用JSX指定标签属性

您可以使用引号 “” 将字符串指定为属性：

const element = <div tabIndex="0"></div>;

也可以使用括号 {} 嵌入JavaScript表达式作为属性：

const element = <img src={user.avatarUrl}></img>;

但是，当通过JavaScript表达式未属性赋值时，不要使用双引号。 否则，JSX会将其视为一个字符串而非JavaScript表达式。对于字符串，我们可以直接使用 “” 将其作为属性值；对于表达式，我们可以通过 {} 将其作为属性值。但是不要将其混用。

4.使用JSX指定子元素

当某tag不含值时，可以直接用 /> 将其关闭：

const element = <img src={user.avatarUrl} />;

JSX的标记可以包含子元素：

const element = (
          <div>
            <h1>Hello!</h1>
            <h2>Good to see you here.</h2>
          </div>
          );

注意，由于相对HTML而言，JSX更加类似于JavaScript, React DOM使用驼峰命名代替HTML中的属性名。 例如，JSX中使用 className 而非 class , 使用 tabIndex 而非 tabindex

5.JSX能够防注入攻击

在JSX中直接嵌入用户输入是安全的：

const title = response.potentiallyMaliciousInput;
        // This is safe:
        const element = <h1>{title}</h1>;

在执行渲染前，React DOM会默认对任何嵌入的值进行编码。这可以避免应用被注入，可以避免XSS攻击。

6.JSX表示对象

Babel将JSX编译为 React.createElement() 调用。以下两种写法是一致的：

const element = (
          <h1 className="greeting">
            Hello, world!
          </h1>
          );

const element = React.createElement(
          'h1',
          {className: 'greeting'},
          'Hello, world!'
          );

React.createElement() 会执行一些语法方面的检查，但其核心功能是创建一个如下的对象：

const element = {
          ...
          type: 'h1',
          props: {
            className: 'greeting',
            children: 'Hello, world'
          }
          ...
          };

这些对象被称为”React元素”。我们可以将其视为我们想要在屏幕上表现的元素的描述。React读取这些对象并利用他们构建DOM并保持更新。我们将在下一部分学习将React元素渲染成DOM。 Tip： 为了ES6和JSX都能在编辑器中高亮显示，我们推荐您将您的编辑器设置为”Babel”语法方案。

本文首发于www.miaoyunze.com/，转载请注明出处

[译]React 教程 - 2. 学习 JSX