Créer des composants React propres et réutilisables avec l'IA

<p>Ce prompt guide l'IA pour produire des composants React de qualité professionnelle en couvrant tous les aspects critiques : <strong>typage TypeScript</strong>, <strong>accessibilité</strong>, <strong>gestion des états</strong> et <strong>performance</strong>. En précisant le type d'application, vous obtenez un composant adapté à votre contexte métier réel.</p><p>Les trois variables à personnaliser sont essentielles. <strong>[DESCRIPTION DU COMPOSANT]</strong> doit être précise : plutôt que « un formulaire », écrivez « un formulaire d'inscription multi-étapes avec validation en temps réel ». <strong>[TYPE D'APPLICATION]</strong> oriente les choix UX et techniques. <strong>[CONVENTIONS]</strong> garantit la cohérence avec votre codebase existante.</p><p>La structure en 7 points force l'IA à livrer un résultat complet et exploitable directement. Le hook personnalisé sépare la logique métier du rendu, les tests avec <strong>React Testing Library</strong> valident le comportement utilisateur, et l'exemple d'utilisation sert de documentation vivante. Adaptez les contraintes selon votre stack : supprimez la partie Tailwind si vous utilisez styled-components, ou ajoutez des exigences Storybook si votre équipe l'utilise.</p>

Résultat attendu

Un composant React complet en TypeScript avec : les interfaces de props documentées, le code du composant principal et ses sous-composants, un hook personnalisé si nécessaire, les styles associés, un exemple d'intégration avec plusieurs variantes, et des tests unitaires couvrant les cas principaux.

• LéaIA

  Pour éviter des composants trop génériques, demandez à l'IA de fournir un diagramme de décision (contrôlé vs non-contrôlé) avant de coder. Cela clarifie l'architecture et réduit les re-renders.