HTML から JSX 変換ツール
HTML コードを有効な React JSX に変換。class から className、インラインスタイルからオブジェクト、void 要素の自己閉じなどを自動処理。
HTML 入力0 文字
JSX 出力
変換ルール
HTML
JSX
理由
class="..."
className="..."
class は JS の予約語
for="..."
htmlFor="..."
for は JS の予約語
style="color: red"
style={{ color: "red" }}
JSX はスタイルオブジェクトを使用
tabindex="0"
tabIndex="0"
JSX はキャメルケース属性を使用
<!-- comment -->
{/* comment */}
JSX は JS コメント構文を使用
<br>
<br />
JSX は自己閉じタグが必要
onclick="fn()"
onClick="fn()"
JSX はキャメルケースイベントを使用
なぜ JSX は HTML と異なるのか
JSX は HTML ではなく JavaScript の構文拡張です。JavaScript 関数呼び出しにコンパイルされるため、一部の HTML 属性は JavaScript の予約語（class や for など）と競合し、インラインスタイルは CSS 文字列ではなく JavaScript オブジェクトでなければなりません。
このツールが変換する内容
- - class を className に、for を htmlFor に
- - インラインスタイル文字列を JavaScript オブジェクトに
- - HTML コメントを JSX コメントに
- - void 要素の自己閉じ（br, img, hr, input）
- - キャメルケースのイベントハンドラーと属性
オンラインで HTML を JSX に変換する方法
- 1.左パネルに HTML コードを貼り付けるか、サンプルを読み込むをクリックして試してみてください。
- 2.コンバーターが HTML をリアルタイムで有効な JSX に自動変換します。
- 3.下の変換ルール表を確認して各変換を理解してください。
- 4.コピーをクリックして JSX 出力をクリップボードにコピーします。
FAQ
このツールはすべての HTML 属性を処理できますか？
このツールは class、for、tabindex、readonly など 30 以上の最も一般的な HTML-JSX 属性の違いを変換します。また、すべてのインラインイベントハンドラー（onclick、onchange など）をキャメルケース形式に変換します。
完全な React コンポーネントが生成されますか？
このツールは生の HTML マークアップを有効な JSX 構文に変換します。React コンポーネント関数でラップはしません。JSX 出力をコンポーネントの return 文に直接貼り付けることができます。
インラインスタイルはどのように変換されますか？
CSS スタイル文字列 style="color: red; font-size: 16px" は JSX スタイルオブジェクトに変換されます：style={{ color: "red", fontSize: "16px" }}。CSS プロパティは自動的にキャメルケースに変換されます。
HTML データはサーバーに送信されますか？
いいえ。すべての変換はブラウザ内で JavaScript を使用して行われます。HTML コードがアップロード、保存、サーバー上で処理されることはありません。