Here are some React Components...

Here is the code for this page:

//src/pages/experiments/react-components.astro
---
import BaseLayout from '../../layouts/BaseLayout'
import Button from '../../components/Button.jsx';
import Counter from '../../components/Counter.jsx';
import Characters from '../../components/Characters.jsx';
import { Markdown } from 'astro/components';

const characters = await fetch('https://finalspaceapi.com/api/v0/character?limit=5')
.then((res) => res.json());
---
<BaseLayout title="React Component Playground" >
<main>

<h2>Here are some React Components...</h2>

<Button client:visible />
<hr>
<Counter client:visible />
<hr>
<Characters characters={characters} client:visible />

<Markdown>
## Here is the code for this page:
(code here)
</Markdown>
</main>
</BaseLayout>