JSX（JavaScript XML）是 React 中用來描述 UI 結構的一種語法擴展。它讓你可以在 JavaScript 中直接撰寫類似 HTML 的標記，來表示 UI 的結構。JSX 看起來像是 HTML，但它實際上會被轉換為 JavaScript 函數呼叫。

以下是一個 JSX 的例子：

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

這段 JSX 語法表示一個 h1 元素，其中的文字是 "Hello, world!"。雖然 JSX 讓程式碼看起來很像 HTML，但它實際上會在編譯階段轉換成 JavaScript。

JSX 透過 Babel 編譯

JSX 本身並不是原生支援的 JavaScript 語法，瀏覽器無法直接執行 JSX。為了讓瀏覽器理解，JSX 必須被轉換為純 JavaScript。Babel 是一個常用的工具，可以幫助將 JSX 轉換成瀏覽器可以理解的 JavaScript。

Babel 會將其轉換成：

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

JSX Transformer 是什麼？

JSX Transformer 是 Babel 的一部分，它負責將 JSX 語法轉換為標準的 JavaScript 函數呼叫。在 React 應用程式中，JSX 通常是通過 Babel 編譯器自動進行轉換，因此開發者可以專注於撰寫 JSX 而不需要手動處理轉換過程。

React.createElement 是什麼？
React.createElement 是 React 中的核心函數之一。它負責建立一個 JavaScript 物件，表示你想要渲染的 DOM 結構。這個對象包含了標籤名稱、屬性以及子元素等資訊。這是 React 底層運作的方式，即使你使用 JSX，它最終也是被轉換成 React.createElement 調用。

• JSX 是一種 JavaScript 語法擴展，讓開發者可以以類似 HTML 的方式撰寫 UI 元素。
• Babel 編譯器負責將 JSX 轉換成標準的 JavaScript 語法，即 React.createElement 調用。
• JSX Transformer 是一個工具，用來將 JSX 轉換為標準 JavaScript 語法。
• React.createElement 是 React 核心函數，用於建立 React 元素對象。