107 lines
2.4 KiB
Markdown
107 lines
2.4 KiB
Markdown
# React + Vite + TypeScript Template
|
|
|
|
A modern React 18 + Vite + TypeScript project template, optimized for AI-assisted development.
|
|
|
|
## Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- **Node.js** >= 18.0.0
|
|
- **pnpm** >= 8.0.0 (required)
|
|
|
|
### Setup
|
|
|
|
```bash
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
## Command Contract
|
|
|
|
Use this command set consistently (same contract as `vue3-vite`).
|
|
|
|
```bash
|
|
# Development
|
|
pnpm dev # Dev server
|
|
pnpm build # Production build
|
|
pnpm preview # Preview production build
|
|
|
|
# Quality gate
|
|
pnpm type-check # TypeScript check
|
|
pnpm lint # ESLint
|
|
pnpm check # Required gate: type-check + lint
|
|
|
|
# Formatting (optional)
|
|
pnpm format
|
|
pnpm format:check
|
|
```
|
|
|
|
Workspace-level checks (run from monorepo root):
|
|
|
|
```bash
|
|
pnpm check:templates # Runs pnpm check for vue3-vite + react-vite
|
|
pnpm check:versions # Verifies package.json/meta.json/templates.json version alignment
|
|
```
|
|
|
|
## Project Layout (Isomorphic with Vue template)
|
|
|
|
```text
|
|
src/
|
|
├── components/ # Shared components
|
|
│ └── ui/ # Radix-based UI primitives
|
|
├── examples/ # Reference only, never copy directly to production
|
|
│ ├── api-example.ts
|
|
│ ├── form-example.tsx
|
|
│ └── list-page-example.tsx
|
|
├── lib/ # API and utilities
|
|
│ ├── api.ts
|
|
│ ├── services.ts
|
|
│ └── utils.ts
|
|
├── pages/ # Route-level pages
|
|
│ ├── Home.tsx
|
|
│ ├── ExamplesPage.tsx
|
|
│ └── NotFound.tsx
|
|
├── router/
|
|
│ └── index.tsx # Hash router (includes /examples)
|
|
├── App.tsx
|
|
├── main.tsx
|
|
└── index.css
|
|
```
|
|
|
|
## Examples Policy
|
|
|
|
- `src/examples/*` is pattern reference only.
|
|
- Re-implement the pattern in real feature files.
|
|
- Do not paste example files into production code.
|
|
|
|
## AI Agent Workflow (minimum path)
|
|
|
|
### New page (5 steps)
|
|
|
|
1. Add page in `src/pages/<FeatureName>.tsx`.
|
|
2. Register route in `src/router/index.tsx`.
|
|
3. Use existing UI primitives from `src/components/ui`.
|
|
4. Add service calls through `src/lib/services.ts` when needed.
|
|
5. Run `pnpm check`.
|
|
|
|
### New API flow (4 steps)
|
|
|
|
1. Define API call in `src/lib/api.ts` or service module.
|
|
2. Add typed wrapper in `src/lib/services.ts`.
|
|
3. Consume from page/component through the service wrapper.
|
|
4. Run `pnpm check`.
|
|
|
|
## Stack
|
|
|
|
- React 18
|
|
- Vite
|
|
- TypeScript (strict)
|
|
- Tailwind CSS
|
|
- Radix UI primitives
|
|
- React Hook Form + Zod
|
|
- Axios
|
|
|
|
## License
|
|
|
|
MIT License
|