Dynamische Inhalte

👉 Slides

In dieser Sektion wollen wir mit Hilfe von React dynamische Elemente in unsere Astro Anwendung bringen.

Aufgaben

React Integration installieren

Die React Integration kann mit folgendem Befehl in deinem bestehenden Astro Projekt installiert werden:

npm

bash npx astro add react

pnpm

bash pnpm add @astrojs/react

yarn

bash yarn add @astrojs/react

Bitte bestätige die vorgeschlagenen Änderungen des Wizards. Schau dir die astro.config.mjs im Nachgang an.

React Component erstellen

Wir wollen folgende Counter Component auf einer Astro page verwenden.

Erstelle dazu die Datei unter folgendem Pfad src/components/Counter.tsx und speichere darin folgenden Code:

import type { FC } from "react";
import { useState } from "react";

export const Counter: FC = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>Count: {count}</h1>
      <button type="button" onClick={() => setCount((c) => c++)}>
        +1
      </button> <button type="button" onClick={() => setCount((c) => c--)}>
        -1
      </button>
    </>
  );
};

Astro Page erstellen

1. Erstelle eine neue Astro Page und rufe die Page im Browser auf.
2. Binde die React Component so ein, dass sie serverseitig gerendert wird
3. Führe ein build des Projects durch mit npm run build. Starte danach die Seite im preview mode mit npm run preview und sieh dir an, wie viel JavaScript ausgeliefert wird bzw. das generierte HTML der Seite aussieht.
4. Binde nun die React Component so ein, dass sie serverseitig gerendert wird - gleichzeitig aber auch im Browser funktioniert (sprich die Buttons nach einem Click die Logik ausführen)
5. Wenn Du noch Zeit hast: experimentiere mit den anderen zur Verfügung stehenden Client Directives.