SPONSORED ADVERTISEMENT
Placeholder (banner)

HTML ⇔ JSX コンバーター

通常のHTMLコードをReactコンポーネントで使用できるJSX形式に瞬時に変換します。属性の置換(classからclassName、forからhtmlFor)、インラインスタイルのオブジェクト化、セルフクロージングタグの補完などをリアルタイムに行い、Reactコンポーネント定義コードにラップすることも可能です。すべての処理はローカルブラウザ上で行われ、外部サーバーへデータを送信しないため安全です。

HTML 入力
React/JSXに変換したいHTMLコードを入力してください。
変換設定
JSX変換のオプションを選択します。

HTMLのclass属性をReact用に置換します。

label要素などのfor属性をReact用に置換します。

CSS文字列をキャメルケースのオブジェクト形式に変換します。

imgやbrなど、閉じタグのない要素の末尾に「/」を補完します。

onclick などのイベントハンドラ名を onClick に変換します。


出力コードを関数コンポーネント定義で包みます。

JSX 出力
自動変換されたReact/JSX互換のコードです。
JSX変換のポイント:

HTMLとReactのJSXにはいくつかの構文的な差異があります。このツールでは主な属性変更(classやforなど)、インラインスタイルのオブジェクト化、セルフクロージングタグの補完を完全にブラウザ上で行います。