三分钟搭建React + Electron开发环境

背景

• 先前的博客中介绍过怎么通过Webpack搭建React的开发环境，自己搭建需要很多的手动配置工作。当需要快速开发一个简单的React应用时，推荐使用create-react-app快速生成React的开发环境。
• 怎么快速搭建一个Electron环境是简单的，但是搭一个React + Electron的环境是略微有点难度的。

创建React项目

# 确保已安装 Node
# 安装 create-react-app 命令,如果已安装请忽略
npm install -g create-react-app
# 创建 react_electron_demo0 项目
create-react-app react_electron_demo0
# 启动项目( create-react-app 真的超级方便啊)
cd react_electron_demo0 && npm start
# 代码执行完毕后,浏览器 http://localhost:3000/ 会出现界面,React 项目即创建成功

添加Electron包

# 在react_electron_demo0目录下安装 Electron 包
npm install electron -D

相关配置

项目根目录下新建main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  // 加载应用----适用于 react 项目
  win.loadURL('http://localhost:3000/')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

配置package.json

添加如下两项配置：
{
	"main": "main.js", // 配置electron的启动文件
	"scripts": {
	    "electron-start": "electron ."
	  },
  }

启动electron

# 这里要打开两个窗口

# 启动react项目
npm start
# 启动electron
npm run electron-start

启动效果

大功告成！