LESSON 08 · 約30分

IslandsとReactの部品を組み合わせる

操作が必要な場所を小さな島にし、読み込み時点を選びます。

コードを試す前に

02の基本構成にnpx astro add reactを実行する発展例です。JavaScript/JSXで進めます。

各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。

開発環境の準備を確認する →

このレッスンでわかること

React integrationの役割を説明できる
clientディレクティブを用途から選べる
hydrationとサーバー実行を混同しない

静かな本文の中に操作部分を置く

Astroのclient islandは、ページの一部分をReactなどで操作可能にする構成です。周囲の記事やナビゲーションまで、すべて同じUIフレームワークで管理する必要はありません。小さな開閉程度は通常のscriptで十分なこともあり、状態やUIの複雑さから選びます。

Reactを使うときだけintegrationを足す

npx astro add reactで公式integrationを追加できます。React部品は.jsxで書き、.astroからimportします。useStateでブラウザー上の状態を持てます。ただしclient指定がないReact部品はHTMLとして描画されるだけで、操作用のReact JavaScriptは自動で送られません。

操作が必要になる時点を選ぶ

client:loadはページ読み込み時、client:idleは初期読み込み後の低優先度、client:visibleは画面へ入ったタイミングで読み込み・hydrationを行います。重要な最初の操作をvisibleまで待たせるなど、用途に合わない遅延を避けます。client:mediaはメディア条件を使います。

client:onlyは異なる選択

client:loadなどは事前のHTML描画も行います。そのためReact部品の描画中にwindowへ無条件に触れるとサーバー側で失敗しえます。client:only="react"はサーバーでのHTML描画を省き、ブラウザーだけで描画します。表示の遅れやJavaScript無効時の代替も考えます。通常の.astro部品やHTMLタグへclient:loadを付ける仕組みではありません。

小さなReact部品

src/components/Counter.jsx

import { useState } from 'react';

export default function Counter({ initial = 0 }) {
  const [count, setCount] = useState(initial);
  return (
    <button type="button" onClick={() => setCount((value) => value + 1)}>
      行きたい：{count}
    </button>
  );
}

npx astro add reactを実行した別の練習構成で使用します。Reactのstateは再読み込みをまたいで自動保存されません。

ページの一部だけを操作可能にする

src/pages/island.astro

---
import Counter from '../components/Counter.jsx';
---
<h1>港の散歩</h1>
<p>ここはAstroが作る本文です。</p>
<Counter initial={0} client:load />

同じレッスンのCounter.jsxが必要です。client指定なしの表示とも比較します。

TRY IT YOURSELF

島の必要性を確かめる

Counterをclient指定なしで表示し、ボタンの反応を確認する
client:loadを加えて状態が更新されることを確認する
ページ下部の別UIならclient:visibleが合うか理由を考える

できたらOK：HTMLの存在と、操作用JavaScriptの読み込みを区別できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。