React Simple Template

一个现代化的React项目模板，集成了TypeScript、Vite、Tailwind CSS等最新技术栈，提供完整的开发和发布解决方案。

✨ 特性

• 🚀 React 18 + TypeScript - 现代化的前端开发体验
• ⚡ Vite - 极速的构建工具和开发服务器
• 🎨 Tailwind CSS - 实用优先的CSS框架
• 🧭 React Router 6 - 声明式路由管理
• 🔧 ESLint + Prettier - 代码质量和格式化
• 🐻 Zustand - 轻量级状态管理
• 📦 组件化架构 - 可复用的UI组件
• 🔄 自动化发布 - GitHub Actions + npm发布
• 📱 响应式设计 - 移动端友好
• 🎯 TypeScript严格模式 - 类型安全保障

🛠️ 技术栈

• 前端框架: React 18
• 类型系统: TypeScript
• 构建工具: Vite
• 样式框架: Tailwind CSS
• 路由管理: React Router 6
• 状态管理: Zustand
• 代码质量: ESLint + Prettier
• 图标库: Lucide React
• 工具库: clsx, tailwind-merge

📦 安装

作为npm包使用

# 使用npm
npm install react-simple-template

# 使用pnpm
pnpm add react-simple-template

# 使用yarn
yarn add react-simple-template

克隆项目

# 克隆仓库
git clone https://github.com/yourusername/react-simple-template.git
cd react-simple-template

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

🚀 快速开始

作为库使用

// 导入组件
import { App, Counter, HomePage, AboutPage, ContactPage } from 'react-simple-template';

// 导入hooks
import { useCounter } from 'react-simple-template';

// 导入工具函数
import { formatDate, validateEmail } from 'react-simple-template';

// 使用组件
function MyApp() {
  return (
    <div>
      <HomePage />
      <Counter />
    </div>
  );
}

开发模式

# 启动开发服务器
pnpm dev

# 代码检查
pnpm lint

# 类型检查
pnpm check

# 构建项目
pnpm build

# 构建库
pnpm build:lib

# 预览构建结果
pnpm preview

📁 项目结构

react-simple-template/
├── .github/                 # GitHub配置
│   ├── workflows/          # GitHub Actions工作流
│   ├── ISSUE_TEMPLATE/     # Issue模板
│   └── pull_request_template.md
├── public/                 # 静态资源
├── scripts/               # 发布脚本
│   ├── github-release.sh  # GitHub发布脚本
│   └── deploy.sh          # 自动化部署脚本
├── src/                   # 源代码
│   ├── components/        # 可复用组件
│   ├── hooks/            # 自定义hooks
│   ├── pages/            # 页面组件
│   ├── utils/            # 工具函数
│   ├── App.tsx           # 主应用组件
│   ├── main.tsx          # 应用入口
│   └── index.ts          # 库导出入口
├── supabase/             # Supabase配置
├── dist/                 # 构建输出
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript配置
├── tsconfig.lib.json     # 库构建TypeScript配置
├── vite.config.ts        # Vite配置
├── tailwind.config.js    # Tailwind配置
├── .npmignore           # npm发布忽略文件
├── PUBLISH.md           # npm发布指南
├── GITHUB_RELEASE.md    # GitHub发布指南
└── README.md            # 项目说明

🎯 功能特性

页面组件

• 首页 (HomePage) - 项目介绍和导航
• 关于页面 (AboutPage) - 项目详细信息
• 联系页面 (ContactPage) - 联系表单
• 计数器页面 (Counter) - 状态管理示例

自定义Hooks

• useCounter - 计数器状态管理
• 更多hooks可根据需要扩展

工具函数

• formatDate - 日期格式化
• validateEmail - 邮箱验证
• cn - 类名合并工具

📚 发布指南

npm发布

详细的npm发布指南请参考 PUBLISH.md

# 发布到npm
npm run publish:npm

# 版本管理
npm run version:patch  # 补丁版本
npm run version:minor  # 次要版本
npm run version:major  # 主要版本

GitHub发布

详细的GitHub发布指南请参考 GITHUB_RELEASE.md

# 使用脚本发布
./scripts/github-release.sh patch
./scripts/deploy.sh patch

# 使用npm脚本
npm run release:patch
npm run deploy:all

🔧 配置说明

ESLint配置

项目使用严格的ESLint配置，如需自定义规则，可以修改 eslint.config.js：

export default tseslint.config({
  extends: [
    ...tseslint.configs.recommendedTypeChecked,
    ...tseslint.configs.strictTypeChecked,
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

Tailwind CSS配置

可以在 tailwind.config.js 中自定义主题和扩展：

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // 自定义配置
    },
  },
  plugins: [],
}

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🔗 相关链接

• npm包地址
• GitHub仓库
• 问题反馈
• 更新日志

💡 支持

如果这个项目对你有帮助，请给它一个 ⭐️！

如果你有任何问题或建议，欢迎创建 Issue 或 Discussion。