JSX

JSX 是一个预处理器步骤，它为 JavaScript 添加了 XML 语法。你绝对可以在没有 JSX 的情况下使用 React，但 JSX 使 React 更加优雅。

就像 XML 一样，JSX 标签有标签名称，属性和子标签。如果属性值包含在引号中，则该值为字符串。否则，将值包装在大括号中，值是随附的 JavaScript 表达式。

从根本上说，JSX 只为 React.createElement(component, props, ...children) 函数提供语法糖。

那么，以下 JSX 代码：

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

编译为以下 JavaScript 代码：

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

总之，请注意 JSX 中的以下行既不是字符串也不是 HTML ：

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

它被称为 JSX，它是 JavaScript 的语法扩展。JSX 可能会提醒你一种模板语言，但它具有 JavaScript 的全部功能。

React 团队在他们的文档中说他们建议使用它来描述 UI 应该是什么样子。