React 中的 JSX 是什麼？為什麼它長得像 HTML？

更新日期： 2025 年 4 月 14 日

當你第一次開始學 React 時，很可能會對畫面上的程式碼感到疑惑：

「這段程式碼怎麼長得像 HTML，卻又不完全一樣？」

這種看起來像 HTML，卻被寫在 JavaScript 中的語法，其實叫做 JSX。

它是 React 中的重要語法糖（syntactic sugar），讓開發者可以更直觀地描述畫面結構。

在這篇文章中，我們將深入了解 JSX 是什麼、它的本質是什麼、為什麼它長得像 HTML，但實際上和 HTML 不一樣，並且介紹它存在的背景與目的。

JSX 是什麼？

JSX 的定義

JSX（JavaScript XML） 是一種 JavaScript 的語法擴展，它的設計靈感來自 HTML，因此它允許你在 JavaScript 程式碼中，用一種「看起來像 HTML」的語法來撰寫 UI 結構。

用一句話來說，JSX 是為了讓你能更直觀地描述 UI，而不是使用繁瑣的函數呼叫語法。

來看一個簡單的例子：

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

這行程式碼看起來就像是在 HTML 裡寫一個標題元素一樣，簡單、清楚又容易閱讀。但這實際上並不是 HTML，而是 JSX 語法。你可能會感到好奇：

「這樣直接把 HTML 寫進 JavaScript 裡，真的沒問題嗎？」

這樣的寫法在傳統的 JavaScript 中確實行不通。

但在使用了 JSX 的 React 專案中，這是完全可行的。原因就在於——JSX 並不是真正的 HTML，而是一種被「轉譯」成 JavaScript 語法的特別語法形式。

看起來像 HTML，其實不是 HTML

雖然 JSX 的語法和 HTML 長得幾乎一模一樣，但它們背後的運作邏輯完全不同。

在 React 中，JSX 不會直接被瀏覽器執行，而是會先被轉譯（transpile）成 JavaScript 的函數呼叫。

這個轉譯工作通常由工具（像是 Babel）在專案建置階段自動完成。

以剛剛的這段程式碼為例：

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

會被 Babel 轉譯成這樣的 JavaScript 函式呼叫：

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

這表示：

• React.createElement() 是一個用來建立 React 元素的函數。
• 第一個參數 'h1' 表示建立一個 <h1> 標籤。
• 第二個參數 null 表示這個元素沒有額外的屬性（props）。
• 第三個參數 'Hello, world!' 是這個元素裡的文字內容。

這樣的轉譯機制讓 React 能夠透過 JavaScript 描述 UI 結構，進而建立虛擬 DOM（Virtual DOM），並透過它來控制實際畫面的更新。

為什麼會有 JSX？背後的設計理念與優點

當你第一次接觸 React 和 JSX，很可能會有這樣的疑問：

「React 幹嘛搞這麼複雜？為什麼不讓我像以前一樣，用 HTML 檔案搭配一點 JavaScript 就好？」

這樣的疑問其實很合理，畢竟傳統的網頁開發流程是這樣的：

• HTML 負責畫面結構
• CSS 負責樣式
• JavaScript 負責互動邏輯

在這種模式下，邏輯和畫面是「分離」的，你可能會在 HTML 模板裡看到一些空的 <div>，然後用 JavaScript 把資料插進去。

但 React 的設計理念與傳統完全不同——React 把畫面當成一種「隨著狀態變化而改變的函數」。

將 UI 與行為結合在一起，畫面變得更有邏輯

我們一般寫網頁時，會覺得「畫面」是一開始就固定寫好的 HTML，之後有變化再用 JavaScript 去改它。

但在 React 的世界裡，畫面不是靜態寫死的，而是隨著資料（也就是狀態，state）而變化的東西。

你可以把畫面想成是一種「公式」或「函數」，它的輸入是資料（state），輸出就是你看到的畫面。

就像這樣的概念：

畫面 = 根據目前的狀態來算出來的結果

所以，只要資料變了，畫面就會自動跟著變，不需要自己手動操作 DOM 去改東西。這就是 React 的核心思想。

📱 比喻：天氣 App

你打開手機裡的天氣 App，它會根據你現在的位置和天氣資料顯示畫面：

• 如果是晴天，就顯示太陽圖案
• 如果是下雨天，就顯示雨滴
• 如果是多雲，就顯示雲朵

你不需要自己改圖、改字，畫面會根據資料「自動變化」。

這就跟 React 的設計很像——你只要定義好「當狀態是什麼，就顯示什麼」，剩下的畫面變化，React 幫你處理。

