如果你已经能写 React，也大概知道 Electron 是什么，但真要自己从零做一个能装到别人电脑上、能存文件、能弹原生菜单的桌面应用，大概率会卡在几个具体的位置：主进程和渲染进程到底怎么分工，preload 和 remote 该用哪个，打包之后路径全乱了怎么办，用户上传的文件放哪、怎么同步。这门课就是冲这些缺口去的。
先确认自己缺的是哪一块
这门课不适合完全没碰过前端的人。它默认你写过组件、调过 npm、能看懂 Promise，否则前两章就会跟不上。它真正补的是三块能力：
- Electron 的进程模型。很多人写过页面，但没写过「一个应用同时跑主进程和多个渲染进程」，不知道哪些 API 只能在主进程用，哪些必须绕一圈才能拿到。
- React 在桌面端的使用差异。浏览器里顺手的东西，到了桌面端要考虑窗口生命周期、路由在多窗口下怎么组织、状态在进程之间怎么传。
- 云端存储的接入。桌面应用不是纯本地玩具，文件得有地方去。七牛云在这里承担的是对象存储和同步的角色，涉及上传凭证怎么签发、密钥怎么不暴露在客户端。
进程通信和 remote 是第一个坎
课程里专门有讲进程间通信和使用 remote 实现跨进程访问的内容，这两块是新手最容易含糊过去的地方。看的时候建议带着问题：为什么官方更推荐 IPC 而不是直接开 remote？remote 用起来省事，代价是什么？如果你能自己说清楚「渲染进程想调用主进程能力时，消息是怎么走一个来回的」，这一章就算过关了。否则后面加原生菜单、读写本地文件时，你只能照抄代码，改一行就崩。
原生菜单、窗口与打包后的真实问题
添加原生应用菜单这一节看起来只是调几个 API，实际会牵出不少细节：菜单是挂在应用级别还是窗口级别，macOS 和 Windows 的菜单栏行为不一样，快捷键在不同系统下怎么注册。这类「平台差异」是跨平台开发绕不开的成本，课程把它们放在实战环节里讲，比单独讲概念更容易记住。
更值得盯的是打包环节。开发时能跑的代码，打包后经常出现资源路径找不到、主进程入口配错、渲染进程加载白屏。这部分如果课程里有覆盖，务必跟着走一遍完整流程，而不是只看不练——打包问题几乎不可能靠读代码解决。
七牛云接入要关注什么
把对象存储接进桌面客户端，最容易被忽略的是安全问题。上传凭证不应该硬编码在客户端里，也不该让前端直接持有长期密钥。看这部分时，重点确认两件事：凭证是服务端签发还是客户端自己算的，上传失败和断网重试有没有处理。这两点决定你做出来的是练习项目还是能给别人用的东西。
看完应该能回答的问题
- 主进程、渲染进程、preload 三者各自的职责边界在哪？
- 不用 remote 的前提下，渲染进程要读取本地文件该怎么实现？
- React 应用被打包进 Electron 后，路由和窗口之间怎么对应？
- 七牛云的上传凭证从哪来，为什么不能写在客户端？
- 同一个应用在 Windows 和 macOS 上，菜单和快捷键要做哪些分别处理？
练习建议不要只跟着敲一遍就结束。把案例里的云存储换成你自己的 Bucket，把菜单改成你需要的那几项，再完整打一次包发给别人装。能跑通这一轮，这门课的内容才算真的落到你手上。配套资料里有案例展示和分节演示，建议先看案例展示，判断哪些章节是你需要的，再决定投入顺序——缺什么补什么，不必按顺序全刷。
Electron+React+七牛云实战跨平台桌面应用开发
实战跨平台桌面应用开发
编辑点评
课程深入浅出，结合Electron、React和七牛云，全面讲解跨平台桌面应用开发技巧。
⭐ 编辑推荐
掌握Electron和React，实现跨平台桌面应用开发，七牛云助力云端存储与同步。
课程亮点
• Electron+React实战
• 七牛云集成
• 跨平台桌面应用开发
课程目录
Electron+React+七牛云实战跨平台桌面应用资料.png [493.5 KB] 9-7 添加原生应用菜单编码（一） (1129)_().mp4 [60.9 MB] 10-2 七牛云平台使用简介 (0442)_().mp4 [23.1 MB] 2-7 使用 remote 实现跨进程访问 (0518)__().mp4 [15.1 MB] 12-5 探究打包过程和生成文件内容 (0714)_().mp4 [41.9 MB] 1-1 学习本课程的收获以及案例展示（内附彩蛋） (1808)__().mp4 [55.4 MB] 2-5 进程间的通信 (0620)_().mp4 [59.8 MB] 3-5 useEffect 需要清除的 Effect (0927)_().mp4 [69.0 MB] 2-6 使用 IPC 进行通信 (0842)_().mp4 [45.0 MB] 9-10 添加设置窗口编码（一） (1512)_().mp4 [78.9 MB] 9-2 导入文件对话框（二） (1831)_().mp4 [98.2 MB] 9-3 添加上下文菜单（一） (0909)_().mp4 [56.0 MB] 3-10 Hook 规则和其他 Hook (0505)_().mp4 [47.9 MB] 3-4 useEffect 不需要清除的 Effect (0550)_().mp4 [51.0 MB] 2-3 主进程和渲染进程 (0704)_().mp4 [38.5 MB] 2-1 配置 Electron 开发环境 (0711)__().mp4 [31.9 MB] 7-6 添加新建文件流程逻辑 (1343)_().mp4 [68.6 MB] 12-3 添加配置文件 (0741)_().mp4 [40.2 MB] 11-5 自动同步单个文件至七牛云（一） (1015)_().mp4 [50.9 MB] 3-3 useState Hook (1122)_().mp4 [60.5 MB] 12-10 自动更新第二部分 - 添加自动更新功能 (0727)_().mp4 [38.3 MB] 7-4 添加数据处理行为（一） (1433)_().mp4 [72.7 MB] 2-8 升级到 electron 7.0 以上的注意事项 (0514)_().mp4 [28.8 MB] 5-5 使用 PropTypes 进行类型检查 (0728)_().mp4 [48.5 MB] 8-7 添加持久化数据逻辑代码 (0650)_().mp4 [36.2 MB] 8-8 由一个 Bug 引发的思考 (0834)_().mp4 [45.1 MB] 6-4 选择 MarkDown 编辑器 (0613)_().mp4 [38.5 MB] 4-1 全局需求 (0809)_().mp4 [55.9 MB] react-hooks-master_().zip [143.6 KB] 11-6 自动同步单个文件至七牛云（二） (0956)_().mp4 [51.2 MB] 5-8 第一个自定义 Hook - useKeyPress (0854)_().mp4 [50.7 MB] 5-2 FileSearch 组件（一） (1553)_().mp4 [102.9 MB] 6-5 引入 easyMDE 编辑器 (0702)_().mp4 [34.9 MB] 9-9 设置窗口解决方案和流程分析 (0539)_().mp4 [30.7 MB] 9-11 添加设置窗口编码（二） (1203)_().mp4 [64.8 MB] 9-8 添加原生应用菜单编码（二） (1037)_().mp4 [55.3 MB] 7-2 分析应用数据流 (0522)_().mp4 [30.6 MB] 6-3 TabList 组件代码（二） (1102)_().mp4 [59.2 MB] 3-9 自定义Hook（二） (1319)_().mp4 [70.1 MB] 9-4 添加上下文菜单第二部分 (1125)_().mp4 [60.6 MB] 3-1 React 简介和缘起 (0715)_().mp4 [38.3 MB] 4-5 文件结构和代码规范 (0754)_().mp4 [42.4 MB] 10-9 实现文件下载方法 (1403)_().mp4 [72.0 MB] 11-10 完成全部文件同步到七牛云功能编码 (0956)_().mp4 [50.4 MB] 12-4 调试整个pack流程 (1031)_().mp4 [53.4 MB] 12-7 Electron 打包体积优化第一部分- 质的飞跃 (0521)_().mp4 [29.1 MB] 10-4 云文件操作类编码（一） (1222)_().mp4 [65.3 MB] 5-3 FileSearch 组件（二） (1159)_().mp4 [64.8 MB] 10-1 对象存储平台简介 (0532)_().mp4 [25.6 MB] 8-3 FS 模块使用 Promise 改造 (0924)_().mp4 [48.7 MB] 12-2 为生产环境 build 代码 (1022)_().mp4 [92.5 MB] 4-3 配置开发环境（一） (0814)_().mp4 [62.1 MB] 11-11 使用流程图和伪代码解决剩下需求 (0853)_().mp4 [45.7 MB] 7-1 分析设计 State 结构 (0647)_().mp4 [34.7 MB] 12-11 自动更新 第三部分 - 本地调试自动更新功能 (0638)_().mp4 [40.8 MB] 4-4 配置开发环境（二） (1048)_().mp4 [56.1 MB] 6-2 TabList 组件代码（一） (1444)_().mp4 [77.9 MB] 9-1 导入文件对话框（一） (0946)_().mp4 [77.5 MB] 3-2 配置 React 开发环境..1 (0950)_().mp4 [51.0 MB] 3-7 自定义 Hook（一） (0835)_().mp4 [67.4 MB] electron-demo-master_().zip [32.4 KB] 10-6 获得下载链接 (1451)_().mp4 [77.2 MB] 8-1 在 React 中使用 Node.js (0618)_().mp4 [54.9 MB] 10-3 初始七牛 SDK (1300)_().mp4 [67.8 MB] 7-7 Flatten State 介绍 (0506)_().mp4 [28.0 MB] 10-8 stream 流的简单用法 (1009)_().mp4 [64.5 MB] 12-6 生成安装包 (0907)_().mp4 [49.6 MB] 5-1 为项目选择样式库 (0926)_().mp4 [48.6 MB] 12-9 自动更新第一部分 - 自动发布 release (0936)_().mp4 [49.8 MB] 11-1 在设置窗口添加七牛云参数（一） (1001)_().mp4 [58.5 MB] 11-9 为应用添加 Loading 效果 (0759)_().mp4 [45.9 MB] 11-4 动态修改菜单项 (0906)_().mp4 [49.4 MB] 13-1 课程总结 (0752)__().mp4 [10.9 MB] 12-8 Electron 打包体积优化第二部分-极限优化 (1004)_().mp4 [54.5 MB] 4-2 将 UI 拆分成组件 (0647)_().mp4 [35.0 MB] 7-8 修改 State 为 Flatten 结构编码 (1044)_().mp4 [56.7 MB] 11-8 自动下载云文件至本地（二） (1153)_().mp4 [60.0 MB] 9-5 添加上下文菜单最终实现 (1402)_().mp4 [72.5 MB] 3-6 useEffect 可控 effect (1131)_().mp4 [76.8 MB] 10-7 stream 流的概念 (0750)_().mp4 [60.7 MB] 8-2 FS 模块初试牛刀 (0855)_().mp4 [48.9 MB] 12-1 安装 Electron builder (0442)_().mp4 [24.4 MB] 8-5 数据持久化解决方案 (0653)_().mp4 [62.5 MB] cloud-doc-master_().zip [874.9 KB] 2-2 进程和线程 (0802)_().mp4 [27.8 MB] 5-4 为项目选择图标库 (1227)_().mp4 [91.2 MB] 6-1 TabList 需求和属性分析 (0541)_().mp4 [38.6 MB] 3-8 HOC 的概念和缺点 (0528)_().mp4 [46.2 MB] 2-4 创建 BrowserWindow (1309)_().mp4 [73.5 MB] 7-5 添加数据处理行为（二） (1133)_().mp4 [57.7 MB] 10-5 云文件操作类编码（二） (1116)_().mp4 [58.7 MB] 8-4 在 App 中集成文件操作 (1315)_().mp4 [69.0 MB] 8-6 将 Electron store 集成到 App 中 (1402)_().mp4 [69.7 MB] 9-6 原生应用菜单简介 (0649)_().mp4 [34.0 MB] 5-6 FileList 组件开发（一） (1441)_().mp4 [102.0 MB] 11-3 添加云同步菜单 (0803)_().mp4 [40.3 MB] 11-7 自动下载云文件至本地（一） (0848)_().mp4 [46.3 MB] 5-9 左侧收尾工作 (1231)_().mp4 [63.8 MB] 7-3 给 App 组件添加状态 (1130)_().mp4 [56.6 MB] 5-7 FileList 组件开发（二） (1229)_().mp4 [64.8 MB]
适合人群
- 前端开发者
- 桌面应用爱好者
- React框架用户
学习收获
学会跨平台应用开发
掌握Electron框架
实现云端数据同步
祝您学习愉快！
学有所成，前程似锦！
