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をコピーします。

よくある質問

ここで機密データをデコードするのは安全ですか？ はい。すべてのデコーディングはJavaScriptを使用してブラウザで行われます。データはサーバーに送信されないため、エンコードされた文字列は完全にプライベートです。

Base64とURL-safe Base64の違いは何ですか？ 標準的なBase64は+と/文字を使用しており、これらはURL内の特殊文字です。URL-safe Base64はこれらを-と_に置き換えるため、パーセントエンコーディングなしでURLとファイル名で安全に使用できます。

デコード出力がゴミに見えるのはなぜですか？ 元のデータがバイナリ（画像、PDF、圧縮ファイルなど）の場合、デコード出力は読み取り可能なテキストになりません。その場合、Base64文字列はテキスト文字列ではなくバイナリファイルを表します。

Base64は暗号化の形式ですか？ いいえ。Base64は暗号化ではなくエンコーディング方式です。誰でもキーなしにBase64文字列をデコードできます。機密データを保護するために使用してはいけません。そのためには適切な暗号化を使用してください。

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