Módulo 2: Fundamentos de Astro y React

Introducción a Astro y React

Este módulo explora los fundamentos de Astro y React, dos tecnologías potentes que, cuando se combinan, permiten construir sitios web de alto rendimiento y aplicaciones dinámicas con una excelente experiencia de desarrollador.

Astro: El Framework Web Todo en Uno

Astro es un framework web que se centra en la entrega de sitios web con JavaScript cero por defecto. Su principal característica es la “arquitectura de islas” (Islands Architecture), donde el HTML estático se genera en el servidor o en tiempo de construcción, y solo los componentes interactivos de JavaScript (las “islas”) se hidratan en el cliente.

Ventajas clave de Astro:

Rendimiento: Carga de página muy rápida al enviar menos JavaScript al navegador.
Flexibilidad: Permite usar tus frameworks de UI favoritos (React, Vue, Svelte, etc.) dentro de componentes Astro.
Contenido Primero: Ideal para sitios web con mucho contenido estático pero con algunas zonas interactivas.

React: La Librería para Construir Interfaces de Usuario

React es una librería de JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Permite componer UIs complejas a partir de “componentes” pequeños y aislados.

Conceptos clave de React:

Componentes: Bloques de construcción reutilizables que encapsulan lógica y UI. Pueden ser funcionales o basados en clases.
JSX: Una extensión de sintaxis para JavaScript que permite escribir HTML dentro de JavaScript.
Estado (State): Datos gestionados por un componente que pueden cambiar con el tiempo y causar que el componente se re-renderice.
Props (Propiedades): Una forma de pasar datos de un componente padre a un componente hijo.
Hooks: Funciones especiales que permiten a los componentes funcionales “engancharse” a las características de React (ej. useState para el estado, useEffect para efectos secundarios).

Integrando Astro y React

Astro tiene soporte de primera clase para React. Puedes escribir componentes React y usarlos directamente dentro de tus archivos .astro.

Uso Básico de un Componente React en Astro

Crea tu componente React (ej. src/components/Contador.tsx):

import React, { useState } from 'react';

const Contador: React.FC = () => {
    const [conteo, setConteo] = useState(0);

    return (
        <div>
            <p>Conteo: {conteo}</p>
            <button onClick={() => setConteo(conteo + 1)}>Incrementar</button>
        </div>
    );
};

export default Contador;

Importa y usa en un archivo Astro (ej. src/pages/index.astro):

---
import Layout from '../layouts/Layout.astro';
import Contador from '../components/Contador'; // No necesita la extensión .tsx
---

<Layout title="Mi Página Astro con React">
    <h1>Bienvenido a Astro!</h1>
    <Contador client:load /> {# La directiva client:load es crucial #}
</Layout>

Directivas de Cliente de Astro (`client:` directives)

Estas directivas le dicen a Astro cómo y cuándo debe hidratar (convertir a interactivo) un componente de framework en el cliente:

client:load: Carga e hidrata el componente inmediatamente cuando la página se carga.
client:idle: Carga e hidrata el componente cuando el navegador ha terminado de cargar recursos menos prioritarios y está inactivo.
client:visible: Carga e hidrata el componente cuando entra en el viewport del navegador. Útil para componentes “above the fold”.
client:media={query}: Carga e hidrata el componente cuando se cumple una consulta de medios CSS específica.
client:only={framework}: Solo carga el componente en el cliente. No se renderiza en el servidor. Es útil para componentes que dependen exclusivamente de APIs del navegador.

Conclusión

La combinación de Astro y React ofrece lo mejor de ambos mundos: el rendimiento de la generación de sitios estáticos con la interactividad y la experiencia de desarrollo de componentes de React. Entender cómo y cuándo hidratar tus componentes es clave para optimizar el rendimiento de tus aplicaciones.