Configuración de ReactJS en AstroJS

Integrar React dentro de un proyecto de Astro es un paso fundamental para construir interfaces dinámicas y reutilizables. Gracias a las herramientas que Astro ofrece, este proceso se reduce a un solo comando en la terminal, permitiendo centrarse en lo que realmente importa: el contenido y la estructura de la aplicación.

¿Cómo se instala React en un proyecto de Astro?

Astro facilita la integración de frameworks como React mediante comandos automatizados. El proceso es directo y rápido [01:00]:

• Ejecutar npx astro add react en la terminal.
• Confirmar la instalación de dependencias como React, ReactDOM y los types necesarios para TypeScript.
• Aceptar las configuraciones automáticas en astro.config y en la configuración de TypeScript.

Con estas confirmaciones, Astro se encarga de agregar todo lo necesario al proyecto. También existe una forma manual documentada donde se instalan los paquetes y se configuran los archivos uno por uno, pero la ventaja del comando automatizado es la rapidez y la reducción de errores.

¿Qué son los archivos TSX y por qué importan?

Una vez instalado React, se abre la posibilidad de trabajar con una nueva extensión de archivo: TSX [02:45]. Esta extensión indica que el archivo contiene componentes de React con soporte para TypeScript. Es importante distinguirla de los archivos .astro, ya que aunque ambos tipos son compatibles y pueden convivir en el mismo proyecto, la lógica interna de cada uno es diferente.

¿Cómo se crea un componente React con TypeScript?

Para crear un componente como un header, se sigue esta estructura [03:20]:

tsx import React from 'react';

interface HeaderProps { title: string; }

const Header: React.FC<HeaderProps> = ({ title }) => { return ( <header> <div className="container mx-auto p-4"> <h1 className="text-4xl font-bold text-sky-800">{title}</h1> </div> </header> ); };

export default Header;

Aquí aparece el concepto de interface en TypeScript. Una interface como HeaderProps define qué props recibe el componente y de qué tipo deben ser. En este caso, title debe ser siempre de tipo string. Podría definirse como boolean o number, pero TypeScript obliga a trabajar de forma estricta con el tipo correcto, lo que previene errores en tiempo de desarrollo.

La notación React.FC (Functional Component) es la forma de declarar un componente funcional tipado en React con TypeScript, pasándole la interface como genérico para validar los props.

¿Por qué se usa className en lugar de class?

Una diferencia clave entre los componentes de Astro y los de React es el uso de className en lugar de class [05:10]. En JSX, que es la sintaxis que React utiliza para escribir etiquetas HTML dentro de JavaScript, la palabra class es una palabra reservada del lenguaje. Aunque funcionaría, generaría advertencias en la consola.

• En archivos .astro, el motor interno ya distingue class del contexto de JavaScript, así que no hay conflicto.
• En archivos .tsx, al tratarse de código JavaScript puro, lo correcto es usar className para asignar clases CSS o de Tailwind.

¿Cómo se integra el componente en el layout de Astro?

Una vez creado el componente, se importa dentro del archivo base de Astro y se utiliza como cualquier etiqueta HTML [06:30]:

astro

import Header from '../components/Header';

<Header title="ladrillos.club" />

El componente recibe el prop title con el valor deseado y se renderiza dentro del layout. Después de guardar, basta con verificar que el servidor de desarrollo esté corriendo con npx astro dev para ver los cambios reflejados en el navegador.

Las clases de Tailwind como container, mx-auto, p-4, text-4xl, font-bold y text-sky-800 se aplican directamente a través de className, confirmando que la integración entre React y Tailwind dentro de Astro funciona sin fricciones.

Con esta base, cada nuevo componente que se construya seguirá el mismo patrón: definir una interface, crear el componente funcional tipado, exportarlo y consumirlo desde los archivos de Astro. Un buen ejercicio para practicar es crear un componente Footer que también reciba un prop, valide su interface y aplique estilos personalizados. Recursos como Hyper UI ofrecen diseños de footers listos para adaptar. Comparte tu resultado y la frase que elijas para personalizar tu página.