Create Desktop App With Electron And React

git clone --depth=1 https://github.com/chentsulin/electron-react-boilerplate.git project-name

$ cd project-name
$ yarn

$ npm run dev

$ npm run start-renderer-dev
$ npm run start-main-dev

$ npm run package

$ npm run package-linux

$ npm run package-mac

To package apps for Windows platforms:

$ npm run package-win

$ npm run build
$ npm run test-e2e

DEBUG_PROD=true npm run package

Manually Way

You have to install create-react-app template via terminal

npm install -g create-react-app
create-react-app your-app
cd your-app

create main.js file .. put below content into there

// ./main.js
const {app, BrowserWindow} = require('electron')

let win = null;

function createWindow() {
  // Initialize the window to our specified dimensions
  win = new BrowserWindow({width: 1000, height: 600});

  // Specify entry point
  win.loadURL('http://localhost:3000');

  // Show dev tools
  // Remove this line before distributing
  win.webContents.openDevTools()

  // Remove window once app is closed
  win.on('closed', function () {
    win = null;
  });
}


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

  createWindow();

});

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

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

Ref :

1: https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

2:  https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3

3:  https://github.com/chentsulin/electron-react-boilerplate