React + Vite CLAUDE.md Template
CLAUDE.md for React SPA projects using Vite
Category:templates
Type:template
Difficulty:beginner
Language:Markdown
react
typescript
beginner
Description
CLAUDE.md template for React single-page applications built with Vite. Covers component patterns, state management options, routing with React Router, testing with Vitest, and build optimization.
Content
Resource Content
# React + Vite Project ## Overview React SPA built with Vite for fast development. ## Tech Stack - Framework: React 18 - Build: Vite - Language: TypeScript - Routing: React Router - State: Zustand/Jotai ## Key Commands ```bash npm run dev # Dev server (HMR) npm run build # Production build npm run preview # Preview build npm run test # Vitest npm run lint # ESLint ``` ## Project Structure ``` src/ ├── main.tsx # Entry point ├── App.tsx # Root component ├── components/ │ ├── ui/ # UI primitives │ └── features/ # Feature components ├── hooks/ # Custom hooks ├── pages/ # Route pages ├── stores/ # State stores ├── lib/ # Utilities └── types/ # TypeScript types ``` ## Conventions - Functional components with hooks - Use `@/` path alias - Colocate tests with components - CSS Modules or Tailwind ## Important Notes - Vite uses ES modules natively - `import.meta.env` for env vars - Fast Refresh for instant updates
Rate This Resource
0
Help others discover great resources
Statistics
0
Stars
0
Copies
404
Days ago
136
Views