从 Web 到桌面：跨平台开发的「最后一公里」怎么补
很多前端开发者卡在「网页做得溜，但想做成独立软件安装包」这一步。 Electron 允许你复用 Chrome 和 Node.js 的能力，把 React 应用打包成 Windows、macOS 或 Linux 的原生应用。这门课解决的核心问题就是：如何打通前端与系统底层，实现真正的跨平台交付。
适合有一定 Web 基础（熟悉 HTML/CSS/JS，了解 React 组件概念）但从未接触过 Electron 的同学。如果你只知道怎么写页面，却不懂进程隔离、主渲染通信，这门课正好填补这个缺口。
学习路径建议：先懂架构，再上手 React
不要一上来就写业务代码。第一章的试看节展示了最终案例，建立整体认知后再开始。第二章是重中之重，必须逐个消化 10 个小节：理解主进程（控制窗口生命周期）和渲染进程（执行 UI）的分离；掌握预加载脚本的安全机制；会用 ipcRenderer 和 ipcMain 实现双向通信；搞清楚为什么现在不推荐用 nodeIntegration 和 remote 模块。这两项是早期教程推崇但现在已不安全的做法，务必理解其替代方案。
第三章聚焦 React 进阶。重点看 useState、useEffect 的三种形态：无需清除副作用、需手动清除防止内存泄漏、可控 effect 管理清理时机。自定义 Hook 部分（3-7、3-10）展示了如何复用逻辑，HOC（3-8）则说明了组合优于继承。第 11 节有一个关于 useURLLoader 的学习任务，务必动手完成，这是检验你是否真懂 Hook 生命周期和依赖项的关键。
第四章进入实战。先听 4-1 全局需求分析，再按 4-2 组件拆分思路设计 UI，最后跟着 4-3 和 4-4 配置开发环境。这一章帮你把前两章的知识揉进一个真实项目中，理解文件结构如何组织主进程和渲染进程代码。
学完能做什么 & 资料配合建议
完成本课程后，你应该能独立搭建一个 Electron + React 项目结构，实现窗口管理、菜单定制、系统 tray 图标、文件对话框等桌面特性；能用 IPC 在进程间安全传递数据；能把应用打包为可分发的安装包；了解七牛云在文件上传场景中的集成方式。
资料包中的视频是主体，章节练习（如 3-11）是查漏补缺的手段。建议边看边敲代码，不要只看不练。遇到进程通信报错时，回看第二章 2-5 至 2-7 的通信模式对比；React 状态更新异常时，重看 useEffect 的控制逻辑。七牛云部分用于处理文件上传存储，可在第四个项目实战中结合使用。记住，Electron 的安全性依赖于正确的预加载配置，务必确保 contextBridge 暴露的 API 是最小必要集合，避免直接暴露 Node.js 模块。
课程目录
第1章 进入 Electron 的世界 试看 1 节 | 19分钟 1-1 学习本课程的收获以及案例展示（内附彩蛋） (18:08) 第2章 我们的第一个应用（2024 更新） 10 节 | 103分钟 2-1 介绍以及安装 Electron (09:32) 2-2 创建第一个窗口 (10:26) 2-3 进程和线程 (10:01) 2-4 预加载脚本 (12:12) 2-5 进程间通信- 从渲染进程到主进程 (12:34) 2-6 进程通信- 双向通信 (13:56) 2-7 单向通信- 从主进程到渲染进程 (08:59) 2-8 使用 nodeIntegration (08:41) 2-9 使用 remote 模块 (07:47) 2-10 本章总结 (08:32) 第3章 神奇的 React 11 节 | 88分钟 3-1 React 简介和缘起 (07:15) 3-2 配置 React 开发环境..1 (09:50) 3-3 useState Hook (11:22) 3-4 useEffect 不需要清除的 Effect (05:50) 3-5 useEffect 需要清除的 Effect (09:27) 3-6 useEffect 可控 effect (11:31) 3-7 自定义 Hook（一） (08:35) 3-8 HOC 的概念和缺点 (05:28) 3-9 自定义Hook（二） (13:19) 3-10 Hook 规则和其他 Hook (05:05) 3-11 【学习任务】给 useURLLoader 添加更多功能 第4章 双剑合璧与庖丁解牛 试看 6 节 | 42分钟 4-1 全局需求 (08:09) 4-2 将 UI 拆分成组件 (06:47) 4-3 配置开发环境（一） (08:14) 4-4 配置开发环境（二） (10:48) 4-5 文件结构和代码规范 (07:54) 4-6 【学习任务】写自己的技术规范文档 第5章 左侧面板开发 10 节 | 106分钟 5-1 为项目选择样式库 (09:26) 5-2 FileSearch 组件（一） (15:53) 5-3 FileSearch 组件（二） (11:59) 5-4 为项目选择图标库 (12:27) 5-5 使用 PropTypes 进行类型检查 (07:28) 5-6 FileList 组件开发（一） (14:41) 5-7 FileList 组件开发（二） (12:29) 5-8 【学习任务】完成 Input 自动 focus 功能 5-9 第一个自定义 Hook - useKeyPress (08:54) 5-10 左侧收尾工作 (12:31) 第6章 右侧面板开发 5 节 | 45分钟 6-1 TabList 需求和属性分析 (05:41) 6-2 TabList 组件代码（一） (14:44) 6-3 TabList 组件代码（二） (11:02) 6-4 选择 MarkDown 编辑器 (06:13) 6-5 引入 easyMDE 编辑器 (07:02) 第7章 功能结合 9 节 | 80分钟 7-1 分析设计 State 结构 (06:47) 7-2 分析应用数据流 (05:22) 7-3 给 App 组件添加状态 (11:30) 7-4 添加数据处理行为（一） (14:33) 7-5 添加数据处理行为（二） (11:33) 7-6 添加新建文件流程逻辑 (13:43) 7-7 Flatten State 介绍 (05:06) 7-8 修改 State 为 Flatten 结构编码 (10:44) 7-9 【想一想】应用状态分析与设计 第8章 持久化保存数据 9 节 | 75分钟 8-1 在 React 中使用 Node.js (06:18) 8-2 新版 electron(>12) 出现错误，解决方法 8-3 FS 模块初试牛刀 (08:55) 8-4 FS 模块使用 Promise 改造 (09:24) 8-5 在 App 中集成文件操作 (13:15) 8-6 数据持久化解决方案 (06:53) 8-7 将 Electron store 集成到 App 中 (14:02) 8-8 添加持久化数据逻辑代码 (06:50) 8-9 由一个 Bug 引发的思考 (08:34) 第9章 Electron 锦上添花 11 节 | 125分钟 9-1 导入文件对话框（一） (09:46) 9-2 导入文件对话框（二） (18:31) 9-3 添加上下文菜单（一） (09:09) 9-4 添加上下文菜单第二部分 (11:25) 9-5 添加上下文菜单最终实现 (14:02) 9-6 原生应用菜单简介 (06:49) 9-7 添加原生应用菜单编码（一） (11:29) 9-8 添加原生应用菜单编码（二） (10:37) 9-9 设置窗口解决方案和流程分析 (05:39) 9-10 添加设置窗口编码（一） (15:12) 9-11 添加设置窗口编码（二） (12:03) 第10章 认识七牛云平台 9 节 | 94分钟 10-1 对象存储平台简介 (05:32) 10-2 七牛云平台使用简介 (04:42) 10-3 初始七牛 SDK (13:00) 10-4 云文件操作类编码（一） (12:22) 10-5 云文件操作类编码（二） (11:16) 10-6 获得下载链接 (14:51) 10-7 stream 流的概念 (07:50) 10-8 stream 流的简单用法 (10:09) 10-9 实现文件下载方法 (14:03) 第11章 使用 SDK 同步到七牛云 12 节 | 102分钟 11-1 在设置窗口添加七牛云参数（一） (10:01) 11-2 在设置窗口添加七牛云参数（二） (07:02) 11-3 添加云同步菜单 (08:03) 11-4 动态修改菜单项 (09:06) 11-5 自动同步单个文件至七牛云（一） (10:15) 11-6 自动同步单个文件至七牛云（二） (09:56) 11-7 自动下载云文件至本地（一） (08:48) 11-8 自动下载云文件至本地（二） (11:53) 11-9 为应用添加 Loading 效果 (07:59) 11-10 完成全部文件同步到七牛云功能编码 (09:56) 11-11 使用流程图和伪代码解决剩下需求 (08:53) 11-12 【学习任务】完成剩下的需求 第12章 应用打包与分发 11 节 | 89分钟 12-1 安装 Electron builder (04:42) 12-2 为生产环境 build 代码 (10:22) 12-3 添加配置文件 (07:41) 12-4 调试整个pack流程 (10:31) 12-5 探究打包过程和生成文件内容 (07:14) 12-6 生成安装包 (09:07) 12-7 Electron 打包体积优化第一部分- 质的飞跃 (05:21) 12-8 Electron 打包体积优化第二部分-极限优化 (10:04) 12-9 自动更新第一部分 - 自动发布 release (09:36) 12-10 自动更新第二部分 - 添加自动更新功能 (07:27) 12-11 自动更新 第三部分 - 本地调试自动更新功能 (06:38) 第13章 课程总结 1 节 | 8分钟 13-1 课程总结 (07:52)
