Aller au contenu

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
  1. Si c’est en cours d’exécution, quittez le serveur de développement pour accéder au terminal (raccourci clavier : Ctrl + C).

  2. Ajoutez la possibilité d’utiliser des composants Preact dans votre projet Astro avec une seule commande :

    Terminal window
    npx astro add preact
  3. Suivez les instructions de la ligne de commande pour confirmer l’ajout de Preact à votre projet.

Incluez une bannière de salutation Preact

Titre de la section 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.

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

  2. Ajoutez le code suivant à Greeting.jsx :

    src/components/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>
    );
    }
  3. Importez et utilisez ce composant sur votre page d’accueil index.astro.

    src/pages/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 !

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

    src/pages/index.astro
    ---
    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>
  5. 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é.

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

    src/pages/index.astro
    ---
    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>

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>
  1. Parmi les cinq composants, lesquels seront des îles hydratées, envoyant du JavaScript au client ?

  2. De quelle manière les deux composants <PreactBanner /> seront-ils similaires ? De quelle manière seront-ils différents ?

  3. 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 ?

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

  1. <ReactCounter client:load/>

  2. <SvelteCard />