Use IPC Main

public/electron.js

@@ -1,47 +1,56 @@
-const path = require('path');
+const { app, BrowserWindow, ipcMain } = require('electron')
+const path = require('path')
 
-const { app, BrowserWindow } = require('electron');
-const isDev = require('electron-is-dev');
-
-function createWindow() {
+function createWindow () {
   // Create the browser window.
   const win = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
+      preload: path.join(__dirname, './preload.js'),
+      contextIsolation: false,
       nodeIntegration: true,
-    },
-  });
-
-  // and load the index.html of the app.
-  // win.loadFile("index.html");
-  win.loadURL(
-    isDev
-      ? 'http://localhost:3000'
-      : `file://${path.join(__dirname, '../build/index.html')}`
-  );
+      enableRemoteModule:true,
+    }
+  })
+
+  // Remove Menu Bar
+  win.removeMenu()
+
+  //load the index.html from a url
+  win.loadURL('http://localhost:3000');
+
   // Open the DevTools.
-  if (isDev) {
-    win.webContents.openDevTools({ mode: 'detach' });
-  }
+  win.webContents.openDevTools()
 }
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(createWindow);
+app.whenReady().then(createWindow)
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit();
+    app.quit()
   }
-});
+})
 
 app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+
   if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
+    createWindow()
   }
-});
+})
+
+// IPC
+ipcMain.on('async-test', (event, arg) => {
+  // gets triggered by the async button defined in the App component
+  console.log("async", arg) // prints "async ping"
+
+  event.reply('async-reply', 'pong')
+})

public/preload.js

@@ -0,0 +1,5 @@
+const { ipcRenderer } = require("electron");
+
+process.once("loaded", () => {
+  window.ipcRenderer = ipcRenderer;
+});

src/App.js

@@ -1,25 +1,15 @@
-import logo from './logo.svg';
-import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+import React from 'react';
 
-export default App;
+export default function App(){
+   return(
+      <button onClick={()=>{
+         ipcRenderer.send('async-test', 'ping')
+         // reply
+         ipcRenderer.on('asynchronous-reply', (event, arg) => {
+         console.log("Hiii",arg) // prints "Hiii pong"
+         })
+     }}>Async</button>
+  )
+
+}