Un composant de vue (View Component / Page Component) est un composant unique, non réutilisable qui représente une page ou une section fonctionnelle complète de l’application. Il assemble les composants universels et globaux pour créer une interface utilisateur cohérente.
Caractéristiques :
Riche en état et en logique : Il gère l’état local (via useState, useReducer), interagit avec des APIs (via useEffect ou React Query), et se connecte aux stores globaux (Redux, Zustand).
Peu personnalisable : Il n’expose que très peu, voire aucune prop, car son rôle est figé.
Dépendant du contexte applicatif : Il est étroitement lié à la logique métier et aux données de l’application.
Exemple :
Un composant UserProfilePage qui récupère les données d’un utilisateur via une API, affiche ses informations avec des composants globaux (Avatar, ProfileCard), et gère la soumission d’un formulaire de modification.
À retenir :
C’est l’équivalent des « pages » ou « templates » dans Atomic Design. Ces composants ne sont jamais réutilisés ailleurs dans l’application.
| Type | Réutilisabilité | Personnalisation | Logique métier | Dépendances |
|---|---|---|---|---|
| Universel | Illimitée (cross-projets) | Élevée (multiples props) | Aucune | Aucune |
| Global | Limitée à l’application | Restreinte (props filtrées) | Légère | Charte graphique |
| Vue (Page) | Nulle (unique) | Très faible ou aucune | Élevée | APIs, stores, contexte |