准备工作
安装node环境
下载node安装包（8.0以上版本）：
https://nodejs.org/zh-cn/
安装过程不做赘述。
安装react脚手架
在终端输入以下代码进行React脚手架安装
npm install --global create-react-app
因为长城的原因，使用前请切换源，具体切换方法请参考:
https://blog.csdn.net/qq_27818541/article/details/62886790?locationNum=4&fps=1
创建React项目
脚手架安装完成后，执行以下命令，创建一个名为demo的应用
看到以下提示React项目即创建完成
继续输入以下命令，启动本React项目
cd demo
npm start
整合Electron和React
Create React App创建的项目是一个纯前端项目，把React项目整合进electron才是桌面端开发的开始。为了开发方便，同时还需保留热调试。
1.安装electron,在刚创建好的react项目文件夹中（demo文件夹），打开终端输入
npm install electron --save --dev
在package.json文件中看到已安装好electron
在脚本中添加以下代码，作为启动electron框架的命令
"electron-start": "electron ."
2.在于package.json的同级新建一个名为mian.js的文件，文件内容可直接拷贝electron-quick-start项目中的文件:https://github.com/electron/electron-quick-start/blob/master/main.js
3.在package.json文件中，指定main.js作为electron的入口文件
4.(试探性)启动electron
npm run electron-start
能成功启动，说明electron的安装及入口文件配置没问题。
界面一片空白是因为我们的项目并没有和electron整合起来，下面把react项目整合进electron中
5.打开main.js，修改其中内容加载地址（暂且这么称呼），找到这里mainWindow.loadUrl方法
为了看到效果我们修改为这样：
6.重新启动整个项目，查看效果
这里需要同时启动两个终端，一个用来启动React项目
npm start
一个用来启动electron
npm run electron-start
Q:为什么会把electron内容加载地址改为localhost:3000？
A:因为react项目启动后的地址为localhost:3000，就是为了把启动后的项目加载进入electron中。同时因为React项目默认是有热更新，所以可以保证electron中的视图会随着react项目的修改而实现热调试
End : 实现React项目与electron的整合，同时保留热调试。
项目已上传至github，欢迎参考：https://github.com/l2en/electron-with-react16.10.2 ，如果对你有用，请star一个~ 么么哒
网友评论