Building Electron.js apps with React.js (2023 update)

This tutorial explains how you can develop and build your Electron.js app using React.js

Although the Electron.js website mentions it’s compatible with React.js, there is no clear guide on how to achieve this. I found some tutorials online, but they seem a bit bloated. They mix both the Electron.js source with the React.js source and I wanted to keep them separate.

How does Electron.js work?
So, how does an Electron app work? It’s actually a Node.js process spawning a window which is in fact a Chromium browser:

How does React.js work?
When building a React.js app, it consists of a dev server for hot-reloading. Once you’re done, you can ‘compile’ your React.js app for production. It outputs a static index.html file and its assets (javascripts, css, images).

Connecting Electron.js and React.js

With the knowledge above, connecting the 2 seems fairly easy. We need to make sure Electron.js loads the React.js dev server when we’re developing and bundle the compiled React.js app when we package the app into an executable.

Let’s start by creating 2 folders:

• the Electron.js app: /electron-app
• the React.js app…