1. 全局安装 Create-React-App 脚手架

npm isntall -g create-react-app

输入：create-react-app -V （注意 V 是大写）可查看当前脚手架版本号

2. 创建 React 项目

create-react-app project-name

project-name 表示你的项目名称，可以自己取一个。

创建完成后，就可以 cd 到项目目录中，npm start 运行，即可弹出项目的初始默认站点，说明 OK 了。

3. 引入 Electron 包

 npm install electron --save-dev

过程中会下载一个包，如果很慢或无法下载的话，可以用以下命令代替：

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron --save-dev

4. 添加 main.js 文件与 package.json 配置

main.js 直接从官网拷贝：进入官网文档 , 并进行修改

    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,   // 这行代码必须加进去，不然渲染进程无法访问 nodejs，electron 的资源
    }

然后在 package.json 文件中加入配置

1. "main":"./src/electron/main.js" 其中的路径为你的 main.js 路径配置。
2. "homepage": "./" 表示请求资源用相对路径，否则打包之后请求不到js，css资源

继续：引入 electron-is-dev 包

npm install electron-is-dev --save

这个包用于判断当前运行环境是开发环境还是生产环境，在 main.js 中，我们这里加一个判断：

继续：引入 concurrently 包

npm install concurrently --save

这个包用于同时启动多个服务用

继续：引入 wait-on 包

npm install wait-on --save

用于启动等待命令

const isDev = require('electron-is-dev')
const path = require('path')


if (isDev) {
  win.loadURL('http://localhost:3000')
} else {
  win.loadFile(path.join(__dirname, '../build/index.html'))
}

路劲为 main.js 相对 build 文件夹(React打出来的包文件夹)的路径。

可选配置（没有也没关系）：

修改package.json，添加一个electron-dev脚本命令：
{
  ...
  "scripts": {
    ...
    "dev": "concurrently \"BROWSER=none react-scripts start\" \"wait-on http://localhost:3000 && electron .\"",
    ...
  }
  ...
}

这样就可以直接 npm run dev 开启调试模式，不用单独再运行 React 和 Electron。

以上，即可：npm run dev 运行程序