HTML→JSXコンバーター

コンポーネントで囲む

コンポーネント名

HTML

JSX

HTMLからJSXへの変換とは？

JSXはReactコンポーネントで使用されるHTMLに似た構文です。HTMLに見えますが、重要な違いがあります。classはclassNameになり、forはhtmlForになり、インラインスタイルは文字列ではなくJavaScriptオブジェクトを使用し、すべてのタグは自己終了する必要があり、イベントハンドラーはcamelCaseを使用します。このツールはそれらすべての変換を自動的に処理するので、HTMLを直接貼り付けて、Reactコンポーネントですぐに使える有効なJSXを取得できます。

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

左パネルにHTMLマークアップを貼り付けます（または「サンプル」をクリックしてサンプルを読み込みます）。
JSXの出力が右側に即座に表示されます。
オプションで「コンポーネントで囲む」を有効にすると、貼り付け可能な完全な関数コンポーネントを取得できます。
「JSXをコピー」ボタンでJSXをコピーします。

Keywords: HTML JSX変換, HTMLからJSX, JSXコンバーター, className変換, JSXオンライン, React JSX変換, HTMLをReactに変換