Full VSCode Clone With Electron JS, React JS, Monaco Editor Library & CSS Grid - Part 1
In this tutorial we are going to be cloning VSCode using Electron JS, React JS, React hooks, TypeScript and Monaco editor library
The tutorial is divided into 2 parts: this video is the part 1, the link to the second part is
What you'll gain from this tutorial
- Using React JS in Electron JS
- CSS Grid
- Interprocess communication with IPC
- Creating context menu and top menu
- Creating files in electron js
- Editing files in electron js
- Loading and displaying the content of a directory in electron js
- Integrating monaco text-editor library
00:00:00 - 00:14:20 - introduction and demo
00:14:20 - 00:39:21 - Project setup and configuration
00:39:21 - 00:53:19 - Initialisation, brief introduction and routing setup
00:53:19 - 01:07:32 - UI Layout setup with CSS grid
01:07:32 - 01:56:43 - UI development
01:56:43 - 04:27:16 - Interprocess connection using IPC, preload file setup, selecting and loading directory content into the project, and additional UI development
04:27:16 - 05:54:00 - Setting up Monaco editor library, displaying file contents in Monaco editor and editing files
05:54:00 - 06:33:38 - Footer content UI development and implementing line and column number with Monaco editor event
06:33:38 - 07:39:01 - Designing the file tab
07:39:01 - 08:01:56 - Saving Files
08:01:56 - 09:01:52 - App Menu and context menu for folder and files implementation
09:01:52 - 09:31:33 - header design
09:31:33 - End - Creating files, Selecting New Folder and other things
Links
Link to the lesson files on my github repository
OR clone it on the CLI with
git clone
Electron JS documentation
Electron Menu
Electron Forge
Electron Forge React
Monaco Editor GitHub repo
Short Doc
Monaco editor webpack plugin
Electron Store
SVGR
React Perfect Scrollbar
Redux toolkit
React Navigation
React router Hash router
URL loader
VSCode Figma
Seti UI icon
Codicon repo
Codicon on iconify
VSCode Icon themes
Watch video Full VSCode Clone With Electron JS, React JS, Monaco Editor Library & CSS Grid - Part 1 online without registration, duration 06 hours 24 minute 58 second in high hd quality. This video was added by user Build Cool Stuffs 11 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 42 once and liked it 3 people.