这里会首先介绍一下 react 和 electron 各自的环境搭建，再详细介绍如何将其完美的合二为一

react 的开发环境

检查环境版本

最好将 node 版本升级到 10.0.0 以上，这里推荐一个 node 的版本管理工具 nvm, 可以根据不同情况切换 node 版本进行开发。
这里介绍一个小知识点: 什么是 npx?

• npx 只有 npm 5.2 以上的版本才会有
• 避免安装全局模块，很多时候 npm 会安装全局模块造成不必要的资源浪费
• 调用项目内部安装的模块：
  例如我们检查 node_modules/.bin 下的 nodemon 版本需要在命令行中这样写:
  node_modules/.bin/nodemon --version
  但是使用 npx 就可以直接 执行了:
  npx nodemon —version
  介绍 npx 是有原因的，安装脚手架的时候就会用到该命令

脚手架

一般一款优秀的框架都会为其配备一个优秀的脚手架，react 也不例外，它的脚手架就是 create-react-app，它的特点就是

• 简单
• 不需要任何配置
• 没有锁死，既可以开箱再添加些配置 npm run eject 弹出 webpack 配置 根据官网执行以下命令即可创建一个 react 项目，并运行起来。

npx create-react-app my-app
cd my-app
npm start
复制代码

electron 的开发环境搭建

如上 react 的 node 环境要求，避免出啥问题，node 版本最好在 10.0.0 以上

脚手架

electron 也有自己的脚手架 electron-quick-start 根据官网执行以下命令便可开启electron

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
复制代码

tip：这个过程会比较久，大概会有 5 分钟左右，耐心等待。

如何完美的一步一步结合 react + electron 开发应用

前言

React 本地启动在 3000端口
Electron 在创建 BrowserWindow 的时候，可以读取本地的文件或者是 url
开发环境 读取localhost: 3000
生产环境 需要加载本地成型以后的本地文件，打包的时候再考虑

环境配置

npx create-react-app react+electron
cd react+electron  //建立 react 环境
npm install electron —save-dev  //同样安装需要一定的时间
复制代码

那么同样在安装好之后，需要进行如下操作

• 新建 mian.js 文件
  
• 打开package.json文件需要添加 main.js 作为入口文件
  

  

• 在package.json文件中添加执行脚本

• 安装 electron-is-dev 用于判断 electron 的开发环境

npm install electron-is-dev --save-dev
复制代码

• 在 main.js 中写入以下代码，需要一点 electron 基础，请前往 electron文档 学习

const {app, BrowserWindow} = require('electron')
const isDev = require('electron-is-dev')
let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 680,
    webPreferences: {
      nodeIntegration: true,
    }
  })
  const urlLocation = isDev ? 'http://localhost:3000' : 'dummyurl'
  mainWindow.loadURL(urlLocation)
  mainWindow.webContents.openDevTools()
})
复制代码

大概就是创建了一个 1024 * 680 的窗口，在开发环境下，将 http://localhost:3000 下的内容加载到electron窗口中。

开启 react+electron

在 package.json 文件中可以看到，要启动 react 和 electron 得执行以下两个脚本命令

npm start //可以看到在浏览器新打开一个监听 3000 端口的一个 tab
npm run ele // 弹出 electron 窗口
复制代码

最后的结果就是

1. 需要跑两个命令
2. 关掉 electron 窗口后，端口仍被占有的情况
3. 需要 3000 端口跑起来了再刷新一下 electron 才会有内容
4. 浏览器会打开一个 3000 端口的 tab 页, electron 会弹出加载了3000端口内容的窗口，理想状态下只需要保留 electron 中的窗口就好了

优化1

推荐一个 npm 库 Concurrently

"dev": "concurrently \ electron .\" \" npm start\""
复制代码

优化2

再推荐一个 npm 库 wait-on 字面意思: 等待什么执行完之后再执行什么命令，解决我们的第三个问题 再次 改写 dev

 "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""
复制代码

那么这次达到的效果就是等待3000端口跑完了再打开 electron 窗口，为了不看的白屏的情况

优化3

再推荐一个 npm 库 cross-env, 这个大家应该经常用到：解决跨平台设置环境变量的问题。但是这次我们使用它是为了利用它的 BROWSER=none 来解决上面提到的第四个问题，不打开浏览器中的 tab 页。
再次改写一下 dev

 "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""
复制代码

那么这次改写之后就大功告成了，我们仅需要 执行 npm run dev 这个命令，然后就会弹出这样的 electron 窗口。没有白屏，不需要浏览器再打开tab页，是不是很完美，然后就可以愉快的进行 electron + react hooks 的应用开发啦。

总结

emmm 一步一步追求完美。