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 :
- Interface TypeScript des props avec JSDoc sur chaque propriété
- Le composant principal avec sa logique
- Les sous-composants extraits si pertinent
- Un hook personnalisé si la logique métier est complexe
- Les styles (module CSS ou Tailwind selon la stack)
- Un exemple d'utilisation concret avec différentes variantes
- 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]
Personnaliser ce prompt avec Léa
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
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.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- 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.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Prompt Midjourney pour debugger du code
Midjourney, connu principalement pour la génération d'images artistiques, peut jouer un rôle surprenant mais efficace dans le processus de débogage de code. En créant des représentations visuelles de flux logiques, d'architectures système ou de structures de données, Midjourney permet aux développeurs de prendre du recul sur leur code et d'identifier des problèmes qui échappent à une lecture purement textuelle. La visualisation est un outil cognitif puissant : transformer un algorithme complexe en diagramme visuel aide à repérer les boucles infinies, les branches conditionnelles manquantes ou les dépendances circulaires. En utilisant des prompts bien construits, vous pouvez générer des schémas conceptuels de votre architecture, des métaphores visuelles pour comprendre les flux de données, ou encore des illustrations pédagogiques pour documenter un bug et le communiquer à votre équipe. Cette approche complémentaire au débogage traditionnel s'inscrit dans une tendance croissante de la programmation visuelle et du visual thinking appliqué au développement logiciel. Que vous soyez confronté à un bug récalcitrant ou que vous cherchiez à mieux comprendre un système legacy, Midjourney offre une perspective unique pour aborder vos problèmes de code sous un angle nouveau et créatif.
Adapter une API pour différents clients
Adapter les réponses API selon les besoins du client
Rédiger une requête ORM
Rédiger des requêtes ORM efficaces
Prompt Claude pour créer des tests E2E
Les tests end-to-end (E2E) sont essentiels pour garantir que votre application fonctionne correctement du point de vue de l'utilisateur final. Cependant, leur rédaction est souvent chronophage et répétitive : il faut simuler des parcours utilisateurs complets, gérer les sélecteurs, les attentes asynchrones et les assertions sur l'état de l'interface. Claude excelle dans cette tâche en générant des tests E2E structurés, maintenables et couvrant les cas nominaux comme les cas limites. En lui fournissant le contexte de votre application — stack technique, framework de test, structure des pages — Claude produit des suites de tests prêtes à exécuter avec Playwright, Cypress ou tout autre outil. Il comprend les bonnes pratiques comme l'utilisation de data-testid, le pattern Page Object Model, et la gestion des états de chargement. Que vous partiez de zéro ou que vous complétiez une couverture existante, Claude transforme une description fonctionnelle en tests robustes en quelques secondes, vous permettant de vous concentrer sur la logique métier plutôt que sur la plomberie technique.