Integrar React en un proyecto Astro te permite construir componentes interactivos con soporte de TypeScript y Tailwind, sin sacrificar la velocidad ni el enfoque en contenido que caracteriza al framework. Esta guía es para desarrolladores frontend que ya iniciaron un proyecto en Astro y quieren sumar la librería de React para escalar su arquitectura.

¿Cómo agregar React a un proyecto Astro?

Astro ofrece un comando oficial que automatiza toda la configuración. No necesitas instalar dependencias por separado ni tocar archivos de configuración a mano [01:05].

1. Abre la terminal en la raíz de tu proyecto.
2. Ejecuta npx astro add react.
3. Acepta la instalación de React, React DOM y sus types para TypeScript.
4. Confirma los cambios en astro.config y en la configuración de TypeScript.

En pocos segundos, Astro deja listo el entorno con las dependencias correctas y los ajustes necesarios para que tus componentes convivan sin fricción.

¿Qué hace el comando npx astro add react? Instala React, React DOM, sus tipos de TypeScript y actualiza automáticamente astro.config y tsconfig.json para habilitar la integración.

¿Por qué usar el comando automático en lugar de la instalación manual?

La documentación de Astro también describe el flujo manual, pero la filosofía del framework apunta a que te concentres en el contenido y la experiencia, no en configurar herramientas. El comando reduce errores y acelera el setup [02:10].

¿Qué es la extensión TSX y cuándo usarla?

Una vez instalado React, los nuevos componentes se crean con extensión .tsx. Esta extensión le indica al proyecto que el archivo trabaja con la API de React y soporta TypeScript al mismo tiempo [02:45].

Algo clave: los archivos .astro y los .tsx conviven sin problema dentro del mismo proyecto. Puedes migrar componentes Astro a React, pero la lógica cambia, así que no es un copia y pega directo.

¿Cómo crear un componente Header en React con TypeScript?

Vamos a construir un componente Header que reciba un title como prop validado por una interface.

tsx import React from 'react'

interface HeaderProps { title: string }

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

export default Header

La interface HeaderProps garantiza que title siempre llegue como string. Si alguien intenta pasarle un boolean o un number, TypeScript marcará el error antes de ejecutar el código [04:20]. Esa validación estricta es la que convierte a TypeScript en una herramienta tan poderosa cuando trabajas en equipo.

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

Aquí está uno de los detalles que más confunde al empezar. En componentes Astro escribes class="..." sin problema, pero en React debes usar className.

¿Por qué className y no class en React? Porque class es una palabra reservada de JavaScript. Como JSX se compila a JavaScript, usar class puede generar conflictos o advertencias. className es la forma segura.

En los archivos .astro, el motor que mapea el template detecta class sin conflicto porque el bloque de código y el template están delimitados. En JSX, todo es JavaScript puro, por eso la regla cambia [07:15].

¿Cómo usar el componente React dentro de un layout Astro?

Después de crear el Header, lo importas y lo invocas dentro de tu archivo base de Astro pasándole el prop requerido.

astro

import Header from '../components/Header'

<Header title="ladrillos.club" />

La nomenclatura del componente debe iniciar con mayúscula para que React lo reconozca como componente y no como etiqueta HTML. Al ejecutar npm run dev, el header aparece alineado con las clases de Tailwind aplicadas: container, mx-auto, p-4, text-4xl, text-sky-800 y font-bold [09:30].

¿Qué ventajas suma React sobre componentes solo de Astro?

Astro brilla para contenido estático y rendimiento, pero React aporta el modelo de componentes interactivos con estado, hooks y un ecosistema enorme. La combinación te da lo mejor de ambos mundos: páginas rápidas por defecto y islands de interactividad cuando los necesitas.

• React y React DOM como base de componentes.
• TypeScript con interfaces para validar props y evitar errores en tiempo de compilación.
• Tailwind aplicado vía className para estilos utilitarios.
• Convivencia entre archivos .astro y .tsx sin configuración extra.

Con esta integración ya puedes construir cualquier pieza de tu aplicación con la flexibilidad de React.

Tu reto: construye el Footer

Replica el patrón del Header y crea un componente Footer.tsx que reciba un prop validado por interface. Añade una frase personal, como "Hecho con amor desde Medellín", aplica estilos con Tailwind y, si quieres acelerar, toma un diseño base de HyperUI. Comparte tu screenshot en los comentarios y cuéntame qué frase elegiste para firmar tu página.