Electron+React+七牛云实战跨平台桌面应用

如果你写 React 已经有一段时间，组件、状态、副作用都能处理，但一提到"把网页变成能双击打开的桌面程序"就卡住，这门课补的就是这一段。它不是又讲一遍 React 基础，而是拿一个真实能跑起来的项目——云同步 Markdown 文档管理器——把 Electron 的主进程/渲染进程模型、Node 原生模块调用、云存储上传这几块你在日常业务里很少碰到的部分串起来。

先确认缺口在哪

Electron 对前端来说几乎是绕不开的桌面方案，但多数人第一次上手会撞到同一堵墙：浏览器里那套安全边界和文件系统权限在这儿全变了。渲染进程不能直接读写本地文件，你想扫描一个 Markdown 文件夹、想监听文件变化、想把文件上传到云端，都得通过进程间通信绕一圈。这门课解决的正是这种"知道该做什么，但不知道在哪一层做"的问题。

• 能写 React 组件，但没接触过 Node 的 fs、path、child_process 这类模块；
• 用过 localStorage，但没做过真正的本地文件持久化，不清楚用户文档该存在哪、怎么存才不丢；
• 调过 HTTP 接口上传文件，但没处理过大文件分片、上传进度、断点续传；
• 对 React Hooks 的印象还停留在 useState/useEffect 写计数器，没在跨进程数据同步这种场景下用过。

上面中两条以上，这门课的密度对你就是合适的。全都中，建议先补一下 Node 基础的文件操作再进来，节奏会舒服很多。

课程在练什么

核心是把一个 Markdown 编辑器从"能编辑"做到"能管理、能同步"。编辑和预览属于前端熟区，难点在后面：文档列表怎么从本地目录实时读出来，新增、重命名、删除怎么同步到磁盘，以及七牛云这条链路——什么时候触发上传、密钥怎么放才不暴露在渲染进程里、上传失败怎么重试。

React Hooks 在这里不是语法演示，而是用来组织跨进程的状态：主进程推过来的文件变更怎么变成组件里的 state，多个窗口或多次操作之间怎么保持一致。你会看到自定义 Hook 是怎么把进程通信封装成看起来像普通异步请求的东西的。

配套练习怎么用

章节笔记适合在动手前扫一遍，把这一节的进程模型和数据流先理清楚，再跟着写代码，比边看边敲效率高。每完成两到三节，建议把当节的通信链路画成一张图：谁发消息、谁接收、数据经过哪几个模块。这个动作看起来多余，但面试被问到"你的桌面应用架构是怎样的"时，脑子里有图和没图差别很大。

云同步那部分务必自己申请一个七牛账号，用自己的 bucket 跑通一次完整上传。只看不练的话，密钥管理、上传凭证获取、回调处理这些坑你是感受不到的，而它们恰恰是实际项目里最容易出问题的地方。

看完应该能回答

• 主进程和渲染进程各自负责什么，为什么文件读写不能直接放在组件里做；
• 进程间通信有哪几种方式，同步和异步分别适合什么场景；
• 用户本地文档的存储路径怎么选，打包成安装包后路径会有什么变化；
• 七牛云的上传凭证为什么必须在服务端或主进程签发，直接放前端会有什么后果；
• 用自定义 Hook 封装跨进程调用时，卸载组件、重复触发这些边界怎么处理。

这五个问题答得顺，说明你不只是跟着敲了一遍，而是真的把桌面端这套思路接上了。答不上来的，回去翻对应章节的笔记，比重看视频快。

Electron几乎是 Web 开发人员开发桌面客户端的唯一途径，它天然适配任何前端开发框架，我们结合 React Hooks 这个新特性进行教学，结合七牛云和很多 Node 原生模块进行开发，来完成一个非常有吸引力的云同步 Markdown 文档管理应用。

课程推荐

《Electron+React+七牛云实战跨平台桌面应用》Electron几乎是 Web 开发人员开发桌面客户端的唯一途径，它天然适配任何前端开发框架，我们结合 React Hooks 这个新特性进行教学，结合七牛云和很多 Node 原生模块进行开发，来完成一个非常有吸引力的云同步 Markdown 文档管理应用。【技能收获】学完可掌握：React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（97 节）

*   1-1 学习本课程的收获以及案例展示（内附彩蛋）  (1808).mp4

*   2-1 配置 Electron 开发环境  (0711).mp4

*   2-2 进程和线程  (0802).mp4

*   2-3 主进程和渲染进程  (0704).mp4

*   2-4 创建 BrowserWindow  (1309).mp4

*   2-5 进程间的通信  (0620).mp4

*   2-6 使用 IPC 进行通信  (0842).mp4

*   2-7 使用 remote 实现跨进程访问  (0518).mp4

*   2-8 升级到 electron 7.0 以上的注意事项  (0514).mp4

*   3-1 React 简介和缘起  (0715).mp4

*   3-2 配置 React 开发环境..1  (0950).mp4

*   3-3 useState Hook  (1122).mp4

*   3-4 useEffect 不需要清除的 Effect  (0550).mp4

*   3-5 useEffect 需要清除的 Effect  (0927).mp4

*   3-6 useEffect 可控 effect  (1131).mp4

*   3-7 自定义 Hook（一）  (0835).mp4

*   3-8 HOC 的概念和缺点  (0528).mp4

