这门课能帮你做什么

如果你想做出跨平台桌面应用，但又不知道从哪入手，这门课给的答案是：用 Electron 套 React，再借助七牛云这类对象存储来处理文件上传。学完之后，你能独立完成一个带界面、能打包成 Windows/Mac 安装包的小工具——比如文件管理器、截图工具、本地数据看板这类场景，而不是只能写网页或只能写原生应用。

课里反复强调一件事：Electron 本身不是难点，难的是理解它的主进程和渲染进程是怎么分工的，以及这两边怎么传消息。你把这块打通了，后面接 React、接 UI 库、接存储，都会顺很多。

适合什么人学

建议你有两个基本前提。

- **JavaScript 基础**。不用多深，能看懂变量、函数、箭头函数、模块导入导出，足够。
- **有过一点前端经验**。React 这边会快速过一遍语法，但不会从零教你什么叫组件。如果你完全没写过页面，前几节会吃力。
- **目标明确**。你是想做一个具体小工具、想补上跨平台能力，或者想把网页产品搬到桌面。如果你只想做 H5、不想碰打包和安装，这门课的方向就不太对。

没有 Electron 也没关系，它是主线；有 React 基础更好，课程会把"怎么在 Electron 里跑 React"专门拆出来讲。

建议先看哪几块

不要一上来就跳组件。按这个顺序比较稳。

1. **第 1～2 章先走完**。特别是 2-1 到 2-10 这十节，把"第一个窗口、进程/线程、预加载脚本、主进程和渲染进程的双向/单向通信"搞明白。这是整门课的底座。
2. **第 3 章挑重点看**。React 部分重点盯 `useState`、`useEffect`（能清除和不能清除两种都要看清楚）、自定义 Hook。HOC 一节可以了解就行，真正写项目时用 Hook 就够了。
3. **第 4 章再动手**。这一步是把前面学的东西组合起来：拆组件、搭开发环境、定文件结构。这时候你会第一次感到"原来 Electron+React 是这样拼的"。
4. **后面的章节跟着案例做**。看到七牛云相关的时候，重点理解"为什么要在桌面应用里引入对象存储、上传流程怎么串起来"，而不是只记 API。

资料怎么配合练习

这门课不是看完就行的类型。每一节视频都对应一个可运行的步骤，建议这样用。

- **先看视频，再自己敲**。不要复制粘贴，手写一遍主进程入口、预加载脚本、渲染进程里的 React 组件。
- **卡住就往回查**。常见卡点是：预加载脚本没配置、`contextBridge` 和 `ipcRenderer` 用错地方、React 路由和 Electron 窗口生命周期冲突。这些在第 2、4 章里都能找到对照。
- **做完要能独立复现**。每次练完，试着关掉课程，自己从头搭一个空白窗口 + React 页面。能做到，才算这节过关。
- **后续扩展方向**。基础过完后，可以去研究怎么加入系统托盘、怎么做自动更新、怎么处理多窗口，这些都是这门课打底的延伸。

学完能独立做到什么

完成这门课后，你应该能：

- 从零搭起一个 Electron+React 的开发环境，并跑起来第一个窗口
- 清楚主进程和渲染进程的职责边界，能用 IPC 做双向和单向通信
- 把界面拆成 React 组件，并用 `useState`、`useEffect` 驱动交互
- 理解预加载脚本的作用，知道怎么安全暴露接口给渲染进程
- 把文件上传这类功能接到七牛云，理解上传流程的关键节点
- 把一个简单桌面应用打成可安装的程序，并知道后续往哪里扩展

课程目录

第1章 进入 Electron 的世界 试看 1 节 | 19分钟 1-1 学习本课程的收获以及案例展示（内附彩蛋） (18:08).mp4
 第2章 我们的第一个应用（20

24 更新） 

10 节 | 103分钟 2-1 介绍以及安装 Electron (09:32).mp4
 2-2 创建第一个窗口 (10:26).mp4
 2-3 进程和线程 (10:01).mp4
 2-4 预加载脚本 (12:12).mp4
 2-5 进程间通信- 从渲染进程到主进程 (12:34).mp4
 2-6 进程通信- 双向通信 (13:56).mp4
 2-7 单向通信- 从主进程到渲染进程 (08:59).mp4
 2-8 使用 nodeIntegration (08:41).mp4
 2-9 使用 remote 模块 (07:47).mp4
 2-

10 本章总结 (08:32).mp4
 第3章 神奇的 React 

11 节 | 88分钟 3-1 React 简介和缘起 (07:15).mp4
 3-2 配置 React 开发环境..1 (09:50).mp4
 3-3 useState Hook (11:22).mp4
 3-4 useEffect 不需要清除的 Effect (05:50).mp4
 3-5 useEffect 需要清除的 Effect (09:27).mp4
 3-6 useEffect 可控 effect (11:31).mp4
 3-7 自定义 Hook（一） (08:35).mp4
 3-8 HOC 的概念和缺点 (05:28).mp4
 3-9 自定义Hook（二） (13:19).mp4
 3-

10 Hook 规则和其他 Hook (05:05).mp4
 3-

11 【学习任务】给 useURLLoader 添加更多功能.mp4
 第4章 双剑合璧与庖丁解牛 试看 6 节 | 42分钟 4-1 全局需求 (08:09).mp4
 4-2 将 UI 拆分成组件 (06:47).mp4
 4-3 配置开发环境（一） (08:14).mp4
 4-4 配置开发环境（二） (10:48).mp4
 4-5 文件结构和代码规范 (07:54).mp4
 4-6 【学习任务】写自己的技术规范文档.mp4
 第5章 左侧面板开发 

