yarn create react-app electron-react

cd electron-react

yarn run eject  // 修改react-app打包的路径 / -> ./

vi main.js

main.js

const {

  app,

  BrowserWindow,

  ipcMain

} = require('electron')

const path = require('path')

const url = require('url')

//保留窗口对象的全局引用，如果不这样做，窗口将会

//当JavaScript对象被垃圾收集时自动关闭。

let mainWindow = null;

function createWindow() {

  //创建浏览器窗口。f12 查看所有的参数

  mainWindow = new BrowserWindow({

    width: 800,

    height: 600,

    // backgroundColor: '#f48', // 优雅地显示窗口

    // frame: false

  });

  /**

   * ! 优雅地显示窗口

   */

  mainWindow.once('ready-to-show', () => {

    win.show()

  })

  /**

   * * 加载本地HTML文件

   */

   mainWindow.loadURL('http://localhost:3000')

  // mainWindow.loadURL(url.format({

  //  pathname: path.join(__dirname, 'build', 'index.html'),

  //  protocol: 'file:',

  //  autoHideMenuBar: true,

  //  slashes: true

  // }))

  /**

   * * 打开DevTools

   */

  mainWindow.webContents.openDevTools()

  /**

   * * 关闭窗口时发出。

   */

  mainWindow.on('closed', function () {

    //解引用窗口对象，通常你会存储窗口

    //如果您的应用程序支持多窗口，则在数组中，现在是时候了

    //当你应该删除相应的元素。

    mainWindow = null

  });

  // menu

  // require('./menu.js');

}

// Electron完成后将调用此方法

// 初始化并准备创建浏览器窗口。

// 一些API只能在发生此事件后才能使用。

app.on('ready', createWindow)

//关闭所有窗口时退出。

app.on('window-all-closed', function () {

  //在OS X上，应用程序及其菜单栏很常见

  //保持活动状态，直到用户使用Cmd + Q显式退出

  if (process.platform !== 'darwin') {

    app.quit()

  }

})

app.on('activate', function () {

  //在OS X上，通常会在应用程序中重新创建一个窗口

  //点击了dock图标，并且没有其他窗口打开。

  if (mainWindow === null) {

    createWindow()

  }

})

package.json

{

  "main": "main.js",

  "scripts": {

    "start": "node scripts/start.js",

    "build": "node scripts/build.js",

    "test": "node scripts/test.js --env=jsdom",

    "e-start": "electron .",

    "e-build": "npm run build && electron-builder --win --x64",

  }

执行 npm run dev