コンテンツにスキップ

@astrojs/ react

この AstroインテグレーションReactコンポーネントのサーバーサイドレンダリング(SSR)とクライアントサイドのハイドレーションを可能にします。

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドがあります。これを使用しない場合は、代わりにインテグレーションの手動インストールも可能です。

@astrojs/reactをインストールするには、下のコマンドをプロジェクトのディレクトリから実行し、プロンプトに従ってください。

Terminal window
npx astro add react

問題に遭遇した場合、気軽にGithubで発生した問題についてお知らせください。あるいは、以下の手動インストールも試してみてください。

最初に@astrojs/reactパッケージをインストールします。

Terminal window
npm install @astrojs/react

ほとんどのパッケージマネージャーはpeer dependenciesも一緒にインストールするようになっています。もし “Cannot find package ‘react’“(や似たような警告)がAstroをスタートした時に表示された場合、以下の方法でreactreact-domをインストールする必要があります。

Terminal window
npm install react react-dom

これらのステップが完了したら、astro.config.*integrationsプロパティからインテグレーションを有効化する必要があります。

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [react()],
});

AstroでReactコンポーネントを使用する方法を詳しく知るには、UIフレームワークドキュメントをご一読ください。ドキュメントからは、

  • 📦 どうコンポーネントがロードされるか
  • 💧 クライアントサイドのハイドレーションオプション
  • 🤝 複数のフレームワークを合わせて使う方法

について学ぶことが出来ます。

(React、Preact、Solidなどの)複数のJSXフレームワークを同一のプロジェクトで使用している場合、 それぞれのコンポーネントに対してどのJSXフレームワークの変換方法を使用するか、Astroが判断する必要があります。JSXフレームワークを一つのみ導入している場合は特別な設定を記述する必要はありません。

include(必須)とexclude(任意)オプションを使用して、どのコンポーネントがどのフレームワークを使用するのか設定して下さい。設定では、特定のフレームワークのためのファイルまたはフォルダーを含んだ配列をincludeに含めて下さい。この時複数のファイルパスを含めるためにワイルドカードも使用できます。

Astroは同じフレームワークを使用するコンポーネントをまとめたフォルダー(/components/react/components/solidなど)を、使用しているフレームワークにつき一つずつ作成することを推奨していますが、必須ではありません。

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
export default defineConfig({
// Astroが複数のフレームワークを同時使用することが以下のコードで可能になります。
// JSXフレームワークを一つだけ使用している場合は`include`を含める必要はありません。
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*'],
}),
],
});

AstroコンポーネントからReactコンポーネントへ渡される子要素は、Reactノードではなくプレーンな文字列としてパースされます。

例えば、下の<ReactComponent />には子要素が一つしか渡されませません。

---
import ReactComponent from './ReactComponent';
---
<ReactComponent>
<div>one</div>
<div>two</div>
</ReactComponent>

異なる場所に異なる要素を挿入する機能などのために、1つ以上の子要素が渡される事を想定しているライブラリを使用している場合、この機能が邪魔になるかも知れません。

この場合、実験的なexperimentalReactChildrenフラグにより、子要素をReactにvnodeとして必ず渡すようAstroに伝えられます。ランタイム上のコストはありますが、互換性の確保に役立ちます。

このオプションは、Reactインテグレーションの設定から有効に出来ます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [
react({
experimentalReactChildren: true,
}),
],
});

他のインテグレーション

UIフレームワーク

SSRアダプター

その他