Saltearse al contenido

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

Sección titulada Añade Preact a tu proyecto de Astro

  1. Si se está ejecutando, sal del servidor de desarrollo para acceder al terminal (método abreviado de teclado: Ctrl + C).

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

    Ventana de terminal
    npx 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 cartel de felicitación de Preact

Sección titulada 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.

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

  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} ¡Gracias por tu visita!</h3>
          <button onClick={() => setGreeting(randomMessage())}>
            Nuevo saludo
          </button>
        </div>
      );
    }

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

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

  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 = "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>

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

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

    src/pages/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"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>

Analiza el patrón

Sección titulada 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>

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

  2. ¿En qué se parecen los dos componentes <PreactBanner />? ¿En qué se diferenciarán?

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

Pon a prueba tus conocimientos

Sección titulada Pon a prueba tus conocimientos

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

  1. <ReactCounter client:load />

  2. <SvelteCard />

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos