HTML 轉 JSX 轉換器

這是一個專為前端開發者設計的輔助工具，能夠完美填補傳統 HTML 靜態網頁與現代 JavaScript 框架之間的轉換鴻溝。讓您可以快速將標準的 HTML 或是 SVG 標籤，在瀏覽器中瞬間轉換成完全符合 React 規範的 JSX 語法。

我們將您的專案安全性放在首位。這個應用程式採用「前端處理 (Client-Side Processing)」，所有的運算都在您自己的電腦上完成。這代表即使您貼上的是公司機密的 UI 設計版型，也絕對不會有資料外洩的風險，因為任何程式碼都不會被上傳到我們的伺服器。

1. 貼上程式碼： 將任何標準的 HTML 程式碼片段直接貼入左側的「HTML (輸入)」文字區塊。
2. 即時轉換： 系統會在您輸入的同時即刻分析語法，並在右側即時產出正確的 JSX 程式碼。
3. 複製與使用： 確認轉換後的排版無誤，點擊右側的「複製」按鈕，即可將程式碼貼上到您的 `.js`、`.jsx` 或是 `.tsx` React 檔案中。

主要的轉換規則

• 自動將 class=" " 屬性轉換為 React 規定的 className=" "。
• 自動將 for=" " 屬性轉換為 HTML-DOM 對應的屬性 htmlFor=" "。
• 對於空標籤 (void elements) 例如 <br>、<hr>、<img> 以及 <input>，會自動加上結尾的閉合斜線 />，以避免 React 編譯器報錯。
• 將字串格式的行內樣式 (例如 style="font-size: 10px;") 深度解析，並轉換為駝峰式命名的 JavaScript 物件格式 style={{fontSize: '10px'}}。
• 常見的事件監聽器屬性 (例如 onclick) 會被自動轉換為 React 專用的駝峰式合成事件名稱 (例如 onClick)。

JSX (JavaScript XML)

一種 JavaScript 語法的擴充功能，廣泛用於 React 與 Next.js 框架中。它讓您能以類似 HTML 的語法來編寫 UI 元件，但許多屬性名稱與傳統 HTML 不同，例如 class 必須寫成 className。

className

在 JSX 中用來取代 HTML class 屬性的名稱。這樣設計是為了避免與 JavaScript 內建的保留字 class 產生衝突。

htmlFor

對應於 HTML 在 <label> 標籤上使用的 for 屬性。在 JSX 中被重新命名，同樣是為了避免與 JavaScript 中的 for 迴圈關鍵字衝突。

Self-Closing Tags (自我閉合標籤)

在 JSX 中，所有沒有子內容的空標籤 (例如 <img>、<br>、<input> 等) 都必須明確加上斜線來閉合，也就是寫成 <img />。這在 HTML 是可選的，但在 JSX 中則是強制規定。

Inline Styles (行內樣式)

在 JSX 中，style 屬性不接受 CSS 字串，而是必須傳入一個 JavaScript 物件。而且所有的 CSS 屬性名稱都必須改用駝峰式命名法 (camelCase)，例如：style={{color: "red", fontSize: "16px"}}。

React Component (React 元件)

一個會回傳 JSX 的 JavaScript 函式或是類別，具有可重複使用的特性。元件是建構 React 應用程式的基礎區塊，每個元件負責渲染畫面上的一小部分 UI。

AST (Abstract Syntax Tree，抽象語法樹)

以樹狀資料結構來表示程式碼語法的一種模型。本轉換器會在背景中解析 HTML，將其轉換為 AST 模型後，再根據 JSX 的語法規則重新生成正確的輸出程式碼。

Q.我的程式碼會被傳送到伺服器嗎？

不會的。所有的 HTML 到 JSX 轉換都完全在您瀏覽器的 JavaScript 引擎中執行。您貼上的程式碼絕對不會被傳送到任何外部伺服器。

Q.這個工具會自動執行哪些轉換？

包含將 class 轉為 className、for 轉為 htmlFor、將行內樣式 (inline style) 字串轉為物件表示法、自動為空標籤 (void tags) 加上閉合斜線，以及保留 data-* 屬性。所有的轉換都符合 React 的 JSX 規範。

Q.我可以直接將輸出的結果當作 TypeScript (TSX) 使用嗎？

可以的，輸出的 JSX 通常也是有效的 TSX 程式碼。但如果您需要加入型別宣告或是 TypeScript 專屬的語法，就必須在轉換後手動加入。

Q.它能處理像是表格 (tables) 和表單 (forms) 等複雜的 HTML 結構嗎？

是的，包含表格、表單甚至是 SVG 等複雜的結構都有支援。請注意，如果您使用的是模板語言 (如 EJS、Pug 等)，請先將其渲染為純 HTML 後再貼入轉換。

Q.我該如何複製結果？

點擊 JSX 輸出面板右上方的「複製」按鈕。轉換後的程式碼就會複製到您的剪貼簿，您可以直接貼上到您的 .jsx 或 .tsx 檔案中。

Q.SVG 的屬性也會被轉換嗎？

是的。像是 stroke-width 和 fill-opacity 等 SVG 專用屬性，會自動被轉換成駝峰式命名 (camelCase) (例如 strokeWidth、fillOpacity)，以符合 React 的 JSX 命名規則。

Q.這個工具可以在手機上使用嗎？

可以的。工具介面採用響應式設計，您可以在任何現代的行動裝置瀏覽器上貼上 HTML、檢視 JSX 輸出結果並複製。

• 匯入設計師版型： 當網頁設計師交付純 HTML 切版檔案時，前端工程師可以利用此工具，快速將這批靜態 HTML 轉換為可重複使用的 React 函式元件。
• 遷移老舊專案： 當您正在將過往基於 jQuery 或是傳統架構的專案，升級遷移至 React / Next.js 等現代框架時，能幫您快速重構基礎的 DOM 結構程式碼。
• 套用開源 UI 元件庫： 如果您在網路上找到純 Bootstrap 或是原生的 Tailwind CSS 元件片段，可以直接貼到這裡轉換，然後毫不費力地套用到您的 React 專案中。