@astrojs/ react
この Astroインテグレーション はReactコンポーネントのサーバーサイドレンダリング(SSR)とクライアントサイドのハイドレーションを可能にします。
インストール
セクションタイトル: インストールAstroには、公式インテグレーションのセットアップを自動化するためのastro add
コマンドがあります。これを使用しない場合は、代わりにインテグレーションの手動インストールも可能です。
@astrojs/react
をインストールするには、下のコマンドをプロジェクトのディレクトリから実行し、プロンプトに従ってください。
問題に遭遇した場合、気軽にGithubで発生した問題についてお知らせください。あるいは、以下の手動インストールも試してみてください。
手動でのインストール
セクションタイトル: 手動でのインストール最初に@astrojs/react
パッケージをインストールします。
ほとんどのパッケージマネージャーはpeer dependenciesも一緒にインストールするようになっています。もし “Cannot find package ‘react’“(や似たような警告)がAstroをスタートした時に表示された場合、以下の方法でreact
とreact-dom
をインストールする必要があります。
これらのステップが完了したら、astro.config.*
のintegrations
プロパティからインテグレーションを有効化する必要があります。
スターターガイド
セクションタイトル: スターターガイドAstroでReactコンポーネントを使用する方法を詳しく知るには、UIフレームワークドキュメントをご一読ください。ドキュメントからは、
- 📦 どうコンポーネントがロードされるか
- 💧 クライアントサイドのハイドレーションオプション
- 🤝 複数のフレームワークを合わせて使う方法
について学ぶことが出来ます。
オプション
セクションタイトル: オプション複数のJSXフレームワークを一緒に使用する
セクションタイトル: 複数のJSXフレームワークを一緒に使用する(React、Preact、Solidなどの)複数のJSXフレームワークを同一のプロジェクトで使用している場合、 それぞれのコンポーネントに対してどのJSXフレームワークの変換方法を使用するか、Astroが判断する必要があります。JSXフレームワークを一つのみ導入している場合は特別な設定を記述する必要はありません。
include
(必須)とexclude
(任意)オプションを使用して、どのコンポーネントがどのフレームワークを使用するのか設定して下さい。設定では、特定のフレームワークのためのファイルまたはフォルダーを含んだ配列をinclude
に含めて下さい。この時複数のファイルパスを含めるためにワイルドカードも使用できます。
Astroは同じフレームワークを使用するコンポーネントをまとめたフォルダー(/components/react
や/components/solid
など)を、使用しているフレームワークにつき一つずつ作成することを推奨していますが、必須ではありません。
子要素のパース
セクションタイトル: 子要素のパースAstroコンポーネントからReactコンポーネントへ渡される子要素は、Reactノードではなくプレーンな文字列としてパースされます。
例えば、下の<ReactComponent />
には子要素が一つしか渡されませません。
異なる場所に異なる要素を挿入する機能などのために、1つ以上の子要素が渡される事を想定しているライブラリを使用している場合、この機能が邪魔になるかも知れません。
この場合、実験的なexperimentalReactChildren
フラグにより、子要素をReactにvnodeとして必ず渡すようAstroに伝えられます。ランタイム上のコストはありますが、互換性の確保に役立ちます。
このオプションは、Reactインテグレーションの設定から有効に出来ます。