概述
Electron环境搭建和demo创建的过程我们上一篇文章已经给大家做了介绍，这篇文章给大家介绍下如何将Electron和前端框架React结合来进行开发。
前提要求
创建了一个Electron基础demo(不会创建的话请看这篇文章《01 Electron开发环境搭建，实例化demo》)
具体操作
这篇文章的介绍要用到上一篇文章中创建的demo里面的一些代码，所以还没有阅读前一篇文章的小伙伴麻烦看一下上文《01 Electron开发环境搭建，实例化demo》。
一、React项目demo创建
1、安装部署NodeJS环境之后，在适当的目录，通过如下命令创建基于react矿建的demo：
npx create-react-app electronandreact2、创建完成之后，进入到创建的demo根目录，然后通过如下命令启动：
npm start
3、React项目demo创建完成后，就暂时放在这，接下来我们创建Electron项目demo
二、Electron项目demo创建
Electron项目demo创建的过程请看这篇文章——《01 Electron开发环境搭建，实例化demo》。
三、Electron和React做整合
1、在新建的React项目demo中安装electron插件，如下：
npm install electron --save-dev
安装完成后，我们可以在package.json文件里可以看到安装的版本号，如下：
2、在package.json文件里添加electron的启动命令，如下：
"electron-start": "electron ."
3、在react项目demo根目录新建"main.js"文件，然后将electron项目demo中的index.js文件里的代码拷贝至新建的main.js文件里，如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
4、在react项目demo的package.json文件中，指定main.js文件作为electron的入口文件，如下：
"main": "main.js",
5、在命令行通过以下命令启动项目demo，如下：
npm run electron-start
此时可以看到是一个空白的桌面应用，因为我们还没有将react项目引入。
6、在main.js文件中，注释掉如下代码，然后添加引入代码，如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
// webPreferences: { //注释此代码
// nodeIntegration: true
// }
})
// 加载index.html文件
//win.loadFile('index.html') //注释此代码
win.loadURL('http:localhost:3000') //添加此行代码
}
app.whenReady().then(createWindow)7、通过如下命令启动项目demo：
npm start //启动react项目demo
npm run electron-start //启动整合后的electron+react项目
到此为止，就完成了Electron和React的整合。
总结
这篇文章主要介绍了一下Electron和React的整合过程，其实原理就是使用electron的loadUrl方法，就新建的react项目demo引入了我们的桌面程序，所以大家如果要整合Electron和Vue的话也是一样的过程。