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 👇
# create a directory of your choice, and copy template using curl
mkdir my-project && cd my-project
curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

# or copy template using git clone
git clone https://github.com/electron-userland/electron-webpack-quick-start.git
cd electron-webpack-quick-start
rm -rf .git

# install dependencies
yarn

2. Now add react preset

yarn add @babel/preset-react --dev

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

//renderer/index.tsximport 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

//tsconfig.json
{
"compilerOptions": {
"jsx": "react"
},
}

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

npm run dev

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Common JavaScript Errors and How To Handle Them

Popular ORMs in JavaScript

Event Loop and the Big Picture — NodeJS Event Loop Part 1

3Box Community Update #4 🔥

5 ways we improved our React Native app

Java Script (Best Practices for writing good quality code)

What Are Higher Order Components?

Preparing for React — What You Should Know First

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
Achuth hadnoor

Achuth hadnoor

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

More from Medium

5 hurdles when creating a Spotify app

Dynamic placeholders in React

How To Setup React App With Vite & Tailwind Support

COMBINATION OF REACT TO WORDPRESS.