Electron JS + React JS & TypeScript tutorial for beginners

This is a step by step tutorial of Electron JS with React JS and TypeScript for beginners

What you will gain from this tutorial

How to setup React JS + TypeScript in Electron JS using ElectronForge

Difference between Main and Renderer process

What is preload and How to setup and configure the Preload

How to communicate between the renderer process and the main process with IPC

How to design the UI layout using CSS grid

The BrowserWindow and its basic configurations and how to configure a frameless window

How to interact with the filesystem, list out the content of a directory

How to get the content of a file on the system in Buffer format and use it on the renderer process in File/Blob format

How to play sounds in Electron JS renderer process

How to visualize audio sound in realtime in Electron JS using AudioContext

How to send events from the main process to the renderer process

How to create a functioning context menu and app menu

Electron JS typescript react tutorial

Chapters

00:00 - 06:00 - Introduction

06:00 - 20:49 - Introduction to Electron JS, Electron Forge, Installation of dependencies & app setup

20:49 - 25:40 - running the app

25:40 - 30:02 - Preload file setup and the explanation of the main and renderer processes

30:02 - 44:00 - UI design with CSS grid

44:00 - 52:18 - Communicating between the renderer and the main process with IPC and listing out the directories

52:19 - 1:59:00 - Getting file content and playing audio files

1:59:00 - 3:32:00 - creating audio player tools and audio visualiser using AudioContext

3:32:00 - End - Implementing Context Menu and App Menu

Project Files

Send me an email at amusapaulos99@gmail.com with your payment receipt and your github username to get access to the lesson files github repository