Electron JS Tutorial For Beginners - From Scratch To Advanced

Full Electron JS tutorial for beginners

Please don't forget to subscribe to my YouTube channel, it motivates me to do more tutorials like this

In this tutorial I taught Electron JS from the very scratch to advanced and in this tutorial you will gain knowledge on the following
i. How to create the BrowserWindow
ii. The difference between the main and renderer process
iii. The preload renderer bridge and how to create and configure the preload script
iv. What the Inter-process communication (IPC) is and how to use it to communicate between the renderer process and the main process
v. How to send data between the renderer and the main process
vi. How to open the native dialog box and select a file from it
vii. How to implement the context-menu and also how to customize and create a working app Menu
viii. Debugging in both the renderer process (the UI) and the main process
ix: How to delete a file from within your Electron desktop app

Chapters
00:00 - 04:56 - Introduction
04:56 - 12:08 - Intro to Electron, app and main process initialization
12:08 - 16:43 - BrowserWindow initialization and UI creation
16:43 - 20:52 - Platform specific operations
20:52 - 28:42 - Intro to renderer process & preload script
28:42 - 32:41 - Demo project setup
32:41 - 49:10 - Inter-process communication (IPC), implementing native dialog box & loading external javascript
49:10 - 01:02:21 - Context menu, Sending events and data from the main process to the renderer process & Debugging
01:02:21 - 01:09:42 - Custom App Menu
01:09:42 - End - Deleting file, sending data to the main process using the IPC & Debugging

Links
Lesson files on my GitHub repo
OR
Clone it on the CLI

Electron JS Homepage
Documentation home page
IPC
Menu
Dialog

#electronjs #electronjstutorial #electron

[shopifyaddict]

Make a tutorial electron js time tracker