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

Autofocus That Works Anytime in Angular Apps

More Introduce With JavaScript

Why I Switched From Visual Studio Code to JetBrains WebStorm

Wrap Your React Native Components

Refactor React Hooks : useReducer instead of useState

Invoke api running from AWS lambda in nodejs

MobX likes mutability. React does not

Enough Java for an Internship

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

How to build a voice recorder with SvelteKit

So You Want to Scroll Infinitely Using React and Firebase?

How to make a Vue Router 4 Navigation Guard with Firebase v9 API and Pinia

Integrating TailwindCSS with React in 3 simple steps!