HTML を React 用の JSX に変換する
JSX は JavaScript 式を埋め込める HTML です。空要素タグを閉じ、class を className に、style 文字列をオブジェクトに変換して HTML を JSX にします。
- 1
JSX は HTML と異なります。すべてのタグを閉じる必要があり(<img> ではなく <img />)、class は className に、for は htmlFor に、style は文字列ではなくオブジェクトになり、インラインイベントハンドラはキャメルケースを使います(onclick ではなく onClick)。変換はこれらの変換を自動化します。
- 2 HTML ミニファイア →
変換前に HTML をミニファイして空白を整理し、構造を一貫させます。これにより JSX 出力がきれいで予測しやすくなります。コメントと不要な空白を除去します。
- 3 JavaScript フォーマッター →
結果の JSX を読みやすさのためにフォーマットします。HTML から JSX への変換は有効な React コンポーネントを生成します。適切なインデントと構文を確保するためにフォーマットし、すべての属性が正しくリネームされたことを確認してください。
- 4
変換後の手動修正:予約語である HTML 属性(class → className、for → htmlFor)、style="color: red" → style={{color: "red"}}、data-* と aria-* 属性はそのまま、SVG 属性はキャメルケース(stroke-width → strokeWidth)、空要素タグは自己閉鎖(<br> → <br />)。
よくある質問
- なぜ JSX では class が className になるのですか?
- JSX は JavaScript(React.createElement)にコンパイルされるためです。class は JavaScript の予約語(ES6 クラス)なので、React は衝突を避けるために className を使います。同様に、for も JavaScript の予約語なので htmlFor になります。
- インラインスタイルはどう変換しますか?
- HTML の style="color: red; font-size: 14px" は JSX では style={{color: "red", fontSize: "14px"}} になります。プロパティ名はキャメルケース(fontSize であって font-size ではない)、値は文字列、外側の波括弧は JSX 式の区切り、内側の波括弧はオブジェクトリテラルです。
このタスクを解決するワークフロー
関連ツール
HTML ミニファイア
Minify HTML by removing comments and whitespace。無料、プライベート、100%クライアントサイド。 ツール
JavaScript フォーマッター
Beautify or minify JavaScript source code online. Text-only formatting, no execution。無料、プライベート、100%クライアントサイド。 ツール
HTML エスケープツール
Escape or unescape HTML special characters online。無料、プライベート、100%クライアントサイド。 ツール