How to Create a Cross-Platform Desktop App with React and Electron

what's up everybody my name is LaVar welcome to code TGA and today I'm going to show you how to create a desktop app utilizing react it's super simple we're going to use a framework called electron if you're familiar with electron great this is going to be super simple for you if you're not familiar with electron still going to be super simple especially if you know react so the first thing we need to do is install a bundler uh a webpack bundler that electron offers if you want to follow along with the documentation you can and that's a Ron forge.com so electron forge.com on how to do this so the first thing we need to do is install the bundler it's a webpack bundler that electron offers and it's uh the webpack Bund um electron app bundler with webpack so name it whatever you want I'll name this one TGA just go into a directory that makes sense that you want to start this project in so npm andit electrona latest uh TGA D- space-- template equals webpack so we want to go ahead and install that plugin so uh this essentially comes with everything you need to get an an electron app up and running essentially after we start this we can npm start and it will run our electron app so I'm just going to show you what that looks like pre um react so we'll wait for all the dependencies to get installed it takes a couple seconds but um yeah if you want to install Tailwind there's a or a CSS library after you get react up and running there's a few extra steps that you have to do if you're interested in a tutorial on how to do that I'll create another video just let me know below and um if you're not and you think you can figure it out that's great too so all right so it's installed the next thing we want to do let's change uh directory into or change into that directory and I'll just open that up so that you can see what it looks like that comes pre-installed with that bundler so similar to react you have your Source folder folder uh your node modules all that stuff it comes with a couple different things uh let me explain a couple of these for you your webpack rules um this is your module exports uh we're going to go in here and we're going to update this with our jsx or TSX if you're using typescript um but yeah you basically want to update this when when we create a react app the other part that we're going to edit and mo modify is this renderer doj file but we'll get into that in a sec so the next step is we need to actually install the react Library uh the Babel react library for electron um and that's also pretty simple it's npm install and you want to save them to your Dev dependencies and so we're going to install Babel core and then this Babel preset for react and then your Babel loader uh so we'll go ahead and install those should be pretty quick and while that's installing let me go into the webpack rules and we'll update that basically we're going to uh update it with an object that uh runs our jsx code um if you're going to be using typescript this is going to need to be TSX but basically with the babble loader and the preset react preset that we're installing it'll be able to render jsx for us in our electron app so we'll go ahead and save that um so go ahead update it take your time pause the video if you need to next uh instead of just creating a react app like we normally would with our npx um installation process what we're going to do instead is just manually install react into our dependencies and so we'll just mpm install save react and react Dom and that will be all we need to get react up and running within our electron app so before I start let me just before I actually start with reacting the app let's just let's just look at What electron looks like pre-loaded with that webpack um bundle before we change anything for react let's just um look at what it looks like pre pre react so you can kind of get an idea and if you don't want to use react and you just want to you utilize electron that's cool too uh it's very very unique and it's a very cool Library a lot of people use it I think slack uses it uh Microsoft teams signal all utilize electron for their desktop applications super slick okay so once you start it like you would a react app or anything else this is what you get pre-installed for electron here's your desktop app um pretty simple I'll show you how to get rid of this menu bar if you don't want it uh but yeah this is it this is electron so let's close out of it now let's get uh react up and running so what I'm going to do this is what I do a little bit differently than the documentation on the uh electron Forge site is instead of creating an app file I'm just going to stick to the standard index file um and because it's more index. jsx um more standard to react and how I work in it so we'll just copy what they have in uh the electron Forge documentation we going to import all from react and then the create root from root from react down client and uh we're going to render just a simple hello from react in our body so let's go ahead and save that and then the next thing we need to do is update our renderer DJs file so we want to render the JS index. jsx file instead of the CSS and now when we start it npm start we should get the basic functionality to our react app it should just render that index file and that's what we should get so once we start it let's see what we got make sure there's no errors boom it looks like it worked hello from react we have now installed react into electron and we now have a desktop app that utilizes Rea react super simple super quick I don't think that took us more than five minutes to get up and running um but there are a couple tricks to this that are not normal to react if you've worked in react for a long time one of the things is we tend to do the uh get element by ID uh react root loader but instead we're just going to do the document body which means we have to do things a little bit differently or some some things a little bit differently than how we would normally do it and I'll just show you real quick so let's say you have a component um let's just do home home. jsx and we'll just do a standard function for react save it um and now we want to import it into react like we normally would now if we do this um and we render that home component let's just start it and I'll show you what we get we should get an error for doing it this way uh because we're not actually importing home it's not going to find home in the same way we would normally uh import functions now we could we could change some stuff up within electron to just import it with the at symbol like we would in like maybe a next app or a certain type of react app but what we're just going to do instead is we're just going to add the jsx because I don't really want to change electron around too much I want to keep it how it comes compiled so uh that we don't tweak too much of it and end up breaking our code later on down the line so now when we npm started because we just added the simple. jsx tag and you're going to want to do that throughout this app anytime you import a component comp or a page into another page or component and utilize anything that we would normally utilize in react you need to import it with the tags. jsx tags and here we go super simple ran now we can import that component in and now you have a react app up and running and you could do everything you would normally do in react you could uh you the route functionality with react router Dom uh that will function the exact same as it would in a react app except now uh you do it you're not going to see the actual URL up in the in the in the desktop app so you want to make you want to tweak it a little bit differently than you would because people can't just go back and forth like you C in a web app it's a desktop app so you need to design it a little bit differently than you normally would but it's super simple super straightforward um and this is how you create a react app on your desktop so let's close well let's yeah let's close out of this real quick and I'm going to show you how to get rid of that menu I don't like that menu I like to create my own so we're going to go into the main.js file and all we're going to do is we're going to I think it's autohide menu bar and we're just going to set that to true and now that menu bar should be gone so we'll start our app up and just make sure that I told you correctly but let's just check it out boom yep menu bar is now gone and we no longer see it and you can create your own menu bar from here on out if you want to create you want to update your hello world and all that you know it's in your index.html file so you can update it here just simple standard is just like we do in react we can update the index file it's just not in the public F folder it's in the source folder but I hope you enjoyed this I hope that it was helpful if you have any questions please reach out if you want to see a tutorial on how to install Tailwind there's a little bit of a trick to it um but it's not super hard or complicated and I can show you how to do that please make sure you subscribe so I can create more videos like this if you find it helpful it' be super helpful to me uh if I could get more subscribers and start uh actually growing this channel up a little bit but thank you for watching I hope you enjoyed welcome to CODA and uh I'll see you around

Channel: Code Tega

Views: 812

Keywords:

Id: pnsaQs45Kj8

Length: 10min 18sec (618 seconds)

Published: Sat Feb 03 2024