1. 热调试

在React项目目录下安装Electron

$npm install electron --save --only=dev

或者直接

$npm install electron

修改package.json文件，将main属性修改为main.js，在scriptes中添加"electron-start": "electron ."，最终配置文件如下：

{
  "name": "react-hello-world",
  "version": "1.0.0",
  "description": "React Hello World",
  "main": "main.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron ."
  },
  "author": "CodeMix",
  "license": "ISC",
  "dependencies": {
    "ajv": "^6.6.1",
    "electron": "^3.0.12",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "^2.1.1"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

打开Main.js,将

  mainWindow.loadFile('index.html')

修改为

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

打开两个终端，一个运行React

$npm start

另一个执行

$npm run electron-start

程序运行正常

2. 打包

默认情况下，homepage 是 http://localhost:3000，build 后，所有资源文件路径都是 /static，而 Electron 调用的入口是 file :协议，/static 就会定位到根目录去，所以找不到静态文件。在 package.json 文件中添加 homepage 字段并设置为"."后，静态文件的路径就变成了相对路径，就能正确地找到了添加如下配置：

"homepage":".",

随后运行build构建项目，构建完成后可以在build文件夹下算计index.html看看网站是否可以正确运行。

$ npm run-script build

如果可以。在main.js中将代码

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

更改为，即载入静态文件，载入URL可以作为热调试，打包时修改为静态文件。

mainWindow.loadFile('./build/index.html')

与打包Electron操作一样asar和electron-packager都要安装好：

$ npm install -g asar
$ npm install electron-packager -g

在工程中的package.json文件里定义了打包的参数：

"package": "electron-packager . Hello --platform=win32 --arch=x64 --icon=app.ico --out=./out --asar --app-version=0.0.1",

执行打包命令（记得找一个图标图片app.ico放在根目录下），打包完成后在out/Hello-win32-x64文件夹下运行Hello.exe。

$ npm run-script package