React + Electron

electron.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 1280, height: 720});
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

  if (isDev) {
  	mainWindow.openDevTools();
  }
  
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

install.txt

- Console commands marked with "$ ".
- @latest could be added to every npm package name to indicate latest stable version.
- Your React app sources are located in src/ folder (for example, reactapp/src/App.js)

1)  install npm and node
2)  $ sudo npm i -g yarn react react-dom react-scripts electron@latest electron-builder electron-is-dev wait-on concurrently
3)  $ cd ~/projects
4)  $ npx create-react-app reactapp
5)  $ cd reactapp
6)  $ yarn add electron electron-builder wait-on concurrently --dev
7)  $ yarn add electron-is-dev
8)  add electron.js to reactapp/public/ folder
9)  add this to reactapp/package.json: "main": "public/electron.js"
10) add this npm script "scripts" section of reactapp/package.json:
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
11) $ yarn electron-dev
    OR
    $ npm electron-dev
12) enjoy!

launch.json

// Visual Studio Code
// This is launch/debugger scripts for VSCode
// Put this file into reactpapp/.vscode/ folder

{
    // Используйте IntelliSense, чтобы узнать о возможных атрибутах.
    // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
    // Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Запустить программу",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

launch.sh

#!/bin/sh

# NOTE: Instead of this launch.sh you can use "electron-dev" script
# which is added in step-10 of install.txt
# $ yarn electron-dev

npx concurrently "BROWSER=none yarn start" "wait-on http://localhost:3000 && electron ."

package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "main": "public/electron.js",
  "private": true,
  "dependencies": {
    "electron-is-dev": "^0.3.0",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "devDependencies": {
    "concurrently": "^3.5.1",
    "electron": "^1.8.4",
    "electron-builder": "^20.8.1",
    "wait-on": "^2.1.0"
  }
}

Useful link for building release app.