Build a Desktop app using React, Electron and Vite (Electron-Vite) | Calculator Desktop app

hi everyone welcome back to my YouTube channel in this video we'll be building a calculated desktop app using react white as well as electron obviously so let me give a brief demo photo building we'll be having a basic calculate app which has which has basic calculation we can do it from from the buttons as well as from the keyboard events keyboard itself as well so for this what are we doing instead of doing manual configuration and doing a lot of configuration there we'll be using a tool which is called electron White which is going to help us do a lot of these basic scaffolding of our project it has a tons more features let me know in the comments if you'd like me to explore them as well but anyway in this video we'll just be focusing on how this desktop application okay so for that we need to copy this command okay and let me come back here type it I'll be writing calculator react it's gonna be react no no no no no npmi uh they didn't so in the meantime you can explore the project so we'll be just deleting a lot of stuff here let me come to index.html nothing yes basically assets index.css I'll be putting my own Styles I'll not be going to a lot of the Styles part some some basic CSS let me work you through it with them okay first let me delete all of the stuff versions app.jsx delete complete let me just remove this also nothing but hello world remove this as well okay and let me walk you through the index devices I'm doing basic research or pairing margin boxes in Border box HTML body width and height as well as in index.html or main.j6 I have the root so let me add here also and let me walk you through the basic CSS basically this is what will be the continue whole section okay then we have result contribution is nothing but the white area okay and inside it we have the results span which is nothing but this and rho is basically rows of buttons and the buttons are just buttons okay so that is it for basic styling you can check out what I've done just some Basics yes I've done it okay so now let me come here and let me close this off let's see what what we get as the output as you can see we have the electron hello world okay so let me come here first of all do some minor changes here uh not this file it should be sorry let me keep it open if we come here it's okay what calculator react okay and now with regards to electron I'll be doing this specific stuff with electron okay rest the whole video will be most about more about more about react and just to make it work in electron nothing much so the main electron part which will be touching it noise this means your Js is correctly seconds here so as you can see vs code has this window okay this is nothing but you can say browser window in one way which has a width height and some other options as well so there is nothing but the width and height is nothing but the height and um so we'll be basically modifying those nothing much specifically done here okay and I'll be giving it the value of 350. okay here let me give it four one zero and I'll be making resizable as false the desire false is basically going to disable the minimize maximum option as well as because I'm basically not allow you to reset the window obviously so as you can see now you can do minimize maximize okay but now if I close it and renate it again as you can see I can't do meme as maximum and I can't resize also okay and I have this minimum wage this is a basic electron which we have this is the only part where we're touching electron honestly speaking okay so uh this video is never meant to be basically going deep down electron because electron is washing one way it has a lot of stuff okay so let me know in the comments if you would like me to go more deep into electron side also okay maybe building application let me know in the comments just okay I'll see if what can be done on that anyway for this video let us again come back to it I guess let's focus on this so now we can come back uh and just create a component which is going to be calculator uh not sure why anyway okay and let me come here and write a very FC okay and I think again let me show it's here it is yeah not sure why it comes again again anyway first of all we can write some basic markup here uh for the markup I'll be copying it from the previous video which I've done for vanilla JavaScript because it's nothing fancy here I'll just walk you through it basically what I've done here but let me come here and just paste it for now okay and for class also I need to change everywhere class name okay done so this is it and yeah let me walk you through like I told you previously we'll be having and let me uh come back first year and just calculator refresh as you can see let me work it right now where is it here you're here so we'll be having our container okay and it will continue Reserve container we'll have the result which will will be populating here okay don't worry about that then we'll be having rows of buttons which is nothing but this and we'll be using data value okay so what's the use of data values like each button whenever we click on it we would like to know what button has been clicked okay and we'll be only having event listen only in the container not on each buttons instead of having multiple event listeners on each button I am keeping only one table and listener under container so we need some way of identifying it so the user can click on here here anywhere so we would need some kind of unique way of identifying it so we'll be using data sets attributes okay so in here I'll be using value and assigning these values it will become more clear if you have not watched my previous videos it will become more clear when I write a code for this I'm good I'm just explain the intuition now so we'll be having this values okay and we'll be using this values to identify which button has been clicked and based on that we can perform certain actions like for equal will be evaluating expression for buttons or for basically operators will be basically appending it to a string of expression Etc okay so this is the main uh markup okay let me now come with a logic part okay so first of all let me first create something using usted it will be what expression and it will do what set expression it will be an empty string okay and I'll be creating some functions that update expression equal to value okay so what this will do is like it's going to first check whether it's if there is a value or not uh basically what it's going to do is like it's going to check these values if value equal equal C then basically going to clear the expression the expression is what is going to be displayed on the UI okay this location like I told you previously uh to be very clear let me write expression here only I think I'm going with the view syntax anyway this should be the one anyway yeah set expression I'll make it empty string okay now else if value equal or value equal equal and just ignore the terminal okay um just focus on where I'm typing set expression expression [Music] and for this we'll be using email honestly speaking it's not the optimal way and anyway I'm not trying to build a production calculator a desktop application it's meaningful learning so that's why I'll be using email because that's the easiest way to root an evaluation of an expression okay and these all values like backspace enter and all these are just the key codes okay whenever we basically type from the uh from the keyboard you will be basically listening for these and if there is any if the users typed any of these Keys we'll be basically performing those actions that's it and whenever basically will be evaluating expression whenever the user has time equal or if PC has clicked on button equal I has typed enter and otherwise whenever the user basically clicks on backspace or delete or whatever like in here we have backspace as we have noticed it where is it backspace so when I um that is done or otherwise the delete is done otherwise the backspace from the keyboard has been typed or pressed then basically it's gonna remove the last character okay that's it and by default if it's any of the else like adding an operator or number Etc maybe just doing concatenation conservation bus value I guess yeah this is it and now let me do let me make it work for now okay so on click okay one more thing I need to write some other function also let me first handle button click okay and let me write a code for this also light at handle button click equal to what e get value equal to e dot Target dot data set dot value okay and if we have any value only then call the calculate expression with the value okay so what it's basically doing is like see like I told you previously uh let me do one thing uh let me log it and so on DOT log value okay let me come here Ctrl shift I open a Dev tools oh Let me refresh it It's Shouting for the refreshers okay that's looking fine now let me come here and nine as you can see nine has come up okay and when I pressed on this Edge case basically the uh the basically the event business on the container okay so anyway it can be pressed on but we don't want it to be done like for anywhere we have only one for the button we only want to listen for changes basically presses when the user basically clicks on the buttons so for that reason I am checking extra whether if value is there or not basically the user has clicked on these buttons or not in the first place and if the user state only then will be evaluating the expression okay so this is it and calculator expression value and literally what expression only I guess let's see now what happens yeah anyway it's working fine nine six three plus six equal okay let's see what happened as you can see see it's saying eval error refers to evaluation basically saying like uh and it's not good to even do eval and that's why content security profile is not allowing us to do but anyway we'll be just going ahead with it so for that reason what I'll do is like I would need to add a something in the index.html file in the content security header is meta tag anyway as you can see here there is a script itself yeah and save email that's what we are going to be typing it because that was there okay let us come back here now and it's gonna anyway shout at us but we can ignore it 14 minus 3 6 uh I'm not handling for those H cases which we can ignore for now okay and what three eighteen okay so this is working fine now okay let us come back here so we have only handle for the scenarios of what uh uh you UI okay not from the keyboard so we need to add for meet account for those also now so we can come back and write Logic for that also now so let's start writing handle key down that value e dot key if value equal equal enter then we we don't want to handle basically we want to prevent the default behavior of enter that's it that's what you're trying to do here prevent default behavior of enter and we are going to create an array also here on the top which is just gonna be the keys which you would like to listen for because we don't want to listen for all the keystrokes from the user okay type in manually I'm just copying it from my JavaScript one I'll just walk you through it it's nothing fancy here it's just zero one two three four five six and eight nine zero plus plus operators and then C enter backspacity that's it now you can come here and say allow values dot includes what value only then calculate expression value cool this is it I guess and I need to call this function also so I'll be doing it in the use effect hook use effect snippet window dot add event listener key down what handle key down then what return is gonna be window dot remove event listener key down handle key down okay this is it so let's see now that works fine and Let me refresh it on Windows save switch okay I'm typing into keyboard now I'm deleting from keyboard again I can type anything here I can clear also I guess what anyway yeah so if I type any random stuff it's not working anyway yeah so eight into nine seventy two so yeah that's it I guess and let us I think maybe I don't think so I've missed anything here okay so that's it I guess we can now just do a build of whatever already done so let me come here get Bash so we are going to be using electron builder for building it building this whole application for Windows you can try it for other platforms as well like mac and Linux let me come and show you the command okay so I'll just copy this nothing much fancy okay and let me okay sorry let me come back when it's done okay okay so it is done as you can see and we can come here and see what has been the output so you can see dist is there let me come to go to River and file explorer I am not touching anything else I'll be just touching this calculator act but first of all let me just close this one so we don't get confused let me try to install it as you can see started installing it you know windows in basically in my system entered by defaulting is going to start once okay as you can see it is there let us start doing it okay so as you can is working fine okay and just to be on the same page whether it's there or not in our system as you can see it's coming here also okay so it's a basically a desktop application which we have built okay and obviously I've not handled a lot of edge cases I think you might have seen that edge case which we got when the expression doesn't get evaluated properly okay so anyway this is just for development purposes only so let me know in the comments if you'd like me to go more deep into building electron application as well and if you have any ideas or whatever topics you would like me to explore but I think this was it for this video I guess okay and hope to see you for other videos as well and bye

Channel: Mohit Kumar Toshniwal

Views: 2,794

Keywords: electon, electon-vite, desktop application, calculator app, vite, react, react.js, reactjs

Id: niTEOwD1pzs

Length: 19min 25sec (1165 seconds)

Published: Sat Sep 16 2023