Salta ai contenuti

Costruisci la tua prima isola Astro

Usa un componente Preact per salutare i tuoi visitatori con un messaggio di benvenuto selezionato casualmente!

Preparati a…

  • Aggiungi Preact al tuo progetto Astro
  • Includi isole Astro (componenti Preact .jsx) sulla tua home page
  • Usa direttive client: per rendere le isole interattive

Aggiungi Preact al tuo progetto Astro

Sezione intitolata Aggiungi Preact al tuo progetto Astro

  1. Se è in esecuzione, esci dal server di sviluppo per avere accesso al terminale (scorciatoia da tastiera: Ctrl + C).

  2. Aggiungi la capacità di usare componenti Preact nel tuo progetto Astro con un singolo comando:

    Finestra del terminale
    npx astro add preact

  3. Segui le istruzioni della riga di comando per confermare l’aggiunta di Preact al tuo progetto.

Includi un banner di saluto Preact

Sezione intitolata Includi un banner di saluto Preact

Questo componente prenderà un array di messaggi di saluto come prop e ne selezionerà casualmente uno da mostrare come messaggio di benvenuto. L’utente può cliccare un pulsante per ottenere un nuovo messaggio casuale.

  1. Crea un nuovo file in src/components/ chiamato Greeting.jsx

    Nota l’estensione del file .jsx. Questo file sarà scritto in Preact, non in Astro.

  2. Aggiungi il seguente codice a Greeting.jsx:

    src/components/Greeting.jsx
    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}! Grazie per la visita!</h3>
          <button onClick={() => setGreeting(randomMessage())}>
            Nuovo Saluto
          </button>
        </div>
      );
    }

  3. Importa e usa questo componente sulla tua pagina Home index.astro.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Pagina iniziale";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>Il sottotitolo del mio fantastico blog</h2>
      <Greeting messages={["Ciao", "Salve", "Ehilà", "Ehi tu"]} />
    </BaseLayout>

    Controlla l’anteprima nel tuo browser: dovresti vedere un saluto casuale, ma il pulsante non funzionerà!

  4. Aggiungi un secondo componente <Greeting /> con la direttiva client:load.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Pagina iniziale";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>Il sottotitolo del mio fantastico blog</h2>
      <Greeting messages={["Ciao", "Salve", "Ehilà", "Ehi tu"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

  5. Rivisita la tua pagina e confronta i due componenti. Il secondo pulsante funziona perché la direttiva client:load dice ad Astro di inviare e rieseguire il suo JavaScript sul client quando la pagina si carica, rendendo il componente interattivo. Questa è chiamato un componente idratato.

  6. Una volta che la differenza è chiara, rimuovi il componente Greeting non idratato.

    src/pages/index.astro
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Pagina iniziale";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>Il sottotitolo del mio fantastico blog</h2>
      <Greeting messages={["Ciao", "Salve", "Ehilà", "Ehi tu"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

Analizza lo Schema

Sezione intitolata Analizza lo Schema

Ci sono altre direttive client: da esplorare. Ognuna invia il JavaScript al client in un momento diverso. client:visible, per esempio, invierà il JavaScript del componente solo quando è visibile sulla pagina.

Considera un componente Astro con il seguente codice:

---
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. Quale dei cinque componenti saranno isole idratate, inviando JavaScript al client?

  2. In che modo i due componenti <PreactBanner /> saranno uguali? In che modo saranno diversi?

  3. Supponi che il componente SvelteCounter mostri un numero e abbia un pulsante per aumentarlo. Se non potessi vedere il codice del tuo sito web, solo la pagina live pubblicata, come faresti a capire quale dei due componenti <SvelteCounter /> ha usato client:visible?

Metti alla prova le tue conoscenze

Sezione intitolata Metti alla prova le tue conoscenze

Per ognuno dei seguenti componenti, identifica cosa verrà inviato al browser:

  1. <ReactCounter client:load />

  2. <SvelteCard />

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor