Giter Club home page Giter Club logo

guokaigdg / react-enterprise-template Goto Github PK

View Code? Open in Web Editor NEW
428.0 7.0 25.0 24.36 MB

🚀 react模板 react项目模板 React18 + webpack5 + TypeScript4 + mobx6 + react-router-dom6 react 模板 基于react企业级模板 项目模板 简单模板 快速模板

Home Page: https://guokaigdg.github.io/react-enterprise-template/

License: MIT License

JavaScript 30.83% HTML 1.66% TypeScript 55.35% Shell 0.59% Less 11.57%
axios babel eslint mobx mobx-react mobx-react-lite prettier react react-hooks react-router-dom

react-enterprise-template's Introduction

react 模板



简体中文 | English

🔗 在线 Demo

👨🏻‍💻 项目说明

⚡️ 特性

  • 📦 开箱即用,无需配置
  • 📝 全面注释说明,学习低成本
  • 🚀 启动编译迅速
  • 🌱 极易定制, 拓展容易

🚀 技术栈

react TypeScriptwebpack axios mobx react-router-dom MIT

  • React v18
  • react-dom v18
  • TypeScript v4
  • webpack v5
  • axios v1
  • mobx v6
  • mobx-react-lite v3
  • react-router-dom v6

🎄 陆续更新内容:

⌛️ 安装项目依赖

  • node >= 16.0.0
  • npm >= 7.0.0
  • yarn >= 1.22.17
npm install
yarn
pnpm install

🚀 运行项目

npm
$ npm run start

yarn
$ yarn dev

📦 打包编译

npm run build:qa  // 测试环境
npm run build:prod  // 线上环境

🏷 分支说明

分支 说明
main 主分支
dev 开发分支
deploy demo 部署分支

代码提交规范

git <type>: <subject>
git commit -m “feat: 项目初始化”

type 参考:

fix       🐛 Bug修复
feature   ✨ 引入新特性
docs      📝 文档书写改动
prune     🔥 移除代码或文件
ui        💄 更新UI和样式文件
perf      ⚡ 性能相关优化
rocket    🚀 部署功能
style     🎨 style修改
init      🎉 初始化提交
release   🔖 发布版本
wip       🚧 正在进行中, 且有可能出现不稳定运行的提交
config    🔧 修改配置文件
refactot  🔨 重构(既不增加新功能, 也不修改bug的代码改动)
merge     🔀 合并分支

📂 目录结构

    ├── .vscode
    │   └──setting.json                 # 先于vscode全局的settings.json配置
    ├── doc                             # 开发文档记录
    ├── webpack                         # 打包编译
    │   └──config                       # webpack配置
    │       ├── webpack.common.js       # 基础配置
    │       ├── webpack.dev.js          # 开发环境配置
    │       └──webpack.prod.js          # 生产环境配置
    ├── pubilc
    │   ├──favicon.ico                  # HTML图标
    │   └──index.html                   # HTML入口模板
    ├── src
    |   ├── api                         # 接口配置
    |   ├── assets                      # 静态资源
    │   ├── components                  # 项目通用通用组件
    │   ├── http                        # 请求统一封装
    │   ├── httpinterface               # ts类型定义
    │   ├── constData                   # 系统内的常量列表
    │   ├── router                      # 统一路由入口
    │   ├── store                       # 数据共享
    │   ├── styles                      # 全局样式
    │   ├── utils                       # 工具库
    │   ├── view                        # 页面
    │   ├── App.tsx                     # 主界面
    │   └──index.tsx                    # 入口文件
    ├── .babelrc.js                     # babel配置
    ├── .editorconfig                   # 跨编辑器维护一致编码风格
    ├── .env.json                       # 环境变量配置
    ├── .eslintignore                   # ESLint忽略检测文件
    ├── .eslintrc.js                    # ESLint配置
    ├── .gitignore                      # git提交忽略文件
    ├── .npmrc
    ├── .prettierignore                 # prettierc忽略文件
    ├── .prettierrc                     # prettierc配置
    ├── .stylelintrc.js                 # 代码风格配置
    ├── LICENSE                         # 开源协议
    ├── package-lock.json               # npm安装包锁定管理
    ├── package.json                    # 依赖包管理
    ├── README.md                       # 项目说明
    ├── tsconfig.json                   # ts配置文件
    └── yarn.lock                       # yarn安装包锁定管理

📚 开发资料参考

🤝 如何贡献

  • 📬 有问题直接 issues 或者留言
  • 🧙‍♀️ 欢迎所有的贡献者,快来 Issus 或 Pull requests 成为贡献者吧

💡 开源协议

该项目的代码和文档基于  MIT License  开源协议。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.