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.

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

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

  1. (Opcional) Instalar todas las dependencias necesarias y dependencias entre pares
  2. (También opcional) 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:

Ventana de terminal
# 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.

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

Ventana de terminal
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:

Ventana de terminal
npm install react react-dom

Ahora, aplica esta 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:

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

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

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra documentación de integración de Astro para obtener más información sobre las integraciones.

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones