FacebookLinkedInTweet更新日期： 2025 年 3 月 30 日

本文為 JSX 基礎介紹系列文：

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

JSX 與 HTML 的差異：5 個常見新手錯誤一次搞懂

JSX 中如何插入 JavaScript？使用 {} 的基本原則

JSX 中的條件渲染與清單渲染：實用範例教學

JSX 背後的真相：它是怎麼轉換成畫面的？

閱讀完本系列文後，可以繼續閱讀《React 元件基礎介紹》介紹

如果你剛開始學習 React，一定對 JSX 感到既熟悉又陌生。

它看起來像是 HTML，卻能夠寫在 JavaScript 裡。你可能曾經寫過像這樣的程式碼：

const element =

Hello, world!

但你有沒有想過，瀏覽器並不認識

是什麼 JavaScript 物件，那這樣的語法到底是怎麼變成畫面的？這背後發生了什麼事？

本篇文章將帶你揭開 JSX 背後的真相，從 Babel 的轉譯過程，到 React.createElement 的角色，最後簡單介紹虛擬 DOM（Virtual DOM），讓你理解 JSX 是怎麼一步步變成畫面的！

什麼是 JSX？

看起來像 HTML，其實是 JavaScript 的語法糖。

JSX，全名是 JavaScript XML，是 React 所採用的一種語法擴充形式。

它讓我們可以在 JavaScript 中直接寫出類似 HTML 的標籤語法，用來描述 UI 的結構，這不僅更直觀，也更貼近我們在設計畫面時的思考方式。

來看看這個簡單的範例：

const greeting =

Hello, React!

;

這段程式碼看起來就像是 HTML 的

標籤包著文字內容，但它實際上寫在 JavaScript 的變數裡，並且被賦值給 greeting 這個變數。

這樣的語法，在 React 世界裡非常常見，不論是建立元件還是組合畫面，都會大量使用。

為什麼說 JSX 是語法糖？

所謂「語法糖」（syntactic sugar）指的是讓程式碼更好讀、寫起來更方便的語法表達方式，實際上這些語法在編譯後，會被轉換成更基礎的語法格式。

在 JSX 的情境中，我們表面上寫的是 HTML 標籤，但這些語法在被 React 處理之前，會先經過 Babel 編譯器的轉換，最終變成純 JavaScript 語法，才能被瀏覽器理解並執行。

換句話說，

Hello, React!

只是寫起來舒服的一種表示方法，背後其實還有一整套轉換與處理的機制。

瀏覽器其實不懂 JSX！

這點對初學者非常重要：瀏覽器並不能直接執行 JSX。

如果你把含有 JSX 的程式碼直接放在