Frameworks front-end

Construisez votre site Astro sans sacrifier votre framework de composants préféré. Créez des îlots Astro avec les frameworks UI de votre choix.

Intégrations officielles de framework front-end

Astro prend en charge un large choix de frameworks comme React, Preact, Svelte, Vue, SolidJS et AlpineJS avec des intégrations officielles.

Vous trouverez d’autres intégrations de frameworks gérés par la communauté (par exemple Angular, Qwik, Elm) dans notre répertoire d’intégrations.

Framework d'interface utilisateur

Installation d’intégrations

Une ou plusieurs de ces intégrations Astro peuvent être installées et configurées dans votre projet.

Consultez le guide des intégrations pour plus de détails sur l’installation et la configuration d’intégrations Astro.

Utilisation des composants de framework

Utilisez vos composants de framework JavaScript dans vos composants, pages et mises en page Astro comme des composants Astro classiques ! Tous vos composants peuvent être placés dans /src/components, ou peuvent être organisés de la manière que vous le souhaitez.

Pour utiliser un composant de framework, importez-le à partir de son chemin d’accès relatif dans votre script de composant Astro. Ensuite, utilisez le composant avec d’autres composants, éléments HTML et expressions de type JSX dans le modèle de composant.

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<html>
  <body>
    <h1>Utilisez des composants React directement dans Astro !</h1>
    <MyReactComponent />
  </body>
</html>

Par défaut, vos composants de framework seront rendus en HTML statique. C’est pratique pour les composants qui n’ont pas à être interactifs et évite de transmettre à l’utilisateur du JavaScript inutile.

Hydratation des composants interactifs

Un composant du framework peut être rendu interactif (hydraté) à l’aide d’une directive client:*. Il s’agit d’attributs de composant qui déterminent quand le JavaScript de votre composant doit être envoyé au navigateur.

Avec toutes les directives client à l’exception de client:only, votre composant sera d’abord rendu sur le serveur pour générer du HTML statique. Le JavaScript du composant sera envoyé au navigateur en fonction de la directive que vous avez choisie. Le composant s’hydrate alors et devient interactif.

---
// Exemple : hydratation des composants de framework dans le navigateur.
import InteractiveButton from '../components/InteractiveButton.jsx';
import InteractiveCounter from '../components/InteractiveCounter.jsx';
import InteractiveModal from '../components/InteractiveModal.svelte';
---
<!-- Le JS de ce composant commencera à être importé au chargement de la page -->
<InteractiveButton client:load />

<!-- Le JS de ce composant ne sera envoyé au client que lorsque
l'utilisateur aura défilé vers le bas et que le composant sera visible sur la page -->
<InteractiveCounter client:visible />

<!--Ce composant ne sera pas généré sur le serveur, mais sur le client lorsque la page se chargera. -->
<InteractiveModal client:only="svelte" />

Le framework JavaScript (React, Svelte, etc.) nécessaire au rendu du composant sera envoyé au navigateur avec le JavaScript du composant. Si deux composants ou plus sur une page utilisent le même framework, le framework ne sera envoyé qu’une seule fois.

Directives d’hydratation disponibles

Il y a plusieurs directives d’hydratation disponibles pour les composants de framework : client:load, client:idle, client:visible, client:media={QUERY} et client:only={FRAMEWORK}.

Allez voir notre page de référence des directives pour une description complète de ces directives, et de leur utilisation.

Mélanger des frameworks

Vous pouvez importer et afficher des composants de plusieurs frameworks, dans le même composant Astro.

---
// Exemple: Mélanger des composants de framework sur la même 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 reconnaîtra et affichera votre composant en fonction de son extension de fichier. Pour distinguer les frameworks qui utilisent la même extension de fichier, une configuration supplémentaire lors du rendu de plusieurs frameworks JSX (par exemple React et Preact) est requise.

Transmettre des props aux composants de framework

Les composants Astro peuvent transmettre des props (diminutif pour « propriétés ») aux composants de framework :

---
import TodoList from '../components/TodoList.jsx';
import Counter from '../components/Counter.svelte';
---
<div>
  <TodoList initialTodos={["apprendre Astro", "réviser des PRs"]} />
  <Counter startingCount={1} />
</div>

Passer des enfants à des composants de framework

Dans un composant Astro, vous pouvez transmettre des enfants à des composants de framework. Chaque framework a son propre modèle pour référencer ces enfants : React, Preact et Solid utilisent une propriété spéciale nommée children, tandis que Svelte et Vue utilisent l’élément <slot />.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
---
<MyReactSidebar>
  <p>Voilà un panneau latéral avec du texte et un bouton.</p>
</MyReactSidebar>

De plus, vous pouvez utiliser les slots nommés pour grouper des enfants spécifiques ensemble.

Dans React, Preact, et Solid, ces emplacements seront convertis en propriété de niveau supérieur. Les noms de slots utilisant le format kebab-case seront convertis en camelCase.

---
import MySidebar from '../components/MySidebar.jsx';
---
<MySidebar>
  <h2 slot="title">Menu</h2>
  <p>Voilà un panneau latéral avec du texte et un bouton.</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>
  )
}

Pour Svelte et Vue ces slots peuvent être référencés avec un élément <slot> et l’attribut name. Les noms de slots utilisant le format kebab-case seront conservés.

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

Imbriquer des composants de framework

Dans un fichier Astro, les enfants de composants de framework peuvent aussi être des composants hydratés. Cela signifie que vous pouvez imbriquer des composants de framework dans d’autres composants de framework.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---
<MyReactSidebar>
  <p>Voici une barre latérale avec du texte et un bouton.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

Cela vous permet de créer des « applications » entières dans votre framework JavaScript préféré et de les afficher, via un composant parent, sur une page Astro.

Puis-je utiliser les composants Astro à l’intérieur des composants de mon framework ?

Tout composant d’interface utilisateur devient un « îlot » de ce framework. Ces composants doivent être écrits entièrement comme du code valide pour ce framework, en utilisant uniquement ses propres importations et paquets. Vous ne pouvez pas importer des composants .astro dans un composant de framework d’interface utilisateur (par exemple .jsx ou .svelte).

Vous pouvez cependant utiliser le méchanisme de <slot /> d’Astro pour passer du contenu statique généré par des composants Astro en tant qu’enfants à vos composants framework à l’intérieur d’un composant .astro.

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

Puis-je hydrater des composants Astro ?

Si vous essayez d’hydrater un composant Astro avec un modificateur client:, vous obtiendrez une erreur.

Les composants Astro sont des composants de modélisation HTML uniquement, sans exécution côté client. Cependant, vous pouvez utiliser une balise <script> dans votre modèle de composant Astro pour envoyer du JavaScript au navigateur qui s’exécute dans la portée globale.

Apprenez-en plus sur les <script> côté client dans les composants Astro

Contribuer Communauté Parrainer