准备工作
安装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一个~ 么么哒