HTML入力

JSX出力

HTML→JSXコンバーターとは？

HTML→JSXコンバーターは、標準のHTMLマークアップを有効なReact JSX構文に変換するツールです。JSXではHTMLの属性がcamelCaseになり、classはclassName、forはhtmlForに変わります。

ReactコンポーネントにHTMLをそのまま貼り付けると構文エラーが発生します。このツールはすべての変換を自動化します。

HTMLをJSXに変換する方法

3ステップでHTMLを有効なReact JSXに変換します。

HTMLを貼り付けまたはアップロード

HTMLを左パネルに貼り付けるか、アップロードをクリックします。

JSX出力を確認

classがclassNameに変換され、空要素が自己終了タグになります。

コピーまたはダウンロード

コピーまたはダウンロードで.jsxファイルとして保存。

このツールが役立つ場面

静的HTMLをReactに移行

既存のHTMLテンプレートをReactプロジェクト用のJSXに変換します。

デザイナーのモックアップを使用

デザイナーから受け取ったHTMLをReactコンポーネントに組み込みます。

JSX構文を学ぶ

知っているHTMLのJSX等価物を即座に確認できます。

メールテンプレートの変換

React EmailなどのライブラリのためにHTMLメールテンプレートをJSXに変換します。

よくある質問

なぜclassはclassNameになるのですか？

JSXではHTML属性名ではなくJavaScriptのDOMプロパティ名を使用します。HTMLのclass属性のDOMプロパティはclassNameです。

他にどの属性が変換されますか？

for→htmlFor、tabindex→tabIndex、onclick→onClickなど。

どの空要素が自己終了しますか？

<br />、<img />、<input />、<hr />など全ての空要素。

インラインスタイルは対応していますか？

style="color:red"はstyle={{ color: "red" }}に変換されます。

データは保存されますか？

いいえ。全ての処理はブラウザ内で行われ、サーバーには送信されません。

HTML→JSXコンバーター

HTML入力

JSX出力