Frameworks de front-end

Crea tu sitio web de Astro sin sacrificar tu framework de componentes favorito. Crea islas de Astro con los frameworks de UI que elijas.

Integraciones oficiales de frameworks de front-end

Astro admite una variedad de frameworks populares, incluidos React, Preact, Svelte, Vue, SolidJS y AlpineJS con integraciones oficiales.

Encuentra aún más integraciones de frameworks mantenidas por la comunidad (p. ej., Angular, Qwik, Elm) en nuestro directorio de integraciones.

Frameworks de front-end

Instalación de integraciones

Una o varias de estas integraciones de Astro se pueden instalar y configurar en tu proyecto.

Consulta la guía de integraciones para obtener más detalles sobre la instalación y configuración de las integraciones de Astro.

Uso de componentes de frameworks

¡Usa tus componentes de frameworks de JavaScript en tus páginas, layouts y componentes de Astro al igual que los componentes de Astro! Todos tus componentes pueden vivir juntos en /src/components, o pueden organizarse de la manera que prefieras.

Para usar un componente de framework, impórtalo desde su ruta relativa en el script de tu componente de Astro. Luego, usa el componente junto con otros componentes, elementos HTML y expresiones de tipo JSX en la plantilla del componente.

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Use React components directly in Astro!</h1>
    <MyReactComponent />
  </body>
</html>

De forma predeterminada, tus componentes de framework solo se renderizarán en el servidor, como HTML estático. Esto es útil para componentes de plantilla que no son interactivos y evita enviar JavaScript innecesario al cliente.

Hidratación de componentes interactivos

Un componente de framework puede hacerse interactivo (hidratado) utilizando una directiva client:*. Estos son atributos de componente que determinan cuándo debe enviarse el JavaScript de tu componente al navegador.

Con todas las directivas de cliente excepto client:only, tu componente primero se renderizará en el servidor para generar HTML estático. El JavaScript del componente se enviará al navegador de acuerdo con la directiva que elijas. Luego, el componente se hidratará y se volverá interactivo.

---
// Example: hydrating framework components in the browser.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from '../components/InteractiveModal.svelte';
---
<!-- This component's JS will begin importing when the page loads -->
<InteractiveButton client:load />

<!-- This component's JS will not be sent to the client until
the user scrolls down and the component is visible on the page -->
<InteractiveCounter client:visible />

<!-- This component won't render on the server, but will render on the client when the page loads -->
<InteractiveModal client:only="svelte" />

El framework de JavaScript (React, Svelte, etc.) necesario para renderizar el componente se enviará al navegador junto con el propio JavaScript del componente. Si dos o más componentes en una página usan el mismo framework, el framework solo se enviará una vez.

Directivas de hidratación disponibles

Hay varias directivas de hidratación disponibles para componentes de frameworks de UI: client:load, client:idle, client:visible, client:media={QUERY} y client:only={FRAMEWORK}.

Consulta nuestra página de referencia de directivas para obtener una descripción completa de estas directivas de hidratación y su uso.

Mezcla de frameworks

Puedes importar y renderizar componentes de múltiples frameworks en el mismo componente de Astro.

---
// Example: Mixing multiple framework components on the same page.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

Astro reconocerá y renderizará tu componente basándose en su extensión de archivo. Para distinguir entre frameworks que usan la misma extensión de archivo, se requiere una configuración adicional al renderizar múltiples frameworks JSX (p. ej., React y Preact).

Paso de props a componentes de frameworks

Puedes pasar props desde componentes de Astro a componentes de frameworks:

---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["learn Astro", "review PRs"]} />
  <Counter startingCount={1} />
</div>

Las props que se pasan a los componentes interactivos de frameworks utilizando una directiva client:* deben ser serializadas: traducidas a un formato adecuado para su transferencia a través de una red o su almacenamiento. Sin embargo, Astro no serializa todos los tipos de estructuras de datos. Por lo tanto, existen algunas limitaciones sobre lo que se puede pasar como props a los componentes hidratados.

Se admiten los siguientes tipos de props: objeto plano, número, cadena de texto, Array, Map, Set, RegExp, Date, BigInt, URL, Uint8Array, Uint16Array, Uint32Array e Infinity

