Integrar React en Astro te permite combinar la velocidad de Astro con la flexibilidad de la librería más usada para construir interfaces web. Aprenderás a instalar dependencias, configurar el soporte y crear tu primer componente .tsx dentro de un proyecto Astro con TypeScript y Tailwind.

¿Qué dependencias necesito para usar React en Astro?

Antes de escribir cualquier componente, debes instalar el adaptador oficial y la librería en sí. Detén el servidor de desarrollo en la terminal y ejecuta los siguientes comandos.

• npm install @astrojs/react@2.0.2 para añadir el soporte de Astro con React.
• npm install react@18.2.0 react-dom@18.2.0 para sumar la librería y su renderizador en el DOM.

Con estas tres piezas listas, tu proyecto ya tiene todo lo necesario para reconocer archivos .tsx [01:00].

¿Por qué necesito @astrojs/react además de react? Porque @astrojs/react es el adaptador que conecta la librería con el motor de Astro. Sin él, Astro no sabría cómo renderizar componentes de React.

¿Cómo configuro el soporte de React en astro.config?

El siguiente paso ocurre en el archivo de configuración de Astro. Ahí registras la integración para que el framework procese los componentes que vas a crear.

Dentro de astro.config haces import React from "@astrojs/react" y lo agregas al arreglo de integrations, junto a otras integraciones que ya tengas como Tailwind o MDX [01:40]. Guardas el archivo y el soporte queda activo.

¿Por qué uso la extensión .tsx en lugar de .astro?

La extensión .tsx indica que el archivo combina React con TypeScript. Como el proyecto ya usa TypeScript, esta es la opción natural para tipar props y aprovechar el autocompletado del editor.

Un archivo .astro divide JavaScript y plantilla con tres guiones, mientras que un archivo .tsx es JavaScript de principio a fin. Toda la lógica y la estructura conviven en el mismo bloque.

¿Cómo creo mi primer componente Header en React?

Dentro de la carpeta de componentes creas header.tsx. La estructura sigue el patrón clásico de React: una interfaz para los props, una arrow function y un return con el JSX.

tsx import React from "react"

interface Props { title: string }

const Header = ({ title }: Props) => { return ( <div className="mx-auto max-w-screen-xl px-4 py-6"> <h1 className="mb-4"> <span className="font-extrabold text-transparent text-4xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"> {title} </span> </h1> </div> ) }

export default Header

Fíjate en un detalle clave: en React no usas class, usas className. La palabra class está reservada en JavaScript, así que React la reemplaza para evitar conflictos y warnings en el navegador [04:30].

¿Qué es className en React? Es el atributo equivalente a class de HTML. Lo necesitas para aplicar estilos de Tailwind o cualquier hoja de estilos cuando trabajas con JSX.

¿Cómo aplico un degradado con Tailwind dentro del componente?

El truco para lograr un título con degradado combina varias utilidades de Tailwind:

• text-transparent para que el color del texto no tape el fondo.
• bg-clip-text para recortar el fondo siguiendo la forma de las letras.
• bg-gradient-to-r from-purple-400 to-pink-600 para definir la dirección y los colores del degradado.

Esa combinación produce un texto con apariencia de gradiente, una técnica muy usada en headers modernos.

¿Cómo uso el componente React dentro de una página Astro?

Vas a la ruta dinámica de tus posts y, dentro del layout base, importas el Header desde la carpeta de componentes. Le pasas el prop title con el valor que corresponda, por ejemplo astroBill.tips.

Una observación útil: en JavaScript las extensiones suelen omitirse al importar, así que verás el import sin .tsx. Si en cambio importaras el componente antiguo, tendrías que escribir .astro de forma explícita [06:50].

¿Por qué Tailwind no aplica estilos a mi archivo .tsx?

Si al renderizar la página el degradado no aparece, el problema casi siempre está en tailwind.config. Tailwind solo analiza las extensiones declaradas en la propiedad content.

Por defecto encuentras soporte para .astro, .html, .js y .jsx, pero falta .tsx. Agrega esa extensión al arreglo, guarda el archivo y el proyecto se reconstruye automáticamente con los estilos aplicados [08:00].

¿Cómo activo Tailwind en archivos .tsx? Abre tailwind.config, localiza la propiedad content y añade el patrón que incluya tsx. Sin ese ajuste, las clases de Tailwind se ignoran en componentes React.

Con todo conectado, ya tienes un componente React funcional dentro de un proyecto Astro, con estilos de Tailwind y props tipados con TypeScript. ¿Te animas a replicar el ejercicio creando un footer en Vue para seguir explorando integraciones?