JSX 簡介

請觀察下面的變數宣告：

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

這種看起來可能有些奇怪的標籤語法既不是字串也不是HTML。

它被稱為 JSX, 一種 JavaScript 的語法擴充套件。我們推薦在 React 中使用 JSX 來描述使用者介面。JSX 乍看起來可能比較像是模版語言，但事實上它完全是在 JavaScript 內部實現的。

JSX 用來宣告 React 當中的元素。在下一個章節裡面我們會詳細介紹元素是如何被渲染出來的，接下來呢，我們先來看看 JSX 的基本使用方法。

在 JSX 中使用表示式

你可以任意地在 JSX 當中使用 JavaScript 表示式，方法是，將表示式包含在大括號 {} 裡。

例如 2 + 2, user.firstName, 以及 formatName(user) 都是有效的表示式。

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

const user = {
  firstName: `Harper`,
  lastName: `Perez`
};

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

ReactDOM.render(
  element,
  document.getElementById(`root`)
);

在 CodePen 上試試。

我們書寫 JSX 的時候一般都會帶上換行和縮排，這樣可以增強程式碼的可讀性。與此同時，我們同樣推薦在 JSX 程式碼的外面擴上一個小括號，這樣可以防止分號自動插入的bug.

JSX 本身其實也是一種表示式

在編譯之後呢，JSX 其實會被轉化為普通的 JavaScript 物件。

這也就意味著，你其實可以在 if 或者 for 語句裡使用 JSX，將它賦值給變數，當作引數傳入，作為返回值都可以：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 屬性

你可以使用引號 "" 來指定字串為屬性的值：

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

也可以使用大括號 {} 嵌入 JavaScript 表示式來作為屬性的值：

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

使用大括號包裹的 JavaScript 表示式時，不要再外面使用引號。否則，JSX 會將引號當中的內容識別為字串而不是表示式。

JSX 巢狀

如果 JSX 標籤是閉合式的，那麼你需要在結尾處用 /> ，就好像 XML 一樣：

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

JSX 標籤可以有子標籤：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

警告:

因為 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小駝峰命名來定義屬性的名稱，而不是使用 HTML 的屬性名稱。

例如，class 變成了 className，而 tabindex 則對應著 tabIndex.

JSX 防注入攻擊

你可以放心地在 JSX 當中使用使用者輸入：

const title = response.potentiallyMaliciousInput;
// 這是安全的：
const element = <h1>{title}</h1>;

預設情況下，React DOM 在渲染前會轉義嵌入在 JSX 中的任何值。因此，可以確保你的應用不會被注入攻擊。所有的內容在渲染之前都被轉換成了字串。這樣可以有效地防止 XSS(跨站指令碼) 攻擊。

JSX 代表 Objects

Babel 直譯器會把 JSX 轉換成一個名為 React.createElement() 的方法去呼叫。

下面兩段程式碼的作用其實是相同的：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  `h1`,
  {className: `greeting`},
  `Hello, world!`
);

React.createElement() 這個方法首先會執行一些檢查，以幫助您編寫無錯誤的程式碼，之後會返回一個類似下面的物件：

// 注意: 以下示例是簡化過的（不代表在 React 原始碼中是這樣）
const element = {
  type: `h1`,
  props: {
    className: `greeting`,
    children: `Hello, world`
  }
};

這樣的物件被稱為 “React 元素”。你可以將其視為你想要在螢幕上看到的東西。React 通過讀取這些物件來構建 DOM 並保持資料內容一致。

我們將在下一個章節當中介紹更多有關 React 元素是如何渲染成 DOM 的內容。

**Tip:**

如果你是在使用本地編輯器編寫 JSX 程式碼的話，推薦你去裝一個支援 JSX 高亮的外掛，這樣更方便之後的開發學習。

小結

React 使用 JSX 來替代常規的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴充套件。

我們不需要一定使用 JSX，但它有以下優點：

JSX 執行更快，因為它在編譯為 JavaScript 程式碼後進行了優化。
它是型別安全的，在編譯過程中就能發現錯誤，並且防注入攻擊。
使用 JSX 編寫模板更加簡單快速。

React基礎篇-02.JSX簡介