Las estructuras de datos no admitidas que se pasan a los componentes, como las funciones, solo se pueden usar durante el renderizado del servidor del componente y no se pueden usar para proporcionar interactividad. Por ejemplo, no se admite el paso de funciones a componentes hidratados porque Astro no puede pasar funciones desde el servidor de una manera que las haga ejecutables en el cliente.

Paso de children a componentes de frameworks

Dentro de un componente de Astro, puedes pasar componentes hijos a componentes de frameworks. Cada framework tiene sus propios patrones para hacer referencia a estos hijos: React, Preact y Solid utilizan una prop especial llamada children, mientras que Svelte y Vue utilizan el elemento <slot />.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Here is a sidebar with some text and a button.</p>
</MyReactSidebar>

Además, puedes usar Slots con Nombre para agrupar componentes hijos específicos.

Para React, Preact y Solid, estos slots se convertirán en una prop de nivel superior. Los nombres de slots que utilicen kebab-case se convertirán a camelCase.

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Here is a sidebar with some text and a button.</p>
  <ul slot="social-links">
    <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li>
    <li><a href="https://github.com/withastro">GitHub</a></li>
  </ul>
</MySidebar>

export default function MySidebar(props) {
  return (
    <aside>
      <header>{props.title}</header>
      <main>{props.children}</main>
      <footer>{props.socialLinks}</footer>
    </aside>
  )
}

Para Svelte y Vue, se puede hacer referencia a estos slots usando un elemento <slot> con el atributo name. Se conservarán los nombres de slots que utilicen kebab-case.

<aside>
  <header><slot name="title" /></header>
  <main><slot /></main>
  <footer><slot name="social-links" /></footer>
</aside>

Anidamiento de componentes de frameworks

Dentro de un archivo de Astro, los componentes hijos de un framework también pueden ser componentes hidratados. Esto significa que puedes anidar componentes de forma recursiva desde cualquiera de estos frameworks.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---
<MyReactSidebar>
  <p>Here is a sidebar with some text and a button.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

Esto te permite crear "aplicaciones" completas en tu framework de JavaScript preferido y renderizarlas, a través de un componente padre, en una página de Astro.

¿Puedo usar componentes de Astro dentro de mis componentes de frameworks?

Cualquier componente de un framework de UI se convierte en una “isla” de ese framework. Estos componentes deben estar escritos completamente como código válido para ese framework, utilizando únicamente sus propias importaciones y paquetes. No puedes importar componentes .astro en un componente de framework de UI (p. ej., .jsx o .svelte).

Sin embargo, puedes utilizar el patrón de <slot /> de Astro para pasar contenido estático generado por componentes de Astro como hijos a tus componentes de framework dentro de un componente .astro.

---
import MyReactComponent from  '../components/MyReactComponent.jsx';
import MyAstroComponent from '../components/MyAstroComponent.astro';
---
<MyReactComponent>
  <MyAstroComponent slot="name" />
</MyReactComponent>

¿Puedo hidratar componentes de Astro?

Si intentas hidratar un componente de Astro con un modificador client:, obtendrás un error.

Los componentes de Astro son componentes de plantilla solo de HTML sin tiempo de ejecución del lado del cliente. Pero puedes usar una etiqueta <script> en la plantilla de tu componente de Astro para enviar JavaScript al navegador que se ejecute en el ámbito global.

Obtén más información sobre las etiquetas <script> del lado del cliente en componentes de Astro

Contribuir Comunidad Patrocinar

Frameworks de front-end

Integraciones oficiales de frameworks de front-end

Frameworks de front-end

@astrojs/alpinejs

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

Instalación de integraciones

Uso de componentes de frameworks

Hidratación de componentes interactivos

Directivas de hidratación disponibles

Mezcla de frameworks

Paso de props a componentes de frameworks

Paso de children a componentes de frameworks

Anidamiento de componentes de frameworks

¿Puedo usar componentes de Astro dentro de mis componentes de frameworks?

¿Puedo hidratar componentes de Astro?