昨日介紹完，環境建立之後，今天要來認識 JSX!!

JSX（JavaScript XML）讓開發者能夠在 JavaScript 中撰寫類似 HTML 的語法，使得 UI 的開發變得更直覺。本文將介紹 JSX 的基本概念、使用規則及應用，幫助你快速上手認識JSX是什麼。

JSX 是什麼？

此時，你可能會好奇：為什麼在 JavaScript 中可以直接寫 HTML 標籤？ 這就是 JSX 的神奇之處。

JSX 是一種 JavaScript 語法擴充，允許在 JavaScript 中直接撰寫類似 HTML 的標籤。儘管 JSX 看起來像是 HTML，但它其實是 JavaScript 的語法糖，最終會被轉譯為 JavaScript 函數調用。

首先，我們來看一個簡單的 JSX 範例：

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

這段程式碼看起來像是 HTML，但其實它是 JSX，一種將 HTML 語法直接嵌入 JavaScript 的方式。接下來，我們將這個 element 渲染到網頁上。

在 src/index.js 中，將 root.render 原先的 <App/> 元件替換為 element：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

當你刷新頁面後，畫面上應該會顯示 "Hello, world!"。

這背後發生了什麼呢？我們編寫的是 JSX，但這段程式碼會被轉換為原生的 React 語法，例如：

const element = React.createElement('h1', null, 'Hello, world!');

也就是說，JSX 實際上是 React createElement 函數的一種語法糖，讓開發者能夠用更直觀的方式來定義 UI 元素。你不需要逐行撰寫 React.createElement，JSX 幫助你簡化了這個過程。

JSX帶來更直覺的開發體驗

如果每次新增 UI 元素都要寫出 React.createElement，開發過程會變得非常繁瑣和不直觀。

以下兩種寫法的對比：

使用 React.createElement：

const element = React.createElement('div', null,
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is a paragraph.')
);

使用 JSX：

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

你可以看到，使用 JSX 的程式碼更具可讀性，也更符合我們對 HTML 結構的直觀理解。

接下來我們來了解，JSX的基本語法

JSX 的基本語法

1. JavaScript 表達式

JSX 中可以使用大括號 {} 來嵌入 JavaScript 表達式，例如：

const name = "React";
const element = <h1>Hello, {name}!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element); // Hello, React

這樣，當 element 被渲染時，畫面上會顯示 "Hello, React!"。

註：表達式，可由這篇文章有更多了解
JavaScript 表達式觀念及運用 - JS Expression | 卡斯伯 Blog - 前端，沒有極限 (casper.tw)

2. 樣式與屬性

在 JSX 中，你可以使用 className 來設定 CSS 類名，因為 class 是 JavaScript 的保留字：

const element = <div className="container"></div>;

此外，內聯樣式(Inline Styles) 需要使用物件表示法，且屬性名需要使用駝峰命名法：

(Ｘ) const element = <h1 style={ color: 'blue', fontSize: '20px' }>Styled Text</h1>;

//需要使用物件表示法
(Ｏ) const element = <h1 style={ { color: 'blue', fontSize: '20px' } }>Styled Text</h1>;

這邊要注意 style 會是傳入一個花括號，裡面再傳入一個物件，

為了方便確認，將上方的寫法做個調整。

const style = { color: 'blue', fontSize: '20px' };
const element = <h1 style={style}>Styled Text</h1>;

3. 自閉合標籤

所有單標籤都必須自閉合（如 <img>）在 JSX 中必須自閉合：

const element = <img src="image.png" alt="A description" />;

4. 條件渲染

你可以使用條件表達式來決定渲染的內容，常見的有三元運算符和邏輯與運算符：

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

或者：

const showMessage = true;
const element = showMessage && <p>This is a message.</p>;

5.JSX 鍵 (Key) 和列表渲染

在 React 中，渲染列表時，通常使用 JavaScript 的 map() 方法來生成元素。例如：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);
const element = <ul>{listItems}</ul>;

這裡 <li key={number}> 的key 屬性非常重要，

它能夠幫助 React 追蹤每個列表項目，以便高效地更新 DOM。

key 是列表中的唯一值，同時也要避免使用索引值( index )來當作 key ，避免潛在的渲染錯誤。

若再渲染時，沒有加上key，則會跳出此錯誤訊息。

Warning: Each child in a list should have a unique "key" prop.
Check the render method of App. See https://reactjs.org/link/warning-keys for more information.

6. 事件處理

JSX 支援事件處理，事件處理器需遵循駝峰命名法：

function handleClick() {
  alert('Button clicked!');
}

const element = <button onClick={handleClick}>Click me</button>;

瀏覽器如何理解 JSX？

瀏覽器本身無法直接理解 JSX，需要透過工具（如 Babel）將其轉譯為 JavaScript 函數調用。

當你使用 Create React App 或類似工具來啟動專案時，這些工具會自動處理轉譯。

總結

JSX 是 React 中強大的工具，讓你可以直觀地將 UI 結構嵌入到 JavaScript 中。通過熟練掌握 JSX 的基本語法和規則，你可以更輕鬆地構建和維護 React 應用程式。隨著經驗的積累，你會發現 JSX 為你的開發流程帶來了極大的便利性。

資料參考

• 初探 React，建立第一個元件 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• [筆記][React]踏出認識React的第一步 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• React JSX | 菜鸟教程 (runoob.com)

後記

本文將會同步更新到我的部落格，歡迎大家來blog參觀~

• 黃禎平 – Medium