React 語法轉換 · 每項改寫都要檢查
把 markup 改成 JSX，不代表已通過 React 整合。
工具先用 Prettier HTML parser 排版，再以固定規則改寫 attribute、簡單 style 與 wrapper。它不會編譯、渲染或驗證語意，也不是 sanitizer；輸入中的 URL、資源、ID reference、未知 attribute 與 JSX expression 仍需人工檢查。
HTML 路徑
<label class="field" for="email">
- 常見 DOM prop 名稱
- void element 閉合
- label 與表單控制項關聯
SVG 路徑
<path stroke-width="2" fill-rule="evenodd">
- 常見繪圖 prop 改為 camelCase
- ID、URL、gradient 與 mask reference
- ARIA／data attribute 保持連字號
轉換收據
固定 mapping 與一般規則都要逐項檢閱。
class="field"className="field"重新命名React DOM prop
for="email"htmlFor="email"重新命名保留 label association
stroke-width="2"strokeWidth="2"重新命名常見 SVG prop casing
aria-labelaria-label保留ARIA spelling 不變
data-test-iddata-test-id保留自訂 data contract
onclick="save()"data-devsexy-review-onclick隔離保留字串供檢查，不會建立 React handler
簡單 inline style 轉換
CSS declaration string 會變成值皆為字串的 JavaScript object。
style="font-size: 14px; --brand: #bfd456; line-height: 1.4"
style={{ fontSize: "14px", "--brand": "#bfd456", lineHeight: "1.4" }}font-sizefontSize一般 kebab-case property 改為 camelCase--brand"--brand"CSS custom property 保持原名並加上引號14px／1.4"14px"／"1.4"保留為字串，不猜測單位或 numeric intent複雜 CSS 值需要人工改寫規則以分號切 declaration；不是完整 CSS parserScript 與 event 隔離區
降低直接搬入行為的風險，不等於完成 sanitization。
Worker 會移除一般成對的 script tag，並把偵測到的 on…= attribute 改成 data-devsexy-review-*；轉換時不執行它們。但自閉合 SVG script、javascript: URL、iframe／外部資源與原文中的 JSX expression 仍可能保留，不可信輸出不得直接編譯或渲染。
<button onclick="checkout(cart)">購買</button>
<button data-devsexy-review-onclick="checkout(cart)">購買</button>
人工確認依賴與狀態後再改成：onClick={() => checkout(cart)}
輸出 wrapper
三種操作都使用 Fragment；component wrapper 只是可選骨架。
Fragment snippet
<>…</>Snippet 固定輸出 Fragment；不增加 DOM node。
JSX component
export function Badge()JSX 模式預設包成無參數 function；可關閉 wrapper。
TSX component
(): React.JSX.Element只加入 return type；不產生 props type、props spread 或 React import。
Component name
大寫 ASCII identifier啟用 wrapper 時才檢查；小寫會被 React 視為 intrinsic element。
轉換後的整合關卡
輸出只是可檢查的起點，不是 React-ready 保證。
用目標 toolchain 解析
確認專案的 JSX runtime、React types、import 與 TS config。
檢閱改寫與遺漏
特別檢查無等號 boolean attribute、未知 SVG casing 與 namespace。
檢查主動內容
移除不可信 JSX expression、URL、resource 與未被規則涵蓋的 script。
補上 component contract
自行設計 props type、event function、state、ref、accessibility 與 ID strategy。
實際 render、lint、test
核對 form、gradient、mask、CSS、React warning 與互動行為。