なぜ ASTRO を JSX に変換するのですか？
.astro ファイルと React の .jsx コンポーネントはどちらもロジックとマークアップを混在させているため、テンプレートとしては近い親戚のようなものです。しかし、Astro はサーバー専用のコード フェンスを使用し、JSX はエクスポートされたレンダリング関数を使用します。開発者は、コンポーネントを React や Next.js のコードベースに移行する際に変換を行います。
ASTRO から JSX への変換方法
手動書き換え FREE
--- フェンスからロジックを関数本体に移動し、マークアップを return ( ... ) で囲み、export default function を追加します。プロパティは Astro.props の代わりに引数として読み取ります。
JSX 固有の構文の修正 FREE
class を className に変更し、<slot /> を {children} に置き換え、Astro ディレクティブや set:html を dangerouslySetInnerHTML などの React の同等機能に変換します。
これらの形式について
品質と注意点
- これを自動的に行うツールはありません。すべてのコンポーネントで手動編集が必要になることを想定してください。
- Astro 固有の機能（部分的なハイドレーション
client:*ディレクティブ、Astro.props、Astro.glob、<slot>、スコープ付きスタイル）には直接的な JSX の同等機能がないため、再実装する必要があります。 - Astro はデフォルトでサーバー上でレンダリングされます。React コンポーネントと同じマークアップでも、サーバーフレームワークを使用しない限りクライアント側の JS として配信される可能性があり、パフォーマンス特性が変化します。
よくある質問
自動の Astro から JSX へのコンバーターはありますか？
いいえ。Astro 自身のドキュメントでも、移行はコンポーネントの手動の再構築として説明されています。
主な構造上の変更は何ですか？
--- コード フェンスが関数本体になり、マークアップはエクスポートされた関数の return ステートメント内に入ります。スロット（slot）はどう扱えばよいですか？
Astro の
<slot /> を React の {children} プロパティに置き換えます。class 属性についてはどうですか？
JSX では、
.astro ファイルで使用されるプレーンな class 属性の代わりに className を使用します。
