Componentes de otros frameworks

Crea tu página web en Astro sin sacrificar tus componentes de framework favoritos.

Astro es compatible con una variedad de frameworks populares, incluyendo React, Preact, Svelte, Vue, SolidJS, AlpineJS y Lit.

Instalando integraciones

Astro incluye integraciones opcionales de React, Preact, Svelte, Vue, SolidJS, AlpineJS y Lit. Una o varias de estas integraciones de Astro se pueden instalar y configurar en tu proyecto.

De forma predeterminada, los componentes de framework se renderizarán en el servidor, como HTML estático. Esto es útil para crear maquetados que no son interactivos y evitar enviar código JavaScript innecesario al cliente.

Usando componente de framework

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

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

Hidratando componentes interactivos

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.

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

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.

Mezclando frameworks

Puedes importar y renderizar componentes usando múltiples frameworks en el mismo componente de 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

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

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

Puedes pasar una función como prop a un componente de framework, pero este solo funcionará al renderizar el componente en el servidor. Si intentas usar la función en un componente hidratado (por ejemplo, como un evento), se producirá un error.

Esto es porque las funciones no pueden ser serializadas (transferidas desde el servidor al cliente) por Astro.

Pasando children a componentes de framework

Dentro de un componente de Astro, puedes pasar elementos children a los componentes del framework. Cada framework tiene sus propios patrones sobre cómo hacer referencia a estos elementos children: React, Preact y Solid usan una prop especial llamada children, mientras que Svelte y Vue usan el elemento <slot />.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Aquí hay una barra lateral con texto y un botón.</p>
</MyReactSidebar>

Además, puedes usar slots con nombre para agrupar hijos específicos.

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

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Aquí hay una barra lateral con texto y un botón.</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, puedes hacer referencia a estos slots mediante un elemento <slot> con el atributo name. Se conservarán los nombres de los slots que usen kebab-case.

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

Anidando componentes de framework

Dentro de un archivo Astro, los children de los componentes de framework también pueden ser componentes hidratados. Esto significa que puedes anidar recursivamente componentes en cualquiera de estos frameworks.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---

<MyReactSidebar>
  <p>Aquí hay una barra lateral con texto y un botón.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:load />
  </div>

</MyReactSidebar>

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?

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.

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

¿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

Crear un problema en GitHub

Send us feedback