Créer des composants réutilisables avec Astro

6 min de lecture Par Mystya

Architecture des composants Astro

Les composants Astro sont le cœur de votre application. Bien les structurer dès le départ vous fera gagner beaucoup de temps et facilitera la maintenance de votre projet.

Anatomie d'un composant Astro

Un composant Astro typique se compose de trois sections :

---
// Section frontmatter (JavaScript/TypeScript)
import OtherComponent from './OtherComponent.astro';
const myData = 'Hello';
---

<!-- Template HTML -->
<div>{myData}</div>

<style>
/* Styles scopés au composant */
div { color: blue; }
</style>

Best practices pour les composants

1. Typage avec TypeScript

Utilisez toujours des interfaces TypeScript pour vos props. Cela améliore l'expérience développeur et prévient les bugs :

interface Props {
  title: string;
  description?: string;
  date: Date;
}

2. Composition plutôt qu'héritage

Favorisez la composition de composants plutôt que l'héritage complexe. Utilisez le slot system d'Astro pour créer des composants flexibles.

3. Organisation des fichiers

Structurez vos composants par fonctionnalité ou par type :

src/
├── components/
│   ├── layout/
│   │   ├── Header.astro
│   │   └── Footer.astro
│   ├── ui/
│   │   ├── Button.astro
│   │   └── Card.astro
│   └── features/
│       ├── BlogCard.astro
│       └── ProjectCard.astro

Patterns de composition avancés

Slots nommés

Utilisez les slots nommés pour créer des composants avec plusieurs zones de contenu personnalisables :

<Card>
  <Fragment slot="header">
    <h2>Titre</h2>
  </Fragment>
  <p>Contenu principal</p>
  <Fragment slot="footer">
    <button>Action</button>
  </Fragment>
</Card>

Props avec valeurs par défaut

Définissez toujours des valeurs par défaut sensées pour vos props optionnelles :

const { 
  variant = 'primary',
  size = 'medium',
  disabled = false 
} = Astro.props;

Performance et optimisation

  • Client directives : Utilisez client:load, client:visible judicieusement
  • Styles scopés : Profitez du CSS scopé automatique d'Astro
  • Images optimisées : Utilisez le composant Image d'Astro pour l'optimisation automatique

Conclusion

Maîtriser l'architecture des composants Astro est essentiel pour construire des applications maintenables et performantes. Suivez ces best practices et votre code restera propre même quand votre projet grandit.