10 节 | 106分钟 5-1 为项目选择样式库 (09:26).mp4
 5-2 FileSearch 组件（一） (15:53).mp4
 5-3 FileSearch 组件（二） (11:59).mp4
 5-4 为项目选择图标库 (12:27).mp4
 5-5 使用 PropTypes 进行类型检查 (07:28).mp4
 5-6 FileList 组件开发（一） (14:41).mp4
 5-7 FileList 组件开发（二） (12:29).mp4
 5-8 【学习任务】完成 Input 自动 focus 功能.mp4
 5-9 第一个自定义 Hook - useKeyPress (08:54).mp4
 5-

10 左侧收尾工作 (12:31).mp4
 第6章 右侧面板开发 5 节 | 45分钟 6-1 TabList 需求和属性分析 (05:41).mp4
 6-2 TabList 组件代码（一） (14:44).mp4
 6-3 TabList 组件代码（二） (11:02).mp4
 6-4 选择 MarkDown 编辑器 (06:13).mp4
 6-5 引入 easyMDE 编辑器 (07:02).mp4
 第7章 功能结合 9 节 | 80分钟 7-1 分析设计 State 结构 (06:47).mp4
 7-2 分析应用数据流 (05:22).mp4
 7-3 给 App 组件添加状态 (11:30).mp4
 7-4 添加数据处理行为（一） (14:33).mp4
 7-5 添加数据处理行为（二） (11:33).mp4
 7-6 添加新建文件流程逻辑 (13:43).mp4
 7-7 Flatten State 介绍 (05:06).mp4
 7-8 修改 State 为 Flatten 结构编码 (10:44).mp4
 7-9 【想一想】应用状态分析与设计.mp4
 第8章 持久化保存数据 9 节 | 75分钟 8-1 在 React 中使用 Node.js (06:18).mp4
 8-2 新版 electron(>12) 出现错误，解决方法.mp4
 8-3 FS 模块初试牛刀 (08:55).mp4
 8-4 FS 模块使用 Promise 改造 (09:24).mp4
 8-5 在 App 中集成文件操作 (13:15).mp4
 8-6 数据持久化解决方案 (06:53).mp4
 8-7 将 Electron store 集成到 App 中 (14:02).mp4
 8-8 添加持久化数据逻辑代码 (06:50).mp4
 8-9 由一个 Bug 引发的思考 (08:34).mp4
 第9章 Electron 锦上添花 

11 节 | 125分钟 9-1 导入文件对话框（一） (09:46).mp4
 9-2 导入文件对话框（二） (18:31).mp4
 9-3 添加上下文菜单（一） (09:09).mp4
 9-4 添加上下文菜单第二部分 (11:25).mp4
 9-5 添加上下文菜单最终实现 (14:02).mp4
 9-6 原生应用菜单简介 (06:49).mp4
 9-7 添加原生应用菜单编码（一） (11:29).mp4
 9-8 添加原生应用菜单编码（二） (10:37).mp4
 9-9 设置窗口解决方案和流程分析 (05:39).mp4
 9-

10 添加设置窗口编码（一） (15:12).mp4
 9-

11 添加设置窗口编码（二） (12:03).mp4
 第10章 认识七牛云平台 9 节 | 94分钟 10-1 对象存储平台简介 (05:32).mp4
 10-2 七牛云平台使用简介 (04:42).mp4
 10-3 初始七牛 SDK (13:00).mp4
 10-4 云文件操作类编码（一） (12:22).mp4
 10-5 云文件操作类编码（二） (11:16).mp4
 10-6 获得下载链接 (14:51).mp4
 10-7 stream 流的概念 (07:50).mp4
 10-8 stream 流的简单用法 (10:09).mp4
 10-9 实现文件下载方法 (14:03).mp4
 第11章 使用 SDK 同步到七牛云 

12 节 | 102分钟 11-1 在设置窗口添加七牛云参数（一） (10:01).mp4
 11-2 在设置窗口添加七牛云参数（二） (07:02).mp4
 11-3 添加云同步菜单 (08:03).mp4
 11-4 动态修改菜单项 (09:06).mp4
 11-5 自动同步单个文件至七牛云（一） (10:15).mp4
 11-6 自动同步单个文件至七牛云（二） (09:56).mp4
 11-7 自动下载云文件至本地（一） (08:48).mp4
 11-8 自动下载云文件至本地（二） (11:53).mp4
 11-9 为应用添加 Loading 效果 (07:59).mp4
 11-

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

11 使用流程图和伪代码解决剩下需求 (08:53).mp4
 11-12 【学习任务】完成剩下的需求.mp4
 第12章 应用打包与分发 

11 节 | 89分钟 12-1 安装 Electron builder (04:42).mp4
 12-2 为生产环境 build 代码 (10:22).mp4
 12-3 添加配置文件 (07:41).mp4
 12-4 调试整个pack流程 (10:31).mp4
 12-5 探究打包过程和生成文件内容 (07:14).mp4
 12-6 生成安装包 (09:07).mp4
 12-7 Electron 打包体积优化第一部分- 质的飞跃 (05:21).mp4
 12-8 Electron 打包体积优化第二部分-极限优化 (10:04).mp4
 12-9 自动更新第一部分 - 自动发布 release (09:36).mp4
 12-

10 自动更新第二部分 - 添加自动更新功能 (07:27).mp4
 12-

11 自动更新 第三部分 - 本地调试自动更新功能 (06:38).mp4
 第13章 课程总结 1 节 | 8分钟 13-1 课程总结 (07:52).mp4