所以你不再「手動控制畫面」，而是「定義畫面長什麼樣」，資料改了，畫面就跟著變。

從「分工式開發」轉變為「元件式開發」

在 React 出現之前，前端開發通常會把 HTML、CSS、JavaScript 拆開來處理：

• HTML 用來描述畫面結構
• CSS 負責畫面樣式
• JavaScript 則用來控制互動邏輯與資料變化（通常會操作 DOM）

這種分工在小型網頁上沒什麼問題，但當畫面結構變得越來越複雜時，這種「邏輯和畫面分離」的做法反而會帶來痛點：

• 一個功能可能要改三個檔案，出錯率高
• 畫面變化要手動操作 DOM，維護成本高
• 畫面跟邏輯的對應關係模糊，不容易閱讀與追蹤

React 的做法：讓畫面、邏輯、資料結合在一起

React 選擇打破這種舊式分工，提出全新的開發思維：

與其讓畫面和邏輯分開，不如把它們包成一個個獨立的元件，每個元件負責自己的結構、資料、邏輯。

這樣一來，我們開發時只要專注在一個元件裡，就能看到整個畫面是怎麼根據資料運作的，邏輯清楚、維護方便、也容易重複使用。

舉個例子，如果你要做一張商品卡片，React 可以這樣寫：

function ProductCard({ name, price }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>價格：{price} 元</p>
    </div>
  );
}

在這個 ProductCard 元件中，我們同時看到：

• 資料從哪裡來（props）
• 畫面長什麼樣（JSX）
• 呈現的資料內容是什麼

全部清楚地寫在一起，沒有畫面邏輯分家的問題。

那為什麼還需要 JSX？

既然我們用 JavaScript 來描述畫面，那原本可以這樣寫：

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

但這種寫法讀起來非常機械化、難維護。React 為了讓開發更直覺，就設計了 JSX —— 一種看起來像 HTML 的 JavaScript 語法擴充，讓你可以這樣寫：

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

這樣不但更好讀，也讓前端工程師可以快速上手。

JSX 的彈性超越傳統模板語言

JSX 不只是「像 HTML」，它其實擁有完整的 JavaScript 能力。你可以直接在畫面裡寫條件判斷、變數、函數呼叫等等。

舉例：登入訊息切換

如果你要根據使用者是否登入，顯示不同訊息，傳統 HTML 模板可能會像這樣：

<div>
  {{ user.isLoggedIn ? 'Welcome!' : 'Please log in' }}
</div>

但這種做法只是插入一點點邏輯，遇到複雜情境時就會卡住。

用 React + JSX，你可以直接寫成一個可重用的邏輯元件：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? 'Welcome!' : 'Please log in'}
    </div>
  );
}

這段程式碼雖然看起來像 HTML，但它其實是一個函數元件，有自己的輸入（props）、邏輯判斷、可重複使用性。你也可以搭配 .map() 等陣列操作，去產生動態清單，這是傳統 HTML 模板做不到的。

React 和 JSX 是什麼關係？

剛開始學 React，最常見的疑惑之一就是：

「我寫的明明都是 <div>、<h1>，這看起來像 HTML，那我到底是在寫 JSX？還是在用 React？它們是一樣的東西嗎？」

答案是：不是一樣的東西，但它們緊密合作，幾乎總是一起使用。

React 是什麼？——會幫你動手做畫面的主角

React 是一個 JavaScript 函式庫（library），由 Meta（原 Facebook）開發，它的目的是：

• 幫助你建立互動式的使用者介面（UI）
• 尤其適合開發畫面會根據資料變化的應用

你可以把 React 想像成一位很厲害的廚師，只要你告訴它怎麼煮、材料有哪些，它就會幫你自動完成整道菜（畫面）。

React 本身提供的功能有很多，例如：

• 建立畫面元件（Components）
• 管理資料變化（State 和 Props）
• 處理畫面更新與重新渲染
• 虛擬 DOM 最小化操作，提升效能

這些都是你在開發現代網頁時很需要的功能，但問題是……

直接「用 JavaScript 描述畫面」太難讀了！

雖然 React 可以自己做事（像個能幹的廚師），但你還是得告訴它畫面長什麼樣子。這就是你給它的「畫面設計指令」。

React 原本的畫面描述語法長這樣：

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

這段程式碼的意思是：「React 請你幫我建立一個 <h1>，裡面寫 Hello, world!」

但你可以看到，這樣的語法很機械化、很繞口，一段畫面要寫成一堆巢狀函數，完全不直覺。

