React in Astro

useState — カウンター

Reactの基本。useState でコンポーネント内の状態を管理します。ボタンを押すと再レンダリングされます。

// .astro ファイルで読み込む
import Counter from '../components/Counter';

// client:load をつけるとブラウザで動く
<Counter client:load label="CLICKS" />

useEffect + IntersectionObserver — スキルバー

useEffect で副作用（スクロール検知）を処理。画面に入った瞬間にアニメーションが始まります。

// client:visible = 画面に見えたときだけ読み込む（パフォーマンス最適化）
<SkillBars client:visible />

Astroは Islands Architecture を採用しています。
デフォルトではHTMLとして静的に出力され、client:* ディレクティブをつけた部分だけJSが動きます。 これにより、必要な箇所だけインタラクティブにしつつ、全体のパフォーマンスを保てます。