Code-MCP

# React Starter Template ## Quick Start ```bash npm create vite@latest my-app -- --template react-ts cd my-app npm install npm run dev ``` ## Recommended Structure ``` src/ ├── components/ # Reusable UI components │ ├── ui/ # Base UI components (Button, Input, etc.) │ └── features/ # Feature-specific components ├── hooks/ # Custom React hooks ├── pages/ # Route pages (if using router) ├── services/ # API calls, external services ├── store/ # State management (Redux, Zustand) ├── types/ # TypeScript types/interfaces ├── utils/ # Utility functions ├── styles/ # Global styles, CSS modules └── App.tsx ``` ## Essential Dependencies ```bash # State Management npm install zustand # or @reduxjs/toolkit react-redux # Routing npm install react-router-dom # Forms npm install react-hook-form zod @hookform/resolvers # HTTP npm install axios # or use fetch with React Query npm install @tanstack/react-query # UI Libraries npm install @radix-ui/react-* # or shadcn/ui npm install tailwindcss postcss autoprefixer ``` ## Best Practices 1. **Component Organization**: One component per file 2. **Custom Hooks**: Extract logic into reusable hooks 3. **TypeScript**: Use strict mode, define prop types 4. **Performance**: Use `useMemo`, `useCallback` appropriately 5. **Testing**: Use React Testing Library + Vitest