Electron with React: The Ultimate guide to create cross platform desktop apps easily
Tags: react, electron, electronforge, typescript
Published: 2023-08-10 19:46:40

**Welcome to this comprehensive guide where we will embark on a journey to master the art of setting up Electron and React using Electron Forge 6 and the exciting enhancements that React 18 brings to the table. From installation and project setup to integrating cutting-edge features into your applications, I've got you covered.**

For creating beautiful looking desktop app with **Electron and React** we'll be using **_Electron Forge - A complete pipeline for creating and shipping Electron app_**. It also provide an easy way to setup React with Electron. 


Let's go step by step - 


-  Create a new directory for the project.
-  Open same project directory created in step 1 in VS Code.
-  Open Terminal in Vs Code and first setup the Electron App with Webpack -

```
yarn create electron-app electron-with-react --template=webpack
```
**Or if using npm,**
```
npm init electron-app@latest my-new-app -- --template=webpack
```
After installation,
```
cd electron-with-react/
```

> _After creating the electron app, now let's setup the React. Let's first setup  **babel**_

```
yarn add --dev @babel/core @babel/preset-react babel-loader
```
**Or if using npm,**
```
npm install --save-dev @babel/core @babel/preset-react babel-loader
```

> Set up the babel-loadermodule with the React preset in `webpack.rules.js`:
```
module.exports = [
  // ... existing loader config ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  }
  // ... existing loader config ...
];

```

> _Finally, Let's install **React**_.

```
yarn add react react-dom
```
**Or if using npm**
```
npm install --save react react-dom
```

- After doing everything. Your directory should look something like this. 

!['Directory structure after installing the packages'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqf7c8y2biksefbhdo51.png)




**_So, it's Done????_**

!['jerry saying no gif'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d4yn9eloc1z90fyc7wf.gif)
 
**_Still something is left. Let's continue_**

- Now create two new files inside the src directory.
  `src/App.jsx` and `src/index.js`. Why we created **index.js** 
 I'll tell you soon.

- Now your directory should look something like this. 


!['directory structure after creating files'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxbctsu9wcgkb1a04tzb.png)

_Now here is something where the Electron Forge documentation still lack's till today when I am writing this article and needs to be updated. If you follow them then you'll be surely getting some error and your react app will not load. But we are not going to wait for that update. Let's continue..._

_We have to first modify our `index.html` file. Copy the below code and replace with your `index.html` content._


```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Electron With React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

_Since I am following similar directory of React app that's why we created one extra file in the above steps which is `src/index.js`_

Now copy paste the below content inside `index.js` 
```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./app.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

```

Also copy paste the below content inside the `App.jsx`

```javascript
import React from "react";

function App() {
  return (
    <div>
      <h1>💖 Hello World!</h1>
      <p>Welcome to your Electron application.</p>
    </div>
  );
}

export default App;
```
Now, import the `index.js` inside renderer to make sure your react app is visible to you.

```javascript

import "./index.css";
import "./index.js";

console.log(
  '👋 This message is being logged by "renderer.js", included via webpack'
);

```

All done. Now just one more command and our will be up and running. Now just copy and hit this command in your terminal.

```
yarn start
```

**Now, You should see this screen.**

!['app running image'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdjrpkacfj884latvdk9.png)



**Now we can say**

!['relax_gif'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dimf6kp5i0y1iiye6sv8.gif)

Thankyou for you time in reading this article. If you face any issue feel free to ask and also if you want more article on Electron, React, NextJs. Feel free to comment below.

Thankyou 💝
Navdeep Mishra 😉