Saltearse al contenido
Astro Astro

Migrando desde Create React App (CRA)

La integración de React en Astro proporciona soporte para utilizar componentes de React dentro de los componentes de Astro, ¡incluidas aplicaciones completas de React como Create React App (CRA)!

src/pages/index.astro
---
// Importa tu componente raíz App
import App from '../cra-project/App.jsx'
---
<!-- Utiliza una directiva del cliente para cargar tu aplicación -->
<App client:load />

Muchas aplicaciones “simplemente funcionarán” como aplicaciones completas de React cuando las agregues directamente a tu proyecto de Astro con la integración de React instalada. Esta es una excelente manera de poner en marcha tu proyecto de inmediato y mantener tu aplicación funcional mientras migras a Astro.

Con el tiempo, puedes convertir tu estructura pieza por pieza en una combinación de componentes .astro y .jsx. ¡Probablemente descubrirás que necesitas menos componentes de React de lo que crees!

Aquí tienes algunos conceptos clave y estrategias de migración para ayudarte a comenzar. ¡Utiliza el resto de nuestra documentación y únete a nuestra comunidad de Discord para continuar avanzando!

Principales similitudes entre CRA y Astro

Principales diferencias entre CRA y Astro

Cuando reconstruyas tu sitio de CRA en Astro, notarás algunas diferencias importantes:

  • CRA es una aplicación de una sola página que utiliza index.js como la raíz de tu proyecto. Astro es un sitio de múltiples páginas, y index.astro es tu página de inicio.

  • Los componentes .astro no se escriben como funciones exportadas que devuelven plantillas de página. En su lugar, dividirás tu código en una “valla de código” para tu JavaScript y un cuerpo exclusivo para el HTML que generas.

  • Orientado al contenido: Astro fue diseñado para resaltar tu contenido y permitirte optar por la interactividad solo cuando sea necesario. Una aplicación existente de CRA puede estar diseñada para una alta interactividad del lado del cliente y puede requerir técnicas avanzadas de Astro para incluir elementos que son más desafiantes de replicar utilizando componentes .astro, como paneles de control.

Agrega tu CRA a Astro

Tu aplicación existente puede ser renderizada directamente dentro de un nuevo proyecto de Astro, muchas veces sin cambios en el código de tu aplicación.

Crear un nuevo proyecto de Astro

Utiliza el comando create astro en tu gestor de paquetes para lanzar la CLI de Astro y seleccionar un nuevo proyecto de Astro “empty”.

Terminal window
npm create astro@latest

Agregar integraciones y dependencias

Agrega la integración de React utilizando el comando astro add para tu gestor de paquetes. Si tu aplicación utiliza Tailwind o MDX, puedes agregar múltiples integraciones de Astro usando el mismo comando.

Terminal window
npx astro add react
npx astro add react tailwind mdx

Si tu CRA requiere cualquier dependencia (p. ej. paquetes de NPM), debes instalarlos individualmente utilizando la línea de comandos o añadiéndolos manualmente al archivo package.json de tu nuevo proyecto de Astro, y luego ejecutando el comando de instalación. Ten en cuenta que muchas, pero no todas, las dependencias de React funcionarán en Astro.

Agrega los archivos de tu aplicación existente

Copia los archivos y carpetas existentes de tu proyecto actual de Create React App (CRA) (p. ej. components, hooks, styles, etc.) en una nueva carpeta dentro de src/, manteniendo su estructura de archivos para que tu aplicación continúe funcionando. Ten en cuenta que todas las extensiones de archivo .js sean renombradas a .jsx o .tsx.

No incluyas archivos de configuración. Utilizarás los archivos astro.config.mjs, package.json y tsconfig.json propios de Astro.

Mueve el contenido de la carpeta public/ de tu aplicación (p. ej. assets estáticos) dentro de la carpeta public/ de Astro.

  • Directoriopublic/
    • logo.png
    • favicon.ico
    • …
  • Directoriosrc/
    • Directoriocra-project/
      • App.jsx
      • …
    • Directoriopages/
      • index.astro
  • astro.config.mjs
  • package.json
  • tsconfig.json

