Full VSCode Clone With Electron JS, React JS, Monaco Editor Library & CSS Grid - Part 2
This video is the part 2 of this tutorial, the link to the first part is • Full VSCode Clone With Electron JS, R...
Buy me a coffee: https://paulosab.gumroad.com/coffee
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
https://github.com/paulosabayomi/vsco...
OR clone it on the CLI with
git clone https://github.com/paulosabayomi/vsco...
Electron JS documentation
https://www.electronjs.org/docs/latest/
Electron Menu
https://www.electronjs.org/docs/lates...
Electron Forge
https://www.electronforge.io/guides/f...
Electron Forge React
https://www.electronforge.io/guides/f...
Monaco Editor GitHub repo
https://github.com/microsoft/monaco-e...
Short Doc
https://github.com/microsoft/monaco-e...
Monaco editor webpack plugin
https://github.com/microsoft/monaco-e...
Electron Store
https://www.npmjs.com/package/electro...
SVGR
https://www.npmjs.com/package/@svgr/w...
React Perfect Scrollbar
https://www.npmjs.com/package/react-p...
Redux toolkit
https://redux-toolkit.js.org/tutorial...
React Navigation
https://reactrouter.com/en/main/start...
React router Hash router
https://reactrouter.com/en/main/route...
URL loader
https://github.com/webpack-contrib/ur...
VSCode Figma
https://www.figma.com/design/k8Z1DvF0...
Seti UI icon
https://github.com/jesseweed/seti-ui
Codicon repo
https://microsoft.github.io/vscode-co...
Codicon on iconify
https://icon-sets.iconify.design/codi...
VSCode Icon themes
https://code.visualstudio.com/blogs/2...
#vscode #monaco #texteditor #electronjs
![[Overwatch] Overview Of New Map Coming Soon](https://images.videosashka.com/watch/PK9X0pkHsQ4)
