// src/components/Counter.jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

---
// src/pages/index.astro
import Counter from '../components/Counter.jsx';
---

<h1>Islands Demo</h1>
<Counter client:load />

<!--
  Notes:
  - client:load tells Astro to ship this component's own JavaScript
    and hydrate it as soon as the page loads.
  - Without client:load (or any client directive), the button would
    render but clicking it would do nothing at all - it would be
    plain, inert HTML.
  - This is the first component in the course that actually needs
    client-side interactivity, so client:load is the correct,
    deliberate choice here rather than an oversight.
-->