# AstroでReact Flowを使いたいぞという話

Date: 2023-03-24
URL: https://s.conao3.com/blog/2023/bb48a7
Author: conao3 (Naoya Yamashita)

# はじめに

[React Flow](https://reactflow.dev/)に一目惚れしたので、このブログでも使ってみたい。
[Hello Astro](https://s.conao3.com/blog/2023/b81579)で素のReactが動くことは確かめたのだけど、このクラスのライブラリが動くかどうかは分からないので、ちょっとチャレンジングな課題。

# pnpm install

まずは、React Flowをインストールする。

```bash
pnpm install reactflow
```

ローカルサーバーを起動してみる。

```bash
pnpm run dev
```

普通に立ち上がってきた。インストールしただけで壊れるということはなかったようです。

# mdxで使ってみる

[Creating your first flow](https://reactflow.dev/docs/quickstart/#creating-your-first-flow)の例をやってみる。

```jsx
import ReactFlow from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 10, y: 10 }, data: { label: '1' } },
  { id: '2', position: { x: 10, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  return (
    <div style={{ border: '1px solid', width: '100%', height: '500px' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />
    </div>
  );
}
```

これを `src/components/SimpleReactflow.tsx` で保存して、以下のようにmdxに埋め込む。

```mdx
import App from '../../../components/SimpleReactflow.tsx'

<App client:only />
```

![img](https://s.conao3.com/img/bb48a7-react-flow.png)

。。。普通に動いてしまった。。なんだこれ、Astro最高だな。

とはいえ実は一回失敗していた。 `cliend:load` を指定するとビルド時にAstroが落ちてしまった。
SSRに対応してないのかな？ということで `client:only` を指定してgot事無き。

# まとめ

予想外にさくっと動いてしまったのでびっくりしてしまいました。

たしかにhugoよりもページ生成速度は少し遅いですが、十分速いですし、出来上がったページはhugoと遜色ないです。(ゼロjsなので)

それでいてこんな感じにReactが普通に動くのは夢が広がります。みなさんも試してみてください。