Renderizar tu app

Importa el componente raíz de tu aplicación en la sección de frontmatter de index.astro y luego renderiza el componente <App /> en la plantilla de tu página.

src/pages/index.astro
---
import App from '../cra-project/App.jsx'
---
<App client:load/>

Consulta nuestra guía para configurar Astro para obtener más detalles y opciones disponibles.

Convierte tu CRA a Astro

Después de agregar tu aplicación existente a Astro, ¡probablemente querrás convertir la propia aplicación a Astro!

Replicarás un diseño similar basado en componentes utilizando componentes de plantillas HTML de Astro para tu estructura básica, mientras importas e incluyes componentes individuales de React (¡que pueden ser aplicaciones completas en sí mismas!) para islas de interactividad.

Cada migración será diferente y se puede realizar de manera incremental sin interrumpir tu aplicación en funcionamiento. Convierte piezas individuales a tu propio ritmo, de modo que cada vez más de tu aplicación esté impulsada por componentes de Astro con el tiempo.

A medida que conviertas tu aplicación de React, decidirás qué componentes de React reescribirás como componentes de Astro. La única restricción es que los componentes de Astro pueden importar componentes de React, pero los componentes de React solo pueden importar otros componentes de React.

src/pages/static-components.astro
---
import MiComponenteDeReact from '../components/MiComponenteDeReact.jsx';
---
<html>
  <body>
    <h1>¡Utiliza componentes React directamente en Astro!</h1>
    <MiComponenteDeReact />
  </body>
</html>

En lugar de importar componentes de Astro dentro de componentes de React, puedes anidar componentes de React dentro de un único componente de Astro:

src/pages/nested-components.astro
---
import MiSidebarDeReact from '../components/MiSidebarDeReact.jsx';
import MiBotonDeReact from '../components/MiBotonDeReact.jsx';
---
<MiSidebarDeReact>
  <p>Aquí hay una sidebar con algo de texto y un botón.</p>
  <div slot="actions">
    <MiBotonDeReact client:idle />
  </div>
</MiSidebarDeReact>

Puede ser útil que aprendas acerca de las islas de Astro y los componentes de Astro antes de reestructurar tu proyecto CRA como un proyecto Astro.

Compara: JSX vs Astro

Compare el siguiente componente CRA y el componente Astro correspondiente:

StarCount.jsx
import React, { useState, useEffect } from 'react';
import Header from './Header';
import Footer from './Footer';


const Component = () => {
const [stars, setStars] = useState(0);
const [message, setMessage] = useState('');


useEffect(() => {
    const fetchData = async () => {
        const res = await fetch('https://api.github.com/repos/withastro/astro');
        const json = await res.json();


        setStars(json.stargazers_count || 0);
        setMessage(json.message);
    };


    fetchData();
}, []);


return (
    <>
        <Header />
        <p style={{
            backgroundColor: `#f4f4f4`,
            padding: `1em 1.5em`,
            textAlign: `center`,
            marginBottom: `1em`
        }}>Astro tiene {stars} 🧑‍🚀</p>
        <Footer />
    </>
)
};


export default Component;

Convirtiendo archivos JSX a archivos .astro

Aquí tienes algunos consejos para convertir un componente de CRA .js a un componente .astro:

  1. Utiliza el JSX devuelto por la función del componente CRA existente como base para tu plantilla HTML.

  2. Convierte cualquier sintaxis CRA o JSX a Astro o a los estándares web de HTML. Esto incluye {children} y className, por ejemplo.

  3. Mueve cualquier JavaScript necesario, incluyendo declaraciones de importación, dentro de una “valla de código” (---). Nota: El JavaScript para renderizar contenido condicional a menudo se escribe directamente dentro de la plantilla HTML en Astro.

  4. Utiliza Astro.props para acceder a cualquier prop adicional que haya sido pasada previamente a tu función CRA.

  5. Decide si también es necesario convertir a Astro los componentes importados. Por el momento, puedes mantenerlos como componentes de React o hacerlo de forma permanente. Sin embargo, es posible que eventualmente desees convertirlos a componentes .astro, ¡especialmente si no necesitan ser interactivos!.

  6. Reemplaza useEffect() con declaraciones de importación o Astro.glob() para consultar tus archivos locales. Utiliza fetch() para obtener datos externos.

