Electron & React JS: Build a Native App with Javascript, Part 1

Learn how to build a native app with Electron & React JS. Utilize JS, Html & CSS to create a fully native app.

Chapter 0 — Resources

Full Course: Electron & React JS: Build Native Chat App with Javascript

Youtube Guide: https://youtu.be/VCl8li22mrA

Github Repo: https://github.com/Jerga99/electron-react-boilerplate

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");

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.

Chapter 2— Browser Window

In Electron we recognize two main processes: the Main and Renderer process. The process which runs package.json’s main.js script is the main process. The main process can create a GUI in the form of a web page. Each “web page” runs its own renderer process. Did I use the term “web page”? Yes, Electron is built on top of the same source code as the Google Chrome browser, called Chromium. Again, let’s code a simple browser window, and then we will get into an explanation.

Open main.js file, and type the following code:

Function createWindow will create browser window 1200x800px with white background.

Normally you would be able to access Electron and Node API in the rendered process (the browser window) but by writing nodeIntegration: false we are disabling it (which considered a good security practice). We will access these APIs differently.

In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages, allowing lower-level operating system interactions. After the browser window is initialized it tries to run the index.html file. The createWindow function is then executed when the promise of app.whenReady is resolved. This will happen as soon as the Electron is fully initialized.

The last thing missing is theindex.html file. Let’s create one:

Just standard HTML displaying Hello world.

Now let’s run npm start and this is what you should see:

Congrats, you have just created a native application with the use of pure HTML and JS!

Chapter 3— Is This a Web App?

How do you access a normal web page? Typically, you’ll open Google Chrome (or any other browser) and type in the URL of the web page that you want to visit. Let’s say we are visiting medium.com. The browser will make a request to the medium.com server and after some time you will receive a response from the server with an HTML document and usually a bunch of JS, CSS files. The browser will take all of this content, render it on the screen, and the Medium application is displayed.

Electron combines all of these steps into one. First, the application is running locally on your computer (the same as Google Chrome). Upon running the Electron app, a browser window is created with the content of the HTML, JS & CSS we have specified to load beforehand. Similar to the Google Chrome browser (which can run natively on your computer), Electron app can do the same.

Chrome and Electron have a lot of in common. Chromium is a web engine for rendering the UI — in other words, a full Chrome-like web browser. Chromium can parse HTML, create a DOM tree, render the view, and all of this fancy stuff. That’s why we can use HTML in Electron.

V8 is the name of the JavaScript engine that powers Google Chrome. It’s the thing that takes our JavaScript and executes it while browsing with Chrome. The Electron application uses Node.js and Node.js internally, using a V8 engine. That’s the reason why we can use JS in Electron application + thanks to Node we can access the lower API of our operating system, which is not allowed on a typical web page.

So is this a web app?

No, but it’s very very similar. What you are creating in Electron is a native application that uses web technologies(HTML, JS, CSS, and so on) with the ability to access “lower” operating system interactions (including the ability to access a file system, power state changes of a computer, and much more). You can create any native application not much different from applications that you use on your computer in your daily life.

Conclusion

That’s it for this part of the tutorial. In the next chapter, I will show you how to integrate the React Library into your Electron app. If Electron is something that interests you then feel free to check my full course:

Full Course: Electron & React JS: Build Native Chat App with Javascript

Youtube Guide: https://youtu.be/VCl8li22mrA

Github Repo: https://github.com/Jerga99/electron-react-boilerplate

Have a nice day!

Cheers,

Filip