注意：
- React 本地启动在 3000端口
- Electron 在创建 BrowserWindow 的时候，可以读取本地的文件或者是 url
- 开发环境 读取localhost: 3000
- 生产环境 需要加载本地成型以后的本地文件，打包的时候再考虑
一 react 脚手架 create-react-app 快速搭建 react
npx create-react-app my-app-name
cd my-app-name
npm start
二 electron 的开发环境搭建
npm install electron --save-dev
三 环境配置
- 新建main.js 文件（在package.json 同等目录下）
- 打开package.json文件需要添加main.js作为入口文件
- 在package.json中添加执行脚本
- electron-is-dev 用于判断 electron 的开发环境
npm install electron-is-dev --save-dev
注：大概就是创建了一个 1024 * 680 的窗口，在开发环境下，将 http://localhost:3000
下的内容加载到electron窗口中。
三 开启 react+electron
在 package.json 文件中可以看到，要启动 react 和 electron 得执行以下两个脚本命令
npm start //可以看到在浏览器新打开一个监听 3000 端口的一个 tab
npm run ele // 弹出 electron 窗口
缺点：
- 需要跑两个命令
- 关掉 electron 窗口后，端口仍被占有的情况
- 需要 3000 端口跑起来了再刷新一下 electron 才会有内容
- 浏览器会打开一个 3000 端口的 tab 页, electron 会弹出加载了3000端口内容的窗口，理想状态下只需要保留 electron 中的窗口就好了
优化一：安装Concurrently
解决问题：解决以上 1和2 的问题，一次可以运行多个命令
安装：npm install concurrently --save-dev
配置：在 package.json 中的 scripts 添加一个 dev
"dev": "concurrently \" electron .\" \" npm start\""
优化二：安装 wait-on 插件
解决问题：解决 问题3 等3000端口执行完毕 再打开electron，为了不看到electron 白屏问题
安装：npm install wait-on
配置dev：
`"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""`
优化三：安装cross-env
解决问题：解决跨平台设置环境变量的问题。但是这次我们使用它是为了利用它的 BROWSER=none 来解决上面提到的第四个问题，不打开浏览器中的 tab 页。
安装：npm install cross-env --save-dev
配置dev:
"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""
四 运行项目
npm run dev 直接打开electron 窗口 没有白屏 不需要打开浏览器tab 页面。