介绍 JSX

考虑下面的变量声明：

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

这是个有趣的标签语法，它既不是一个字符串，也不是 HTML。

它叫 JSX，是对 JavaScript 的语法扩展。我们推荐结合 React 使用它来描述 UI 看起来应该是什么样。JSX 可能让你想起模板语言，但是它具有 JavaScript 的全部能力。

JSX 生成 React “元素”。我们我们将在下一章探索把它们渲染到 DOM。下面，你可以找到让你开始的 JSX 必备的基础知识。

在 JSX 中插入表达式

你可以通过包裹在大括号中在 JSX 插入任意的 JavaScript 表达式。例如，2+2、user.name和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 自动插入分号的陷阱。

JSX 也是表达式

经过编译后，JSX 表达式变成普通的 JavaScript 对象。

这意味着，你可以在if语句和for循环中使用 JSX、把它赋值给变量、作为参数接收、从函数返回。

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

使用 JSX 指定属性

你可以使用引号来指定字符串字面量来作为属性:

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

你也可以使用大括号在属性中插入 JavaScript 表达式：

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

使用 JSX 指定子元素

如果一个标签是空元素。你可以像 XML 一样使用/>自闭合标签：

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

JSX 标签可以包含子元素：

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

警告

由于 JSX 相比于 HTML 更接近 JavaScript，ReactDOM 使用cameCase（驼峰命名）作为属性命名约定代替 HTML 属性名。

例如，在 JSX 中class变成className，tabindex变成tabIndex。

JSX 预防注入攻击

在 JSX 中嵌入用户的输入是安全的。

const title = response.potentiallyMaliciousInput;
// 这是安全的:
const element = <h1>{title}</h1>;

默认，在渲染之前，ReactDOM 会转换任何在 JSX 中插入的值。因此来确保在你的应用中永远不能注入任何没有明确书写的东西。所有的东西在开始渲染前都被转换成字符串。这有助于预防XXS（跨站脚本攻击）。

JSX 表示对象

Babel 编译 JSX 直到 React.createElement()调用。

这两个例子是完全相同的：

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

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

React.createElement()执行一些检查帮助你写出没有bug的代码，但本质上，它创建一个像这样的对象：

// 注意：这个结构是简化的
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这些对象称为“React元素”。你可以把它们想象成你想在屏幕上看到的东西的描述。React读取这些对象，并使用它们构造DOM并保持更新。

我们将在下一章节探索渲染 React 元素到DOM。

Tip:

我们推荐为你选的编辑器搜索“Babel”语法主题，以便于 ES6 和 JSX 代码正确的高亮显示。

下一步

渲染元素