@astrojs/ react

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

インストール

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

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

npx astro add react

pnpm astro add react

yarn astro add react

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

手動でのインストール

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

npm install @astrojs/react

pnpm add @astrojs/react

yarn add @astrojs/react

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

npm install react react-dom

pnpm add react react-dom

yarn add react react-dom

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

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
});

スターターガイド

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

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

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

オプション

複数のJSXフレームワークを一緒に使用する

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

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

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

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インテグレーションの設定から有効に出来ます。

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
});