Saltearse al contenido

Componentes de otros frameworks

Crea tu página web en Astro sin sacrificar tus componentes de framework favoritos. Crea islas con el framework UI de tu elección.

Integraciones oficiales de frameworks UI

Sección titulada Integraciones oficiales de frameworks UI

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

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

Frameworks UI

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.

¡Usa los componentes de tu framework JavaScript en tus páginas de Astro, diseños y componentes al igual que los componentes de Astro! Todos sus componentes pueden vivir juntos en /src/components, o pueden organizarse de la manera que desee.

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

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

Por defecto, tus componentes de framework solo se renderizarán en el servidor, como HTML estático. Esto es útil para crear componentes de maquetado que no son interactivos y evitar enviar código JavaScript innecesario al cliente.

Un componente de framework puede hacerse interactivo (hidratado) usando una de las directivas client:*. Estos son atributos del componente que derminan cuando tu componente de JavaScript debería ser enviado al navegador.

Con todas las directivas de cliente excepto client:only, tu componente se renderizará primero en el servidor para generar el HTML estático. El código JavaScript se mandará al navegador de acuerdo con la directiva que hayas escogido. De esta forma el componente se hidratará y se volverá interactivo.

src/pages/interactive-components.astro
---
// Ejemplo: hidratando los componentes de framework en el navegador.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from "../components/InteractiveModal.svelte";
---
<!-- Este componente de JavaScript comenzará a importarse cuando se cargue la página-->
<InteractiveButton client:load />
<!-- El JavaScript de este componente no se enviará al cliente hasta que
el usuario se desplace hacia abajo y el componente sea visible en la página -->
<InteractiveCounter client:visible />
<!-- Este componente no se renderizará en el servidor, pero se renderizará en el
cliente cuando la página cargue -->
<InteractiveModal client:only="svelte" />

Directivas de hidratación disponibles

Sección titulada Directivas de hidratación disponibles

Hay varias directivas de hidratación disponibles para los componentes de framework: 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 las directivas de hidratación y sus usos.

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

src/pages/mixing-frameworks.astro
---
// Ejemplo: Mezclando múltiples componentes del framework en la misma página.
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
<MySvelteComponent />
<MyReactComponent />
<MyVueComponent />
</div>

Pasando props al componente de framework

Sección titulada Pasando props al componente de framework

Puedes pasar props desde componentes de Astro a tus componentes de framework:

src/pages/frameworks-props.astro
---
import TodoList from '../componentes/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
<TodoList initialTodos={["aprender Astro", "revisar PRs"]} />
<Counter startingCount={1} />
</div>

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

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

Sección titulada ¿Puedo usar componentes de Astro dentro de mis componentes de framework?

Cualquier componente de framework se convierte en una “isla” de ese framework. Estos componentes deben escribirse en su totalidad como código válido para ese framework, utilizando solo sus propios imports y paquetes. No puedes importar componentes .astro en un componente de framework (por ejemplo, .jsx o .svelte).

Sin embargo, puedes usar el patrón Astro <slot /> para pasar el contenido estático generado por los componentes de Astro como elementos secundarios a los componentes de framework dentro de un Componente .astro.

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

¿Puedo hidratar los componentes de Astro?

Sección titulada ¿Puedo hidratar los componentes de Astro?

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

Los componentes de Astro son componentes de maquetado únicamente en HTML sin ninguna ejecución del lado del cliente. Pero puedes usar una etiqueta <script> en el maquetado del componente de Astro para enviar JavaScript al navegador que se ejecutará en un ámbito global.

📚 Obtenga más información sobre <scripts> del lado del cliente en los componentes de Astro