有了 React 的新结果语言(浏览器现在已经理解了)，我们可以构建声明式用户界面(就像我们过去使用纯 HTML 一样)，但是现在我们也可以使用数据。

对于我们的产品示例，我们只是命令浏览器显示产品列表；我们甚至不担心有多少产品实际上在那个列表上。

我们对浏览器的命令是这样的:将这个产品列表显示为无序列表；对于每种产品，显示其名称，然后显示其价格。

之后，我们就结束了。当我们拥有的产品列表数据发生变化时，我们不需要对用户界面做任何事情来用新数据更新它。我们对浏览器的命令不需要改变。

换句话说，如果我们对数据进行了转换，我们就不必担心用户界面——我们只需要管理数据的新状态。

数据转换包括如下操作:

• 一种产品已从目录中删除。
• 目录中又增加了三种产品。
• 产品名称已更改。
• 五种产品的价格发生了变化。
• 目录中产品的顺序已经改变。

当然，如果我们数据的结构发生变化，我们必须改变我们的观点。例如，当我们在每个产品上添加一个Boolean标志来跟踪产品是否有库存，并且我们希望以灰色显示缺货的产品时，这将是一个结构转换，而不仅仅是数据转换。然而，一旦我们第一次考虑新的结构，更新新的标志就变成了一个数据转换，我们不必在用户界面中担心。

这种关于建模最终状态的心智模型更容易理解和使用，尤其是当我们的视图有大量数据转换时。

例如，考虑一下告诉你有多少朋友在线的视图。视图状态只是当前在线朋友数量的一个单一数字。这种观点并不在乎，就在刚才，三个朋友上线了，然后其中一个断开了，然后又有两个加入了。它只知道此时此刻，有四个朋友在线。

用 JavaScript 编写 HTML 比使用模板和显示逻辑给了我们很多力量和优势。但是直接使用 HTML 有很大的优势，在这种情况下我们会牺牲掉。HTML 既熟悉又简洁，如果你和设计师一起工作，他们肯定不愿意和我们的 JavaScript 创建的元素一起工作。

JSX 是可选的妥协方案。这是一个简单的类似 HTML 的 JavaScript 语法扩展，用于创建 React 元素。你可以把 JSX 看作是 JavaScript 的一个增强，允许语法看起来像 HTML。我们可以在组件呈现函数的返回语句中使用它。

JSX 被贴上了“类似 HTML”的标签，因为它不可能完全是 HTML。一些元素属性必须按照 DOM API 定义它们的方式来使用；class和for都是这样的例子。为了在反应中使用它们，我们使用className和htmlFor来代替。

以下示例是电子邮件输入字段界面。

代码清单 10: JSX

  //
  The desired HTML:
  <form>

  <label for="email">Email:</label>

  <input type="email" id="email"
  class="form-control" />
  </form>

  //
  How to represent it with React:
  React.createElement(

  "form",

  null,
    React.createElement(

  "label",

  { htmlFor: "email" },

  "Email:"

  ),
    React.createElement(

  "input", 

  { type: "email", id: "email", className:
  "form-control" }

  )
  );

  //
  How to represent it with JSX:
  <form>

  <label htmlFor="email">Email:</label>

  <input type="email" id="email" className="form-control"
  />
  </form>

重要的是要理解，JSX 完全是可选的，不需要使用 React。我们可以用普通的 JavaScript 编写 React 我们不需要 JSX 分机。

JSX 实际上根本没有搭载 React 我们将需要第三方工具来使我们的项目与 JSX 合作。脸书推荐的工具是巴别塔。

在 JSX 编写组件渲染函数而不是纯 JavaScript 具有简洁和熟悉的优势，对于设计师来说尤其如此。平衡的开始和结束标签比 JavaScript 函数和对象文字更容易被人眼读取和解析。