@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.

Instalación

Existen dos formas de agregar integraciones a tu proyecto. ¡Vamos a probar la opción más conveniente primero!

Comando `astro add`

Astro incluye una herramienta CLI para agregar integraciones de primera parte: astro add. Este comando hará:

(Opcionalmente) Instalar todas las dependencias necesarias y dependencias entre pares
(También opcionalmente) Actualizar tu archivo astro.config.* para aplicar esta integración

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

# Usando NPM
npx astro add react
# Usando Yarn
yarn astro add react
# Usando PNPM
pnpm 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.

Instalar dependencias manualmente

Primero, instala la integración @astrojs/react de la siguiente manera:

npm install @astrojs/react

La mayoría de los gestores de paquetes instalarán las dependencias asociadas como pares también. Sin embargo, si ve un aviso “No se puede encontrar el paquete ‘react’” (o similar) al iniciar Astro, deberá instalar react y react-dom:

npm install react react-dom

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

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
  //             ^^^^^^^
});

Empezando

Para usar tu primer componente React en Astro, dirígete a nuestra documentación de framework 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

Opciones

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:

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/*'],
    }),
  ],
});

Análisis de los hijos

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 vnodes 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:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
});