什麼是 JSX？

JSX（JavaScript XML）是一個 JavaScript 語法擴充，用於描述使用者介面的外觀和工作方式，通常會於 React 元件內部返回。

function Button() {

  // 元件內部返回一個 JSX
  return (
    <button>
      I'm a button
    </button>
  );
}

一種 “聲明式” 的語法

在 React 中，JSX 被稱為一種 聲明式 的語法。
這表示可以描述期望的結果，而 React 將負責處理如何實現這個結果，與之相反，命令式 編程要求詳細說明每個步驟和執行方式。

命令式編程

// 命令式編程 - JavaScript DOM 操作

// 創建一個 div 元素
const element = document.createElement('div');
// 設置文字內容
element.textContent = 'Hello, World!';
// 附加元素到 body
document.body.appendChild(element);

聲明式編程

// 聲明式編程 - React JSX

function Greeting() {
  // "描述" 使用者介面的結構
  return <div>Hello World!</div>;
}

JSX 的規則

1. 在 JSX 裡面，我們可以使用大括號 {} 進入 JavaScript 模式。

return (
  <div>
    { 進入 JavaScript 模式 }
  </div>
)

2. 允許在 {} 內寫入 JavaScript 表達式（表達式的特點是會回傳一個結果，因此可以使用陣列的 map 方法）。

return (
  <div>
    {
	  fruits.map(() => ...)
	}
  </div>
)

3. 不允許在 {} 內寫入 JavaScript 陳述式（if / else、for、switch）。

return (
  <div>
    {
	  if () {}
	}
  </div>
)

4. 一個 JSX 只能返回一個根元素，若需要返回多個根元素，可以將內容放到 <React.Fragment> 或是 <> 裡面。

// 不允許返回多個根元素
return (
  <h1>Hello World!</h1>
  <p>This is a JSX element.</p>
)

// 包在 <React.Fragement> 或是 <> 裡面，返回多個根元素
return (
  <React.Fragement>
    <h1>Hello World!</h1>
	<p>This is a JSX element.</p>
  </React.Fragement>
)

return (
  <>
    <h1>Hello World!</h1>
	<p>This is a JSX element.</p>
  </>
)

JSX 和 HTML 的差異

1. HTML 使用 class ，而 JSX 使用 className，。

// HTML
<h1 class="title">Hello World!</h1>

// JSX
<h1 className="title">Hello World!</h1>

2. HTML 使用 for ，而 JSX 使用 htmlFor。

// HTML
<label for="email">Email</label>

// JSX
<label htmlFor="email">Email</label>

3. JSX 的每個標籤都需要使用 / 封閉。

// img 標籤
<img src="..." alt="..." />

// br 標籤
<br />

4. JSX 所有事件處理或屬性都需要採用 “駝峰式命名”。

<button onClick={handleClick}>Click!</button>

1. 但是 JSX 的 aria-* 和 data-* 屬性寫法跟 HTML 一樣。
2. JSX 的 CSS 行內樣式寫法如下（CSS 屬性名稱也是駝峰式命名）：

<h1 style={{
  fontSize: '40px',
  backgroundColor: 'red'
}}>Hello World!</h1>

JSX 元素轉換

在 React 中，我們使用 JSX 來描述我們的使用者介面。

然而，瀏覽器並不理解 JSX，因此 React 在背後執行了一個重要的操作 - 將 JSX 元素轉換成 React.createElement 函式的調用。

這個函式的目的是創建 React 元素，它是 React 應用程式中的基本構建塊。

以下是一個範例，展示了 JSX 元素如何轉換成 React.createElement 調用：

<header>
  <h1 style={{ color: 'red' }}>
    Hello React!
  </h1>
</header>

將 JSX 將轉換成 React.createElement 函式調用：

React.createElement(
  'header',
  null,
  React.createElement(
    'h1',
	{ style: { color: 'red' } },
	'Hello React!'
  )
);

結語

JSX（JavaScript XML）是一個 JavaScript 語法擴充，用於描述使用者介面的外觀和工作方式。

它為 React 提供了一種聲明式的語法，使開發者能夠更容易地構建和理解。

JSX 是 React 應用程式開發中不可或缺的一部分，它簡化了程式碼的撰寫，提高了可讀性。