Migrando Tests

Como Astro genera HTML directamente, es posible escribir tests end-to-end utilizando la salida del paso de compilación. Cualquier test end-to-end escrito anteriormente podría funcionar de forma predeterminada si has podido igualar el marcado de tu sitio de CRA. Bibliotecas de pruebas como Jest y React Testing Library pueden ser importadas y utilizadas en Astro para probar tus componentes de React.

Consulta la guía de pruebas de Astro para obtener más información.

Referencia: Convertir Sintaxis de CRA a Astro

Importaciones de CRA a Astro

Actualiza todas las importaciones de archivos para hacer referencia a rutas de archivos relativas exactas. Esto puede hacerse utilizando un alias de importación o escribiendo la ruta relativa completa.

Ten en cuenta que los archivos .astro y varios otros tipos de archivos deben ser importados con su extensión de archivo completa.

src/pages/authors/Fred.astro
---
import Card from `../../components/Card.astro`
---
<Card />

Props Children de CRA a Astro

Convierte cualquier instancia de {children} a un Astro <slot />. Astro no necesita recibir {children} como una propiedad de función y automáticamente renderizará el contenido del hijo en un <slot />.

src/components/MiComponent
---
---
export default function MiComponent(props) {
    return (
      <div>
        {props.children}
      </div>
    );
}


<div>
  <slot />
</div>

Los componentes de React que pasan múltiples conjuntos de hijos pueden migrarse a un componente de Astro utilizando slots con nombre.

Para obtener más información sobre el uso específico de <slot /> en Astro, consulta Slots.

Data Fetching de CRA a Astro

Obteniendo datos en un componente de Create React App es similar a Astro, con algunas pequeñas diferencias.

Deberás eliminar cualquier instancia de un hook de efecto secundario (useEffect) tanto para Astro.glob() como para getCollection()/getEntryBySlug() para acceder a datos desde otros archivos en la fuente de tu proyecto.

Para obtener datos remotos, utiliza fetch().

Estas solicitudes de datos se realizan en el frontmatter del componente de Astro y utilizan el await de nivel superior.

src/pages/index.astro
---
import { getCollection } from 'astro:content';


// Obtener todas las entradas de `src/content/blog/`
const allBlogPosts = await getCollection('blog');


// Obtener todas las entradas de `src/pages/posts/`
const allPosts = await Astro.glob('../pages/posts/*.md');


// Obtener datos remotos
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---

Mira más sobre importaciones de archivos locales con Astro.glob(), consulta utilizando la API de Colecciones o obtención de datos remotos.

Estilando CRA a Astro

Es posible que necesites reemplazar cualquier biblioteca de CSS-in-JS (p. ej. styled-components) con otras opciones de CSS disponibles en Astro.

Si es necesario, convierte cualquier objeto de estilo en línea (style={{ fontWeight: "bold" }}) en atributos de estilo HTML en línea (style="font-weight:bold;"). O bien, utiliza una etiqueta <style> de Astro para estilos CSS con alcance local.

src/components/Card.astro
<div style={{backgroundColor: `#f4f4f4`, padding: `1em`}}>{message}</div>
<div style="background-color: #f4f4f4; padding: 1em;">{message}</div>

Tailwind es compatible después de instalar la integración de Tailwind. ¡No se requieren cambios en tu código existente de Tailwind!

Mira más sobre Estilando en Astro.

Solución de problemas

¡Es posible que tu aplicación de Create React App funcione “tal cual”!, pero es probable que necesites hacer ajustes menores para duplicar la funcionalidad y/o estilos de tu aplicación existente.

Si no encuentras respuestas en esta documentación, por favor visita el Discord de Astro y haz preguntas en nuestro foro de soporte. ¡Estaremos encantados de ayudarte!

Más guías de migración