【Astro】React Aria を使う【備忘録】

Astroの中でReactのヘッドレスUIを読み込んで使う方法のメモ。

Astroのプロジェクトを作る

仮に以下でサンプルファイルありのAstroプロジェクトを生成します。

npm create astro@latest

参考：インストールガイド（Astro）

プロジェクトにReactとReact Ariaを追加する

AstroプロジェクトにReactとReact Aria Componentsを読み込みます

Reactを追加する

npx astro add react

参考：@astrojs/react

React Aria Components を追加する

npm add react-aria-components

参考：React Aria Getting Started

コンポーネントを作る・使う

react-aria-componentsを読み込んだJSXファイルを作成し、それを各ページの.astroで読み込みます。

JSXでコンポーネントを作る

.astroではなく、.jsxでコンポーネントを作成します。

import { Button } from 'react-aria-components';

export default function ButtonComponent(){
    return(
        <Button onPress={() => alert('Hello world!')}>Press me</Button>
    )
}

参考：Button – React Aria

.astro で client:load で読み込む

そのまま読み込むとただのHTMLタグの出力になってしまうので、 client:load つきで使うことでコンポーネントが持つJavaScriptが実行できます。

---
import Layout from '../layouts/Layout.astro';
import Button from '../components/Button.jsx';
---

<Layout title="Welcome to Astro.">
    <Button client:load/>
</Layout>

参考：Template Directives Reference (Astro)

表示確認

ボタンが表示され、ボタンクリックで「Hello world!」が表示されたら成功です。