*   3-9 自定义Hook（二）  (1319).mp4

*   3-10 Hook 规则和其他 Hook  (0505).mp4

*   4-1 全局需求  (0809).mp4

*   4-2 将 UI 拆分成组件  (0647).mp4

*   4-3 配置开发环境（一）  (0814).mp4

*   4-4 配置开发环境（二）  (1048).mp4

*   4-5 文件结构和代码规范  (0754).mp4

*   5-1 为项目选择样式库  (0926).mp4

*   5-2 FileSearch 组件（一）  (1553).mp4

*   5-3 FileSearch 组件（二）  (1159).mp4

*   5-4 为项目选择图标库  (1227).mp4

*   5-5 使用 PropTypes 进行类型检查  (0728).mp4

*   5-6 FileList 组件开发（一）  (1441).mp4

*   5-7 FileList 组件开发（二）  (1229).mp4

*   5-8 第一个自定义 Hook - useKeyPress  (0854).mp4

*   5-9 左侧收尾工作  (1231).mp4

*   6-1 TabList 需求和属性分析  (0541).mp4

*   6-2 TabList 组件代码（一）  (1444).mp4

*   6-3 TabList 组件代码（二）  (1102).mp4

*   6-4 选择 MarkDown 编辑器  (0613).mp4

*   6-5 引入 easyMDE 编辑器  (0702).mp4

*   7-1 分析设计 State 结构  (0647).mp4

*   7-2 分析应用数据流  (0522).mp4

*   7-3 给 App 组件添加状态  (1130).mp4

*   7-4 添加数据处理行为（一）  (1433).mp4

*   7-5 添加数据处理行为（二）  (1133).mp4

*   7-6 添加新建文件流程逻辑  (1343).mp4

*   7-7 Flatten State 介绍  (0506).mp4

*   7-8 修改 State 为 Flatten 结构编码  (1044).mp4

*   8-1 在 React 中使用 Node.js  (0618).mp4

*   8-2 FS 模块初试牛刀  (0855).mp4

*   8-3 FS 模块使用 Promise **  (0924).mp4

*   8-4 在 App 中集成文件操作  (1315).mp4

*   8-5 数据持久化解决方案  (0653).mp4

*   8-6 将 Electron store 集成到 App 中  (1402).mp4

*   8-7 添加持久化数据逻辑代码  (0650).mp4

*   8-8 由一个 Bug 引发的思考  (0834).mp4

*   9-1 导入文件对话框（一）  (0946).mp4

*   9-2 导入文件对话框（二）  (1831).mp4

*   9-3 添加上下文菜单（一）  (0909).mp4

*   9-4 添加上下文菜单第二部分  (1125).mp4

*   9-5 添加上下文菜单最终实现  (1402).mp4

*   9-6 原生应用菜单简介  (0649).mp4

*   9-7 添加原生应用菜单编码（一）  (1129).mp4

*   9-8 添加原生应用菜单编码（二）  (1037).mp4

*   9-9 设置窗口解决方案和流程分析  (0539).mp4

*   9-10 添加设置窗口编码（一）  (1512).mp4

*   9-11 添加设置窗口编码（二）  (1203).mp4

*   10-1 对象存储平台简介  (0532).mp4

*   10-2 七牛云平台使用简介  (0442).mp4

*   10-3 初始七牛 SDK  (1300).mp4

*   10-4 云文件操作类编码（一）  (1222).mp4

*   10-5 云文件操作类编码（二）  (1116).mp4

*   10-6 获得下载链接  (1451).mp4

*   10-7 stream 流的概念  (0750).mp4

*   10-8 stream 流的简单用法  (1009).mp4

*   10-9 实现文件下载方法  (1403).mp4

*   11-1 在设置窗口添加七牛云参数（一）  (1001).mp4

*   11-2 在设置窗口添加七牛云参数（二）  (0702).mp4

*   11-3 添加云同步菜单  (0803).mp4

*   11-4 动态修改菜单项  (0906).mp4

*   11-5 自动同步单个文件至七牛云（一）  (1015).mp4

*   11-6 自动同步单个文件至七牛云（二）  (0956).mp4

*   11-7 自动下载云文件至本地（一）  (0848).mp4

*   11-8 自动下载云文件至本地（二）  (1153).mp4

*   11-9 为应用添加 Loading 效果  (0759).mp4

*   11-10 完成全部文件同步到七牛云功能编码  (0956).mp4

*   11-11 使用流程图和伪代码解决剩下需求  (0853).mp4

*   12-1 安装 Electron builder  (0442).mp4

*   12-2 为生产环境 build 代码  (1022).mp4

*   12-3 添加配置文件  (0741).mp4

*   12-4 调试整个pack流程  (1031).mp4

*   12-5 探究打包过程和生成文件内容  (0714).mp4

*   12-6 生成安装包  (0907).mp4

*   12-7 Electron 打包体积优化第一部分- 质的飞跃  (0521).mp4

*   12-8 Electron 打包体积优化第二部分-极限优化  (1004).mp4

*   12-9 自动更新第一部分 - 自动发布 release  (0936).mp4

*   12-10 自动更新第二部分 -  添加自动更新功能  (0727).mp4

*   12-11 自动更新 第三部分 - 本地调试自动更新功能  (0638).mp4

*   13-1 课程总结  (0752).mp4