Modèles de Composition React

Modèles de composition pour construire des composants React flexibles et maintenables. Évitez la prolifération de props booléennes en utilisant des composants composites, en remontant l'état et en composant les internals. Ces modèles rendent les codebases plus faciles à gérer pour les humains et les agents IA à mesure qu'ils se développent.

Déclencheurs

• composition
• layout
• grid
• flexbox
• responsive
• breakpoint
• container
• spacing
• alignment
• structure
• page layout
• component composition

Quand appliquer

Consultez ces directives quand :

• Vous refactorisez des composants avec de nombreuses props booléennes
• Vous construisez des bibliothèques de composants réutilisables
• Vous concevez des APIs de composants flexibles
• Vous passez en revue l'architecture des composants
• Vous travaillez avec des composants composites ou des fournisseurs de contexte

Catégories de Règles par Priorité

Référence Rapide

1. Architecture Composant (HIGH)

• architecture-avoid-boolean-props - N'ajoutez pas de props booléennes pour personnaliser le comportement ; utilisez la composition
• architecture-compound-components - Structurez les composants complexes avec un contexte partagé

2. Gestion d'État (MEDIUM)

• state-decouple-implementation - Le fournisseur est le seul endroit qui sait comment l'état est géré
• state-context-interface - Définissez une interface générique avec état, actions, méta pour l'injection de dépendances
• state-lift-state - Remontez l'état dans les composants fournisseurs pour un accès aux frères et sœurs

3. Modèles d'Implémentation (MEDIUM)

• patterns-explicit-variants - Créez des composants variants explicites au lieu de modes booléens
• patterns-children-over-render-props - Utilisez children pour la composition au lieu de props renderX

4. APIs React 19 (MEDIUM)

⚠️ React 19+ uniquement. Ignorez cette section si vous utilisez React 18 ou antérieur.

• react19-no-forwardref - N'utilisez pas forwardRef ; utilisez use() au lieu de useContext()

Comment utiliser

Lisez les fichiers de règles individuels pour des explications détaillées et des exemples de code :

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Chaque fichier de règle contient :

• Une brève explication de son importance
• Un exemple de code incorrect avec explication
• Un exemple de code correct avec explication
• Du contexte supplémentaire et des références

Document Complet Compilé

Pour le guide complet avec toutes les règles développées : AGENTS.md

Vérifier

• La modification a été rendue dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturée, pas seulement relue au niveau du code
• La mise en page a été vérifiée aux breakpoints indiqués dans le guide composition-patterns (mobile + desktop minimum) ; les preuves de chacun sont attachées
• Les valeurs de couleur, typographie et espacement utilisées proviennent des design tokens / thème du projet, pas de valeurs en dur ad hoc
• La navigation au clavier et l'ordre de focus ont été testés sur chaque élément interactif introduit
• Les variantes reduced-motion / dark-mode (quand supportées) ont été vérifiées, pas supposées hériter
• Aucune erreur console ou avertissement d'hydratation n'a été émis pendant le rendu de vérification