JSX 是什麼？——幫你清楚描述畫面結構的語法

這時候登場的就是 JSX（JavaScript XML）。

它的角色是：

讓你用「類似 HTML」的方式，來描述畫面結構，讓 React 能輕鬆讀懂並渲染出來。

用 JSX，上面的程式碼可以這樣寫：

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

看起來是不是舒服很多？這就是 JSX 的最大價值！

JSX 是語法糖（syntactic sugar），在專案建置時會被轉換（transpile）成真正的 JavaScript 語法，像：

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

所以你寫的 JSX，最終還是會變成 React 能直接執行的 JavaScript。

用比喻來理解：React 是廚師，JSX 是你寫的食譜

你可以這樣想像整個關係：

• React 是一位超強主廚，他可以幫你快速做出漂亮的 UI
• JSX 是你寫給主廚看的食譜，告訴他每道菜該怎麼擺盤、放什麼內容
• React.createElement() 就像是主廚自己去拆解每一個步驟，很費力但可以完成
• JSX 就像一本圖文並茂的食譜，廚師（React）一看就懂，還能加快工作效率

你甚至可以在食譜裡放一些邏輯判斷，例如：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? 'Welcome back!' : 'Please log in'}
    </div>
  );
}

這段 JSX 寫得像畫畫面，但其實是活生生的邏輯！你可以在裡面寫條件、呼叫函數、處理資料，完全沒問題。

當然可以！以下是幫你補充得更詳細一點的版本，語氣仍保持清楚、口語、友善，不進入實作程式碼，但補足背後的概念與差異點，幫助初學者建立更完整的理解 👇

JSX 只有 React 能用嗎？其實不只！

雖然 JSX 是為 React 誕生的語法，主要目的是讓開發者能更直覺地用「像 HTML 的方式」在 JavaScript 中撰寫畫面結構。

但從技術上來說，JSX 本身並不是 React 專屬的語言或功能。

實際上，JSX 是一種「語法擴充」（syntax extension），它需要透過像 Babel 這樣的工具轉譯成標準 JavaScript 才能被瀏覽器執行。這也意味著：

📌 只要一個框架能定義 JSX 最終要轉譯成什麼，它就能支援 JSX。

換句話說，任何框架只要願意解析這套語法格式，都可以使用 JSX。

那有哪些框架也使用 JSX？

以下是幾個除了 React 以外，也支援 JSX 的知名框架：

🔹 Preact：React 的迷你替代品

Preact 是一個與 React 語法相容、但體積更小的前端框架。

因為設計上幾乎完全對齊 React，它自然也支援 JSX。

對於想節省檔案大小或載入速度的專案來說，是一個不錯的替代選擇。

🔹 SolidJS：效能導向的新型框架

SolidJS 使用 JSX 撰寫畫面沒問題，但它的底層邏輯與 React 完全不同。

它不使用虛擬 DOM，而是透過編譯優化與細緻的 reactivity 系統來達成高效渲染。

雖然語法相似，但觀念與運作方式與 React 有很大差異。

🔹 Vue 3：預設用模板，也支援 JSX

Vue 通常是用「模板語法」來寫畫面，像 <template>...。但在 Vue 3 中，也提供選擇性支援 JSX，讓開發者可以用 JavaScript 更靈活地控制畫面結構。

這對一些需要更動態邏輯的元件或元件庫作者來說很有用。

這代表：

✅ 學會 JSX，不只是為了學 React，而是在學一種現代前端常用的 UI 描述語法。

因為越來越多框架選擇支援 JSX，它已經變成一種「跨框架的 UI 表現語言」。

無論你未來會用 React、Preact、SolidJS、Vue，甚至是自己開發元件庫，掌握 JSX 都是很實用的技能。

JSX ≠ React，但幾乎一定會搭配使用

所以你可以這樣記住它們的關係：

React 是做事的引擎，JSX 是讓你「告訴它要做什麼」變得更簡單的一種寫法。

你不用 JSX 也能寫 React（但會很辛苦）；你光寫 JSX 沒有 React，就什麼也不會發生。

它們不是一樣的東西，但是一對黃金拍檔 💛

結語

如果你是 React 的初學者，JSX 是你進入 React 世界的第一道門。

雖然它長得像 HTML，但其實是 JavaScript 的延伸語法，背後有著函數式 UI 設計的思維。

學會正確使用 JSX，理解它與 HTML 的差異，將讓你在撰寫 React 元件時更加得心應手。

別害怕它的樣子像 HTML，也別小看它的威力，因為這正是 React 靈活又強大的關鍵之一。