Créer des composants React propres et réutilisables avec l'IA
Un prompt complet pour générer des composants React typés, accessibles et réutilisables, avec hooks personnalisés, tests et bonnes pratiques modernes.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Tu es un développeur React senior spécialisé en architecture de composants modernes. Crée un composant React complet pour [DESCRIPTION DU COMPOSANT] destiné à une application [TYPE D'APPLICATION : e-commerce / SaaS / dashboard / blog / application mobile hybride]. Spécifications techniques à respecter : - Utilise React avec des composants fonctionnels et des hooks - TypeScript pour le typage strict des props et du state - Découpe le composant en sous-composants si nécessaire (composition pattern) - Applique le pattern de composant contrôlé/non-contrôlé selon le contexte - Gère les états : chargement, erreur, vide et nominal - Intègre les bonnes pratiques d'accessibilité (ARIA, navigation clavier, rôles sémantiques) - Ajoute la mémoïsation (React.memo, useMemo, useCallback) uniquement là où c'est justifié - Rends le composant responsive avec une approche mobile-first Structure attendue pour chaque composant : 1. Interface TypeScript des props avec JSDoc sur chaque propriété 2. Le composant principal avec sa logique 3. Les sous-composants extraits si pertinent 4. Un hook personnalisé si la logique métier est complexe 5. Les styles (module CSS ou Tailwind selon la stack) 6. Un exemple d'utilisation concret avec différentes variantes 7. Les tests unitaires essentiels avec React Testing Library Contraintes supplémentaires : - Nomme les props et variables de manière explicite en anglais - Ajoute des valeurs par défaut raisonnables aux props optionnelles - Gère correctement le cleanup dans les useEffect - Évite les re-renders inutiles - Suis les conventions du projet : [CONVENTIONS : Airbnb style guide / Standard / custom]
Pourquoi ce prompt fonctionne
<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>
Cas d'usage
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.
Formez-vous en profondeur
Découvrez le skill complet sur Prompt Guide pour maîtriser cette technique de A à Z.
Voir sur Prompt GuideTermes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Prompts similaires
Prompt pour créer une API REST complète de A à Z
Un prompt complet pour générer une API REST professionnelle avec authentification, validation, documentation et tests intégrés.
Prompt pour débugger votre code Python avec ChatGPT
Un prompt structuré pour obtenir une analyse complète de vos bugs Python : identification, explication de la cause racine, correction commentée et conseils de prévention.
Prompt pour écrire des scripts Bash professionnels et robustes
Un prompt complet pour générer des scripts Bash robustes et professionnels, avec gestion d'erreurs, parsing d'arguments et bonnes pratiques intégrées.
Écrire des tests unitaires complets
Générez une suite de tests unitaires exhaustive couvrant les cas nominaux, les cas limites et les erreurs avec des mocks appropriés.