⭐ Featured高级
React Component Architecture
Complete React architecture with atomic design
完整提示词
Design and implement a comprehensive React component architecture for a SaaS dashboard using Next.js 14 App Router, TypeScript strict mode, and Tailwind CSS. Use atomic design methodology, compound component pattern, custom hooks with SWR, Zustand for UI state and React Query for server state, error boundary hierarchy, and accessible WAI-ARIA patterns
支持平台
✨GPT-4o✨Claude 3.5 Sonnet✨Cursor✨v0
初学者 Rating
4.8(4,500)
Stats
10,500浏览
2,300复制
4,500点赞
2,300收藏
预期输出✨ 高质量
A comprehensive React component architecture with atomic design, compound patterns, and accessible ARIA
The AI would generate a complete architecture:
components/
atoms/ → Button, Input, Badge, Icon
molecules/ → SearchBar, UserAvatar, StatCard
organisms/ → Navbar, Sidebar, DataTable
templates/ → DashboardLayout, AuthLayout
pages/ → Dashboard, Settings, Profile
hooks/
useAuth.ts, useDebounce.ts, useMediaQuery.ts
With compound component patterns:
<DataTable>
<DataTable.Header />
<DataTable.Body>
<DataTable.Row />
</DataTable.Body>
</DataTable>