React-Electron-Template

简介

一个基于react18和electron的模板项目，包含了常用的状态管理和UI库，可以直接使用。

状态管理

react的常用状态管理有：redux, mobx, hox, zustand
redux又二次封装得到：redux tookit, dva, rematch

由于我是从vue3转过来的，期望对齐vue3的pinia，尽可能做到统一，降低学习成本。
看了许多状态管理库，经过筛选，最后锁定在zustand和hox，再仔细对比后选择了hox

项目结构

vite-reactts-electron-starter
├─ electron // electron相关配置
├─ main // electron打包产物
├─ src // 主要代码入口
│ ├─ api // 服务器接口api
│ ├─ common // 静态资源
│ │ ├─ images
│ │ └─ styles // 全局样式
│ ├─ components // 组件
│ ├─ pages // 页面
│ ├─ router // 路由
│ ├─ store // 状态管理器
│ ├─ types // TS类型
│ ├─ App.tsx
│ ├─ index.html
│ ├─ index.scss
│ └─ main.tsx // 入口文件
├─ LICENSE.md
├─ package.json
├─ pnpm-lock.yaml
├─ postcss.config.js
├─ README.md
├─ tailwind.config.js
├─ tsconfig.json
├─ vite.config.ts
└─ yarn.lock

快速开始

1. 克隆仓库

git clone https://github.com/Minf97/electron-react-vite.git

2. 安装依赖

// cnpm i 或者 yarn都可
// 似乎npm和cnpm会有node报错问题，建议pnpm
pnpm install

3. 运行项目

npm run dev

技术栈

• 构建工具：vite
• 框架和语言：electron + react + typescript
• hooks： ahooks
• 状态管理：hox
• 第三方库：
  • tailwind原子CSS
  • frame motion动效库
  • antd组件库
  • antd-pro中后台组件库
  • swr数据获取和缓存(暂未使用，未来考虑加入)
  • umi-request网络请求库
• UI库：iconpark字节UI库 + @antd/icons
• 中间件：CSS Modules + postCSS

参考文章

• antd与tailwind样式冲突
• electron圆角
• antdButton自定义波纹

踩坑记录

1. 调整antdIcon大小需要调整fontSize而不是宽高