Construisez votre première île Astro

Utilisez un composant Preact pour accueillir vos visiteurs avec un message de bienvenue sélectionné au hasard !

Préparez-vous à…

Ajoutez Preact à votre projet Astro
Incluez des îles Astro (composants Preact .jsx) sur votre page d’accueil
Utilisez des directives client: pour rendre les îles interactives

Ajoutez Preact à votre projet Astro

Si c’est en cours d’exécution, quittez le serveur de développement pour accéder au terminal (raccourci clavier : Ctrl + C).
Ajoutez la possibilité d’utiliser des composants Preact dans votre projet Astro avec une seule commande :
- npm
- pnpm
- Yarn
Fenêtre de terminal
npx astro add preact
Fenêtre de terminal
pnpm astro add preact
Fenêtre de terminal
yarn astro add preact
Suivez les instructions de la ligne de commande pour confirmer l’ajout de Preact à votre projet.

Incluez une bannière de salutation Preact

Ce composant prendra un tableau de messages de salutation en tant que prop et en sélectionnera un au hasard pour l’afficher en tant que message de bienvenue. L’utilisateur peut cliquer sur un bouton pour obtenir un nouveau message aléatoire.

Créez un nouveau fichier dans src/components/ nommé Greeting.jsx

Notez l’extension de fichier .jsx. Ce fichier sera écrit en Preact, pas en Astro.

Ajoutez le code suivant à Greeting.jsx :

import { h } from 'preact';
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} ! Merci de votre visite !</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        Nouvelle salutation
      </button>
    </div>
  );
}

Importez et utilisez ce composant sur votre page d’accueil index.astro.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting.jsx';
const pageTitle = "Page d'accueil";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>Mon sous-titre de blog génial</h2>
  <Greeting messages={["Salut", "Bonjour", "Salut", "Coucou"]} />
</BaseLayout>

Vérifiez l’aperçu dans votre navigateur : vous devriez voir une salutation aléatoire, mais le bouton ne fonctionnera pas !

Ajoutez un deuxième composant <Greeting /> avec la directive client:load.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Page d'accueil";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>Mon sous-titre de blog génial</h2>
  <Greeting messages={["Salut", "Bonjour", "Salut", "Coucou"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

Revisitez votre page et comparez les deux composants. Le deuxième bouton fonctionne parce que la directive client:load indique à Astro d’envoyer et de relancer son JavaScript côté client lorsque la page se charge, rendant le composant interactif. Nous appelons cela un composant hydraté.

Une fois la différence claire, supprimez le composant Greeting non hydraté.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Page d'accueil";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>Mon sous-titre de blog génial</h2>
  <Greeting messages={["Salut", "Bonjour", "Salut", "Coucou"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

Analysez le motif

Il existe d’autres directives client: à explorer. Chacune envoie le JavaScript au client à un moment différent. client:visible, par exemple, n’envoie le JavaScript du composant que lorsqu’il est visible sur la page.

Considérez un composant Astro avec le code suivant :

---
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>

Parmi les cinq composants, lesquels seront des îles hydratées, envoyant du JavaScript au client ?

<PreactBanner client:load /> et <SvelteCounter client:visible /> seront des îles hydratées.
De quelle manière les deux composants <PreactBanner /> seront-ils similaires ? De quelle manière seront-ils différents ?

Similaires : Ils affichent tous deux les mêmes éléments HTML et ont initialement le même aspect. Différents : Le composant avec la directive client:load se réexécutera après le chargement de la page, et tous les éléments interactifs qu’il contient fonctionneront.
Supposez que le composant SvelteCounter affiche un nombre et comporte un bouton pour l’augmenter. Si vous ne pouviez pas voir le code de votre site web, seulement la page publiée en direct, comment sauriez-vous lequel des deux composants <SvelteCounter /> a utilisé client:visible ?

Essayez de cliquer sur le bouton et voyez lequel est interactif. S’il répond à votre entrée, il a dû avoir une directive client:.

Testez vos connaissances

Pour chacun des composants suivants, identifiez ce qui sera envoyé au navigateur :

<ReactCounter client:load/>
1. Uniquement HTML et CSS
2. HTML, CSS et JavaScript
<SvelteCard />
1. Uniquement HTML et CSS
2. HTML, CSS et JavaScript

Liste de vérification

Je peux installer une intégration Astro.
Je peux écrire des composants de framework UI dans leur propre langage.
Je peux utiliser une directive client: pour l’hydratation de mon composant de framework UI.