Construire votre premier îlot Astro

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

Préparez-vous à…

Ajouter Preact à votre projet Astro
Inclure des îlots Astro (composants Preact .jsx) sur votre page d’accueil
Utiliser des directives client: pour rendre les îlots interactifs

Ajouter Preact à votre projet Astro

S’il 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 du terminal
npx astro add preact
Fenêtre du terminal
pnpm astro add preact
Fenêtre du terminal
yarn astro add preact
Suivez les instructions de la ligne de commande pour confirmer l’ajout de Preact à votre projet.

Inclure 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, en non 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 pour ta 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", "Comment vas-tu", "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", "Comment vas-tu", "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", "Comment vas-tu", "Coucou"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

Analyser la formule

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 îlots hydratés, envoyant du JavaScript au client ?

<PreactBanner client:load /> et <SvelteCounter client:visible /> seront des îlots hydratés.
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:.

Tester 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 contrôle

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.

Ressources

Contribuer Communauté Parrainer