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

这门课适合谁，不适合谁

如果你已经能写 React，但从来没碰过桌面端，这门课就是给你准备的。它不讲 React 基础语法，也不教 JavaScript 入门，默认你能看懂函数组件、useState、useEffect 这些东西，否则前几讲就会卡住。反过来，如果你的目标是做移动端 App，或者只想了解一下 Electron 是什么，那没必要跟着做完整项目，看两讲概念就够，硬啃下去只会消耗耐心。

先搞懂两件事再往下走

Electron 的运行结构是第一个门槛。主进程和渲染进程的分工、进程之间怎么通信，这两点不弄清楚，后面所有的代码你都会觉得像在猜。建议把讲这部分的内容看两遍，第一遍先听懂角色划分，第二遍跟着敲一遍最小的通信例子，哪怕只是主进程发一句话给页面。第二个门槛是七牛云的接入。它不是本地存储，涉及密钥、空间、上传凭证这几样东西，自己注册一个测试空间，边看边把配置填进去，比只看讲解要踏实得多。

章节顺序与可跳过的部分

整体是按“搭壳 → 打通数据 → 做功能 → 打包”的顺序排的，顺着看最省力。但有几种情况可以跳过：

• 如果你已经用 React 做过完整项目，前面讲组件组织和 Hooks 用法的部分可以快速扫过，只看它和 Electron 结合的地方。
• 如果你暂时不打算真的发布应用，打包签名那一块可以先看一遍留个印象，等要发布时再回来补。
• 七牛云相关的几讲不要跳。云同步是这个项目的核心，跳了后面文档管理功能就只剩一半。

Node 原生模块那部分会有点吃力，因为它牵扯到系统层面的东西，报错信息也不友好。学不会很正常，先照着跑通，别急着一次理解透。

资料怎么配合练习

配套的章节笔记适合当“回头看”的工具，不适合当教材从头读。比较顺的节奏是：先看一讲视频，自己动手写一遍，卡住了再翻对应的笔记对照。每完成两讲，停下来把这两讲的东西合起来跑一次，别一路看到最后才动手，那样中间断掉的地方会积成一堆。Markdown 文档管理这个项目本身可以当成你自己的笔记工具来用，一边做一边真的往里存东西，比对着示例数据练更有感觉。

关于速度的一点实话

这门课涉及的知识面偏宽，前端、桌面端、云存储、Node 都沾一点，所以别指望两天刷完。对大部分利用下班时间学的人来说，一周推进两三讲、每讲都跑通，是比较现实的节奏。中途某几讲觉得难、想放一放，也没关系，先把能跑通的部分跑通，卡住的地方标记一下，过几天再回来看，往往就通了。

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