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 :
- 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]
Personalize this prompt with Léa
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
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.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
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.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Build a webhook system
Build webhook infrastructure
Prompt Claude to Create a Prototype
Creating a prototype is a crucial step in developing a product, application, or service. Traditionally, this phase requires a variety of technical skills, time, and often a multidisciplinary team. With Claude, you can significantly accelerate this process by generating functional prototypes from a simple description of your idea. Whether you want to design an interactive user interface, a web application mockup, an API prototype, or even a technical proof of concept, Claude can produce functional code, HTML/CSS wireframes, or complete architectures ready to be tested. The major advantage is Claude's ability to iterate quickly: you describe your vision, get a first prototype, then refine through successive exchanges until you get exactly what you're looking for. This approach democratizes rapid prototyping and allows entrepreneurs, designers, and product managers to validate their hypotheses without fully relying on a development team in the early stages of the project.
Create Async Workers and Jobs with AI
A complete prompt to design and implement async workers and jobs with queuing, retry, monitoring and deployment.
GitHub Copilot Prompt for Generating JavaScript Code
GitHub Copilot, the AI-powered programming assistant developed by GitHub and OpenAI, has transformed the way developers write JavaScript code. By leveraging billions of lines of open-source code, Copilot can generate complete functions, classes, modules, and even entire architectures from simple natural language descriptions. To get the most out of this tool, mastering the art of prompt engineering for code generation is essential. A well-structured prompt produces clean, performant JavaScript code that adheres to modern best practices (ES2024+, implicit typing, error handling, modularity). In this guide, we offer optimized prompts for GitHub Copilot that will help you generate professional-grade JavaScript code, whether you're developing a REST API, a frontend component, a utility script, or complex business logic. Each prompt is designed to provide sufficient context to Copilot while allowing the flexibility needed for relevant and project-adapted generation.