Say I want to build a simple file explorer Electron app, and design the UI with React. Now, I need React to send the appropriate IPC calls from a Component to the main process of Electron, and receive replies containing filenames for the File explorer that is rendered by React.

How do I go about doing it? There are unfortunately no recent tutorials for this.

Say I want to build a simple file explorer Electron app, and design the UI with React. Now, I need React to send the appropriate IPC calls from a Component to the main process of Electron, and receive replies containing filenames for the File explorer that is rendered by React.

How do I go about doing it? There are unfortunately no recent tutorials for this.

• javascript
• reactjs
• electron

Share Improve this question Follow asked Jul 1, 2021 at 11:02 Sohail SahaSohail Saha 57322 gold badges77 silver badges1818 bronze badges 6

• It's documented here. There are also examples electronjs/docs/api/ipc-main – Tracer69 Commented Jul 1, 2021 at 11:04
• and here's a db example using contextIsolation and IPC – pilchard Commented Jul 1, 2021 at 11:06
• @Tracer69 I know about using the 'ipcMain' and 'ipcRenderer' modules. My question was, how do I access them from within a React rendered UI. – Sohail Saha Commented Jul 1, 2021 at 11:08
• Through the ipcRenderer exported by the electron package (as stated in the example) – Tracer69 Commented Jul 1, 2021 at 11:09
• @pilchard Thanks a lot. That was exactly what I needed! – Sohail Saha Commented Jul 1, 2021 at 11:19

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

So, @pilchard's ment pointed me to a blog post titled Creating standalone Desktop Applications with React, Electron and SQLite3, and that finally gave me the best answer.

You use what is called a contextBridge, use it to create a api to bridge the renderer process and main process, and expose only the needed functions. Read the post I mentioned above (scroll down to the 'Communication Between React & Electron' section), and you'll get it.