Integración de React en tu aplicación de Astro

En este tutorial aprenderás cómo agregar React a tu aplicación Astro. Esto te permitirá crear componentes modernos de React y integrarlos en tu aplicación. Repasaremos los pasos necesarios para preparar tu aplicación Astro para React y crear un componente simple.

Principales Conclusiones

• Debes instalar el paquete de React y los complementos correspondientes.
• La estructura de tus componentes en Astro difiere ligeramente de HTML puro.
• Para asegurarte de que tus componentes de React se rendericen en el navegador, debes usar el atributo client:only.

Guía Paso a Paso

Para agregar React a tu aplicación Astro, sigue estos pasos:

Primero, asegúrate de que tu servidor de desarrollo ya no esté en ejecución. Puedes hacerlo cancelando el comando npm run dev. Esto es importante para evitar conflictos durante la instalación de las nuevas dependencias.

Ahora estás listo para integrar oficialmente React. Para ello, utiliza el comando npx astro add react. Con este comando agregarás los paquetes necesarios para el soporte de React en tu aplicación Astro.

Luego se te preguntará si deseas instalar las nuevas dependencias con npm. Asegúrate de confirmar esto, ya que la instalación no funcionará correctamente sin estas dependencias.

Durante el proceso de instalación, se realizarán cambios en el archivo astro.config.mjs. Deberías aceptar también estos cambios para que todo funcione sin problemas.

Una vez completada la instalación, tu aplicación debería contar ahora con soporte de React. Veamos qué nuevas dependencias se han agregado. En tu package.json encontrarás react, react-dom y @astrojs/react como complementos.

Para asegurarte de que todo esté correctamente configurado, necesitarás un componente de React que puedas probar. Crea una nueva carpeta llamada components en la carpeta src, que luego contendrá tus componentes de React.

En esta carpeta, crea un archivo llamado index.jsx. Este será tu componente de React listo para usar, en el cual puedes colocar tu código.

Luego debes asegurarte de importar el componente en el archivo index.astro. Esto se hace entre las tres rayas (---) en la parte superior del archivo, donde puedes insertar instrucciones de importación.

Tu instrucción de importación podría lucir algo así: import App from '../components/index.jsx';. Esto asegura que tu componente se cargue correctamente.

Primero, asegúrate de exportar algo para que el archivo no quede vacío. Agrega una función simple que renderice algo en el DOM.

Recuerda establecer un atributo client:only para tu componente. Esto asegura que el componente se renderice en el navegador y no en el servidor.

Luego vamos al archivo index.jsx y creamos un simple componente de React. Por ejemplo, puedes agregar un div simple con el texto "App" en el HTML.

Si inicias la aplicación ahora, deberías ver que el nuevo componente se ha cargado correctamente y funciona correctamente.

Cuando examines el DOM, notarás que Astro utiliza un marcador de posición especial llamado "Astro Island" donde se renderizan tus componentes de React.

Astro permite utilizar múltiples bibliotecas frontend al mismo tiempo. Esto significa que puedes combinar React, Vue u otras bibliotecas en una misma aplicación sin que esto genere complicaciones.

El buen funcionamiento de tu componente ya es un gran paso, y ahora puedes trabajar en ampliar tu aplicación. En futuros tutoriales desarrollaremos el componente hasta convertirlo en una aplicación de chat.

Resumen

En este tutorial has aprendido cómo añadir React a tu aplicación de Astro y crear un componente simple. Esto te abre las puertas a una variedad de posibilidades para expandir tu aplicación.