Building a Desktop App with React JS + Electron JS : Step-by-step Tutorial
In this tutorial, we will guide you through the process of building a desktop app using React JS and Electron JS. We will be creating an Overlay Timer App that displays a timer on top of other applications.
Step 1: Set up your project
First, make sure you have Node.js installed on your machine. Then, create a new directory for your project and navigate into it in your terminal.
mkdir overlay-timer-app
cd overlay-timer-app
Next, initialize a new Node.js project by running:
npm init -yStep 2: Install React JS and Electron JS
Now, we need to install React JS and Electron JS in our project. Run the following commands in your terminal:
npm install react react-dom
npm install electron
Step 3: Create the app
Now, let’s create the React app. Create a new directory called “src” inside your project directory, and create a new file called “App.js” inside the “src” directory. Add the following code to “App.js”:
import React from 'react';
function App() {
return (
Overlay Timer App
This is the timer app that will overlay on top of other applications.
);
}
export default App;
Next, create a new file called “index.js” inside the “src” directory and add the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
Step 4: Create the Electron main file
Create a new file called “main.js” in your project directory and add the following code:
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
});
Step 5: Create the index.html file
Create a new file called “index.html” in your project directory and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overlay Timer App</title>
</head>
<body>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html>
Step 6: Run the app
Finally, to run the app, run the following command in your terminal:
electron .Your Overlay Timer App should now open as a desktop application with a timer displayed on top of other applications. Congratulations on building your first desktop app with React JS and Electron JS!
I had so much fun creating this application and I hope it brings you so much joy! 🎉
I can't wait to hear your thoughts! 😊
Tauri >>>>>>>>
Thanks for this original and unique project! Amazing tutorial! 👏
I like it. I am trying to make one of these for myself and now I am definitely going to build in an Overlay mode. thank you.
Thank you so much for sharing you skills on Electron JS. It is really helpful because there only few electron tutorials in youtube. Off-topic. I have a running local browser-app using react js. Can I transfer the components into electron js? Thanks!
Amazing amazing amazing tutorial!!!!! Thank you so much for making this! Thanks to you I can now build apps with Electron! 😀
Thank you so much, your tutrials have helped me a lot creating my first Electron app, which was amazing becuase all other tutrials were really difficult to follow-up .. Keep up the great work 😀