Native apps with web technology (React + electron-webpack)

Native apps using react + electron webpack

If you are a web developer and built various web applications as hobby projects and real projects ? Then this article will help you go further beyond reaching online users.

In this i will help you take your web application outside web browsers like chrome and mozilla

Since chrome apps were deprecated we can use electron.

You can follow these simple steps to start a new desktop app with react and electron webpack also can be helpful to convert existing react application to desktop app

  1. electron-webpack is a great place to refer the configuration of the app. But i will show the exact steps to get started below 👇

2. Now add react preset

3. Now change the file name in the render folder to index.jsx and add below code

import React from 'react'
import ReactDom from 'react-dom'
const Root :React.FC = ()=>{
return(
<div>
<h1 className="heading">hello</h1>
<style>{`
.heading{
color:red;
}
`}</style>
</div>
)
}
ReactDom.render(
<Root/>,
document.getElementById("app"),
)

4. you will face the error as webpack cannot complile JSX so create a tsconfig and add the below code

5. Now try to run the application using the below command

6. now the application uses react and you can develop a complete application using this setup.

On my way to be an indie developer, creator creating a focus on better living.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store