Saltearse al contenido

@astrojs/ react

Esta integración de Astro habilita el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes React.

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Para instalar @astrojs/react, ejecuta lo siguiente desde el directorio de tu proyecto y siga las instrucciones:

Ventana de terminal
npx astro add react

Si tienes algún problema, no dudes en informárnoslo en GitHub y prueba los pasos de instalación manual a continuación.

Primeron, instala el paquete @astrojs/react:

Ventana de terminal
npm install @astrojs/react

La mayoría de los gestores de paquetes instalarán las dependencias asociadas también. Si ves un mensaje de advertencia “Cannot find package ‘react’” (o similar) cuando inicias Astro, deberás instalar react y react-dom:

Ventana de terminal
npm install react react-dom

Luego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [react()],
});

Para usar tu primer componente React en Astro, dirígete a nuestra documentación de frameworks UI. Explorarás:

  • 📦 como se cargan los componentes de framework,
  • 💧 opciones de hidratación del lado del cliente, y
  • 🤝 oportunidades para mezclar y anidar frameworks juntos

Combinando múltiples frameworks JSX

Sección titulada Combinando múltiples frameworks JSX

Cuando estás utilizando múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas del framework JSX deben usarse para cada uno de tus componentes. Si solo has agregado una integración de framework JSX a tu proyecto, no se necesita configuración adicional.

Utiliza las opciones de configuración include (obligatoria) y exclude (opcional) para especificar qué archivos pertenecen a qué framework. Proporciona un array de archivos y/o carpetas en include para cada framework que estés utilizando. Puedes utilizar comodines para incluir múltiples rutas de archivo.

Recomendamos colocar los componentes comunes de los frameworks en la misma carpeta (p. ej. /components/react/ y /components/solid/) para facilitar la especificación de tus inclusiones, pero esto no es obligatorio:

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
export default defineConfig({
// Habilita varios frameworks para admitir todo tipo de componentes diferentes.
// ¡No se necesita `include` si solo estás utilizando un solo framework JSX!
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*'],
}),
],
});

Los hijos pasados a un componente de React desde un componente de Astro se analizan como strings simples, no como nodos de React.

Por ejemplo, el <ReactComponent /> a continuación solo recibirá un único elemento hijo:

---
import ReactComponent from './ReactComponent';
---
<ReactComponent>
<div>uno</div>
<div>dos</div>
</ReactComponent>

Si estás utilizando una biblioteca que espera que se pasen más de un elemento hijo, por ejemplo, para que pueda colocar ciertos elementos en diferentes lugares, es posible que encuentres esto como un bloqueador.

Puedes establecer la bandera experimental experimentalReactChildren para indicarle a Astro que siempre pase los hijos a React como nodos virtuales del DOM de React. Esto tiene un costo de tiempo de ejecución, pero puede ayudar con la compatibilidad.

Puedes habilitar esta opción en la configuración para la integración de React:

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [
react({
experimentalReactChildren: true,
}),
],
});

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones