Electron+React+七牛云实战跨平台桌面应用
《Electron+React+七牛云实战跨平台桌面应用》Electron几乎是 Web 开发人员开发桌面客户端的唯一途径，它天然适配任何前端开发框架，我们结合 React Hooks 这个新特性进行教学，结合七牛云和很多 Node 原生模块进行开发，来完成一个非常有吸引力的云同步 Markdown 文档管理应用。【技能收获】学完可掌握：React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo
这门课的名字一眼就能看出它的野心：不满足于教你怎么弹个窗、点个按钮，而是直接拉上七牛云做云同步，还要管 Markdown 文档。换句话说，它想让你交付的是一个真能日常用起来的小工具，而不是一个教学演示壳子。
课纲里最值钱的一块：Node 原生模块的实战密度
市面上 Electron 教程的通病是把主进程当黑盒，只讲窗口和菜单。但这门课把 Node 原生模块的调用摆在了显眼位置，这是判断含金量的关键信号。桌面端区别于网页的本质就在于能直接摸文件系统、读本地目录、操作剪贴板与系统路径，Markdown 文档管理恰好把这些能力全用上了。如果你之前写前端从没碰过 fs、path 这类模块，这门课提供的场景比孤立地看文档要扎实得多。精看这部分时，重点不是复制调用，而是理解主进程与渲染进程之间的职责边界在哪里被划开。
React Hooks 与 Electron 的配合，值得单独琢磨
用 Hooks 而不是 Class 组件来组织这个应用，意味着状态逻辑会大量沉淀在自定义 Hook 里。文档的增删改、云同步的加载与错误状态、编辑器的防抖保存，这些才是真正考验设计的地方。建议在过章节时，把每个自定义 Hook 单独拎出来问一句：它封装的是什么副作用？解决了哪个跨组件复用的痛点？这样比跟着敲一遍收获大得多。云同步的状态尤其典型，网络请求的 pending、成功、失败三态如果散落在各组件里，项目很快就会失控，看课时刻意观察作者怎么收口。
七牛云那一章：别只当 API 调用看
对象存储的接入难点从来不在“上传”这个动作本身，而在凭证怎么给、密钥放哪里、上传失败怎么重试、多端同步时冲突怎么处理。课程把七牛云拉进来，真实价值是逼你面对这些工程问题。看这部分时，把注意力放在凭证管理与同步策略上，上传代码本身照着文档谁都能写，出错时的兜底逻辑才是分水岭。如果章节里涉及分片或断点，那更值得慢下来，这是桌面端大文件场景绕不开的坎。
资料包别整包囤，按三种用法拆开
- 章节笔记单独抽出来，当作预习提纲：先看结论再回看视频，注意力会集中在实现细节上。
- 源码按模块拆开对照阅读，尤其主进程入口与云同步那几块，比逐行跟敲更接近真实开发节奏。
- 把 Markdown 编辑器相关的实现单独留一份，它和 Electron、七牛云相对解耦，以后做别的编辑器类项目可以直接拿来改造。
谁适合花时间，谁可以先放着
已经会用 React、想补上桌面端这条腿的人，这门课的投入产出比很高；纯新手直接进来会有点吃力，Hooks 和 Node 基础得先自己铺一层，否则同步逻辑那几章容易卡住。学习节奏上建议别按目录匀速推进，把云同步和 Node 模块两块留出额外时间，其余章节过得快一点没关系。真正决定你学完能不能独立做东西的，是能不能把主进程通信、状态管理和云存储这三件事串成一条线，而不是记住某个 API 的写法。
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
![[衡天云]爆款云服务器 低至12元/月](/hty.png)
