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