Here are some React Components...

Toggle Button

True

Counter

From (Cassidy Williams' astro-netlify-starter )

Count: 0


List of Characters from an API call

(Tutorial by Colby Fayock)

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>