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
Titre de la section 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 :
Fenêtre du terminal npx astro add preactFenêtre du terminal pnpm astro add preactFenê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
Titre de la section Inclure une bannière de salutation PreactCe 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
: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 pour ta visite !</h3><button onClick={() => setGreeting(randomMessage())}>Nouvelle salutation</button></div>);} -
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", "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 directiveclient: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", "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é.
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", "Comment vas-tu", "Coucou"]} /><Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} /></BaseLayout>
Analyser la formule
Titre de la section Analyser la formuleIl 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 ?
-
De quelle manière les deux composants
<PreactBanner />
seront-ils similaires ? De quelle manière seront-ils différents ? -
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
?
Tester vos connaissances
Titre de la section Tester vos connaissancesPour chacun des composants suivants, identifiez ce qui sera envoyé au navigateur :
-
<ReactCounter client:load/>
-
<SvelteCard />