Construye tu primera Astro island

Usa un componente de Preact para saludar a tus visitantes con un mensaje de bienvenida seleccionado aleatoriamente.

Prepárate para…

• Añade Preact a tu proyecto de Astro
• Incluye Astro islands (componentes Preact .jsx) en tu página principal
• Usa directivas client: para hacer las islands interactivas

Añade Preact a tu proyecto de Astro

1. Si está corriendo, detén el dev server para tener acceso a la terminal (atajo de teclado: Ctrl + C).

2. Añade la capacidad de usar componentes de Preact en tu proyecto de Astro con un solo comando:

   npm

   npx astro add preact

   pnpm

   pnpm astro add preact

   Yarn

   yarn astro add preact

3. Sigue las instrucciones de la línea de comandos para confirmar la adición de Preact a tu proyecto.

Incluye un banner de saludo de Preact

Este componente tomará un array de mensajes de saludo como prop y seleccionará aleatoriamente uno de ellos para mostrar como mensaje de bienvenida. El usuario puede hacer clic en un botón para obtener un nuevo mensaje aleatorio.

1. Crea un nuevo archivo en src/components/ llamado Greeting.jsx

   Nota la extensión de archivo .jsx. Este archivo será escrito en Preact, no en Astro.

2. Añade el siguiente código 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}! Thank you for visiting!</h3>
         <button onClick={() => setGreeting(randomMessage())}>
           New Greeting
         </button>
       </div>
     );
   }

3. Importa y usa este componente en tu página Home index.astro.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Home Page";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>My awesome blog subtitle</h2>
     <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
   </BaseLayout>

   Revisa la vista previa en tu navegador: deberías ver un saludo aleatorio, ¡pero el botón no funcionará!

4. Añade un segundo componente <Greeting /> con la directiva client:load.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Home Page";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>My awesome blog subtitle</h2>
     <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

5. Revisa tu página de nuevo y compara los dos componentes. El segundo botón funciona porque la directiva client:load le dice a Astro que envíe y reejecute su JavaScript en el cliente cuando la página se carga, haciendo el componente interactivo. Esto se llama un componente hidratado.

6. Una vez que la diferencia sea clara, elimina el componente Greeting no hidratado.

   src/pages/index.astro

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import Greeting from '../components/Greeting';
   const pageTitle = "Home Page";
   ---
   <BaseLayout pageTitle={pageTitle}>
     <h2>My awesome blog subtitle</h2>
     <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
     <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
   </BaseLayout>

Analiza el Patrón

Hay otras directivas client: para explorar. Cada una envía el JavaScript al cliente en un momento diferente. client:visible, por ejemplo, solo enviará el JavaScript del componente cuando es visible en la página.

Considera un componente de Astro con el siguiente código:

---
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. ¿Cuáles de los cinco componentes serán islands hidratadas, enviando JavaScript al cliente?

   <PreactBanner client:load /> y <SvelteCounter client:visible /> serán islands hidratadas.

2. ¿De qué manera(s) serán iguales los dos componentes <PreactBanner />? ¿De qué manera(s) serán diferentes?

   Igual: Ambos muestran los mismos elementos HTML y se ven iguales inicialmente. Diferente: El componente con la directiva client:load se rerenderizará después de que la página se cargue, y cualquier elemento interactivo que tenga funcionará.

3. Asume que el componente SvelteCounter muestra un número y tiene un botón para incrementarlo. Si no pudieras ver el código de tu sitio web, solo la página publicada en vivo, ¿cómo sabrías cuál de los dos componentes <SvelteCounter /> usó client:visible?

   Intenta hacer clic en el botón, y mira cuál es interactivo. Si responde a tu entrada, debe haber tenido una directiva client:.

Pon a prueba tu conocimiento

Para cada uno de los siguientes componentes, identifica qué será enviado al navegador:

1. <ReactCounter client:load />

   1. Solo HTML y CSS

   2. HTML, CSS, y JavaScript

   Enviar

2. <SvelteCard />

   1. Solo HTML y CSS

   2. HTML, CSS, y JavaScript

   Enviar

Checklist

• Puedo instalar una integración de Astro.
• Puedo escribir componentes de framework de UI en su propio lenguaje.
• Puedo usar una directiva client: para hidratación en mi componente de framework de UI.

Recursos

• Guía de Integraciones de Astro

• Uso de Componentes de Framework de UI en Astro

• Referencia de directivas client de Astro