【2025】Electron + React 架构筑基——从零到一的跨平台开发

引言

源代码仓库：
Github仓库【electron_git】

你是否厌倦了在命令行中反复输入git status，却依然无法直观看到文件变化？
是否羡慕VS Code的丝滑Git集成，却苦恼于无法定制自己的专属工具？

本专栏将为你打开一扇新的大门------用Electron+React打造一个借鉴 Github Desktop 的Git桌面客户端。

在这里，你不仅会掌握Electron的进程通信、本地API调用的精髓，还能深入理解Git的底层运作机制。

从零搭建一个支持分支可视化、代码差异对比、提交历史图谱 的跨平台应用，

更将解锁自动化构建、性能调优、AI增强等高级技能。

效果图：

第一章：Electron + React 架构筑基------从零到一的跨平台开发

1.1 为什么Electron是桌面端开发的终极选择？

技术选型对比

方案	开发成本	性能	跨平台	原生能力接入
Electron	低	中	全平台	直接调用
Qt	高	高	全平台	需C++封装
Flutter Desktop	中	高	全平台	插件依赖

Electron 开发桌面端应用的核心优势（前端开发者视角）

1. 技术栈无缝迁移

直接复用 Web 技术
HTML/CSS/JS(TS) + Chrome 渲染引擎，无需学习传统桌面开发语言
主流框架兼容
React/Vue/Angular/Svelte + Ant Design/Element UI 等生态无缝衔接
工程化工具延续
Webpack/Babel/ESLint + Chrome DevTools 调试体验完全保留

2. 跨平台开发效率

多平台构建
electron-builder 一键生成 Windows/macOS/Linux 安装包
代码复用率高
90%+ 代码跨平台通用，仅需少量系统 API 适配

3. Node.js 扩展能力

系统级操作
文件读写/系统托盘/硬件交互/进程管理突破浏览器沙盒限制
混合开发能力
集成 SQLite/Express.js，甚至调用 Python/C++ 模块

4. 成熟生态支持

npm 海量模块
直接使用 200 万+ npm 包（如 fs-extra/lowdb）
开发工具链
electron-forge/electron-react-boilerplate 等脚手架加速启动
商业级验证
VS Code/Slack/Figma 等成功案例背书

5. 渐进式增强体验

混合架构优化
Web 技术主体 + C++ Addon/WebAssembly 加速关键模块
敏捷迭代能力
支持热更新与远程内容动态加载

6. 全栈开发提效

前后端一体
主进程(Node.js) + 渲染进程(Chromium) 全链路掌控
快速原型验证
使用熟悉技术栈数小时构建 MVP

对于前端开发者而言，使用electron开发桌面端应用简直是水到渠成！

1.2 五分钟快速搭建Electron+React脚手架（Vite版）

开发环境

开发设备：mac/win
nodejs :20.18.2
react：18.x.x
react-redux：9.x.x
electron-vite：2.3.0
electron-builder：24.13.3
vite：5.3.1

bash 复制代码

# npm 6.x
npm create @quick-start/electron my-app --template react

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template react

# yarn
yarn create @quick-start/electron my-app --template react

# pnpm
pnpm create @quick-start/electron my-app --template react

为了方便有的同学 Ts 可能不太好，这里我们使用 Js 作为开发语言