Composants Framework

Construisez votre site Astro sans sacrifier votre Framework favori.

Astro supporte un large choix de Frameworks comme React, Preact, Svelte, Vue, SolidJS, AlpineJS et Lit.

Installation d’intégrations

Astro est livré avec des intégrations optionnelles pour React, Preact, Svelte, Vue, SolidJS, AlpineJS et Lit. Une ou plusieurs de ces intégrations Astro peuvent être installées et configurées dans votre projet.

⚙️ Consultez le Guide d’Intégrations pour plus de détails sur l’installation et la configuration d’intégrations Astro.

⚙️ Vous voulez voir un exemple pour le Framework de votre choix ? Visitez astro.new et sélectionnez un des modèles de Framework disponible.

Utilisation des composants de Framework

Utilisez vos composants de Framework JavaScript dans vos composants Astro, Pages et Layouts 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 du 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.

---
// 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"
---
<!-- Le JS du composant commencera à importer au chargement de la page -->
<InteractiveButton client:load />

<!-- Le JS du composant ne sera pas envoyé au client tant que l'utilisateur
     ne défile pas vers le bas et que le composant est visible sur la page -->
<InteractiveCounter client:visible />

<!--Ce composant ne s'affichera pas 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.

Mixer des Frameworks

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

---
// Exemple: Mixer 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>

Transmettre des Props aux composants du framework

Les composants Astro peuvent transmettre des proprétés (Props) aux composants du 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 passer 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 “Slots” 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 sidebar avec du texte et un bouton.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

Ceci permet de construire des “apps” entières dans votre Framework JavaScript préféré et de les rendre via un composant parent, à une page Astro.

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

Tout composant d’interface utilisateur devient une “île” 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 pattern Astro <slot /> 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> client-side dans les composants Astro

Créer une issue GitHub

Send us feedback