Skip to content

sankeyangshu/react-template

Repository files navigation

react-template

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

license version languages


简介

🚀🚀🚀 react-template 使用了最新的React18React-Router v6React-HooksVite4ZustandTypescript等主流技术开发,集成 Dark Mode(暗黑)模式,并且持久化保存,集成了代码规范检查工具EslintPrettierStylelint。你可以在此之上直接开发你的业务代码!希望你能喜欢。👋👋👋

注:如果对您有帮助,您可以点右上角 "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.xNode.jsGit

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

Vscode 配套插件

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

安装和使用

克隆使用

# 克隆项目
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
IE
 Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

许可证

MIT License