Create Clean and Reusable React Components with AI
A complete prompt to generate typed, accessible, and reusable React components with custom hooks, tests, and modern best practices.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
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]
Why this prompt works
<p>This prompt guides AI to produce professional-quality React components covering all critical aspects: <strong>TypeScript typing</strong>, <strong>accessibility</strong>, <strong>state management</strong>, and <strong>performance</strong>. By specifying the application type, you get a component adapted to your real business context.</p><p>The three variables to customize are essential. <strong>[COMPONENT DESCRIPTION]</strong> must be precise: rather than 'a form', write 'a multi-step registration form with real-time validation'. <strong>[APPLICATION TYPE]</strong> guides UX and technical choices. <strong>[CONVENTIONS]</strong> ensures consistency with your existing codebase.</p><p>The 7-point structure forces AI to deliver a complete and directly exploitable result. The custom hook separates business logic from rendering, tests with <strong>React Testing Library</strong> validate user behavior, and the usage example serves as living documentation. Adapt the constraints to your stack: remove the Tailwind part if you use styled-components, or add Storybook requirements if your team uses it.</p>
Use Cases
Expected Output
A complete TypeScript React component with: documented prop interfaces, main component and sub-component code, a custom hook if needed, associated styles, an integration example with multiple variants, and unit tests covering the main cases.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt Guide📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Similar Prompts
Define a Git Strategy for a Team
Define a complete Git strategy adapted to your team: branching model, conventions, code review, and release management.
Create an Optimized Production Dockerfile
Create a multi-stage Dockerfile optimized for production with maximum security, lightweight image, and best practices.
Refactor Legacy Code Step by Step
This prompt guides AI to analyze legacy code and produce a structured refactoring plan with diagnosis, prioritization, tests, and modernized code.
Implement Robust Error Handling in Node.js
Create a professional Node.js error handling architecture with custom error classes, centralized middleware, and monitoring.