Chapter 1 — What is Electron JS?

In short? Electron JS is a framework for creating native applications with web technologies like Javascript, Html & CSS. Yes — you heard that right, you can use HTML to create awesome native applications that can run across multiple platforms including macOS, Windows, and Linux. Many popular applications like Visual Studio Code, Slack, Discord, Twitch, and WhatsApp are created in Electron.

So how does it work?

First, open your coding editors and get ready for programming. Let’s create a very simple application. We will start with coding and then look at the theoretical part.

1. Create an empty folder for your application
2. Initialize npm inside of this folder, run: npm init -y
3. Install electron, run: npm install --save-dev electron
4. Specify start script in package.json to: "start": electron .
5. Upon running npm start Electron will try to run the file specified in the main option of package.json
6. Specify "main": main.js
7. Create main.js with the following content : console.log("Hello World");

{
  "name": "your-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "devDependencies": {
    "electron": "^10.1.2",
  },
  "scripts": {
    "start": "electron .",
  },
  "author": "",
  "license": "ISC"
}

console.log(“Hello World”);

 On `npm start`  electron will run `main.js`  file, you should see “Hello World” in the terminal console. One interesting thing here is that the application will keep running and will be loaded in the memory of your computer. It’s up to the user to shut it down. Now we need to create a graphical user interface(GUI) to interact with our application. For this, we will use pure HTML and JS.

#react #javascript #electron #software-development #reactjs