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 應該是什麼樣子。