React Component Architecture

Coding & Dev Prompts ChatGPT (GPT-4o) 3 views 0 copies

Design a scalable React component architecture with TypeScript, hooks, and best practices.

Prompt

Design a scalable React component architecture for [Application Feature/Page] that handles [Functionality]. Requirements: [List key requirements].

Provide:
1. Component tree diagram (text/ASCII)
2. Component breakdown:
   - Container vs. presentational components
   - Custom hooks needed
   - Context providers
3. State management approach (useState/Redux/Zustand/Jotai)
4. Code for each component (TypeScript preferred)
5. Props interface definitions
6. Event handling patterns
7. Data fetching strategy (React Query/SWR/useEffect)
8. Error boundaries placement
9. Loading state handling
10. Performance optimizations (memo, useCallback, useMemo)
11. Testing strategy (unit + integration)
12. Storybook story structure

How To Use This Prompt

Describe the feature, functionality, and any existing patterns in your codebase.

Example Output

          Component Tree:\n<App>\n  <AuthProvider>\n    <Dashboard>\n      <DashboardHeader />\n      <StatsGrid />\n      <RecentActivity />...        

Frequently Asked Questions

What is the "React Component Architecture" prompt used for?

Design a scalable React component architecture with TypeScript, hooks, and best practices.

Which AI models work with this prompt?

This prompt works best with ChatGPT (GPT-4o). You can also try it with other large language models for similar results.

Can I modify this prompt?

Yes! Feel free to copy and customize this prompt to better fit your specific needs. You can change names, industries, tones, or any other variables to personalize the output.

Is this prompt free to use?

Absolutely. All prompts on GetPromptPro are free to copy and use for personal or commercial purposes.