React JSX

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

在 JSX 中嵌入变量

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

插入表达式

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX 特定属性

你可以通过使用引号，来将属性值指定为字符串字面量

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

使用大括号，来在属性值中插入一个 JavaScript 表达式

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

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex