• 1.在JSX中嵌入表达式
• 2.JSX也是表达式
• 3.使用JSX指定标签属性
• 4.使用JSX指定子元素
• 5.JSX能够防注入攻击
• 6.JSX表示对象

本文译自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”语法方案。