Electron是前端开进桌面开发的主要工具，很多前端技术栈都提供了将自身融入Electron框架运行的能力。但是对于React来说，需要自定义的东西太多了，在开始桌面应用的开发时，十分的不方便。这里根据在实际项目工作中的经验，搭建了两款使用React开发Electron应用的模板，供大家在构建Electron应用时使用。

经常使用React开发前端应用的IT人应该都对electron-react-boilerplate不会陌生。这是一个已经完成了配置的使用React开发Electron应用的模版项目，只需要直接git clone下来再稍微改一改就可以投入项目的开发了。但是这种方式对于一些有框架洁癖的人来说，就十分的不爽了，总会有一种没有把控全局的感觉。

为了解决这个问题，笔者根据实际项目中的项目构建经验，利用React的项目构建工具Create React App，搭建了两款用于开发Electron应用的模板。这两款模版的功能基本上一模一样，只是一款是采用Typescript编写Renderer Process和Main Process的，另一款是完全采用Javascript的。

cra-template-typescript-electron

说到Typescript，应该大部分已经接触过的IT人都会发现已经离不开它了，所以这里推荐的第一款模版就是使用Typescript来编写Electron渲染线程和主线程的模板。

模板地址为cra-template-typescript-electron。在使用的时候可以直接使用以下命令来创建项目。

1

npx create-react-app my-app --template typescript-electron

由于主线程也是采用Typescript编写的，所以主线程的代码也是需要经过编译的。为了保证编译后代码输出的纯粹，所以主线程代码被放置在了src-main目录中。整个模板中没有Eject配置，所以所有的特殊配置都可以利用Customize-CRA来修改。对于Electron应用的打包发表，则可以依靠模版中已经放置好的Electron Builder来完成，但是需要注意的是，在使用Electron Builder之前需要在package.json中先完成所有需要的配置。

cra-template-simple-electron

相对的，使用Javascript来编写Electron渲染线程和主线程代码的模板名称为cra-template-simple-electron。

模板地址为cra-template-simple-electron。在使用的时候可以直接使用以下命令来创建项目。

1

npx create-react-app my-app --template simple-electron

在这个模板中，主线程的代码不需要编译，所以主线程代码就直接位于main目录了，并且在打包的时候会直接被置入发布包中。

这两个模板都可以直接使用npm start来启动Electron应用的调试，并且在React应用发生变化的时候会自动加载，主线程代码发生变动的时候，Electron应用本身也会自动重启。