standard-react-template

基于 React 19 + Vite 8 + TanStack Router + Tailwind CSS v4 的前端项目模板。

技术栈

技术	版本	用途
React	^19.x	UI 框架
Vite	^8.x	构建工具
TypeScript	^6.x	类型系统
TanStack Router	latest	文件路由
Tailwind CSS	^4.x	原子化 CSS
Biome	^2.x	代码格式化与检查
React Compiler	^1.0.0	编译时自动优化

快速开始

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

脚本命令

命令	说明
pnpm dev	启动开发服务器（--host 允许局域网访问）
pnpm build	生产环境构建
pnpm preview	本地预览生产构建
pnpm generate-routes	重新生成 TanStack Router 路由树
pnpm check	Biome 格式化 + 检查（推荐日常使用）
pnpm format	仅格式化代码
pnpm lint	仅执行代码检查

项目结构

├── public/              # 静态资源
├── src/
│   ├── routes/          # 路由组件（TanStack Router 文件路由）
│   │   ├── __root.tsx   # 根路由（全局布局、样式引入）
│   │   └── index.tsx    # 首页路由
│   ├── router.tsx       # 路由器工厂函数（SSR/Hydration 场景）
│   ├── main.tsx         # 应用入口（CSR 模式）
│   ├── routeTree.gen.ts # 自动生成，勿手动修改
│   └── styles.css       # 全局样式（Tailwind CSS v4 导入）
├── index.html           # HTML 入口
├── vite.config.ts       # Vite 配置
├── tsconfig.json        # TypeScript 配置
├── biome.json           # Biome 配置
├── tsr.config.json      # TanStack Router 配置
└── package.json

路由

本项目使用 TanStack Router 的文件路由系统：

• 在 src/routes/ 目录下创建 *.tsx 文件即可定义路由
• __root.tsx 为根路由，用于放置全局布局和组件
• 添加或删除路由文件后，运行 pnpm generate-routes 重新生成路由树

# 新增路由文件后
pnpm generate-routes

样式

使用 Tailwind CSS v4，通过 CSS 原生导入方式配置：

/* src/styles.css */
@import 'tailwindcss';

无需 tailwind.config.js，Biome 会自动校验并排序 Tailwind 类名。

代码规范

格式化 & 检查

• 双引号、Tab 缩进、行宽 200
• 自动排序 Tailwind CSS 类名
• routeTree.gen.ts 和 styles.css 排除在格式化之外

Git Hooks

通过 simple-git-hooks 配置：

• pre-commit：自动执行 pnpm lint
• commit-msg：使用 conventional commits 规范校验提交信息

React Compiler

项目默认启用了 React Compiler（编译时优化），无需手动使用 React.memo、useMemo、useCallback，编译器会自动处理缓存和重渲染优化。