react-template

使用 React + TS 构建的基础项目模版

---

简介

🚀🚀🚀 react-template 使用了最新的React18、React-Router v6、React-Hooks、Vite4、Zustand、Typescript等主流技术开发，集成 Dark Mode(暗黑)模式，并且持久化保存，集成了代码规范检查工具Eslint、Prettier、Stylelint。你可以在此之上直接开发你的业务代码！希望你能喜欢。👋👋👋

注：如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！

✨ 项目功能

• 🚀 采用最新技术栈开发：React18、React-Router v6、React-Hooks、TypeScript、Vite4
• 🚀 采用 Vite4 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理…）
• 🚀 整个项目集成了 TypeScript
• 🚀 使用 Zustand 做状态管理，轻量、简单、易用
• 🚀 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范（项目规范配置）
• 🚀 使用 husky、lint-staged、commitlint 规范提交信息（项目规范配置）

基础知识

提前了解和学习这些知识会对使用本项目有很大的帮助。

• React - 熟悉 React 基础语法
• React-Router - 熟悉 React-Router基本使用
• Zustand - 熟悉 Zustand 基本使用
• Vite - 熟悉 Vite 特性
• TypeScript - 熟悉 TypeScript 基本语法
• Icones - 本项目推荐图标库，当然你也可以使用其他图标库
• Es6+ - 熟悉 ES6 基本语法

环境准备

本地环境需要安装 pnpm7.x、Node.js 和 Git

• 必须使用pnpm7.x，否则依赖可能安装不上。
• Node.js 版本要求12.x以上，这里推荐 16.x 及以上。

Vscode 配套插件

如果你使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

• ES7+ React/Redux/React-Native snippets - react 开发必备
• CSS Modules - css 模块化支持
• ESLint - 脚本代码检查
• Prettier - 代码格式化
• Stylelint - css 格式化

安装和使用

克隆使用

# 克隆项目
git clone https://github.com/sankeyangshu/react-template.git

# 进入项目目录
cd react-template

# 安装依赖 - 推荐使用pnpm
pnpm install

# 启动服务
pnpm dev

# 打包发布
pnpm build

如何贡献

你可以提一个 issue 或者提交一个 Pull Request。

Pull Request:

1. Fork 代码
2. 创建自己的分支: git checkout -b feat/xxxx
3. 提交你的修改: git commit -am 'feat(function): add xxxxx'
4. 推送您的分支: git push origin feat/xxxx
5. 提交 pull request

Git 贡献提交规范

• feat: 新增功能
• fix: 修复 bug
• docs: 文档变更
• style: 代码格式（不影响功能，例如空格、分号等格式修正）
• refactor: 代码重构（不包括 bug 修复、功能新增）
• perf: 性能优化
• test: 添加、修改测试用例
• build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
• ci: 修改 CI 配置、脚本
• chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
• revert: 回滚 commit

浏览器支持

• 本地开发推荐使用 Chrome 最新版浏览器 Download。
• 生产环境支持现代浏览器，不在支持 IE 浏览器，更多浏览器可以查看 Can I Use Es Module。

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

许可证

MIT License