HTMLからJSXへのコンバーター
HTML → JSX// JSX output appears here
なぜHTMLをJSXに変換するのか？
既存のHTMLテンプレートをReactに移行する際、classをclassNameに、forをhtmlForに、インラインスタイルを文字列からJavaScriptオブジェクトに手動変換する必要があります。当ツールはこれらの変換をすべて即座に自動化し、コンポーネントロジックに集中できるようにします。
属性変換
class→className、for→htmlFor、tabindex→tabIndex、maxlength→maxLengthなどを変換
インラインスタイルオブジェクト
style="color: red;"をstyle={{color: 'red'}}に変換 — ReactのJSオブジェクト記法
自己閉じタグ
空要素に閉じスラッシュを追加：<br>が<br />に、<input>が<input />になる
3ステップでHTMLをJSXに変換する方法
HTMLを貼り付け
HTMLテンプレート、Figmaのエクスポート、またはHTMLスニペットを左パネルに貼り付け
自動変換
コンバーターがすべての属性、スタイル、空要素をJSX構文に即座に変換
JSXをコピー
変換されたJSXをコピーしてReactコンポーネントのrender/returnブロックに貼り付け
HTMLからJSXへのコンバーターのユースケース
Reactへの移行
既存のHTMLページやテンプレートを属性の手動変換なしにReactコンポーネントに移行
ReactでのBootstrap
Bootstrap HTMLコンポーネントをJSXに変換してreact-bootstrapやスタイル付きコンポーネントと使用
メールテンプレート
HTMLメールテンプレートをReact EmailやLibrariesでレンダリングするためのJSXに変換
CMSからReactへ
WordPressや従来のCMSのHTMLテンプレートをReactコンポーネント構造に変換
HTMLからJSXへの変換のヒント
✓ class → classNameは重要
classはJavaScriptの予約キーワードです。ReactではclassNameをCSSクラスに使用する必要があります。忘れるとReactの警告と予期しない動作が発生します。
✓ labelのfor → htmlFor
<label>のfor属性はJSXではhtmlForになります。これを忘れるとアクセシビリティが壊れます — スクリーンリーダーはラベルとフィールドの関連付けに依存しています。
✓ 変換後にイベントハンドラーを更新
HTML属性onclick='...'はJSXに自動変換されません。変換後にインラインイベントハンドラーを手動でReactのonClick={handler}パターンに置き換えてください。
✓ HTMLコメントはJSXコメントになる
<!-- コメント -->はJSXでは{/* コメント */}に変換されます。JSXはJSXタグ内でHTMLコメント構文をサポートしていません。
❓ よくある質問
なぜReactはclassではなくclassNameを使うのですか？
classはJavaScriptの予約キーワード（ES6クラスに使用）です。JSXはJavaScriptなので、classを使うと構文の競合が生じます。JavaScriptのclass予約語との曖昧さを避けるためにReactはclassNameを選択しました。
このツールはReactイベントハンドラーを処理しますか？
いいえ — onclick、onsubmitなどのHTMLイベントハンドラーはReactのonClick、onSubmitに自動変換されません。それらの値（HTMLでのJavaScript文字列）はReactコンポーネントの関数/状態を参照する必要があります。手動で更新が必要です。
HTMLとJSXの違いは何ですか？
JSXはHTMLに似たJavaScriptの構文拡張でReact.createElement()呼び出しにコンパイルされます。主な違い：すべての属性がcamelCase、classはclassName、forはhtmlFor、空要素は自己閉じが必要、式は文字列ではなく{}を使用。
なぜJSXでは空要素は自己閉じが必要なのですか？
JSXはBabelによってXMLライクな構文として解析され、すべての要素の適切な閉じが必要です。<br>、<img>、<input>などの空要素には子がないため、閉じていないタグではなく/>の自己閉じが必要です。