HTMLをJSXに変換（React）

HTMLをReactコンポーネントにコピーすると、最初のclass属性で壊れます。JSXはJavaScriptなので、classの代わりにclassName、forの代わりにhtmlFor、文字列の代わりにstyleオブジェクト、キャメルケースのイベント名とSVG属性名、すべての要素を閉じること、テキスト内の波括弧のエスケープが必要です。テンプレート、デザインツール、スニペットサイトのHTMLを貼り付けると、有効なJSXが得られます。必要なら関数コンポーネントで囲み、Reactで動作が異なる点は備考で知らせます。

使い方

1. HTMLを貼り付けます。断片でもページ全体でも構いません（変換されるのは<body>だけです）。
2. 必要ならコンポーネント名を入力して、export default functionで囲みます。
3. value/checkedをdefaultValue/defaultCheckedに変えるか、インラインハンドラーをアロー関数に変えるかを選びます。
4. JSXをコピーし、備考を確認します。

計算式

class → className · for → htmlFor · tabindex → tabIndex · style="a-b: c" → style={{ aB: "c" }} · onclick="f()" → onClick={(event) => { f() }} · <br> → <br />

属性はReactのDOMプロパティ名に従い、data-*とaria-*はそのままです。<svg>内では、ハイフン付きの属性がキャメルケースになり（stroke-width → strokeWidth）、小文字の名前が復元されます（viewbox → viewBox）。JSXが予約している文字はエスケープされます。{ と } は {'{'} と {'}'} に、> は &gt; になります。コメントは{/* */}になります。トップレベルのノードが複数ある場合は<>フラグメントで囲みます。省略されていた終了タグ（li、p、td…）は補われます。

計算例

サンプルでは、class="card"がclassNameになり、styleの文字列はstyle={{ padding: "16px", borderRadius: "8px" }}に、for="email"はhtmlFor、<input … value="" autofocus tabindex="1">は<input … defaultValue="" autoFocus tabIndex="1" />になります。onclick="subscribe()"はonClick={(event) => { subscribe() }}になり、「登録する {無料}」の波括弧はエスケープされ、SVG内のviewboxとstroke-widthはviewBoxとstrokeWidthになります。結果はSignupCardコンポーネントで囲まれ、コメントは{/* 登録カード */}としてフラグメント内に残ります。