Zum Inhalt springen
Astro Astro

Build your first Astro island

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Use a Preact component to greet your visitors with a randomly-selected welcome message!

Mach dich bereit, …

  • Add Preact to your Astro project
  • Include Astro islands (Preact .jsx components) on your home page
  • Use client: directives to make islands interactive

Add Preact to your Astro project

  1. If it’s running, quit the dev server to have access to the terminal (keyboard shortcut: Ctrl + C).

  2. Add the ability to use Preact components in your Astro project with a single command:

    Terminal window
    npx astro add preact

  3. Follow the command line instructions to confirm adding Preact to your project.

Include a Preact greeting banner

This component will take an array of greeting messages as a prop and randomly select one of them to show as a welcome message. The user can click a button to get a new random message.

  1. Create a new file in src/components/ named Greeting.jsx

    Note the .jsx file extension. This file will be written in Preact, not Astro.

  2. Add the following code to Greeting.jsx:

    src/components/Greeting.jsx
    import { useState } from 'preact/hooks';
    

    export default function Greeting({messages}) {
    

      const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];
    

      const [greeting, setGreeting] = useState(messages[0]);
    

      return (
        <div>
          <h3>{greeting}! Thank you for visiting!</h3>
          <button onClick={() => setGreeting(randomMessage())}>
            New Greeting
          </button>
        </div>
      );
    }

  3. Import and use this component on your Home page index.astro.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting.jsx';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>My awesome blog subtitle</h2>
      <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
    </BaseLayout>

    Check the preview in your browser: you should see a random greeting, but the button won’t work!

  4. Add a second <Greeting /> component with the client:load directive.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>My awesome blog subtitle</h2>
      <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

  5. Revisit your page and compare the two components. The second button works because the client:load directive tells Astro to send and rerun its JavaScript on the client when the page loads, making the component interactive. This is called a hydrated component.

  6. Once the difference is clear, remove the non-hydrated Greeting component.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Home Page";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>My awesome blog subtitle</h2>
      <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

Analyze the Pattern

There are other client: directives to explore. Each sends the JavaScript to the client at a different time. client:visible, for example, will only send the component’s JavaScript when it is visible on the page.

Consider an Astro component with the following code:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import AstroBanner from '../components/AstroBanner.astro';
import PreactBanner from '../components/PreactBanner';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<BaseLayout>
  <AstroBanner />
  <PreactBanner />
  <PreactBanner client:load />
  <SvelteCounter />
  <SvelteCounter client:visible />
</BaseLayout>

  1. Which of the five components will be hydrated islands, sending JavaScript to the client?

  2. In what way(s) will the two <PreactBanner /> components be the same? In what way(s) will they be different?

  3. Assume the SvelteCounter component shows a number and has a button to increase it. If you couldn’t see your website’s code, only the live published page, how would you tell which of the two <SvelteCounter /> components used client:visible?

Test your knowledge

For each of the following components, identify what will be sent to the browser:

  1. <ReactCounter client:load/>

  2. <SvelteCard />

Checklist

Resources