理解 JSX

在撰寫 React Component 的時候，使用 JSX 可以提高程式撰寫的效率。JSX（JavaScript Extention）並不是一種全新的語言，他是一種語法糖（syntax sugar），看起來和 XML 非常相似。JSX 是一種 inline markup 可以將類似 HTML 的語法結構轉換成 JavaScript。

簡單來說，JSX 提供了比 JavaScript 還更直觀的 HTML like syntax。

JSX 是更快速、安全性更高、更簡易的 JavaScript

HTML 標籤 vs. JSX 組件

1. React 可以 render 出 HTML 標籤或是 React 的組件
2. React 的 JSX 是用 大寫 來和 HTML 標籤做區分的

JSX 提供了語法糖給
React.createElement(component, props, ...children) 方法

在 HTML 中，我們可以透過 class 來給予自定義的外觀屬性；在 JSX 中也可以，但 class 和 for 是 JavaScript 保留關鍵字用法，因此在 JSX 中使用 className 和 htmlFor 替代。

<div className="red">Children Text</div>;

compile 後的結果為：

React.createElement("div", { className: "red" }, "Children Text");