Construye tu primera isla de Astro

Utiliza un componente de Preact para saludar a tus visitantes con un mensaje seleccionado al azar.

Prepárate para...

Añadir Preact a tu proyecto de Astro
Incluir islas de Astro (componentes .jsx de Preact) en tu página de inicio
Usar las directivas client: para que las islas sean interactivas

Añade Preact a tu proyecto de Astro

Si se está ejecutando, sal del servidor de desarrollo para acceder al terminal (método abreviado de teclado: Ctrl + C).
Añade la posibilidad de utilizar componentes Preact en tu proyecto de Astro con un solo comando:
- npm
- pnpm
- Yarn
Ventana de terminal
npx astro add preact
Ventana de terminal
pnpm astro add preact
Ventana de terminal
yarn astro add preact
Sigue las instrucciones de la línea de comandos para confirmar la adición de Preact a tu proyecto.

Incluye un cartel de felicitación de Preact

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

Crea un nuevo fichero en src/components/ llamado Greeting.jsx.

Ten en cuenta la extensión de archivo .jsx. Este archivo se escribirá en Preact, no en Astro.

Añade el siguiente código a 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} ¡Gracias por tu visita!</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        Nuevo saludo
      </button>
    </div>
  );
}

Importa y utiliza este componente en tu página de inicio index.astro.

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Página de inicio";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>El impresionante subtítulo de mi blog</h2>
  <Greeting messages={["Hola", "Qué tal", "Hola a todos"]} />
</BaseLayout>

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

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

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Página de inicio";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>El impresionante subtítulo de mi blog</h2>
  <Greeting messages={["Hola", "Qué tal", "Hola a todos"]} />
  <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
</BaseLayout>

Vuelve a visitar tu página y compara los dos componentes. El segundo botón funciona porque la directiva client:load le dice a Astro que envíe y vuelva a ejecutar tu JavaScript en el cliente cuando la página cargue, haciendo que el componente sea interactivo. Esto se llama un componente hidratado.

Una vez que la diferencia esté clara, elimina el componente Greeting sin hidratar

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Greeting from '../components/Greeting';
const pageTitle = "Página de inicio";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>El impresionante subtítulo de mi blog</h2>
  <Greeting messages={["Hola", "Qué tal", "Hola a todos"]} />
  <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. Por ejemplo, client:visible sólo enviará el JavaScript del componente cuando sea 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>

¿Cuáles de los cinco componentes serán islas hidratadas, enviando JavaScript al cliente?

<PreactBanner client:load /> y <SvelteCounter client:visible /> serán islas hidratadas.
¿En qué se parecen los dos componentes <PreactBanner />? ¿En qué se diferenciarán?

Iguales: Ambos muestran los mismos elementos HTML y tienen el mismo aspecto inicial. Diferentes: El componente con la directiva client:load se renderizará después de cargar la página, y cualquier elemento interactivo que tenga funcionará.
Supongamos que el componente SvelteCounter muestra un número y tiene un botón para aumentarlo. Si no pudieras ver el código de tu sitio web, sólo la página publicada en directo, ¿cómo sabrías cuál de los dos componentes <SvelteCounter /> utiliza client:visible?

Prueba a pulsar el botón y observa cuál es el interactivo. Si responde a tu entrada, debe haber tenido una directiva client:.

Pon a prueba tus conocimientos

Para cada uno de los siguientes componentes, identifica lo que se enviará al navegador:

<ReactCounter client:load />
1. Sólo HTML y CSS
2. HTML, CSS y JavaScript
<SvelteCard />
1. Sólo HTML y CSS
2. HTML, CSS y JavaScript

Checklist

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