Erstelle deine erste Astro-Island

Verwende eine Preact-Komponente, um deine Besucher:innen mit einer zufällig ausgewählten Willkommensnachricht zu begrüßen!

Mach dich bereit, …

• Preact zu deinem Astro-Projekt hinzuzufügen
• Astro-Islands (Preact-.jsx-Komponenten) auf deiner Startseite einzubinden
• client:-Direktiven zu verwenden, um Islands interaktiv zu machen

Füge Preact zu deinem Astro-Projekt hinzu

1. Falls dein Entwicklungsserver läuft, beende ihn, um auf das Terminal zugreifen zu können (Strg + C/Control + C).

2. Aktiviere die Unterstützung für Preact-Komponenten in deinem Astro-Projekt mit einem einzigen Befehl:

   npm

   npx astro add preact

   pnpm

   pnpm astro add preact

   Yarn

   yarn astro add preact

3. Folge den Anweisungen in der Konsole, um das Hinzufügen von Preact zu deinem Projekt zu bestätigen.

Füge ein Preact-Begrüßungsbanner hinzu

Diese Komponente nimmt ein Array mit Begrüßungen als Prop entgegen und wählt zufällig eine davon als Willkommensnachricht aus. Nutzende können auf eine Schaltfläche klicken, um eine neue zufällige Nachricht zu erhalten.

1. Erstelle im Verzeichnis src/components/ eine neue Datei mit dem Namen Greeting.jsx.

   Beachte die Dateiendung .jsx. Diese Datei wird in Preact und nicht in Astro geschrieben.

2. Füge folgenden Code in Greeting.jsx ein:

   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}! Danke für deinen Besuch!</h3>
         <button onClick={() => setGreeting(randomMessage())}>
           Neue Begrüßung
         </button>
       </div>
     );
   }

3. Importiere und verwende diese Komponente auf deiner Startseite index.astro.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Startseite";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>Mein großartiger Blog-Untertitel</h2>
     <Greeting messages={["Hey", "Hallo", "Moin", "Servus"]} />
   </BaseLayout>

   Sieh dir die Vorschau in deinem Browser an: Du solltest eine zufällige Begrüßung sehen – aber die Schaltfläche funktioniert noch nicht!

4. Füge eine zweite <Greeting />-Komponente mit der Direktive client:load hinzu.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Startseite";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>Mein großartiger Blog-Untertitel</h2>
     <Greeting messages={["Hey", "Hallo", "Moin", "Servus"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

5. Lade deine Seite neu und vergleiche beide Komponenten. Die zweite Schaltfläche funktioniert, weil die Direktive client:load Astro anweist, das JavaScript beim Laden der Seite an den Client zu senden und dort auszuführen. So wird die Komponente interaktiv. Dies nennt man eine hydrated-Komponente.

6. Sobald du den Unterschied verstanden hast, entferne die nicht-hydrierte Greeting-Komponente:

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Startseite";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>Mein großartiger Blog-Untertitel</h2>
     <Greeting messages={["Hey", "Hallo", "Moin", "Servus"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

Analysiere das Muster

Es gibt mehrere client:-Direktiven. Jede sendet das JavaScript zu einem anderen Zeitpunkt an den Client. client:visible zum Beispiel sendet das JavaScript einer Komponente erst, wenn sie auf der Seite sichtbar wird.

Betrachte eine Astro-Komponente mit folgendem 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. Welche der fünf Komponenten werden hydriert, also als Astro-Islands mit JavaScript an den Client gesendet?

   <PreactBanner client:load /> und <SvelteCounter client:visible /> werden hydriert.

2. In welcher Hinsicht sind die beiden <PreactBanner />-Komponenten gleich, und worin unterscheiden sie sich?

   Gleich: Beide zeigen dieselben HTML-Elemente und sehen anfangs gleich aus. Unterschiedlich: Die Komponente mit der Direktive client:load wird nach dem Laden der Seite erneut gerendert und ihre interaktiven Elemente funktionieren.

3. Angenommen, die SvelteCounter-Komponente zeigt eine Zahl und eine Schaltfläche, um sie zu erhöhen. Wenn du nur die veröffentlichte Seite siehst, aber nicht den Code – wie würdest du erkennen, welche der beiden <SvelteCounter />-Komponenten client:visible verwendet?

   Klicke auf die Schaltfläche und sieh, welche reagiert. Wenn sie auf deine Eingabe reagiert, hat sie eine client:-Direktive.

Teste dein Wissen

Bei jeder der folgenden Komponenten: Was wird an den Browser gesendet?

1. <ReactCounter client:load />

   1. Nur HTML und CSS

   2. HTML, CSS und JavaScript

   Absenden

2. <SvelteCard />

   1. Nur HTML und CSS

   2. HTML, CSS und JavaScript

   Absenden

Checkliste

• Ich kann eine Astro-Integration installieren.
• Ich kann UI-Framework-Komponenten in ihrer eigenen Sprache schreiben.
• Ich kann eine client:-Direktive für die Hydratation meiner UI-Framework-Komponenten verwenden.

Ressourcen

• Astro-Integrationshandbuch (EN)

• UI-Framework-Komponenten in Astro verwenden (EN)

• Astro-Referenz zu client:-Direktiven (EN)