CLAUDE.md@by-framework/reactA

CLAUDE.md@by-framework/react from overseastelegramaliterateperson865/awesome-claude-md is a CLAUDE.md file: the standing instructions Claude Code reads in that repo.

mdr add overseastelegramaliterateperson865/awesome-claude-md/by-framework/react/CLAUDE.md@git:20260320.9b01aca

Pins git:20260320.9b01aca in mdr.lock. Pin the fingerprint instead.

Audit grade

A, 14 of 14 checks passed

Kind

CLAUDE.md file

Repository

overseastelegramaliterateperson865/awesome-claude-md

Path

by-framework/react/CLAUDE.md

Versions recorded

2

Latest version

git:20260320.9b01aca, committed Mar 20, 2026

First version recorded

Mar 20, 2026

Size

2,014 bytes

Repository stars

3

License

MIT

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# React 19 + Vite SPA 项目

## 技术栈
- React 19 + TypeScript，Vite 6 构建
- React Router v7 路由管理
- Zustand 状态管理（轻量场景用 Jotai）
- Tailwind CSS 4 样式方案
- Vitest + React Testing Library 测试

## 项目结构
```
src/
  components/    # 可复用 UI 组件（纯展示，无业务逻辑）
  pages/         # 页面级组件，对应路由
  hooks/         # 自定义 hooks
  stores/        # Zustand store 定义
  lib/           # 工具函数、API 客户端
  types/         # TypeScript 类型定义
```

## 开发规范
- 组件使用函数式写法 + TypeScript，Props 用 interface 定义
- 优先使用 React 19 新特性：`use()` hook 处理 Promise/Context，`useOptimistic` 管理乐观更新
- 了解 Server Components 概念，但本项目为纯 SPA，所有组件均为 Client Components
- 使用 `React.lazy()` + `Suspense` 做路由级代码分割
- 状态管理原则：组件本地状态用 `useState`，跨组件共享用 Zustand，服务端状态用 TanStack Query

## 路由
- React Router v7 使用 `createBrowserRouter` + `RouterProvider` 模式
- 数据加载用 `loader`，表单提交用 `action`
- 路由定义集中在 `src/router.tsx`

## 样式
- Tailwind CSS utility class 优先，组件变体用 `clsx` 或 `cva` 管理条件样式

## 测试
- 运行测试：`npx vitest` 或 `npx vitest run`
- 单个文件：`npx vitest src/components/Button.test.tsx`
- 组件测试用 `render` + `screen` + `userEvent`，优先按角色/文本查询 DOM
- 异步断言使用 `waitFor` 或 `findBy*` 查询

## 常用命令
```bash
npm run dev          # 启动开发服务器（默认 5173 端口）
npm run build        # 生产构建，输出到 dist/
…

Read the whole file at its exact version.

How to install

mdr add overseastelegramaliterateperson865/awesome-claude-md/by-framework/react/CLAUDE.md@sha256:e58a181a31738f92

[![mdr](https://markdownregistry.com/badge/art_bctklebu7azth3an.svg)](https://markdownregistry.com/a/art_bctklebu7azth3an)

Versions

The registry has recorded 2 versions of this file, all committed on Mar 20, 2026.

Audit of the latest version

Source

API

GET https://markdownregistry.com/api/v1/artifacts/art_bctklebu7azth3an
GET https://markdownregistry.com/api/v1/resolve?ref=overseastelegramaliterateperson865/awesome-claude-md/by-framework/react/CLAUDE.md
GET https://markdownregistry.com/api/v1/blob/e58a181a31738f927fe0e5aaccbe3473471628832c5b3958231a75667745d979

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: what a CLAUDE.md file is · keeping AGENTS.md and CLAUDE.md in sync · which agent file does what.

More from overseastelegramaliterateperson865/awesome-claude-md

Every file in overseastelegramaliterateperson865/awesome-claude-md

Browse by kind, by grade A, or by owner.