Electron + React Hooks + TS 实现简历平台

开发

由于网络问题，往往安装 Electron 会很慢，此时可以考虑换个淘宝源

// 1.安装依赖
cnpm run install
// 2. 运行
npm run start:render //首先运行渲染线程 (react)，当出现Compiled successfully的时候执行下一步
npm run start:main //然后运行主线程 (Electron)
运行成功以后系统会自动弹出Electron应用程序

项目结构树

├── app
│   ├── main  // 主进程模块
│   │   ├── customMenu.ts  //顶部编辑栏设置
│   │   └── electron.ts  //主进程脚本，该脚本就是应用程序的入口
│   └── renderer  // 渲染进程模块
│       ├── app.tsx  //入口文件
│       ├── common //公共
│       │   ├── components  //公用组件
│       │   │   ├── RsmButton  //按钮
│       │   │   ├── RsmEmpty   //空状态
│       │   │   ├── RsmInput   //输入框
│       │   │   ├── RsmModal   //Modal弹框
│       │   │   ├── RsmRectSize  
│       │   │   ├── RsmScrollBox  //固定区域内的滚动组件
│       │   │   ├── RsmTheme  //主题皮肤
│       │   │   └── RsmUpload  //上传
│       │   ├── constants   //默认约定字段文件夹
│       │   ├── hook
│       │   │   └── useClickAway.ts //简历选择工具-选中模块监听
│       │   ├── messager
│       │   │   └── index.ts
│       │   ├── types  //类型约束
│       │   └── utils  //常用工具处理函数
│       ├── container  //存放着所有模块的代码文件
│       │   ├── resume  //简历页面
│       │   │   ├── ResumeAction //制作简历-操作区
│       │   │   ├── ResumeContent  //制作简历-内容区
│       │   │   ├── ResumeToolbar  //制作简历-工具栏
│       │   ├── root  //首页
│       │   ├── templateList  //模版列表
│       │   │   ├── Footer  //模版列表-尾部
│       │   │   ├── Header  //模版列表-头部
│       │   │   ├── Navigation  //模版列表-侧边栏
│       │   │   ├── StaticResume  //模版列表-静态模版
│       │   └── templates  //模版事例
│       ├── global.d.ts
│       ├── hooks //自定义钩子函数
│       ├── index.html  //入口html文件
│       ├── router.tsx  //路由入口文件
│       ├── store  //存放着所有 redux model 相关的代码文件
│       └── windowPages  
│           └── setting
├── appConfig   //配置表
│   ├── global.config.json  //全局配置表
│   └── theme.config.json  //主题配置表
├── assets
│   ├── avatar.jpg  //简历事例头像
│   ├── icon  //图标
│   └── template  //模版封面图片文件夹
├── babel.config.js   //babel(JS 编译器)，能将 ES6 代码转成 ES5,配置一下我们常用的插件 plugins 和 预设值 presets
├── postcss.config.js  //CSS Modules配置
├── tsconfig.json  //TypeScript配置
└── webpack  //webpack相关配置
    ├── webpack.base.js  //基础公共配置
    ├── webpack.main.dev.js  //主进程开发环境配置
    └── webpack.render.dev.js  //渲染进程开发环境配置

项目功能

• 简历信息的录入
• 数据信息的展示
• 简历导出 PDF
• 持久化数据存储
• 简历模版管理
• 主题换肤模块

项目知识点

• React全家桶:react-router、react-router-dom、redux
• React Hooks
• TypeScript
• Babel
• Webpack
• Electron
• 自定义基础组件（按钮、输入框、上传框等）
• 组件化开发模式

React Hooks

React 早期的写法以 Class 类组件为主，附带一些纯用于展示的函数组件，但是函数组件是不能控制自身的状态的. 引入全新的 Hooks 写法，如 useEffect、useState、useRef、useCallback、useMemo、useReducer 等等，通过这些钩子函数来管理函数组件的各自状态

Electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
它建立在 Chromium 和 Node 之上，为我们提供了很多封装好的模块，跟系统原生 API 互通。
Electron 有三大核心

• Chromium 用于显示网页内容。
• Node.js 用于本地文件系统和操作系统。
• Native APIs 用于使用经常需要的本机函数。

Electron 与 React 的结合

Redux--实时性数据存储

本地文件--持久性数据存储

Babel

它是 JS 编译器，能将 ES6 代码转成 ES5，让我们使用最近的语言特性，而不需要担心兼容性的问题

Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器
配合Loader模块打包方案和Plugins 用于扩展 Webpack 的功能，使得 webpack 变得极其灵活

ESLint + Prettier

使用 Prettier 进行代码格式化，相比于 ESLint 中的代码格式规则，它更加专业。同时我们采用 ESLint 来统一代码风格，提高我们的代码质量

Less、styleName

采用 less 进行样式相关的编写,并在Webpack 中配置 CSS Module，最后使用 react-css-modules 实现 styleName 的形式

TypeScript