@astrojs/ react

v3.3.0 GitHub npm Changelog

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

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:

npx astro add react

pnpm astro add react

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

Instalación manual

Primeron, instala el paquete @astrojs/react:

npm install @astrojs/react

pnpm add @astrojs/react

yarn add @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:

npm install react react-dom

pnpm add react react-dom

yarn add react react-dom

Luego, aplica la 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 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

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