Files
qiming/qiming-xagi-frontend-templates/packages/react-vite
2026-06-01 13:43:09 +08:00
..

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

pnpm install
pnpm dev

Command Contract

Use this command set consistently (same contract as vue3-vite).

# 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):

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)

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