Toolipedia 埋め込み
JA
← すべてのテキストツール

HTML to JSXコンバーター

HTMLをReact JSXに変換：classをclassNameに、styleオブジェクト、自己終了タグに対応。

  • 無料
  • 登録不要
  • どの端末でも使える

約HTML to JSXコンバーター

HTMLを貼り付けると、有効なReact JSXが得られます。ツールはclassをclassNameに、forをhtmlForに変更し、インラインのstyle文字列をstyleオブジェクトに変換し、brやimgなどの空要素タグを閉じ、属性をキャメルケースに変換します。静的なテンプレートをコンポーネントに移すときの面倒な編集の手間が省けます。

HTML to JSXコンバーターの使い方

  1. HTMLのスニペットを、入力ボックスに貼り付けてください。
  2. className、スタイルオブジェクト、閉じたタグを含めて、変換されたJSXを確認してください。
  3. JSXをReactコンポーネントにコピーしてください。

このツールを使う理由

別名

よくある質問

ReactでclassではなくclassNameを使うのはなぜですか?

classはJavaScriptの予約語で、JSXはJavaScriptであるため、ReactはHTMLのclass属性に、DOMのプロパティ名であるclassNameを使います。

classのほかに、何が変わりますか?

forのような属性はhtmlForになり、インラインスタイルはオブジェクトになり、imgやinputなどのタグは自己閉じになります。イベント名もキャメルケースを使います。

結果を親要素で囲む必要がありますか?

JSXは、1つのルート要素を返す必要があります。HTMLに複数のトップレベル要素がある場合は、divまたはフラグメントで囲んでください。

HTML to JSXコンバーターは無料ですか？

はい。ToolipediaのHTML to JSXコンバーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

HTML to JSXコンバーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール