#1 React + Vite - Setting up React Environment

in this lesson we'll be setting up our react environment you need to have node GS installed like I said in the previous lesson to do this you can head on to the nodejs website and download nodejs for your device and then also you need to have a terminal now here I'm using my VSS code terminal which you can open with command shift p and then enter toggle terminal so if I do that again toggle terminal I have the terminal here but you can use any terminal application of your choice and to confirm that nodejs is installed you can run node version like this so currently I have node 21 and also like I said when you installed node it also installs npm so I can do npm version and here I have this version of npm We're going to be using npm to install dependencies or do several stuff from the mpm registry so if you head on to the mpm registry this is where a lot of people publish packages too and you can download packages here so for example there is the sink package there is also the react package like I also said you can use other package managers like Yan or pnpm or the rest for this course I'll be sticking with npm now when it comes to setting up a react project there are several packages you might need to have a good development experience you might choose to set this up yourself installing one package after the other and configuring several things but thankfully you don't have to because we have popular tools like create react app and we also have vit which takes care of that for us so you don't to set it up by yourself in this course we're going to be using vit but you can as well use create react app I would recommend you use vit so you can follow along with this course so if you scroll down to the instructions on the vit website you can use vit for several templates by the way but we're going to be using it for react so here you run mpm create V latest so back in my termin now first I want to go to the directory where I want to set up my react environment and that is in desktop GitHub Yep this is where I want to put my react project and now I can run mpm create V latest first thing it's going to ask me is what is the name of your project or name of my project is react cost then it's going to ask me what framework I want I want react and then it's going to ask me what variant now you can use react with typescript but for now let's just stay with JavaScript and as we progress in this course we would add typescript to our project and we now have this then you can open the project in vs code or in your code editor okay now we have all of these which are the files that VD automatically created for us I can open my terminal again and now I run mpm install which would install the dependencies in this package.json and I'll come back to the package.json in a second but yeah let's run mpm install and with the packages installed I can now run mpm run Dev if you are thinking where I got these commands from this is coming from the docks here so you see mpm install then mpm run Dev and now I can run the development server for my react project and it's currently on this URL Local Host 5173 so I can come here on a new tab and now I have my react project created with vit but let's go in and look at some of these files that vit installed or created so let's start from the package.json if you're not familiar with package.json you can think of it as that manifest file that contains a lot of information about your project like the dependencies you're using the script you want to run different configuration name and several information like that so if we come here you have a name is this project private what is the version type module and then here you have a script scripts are just a way to define custom commands in your project so here we have Dev what this means is that in your terminal let me create a new terminal here what this means is that when you run mpm run Dev it is going to run vit when you run MPN run build it's going to run V it build and you can create your own custom commands for example I can have a custom command called decode which is going to run mpm run install now if you go back here and you run mpm run decode it's going to run mpm run install so as we saw the dev script allows us to set up this development server that we have on the left npm run build would run vit build and what this would do is when you have project you have the development version of your project which would have a lot of you know tools and packages that would allow you have a good development experience and then you also have the production version of your project the production version is what you would host for users to see this is going to create that production version and in fact we can run this so if I run mpm run build so it creates a disc folder dist is short for distribution so this is what you would host on your hosting platform that is what your users would see you have links which would run s link for lining your applications let me remove this decode and then you have preview which will run vit preview it allows you to preview the production version of your project which is what you have in a dist so if I run mpm run preview so now we have this URL so if I open the 5173 this is the production version of our react project so moving on we have dependencies dependencies are like packages you need for your project and here we have react and we have react dumb you're probably thinking what is the difference now I'm going to make a separate video where I go more into the difference between these two packages but a simple way to understand this is that react is a library that allows you to create components allows you to do some interesting things and react Dum is that library that allows you to render your react components on the D remember domum document object model which is associated with HTML so react on its own has no business on the D in fact there are lot of interesting ways you can use react you can use react for mobile a lot of devs are using react for in several interesting things which I'm going to cover in that more in-depth video so react Dom is now that binding that tool that binds react to the D and then you have Dev dependencies which are dependencies we need for development and here we have types react we have a bunch of them I'm not going to go into so much detail on all of these Dev dependencies enough for package the Json another file we have here is V.C config.js and you can think of this as a configuration file for vit and if you check the vit config here you can see several ways you can configure vit although I'm not going to be focusing on that in this course because this course is for react not for vit yeah read me uh package log index.html uh this index.html is a very important file when it comes to react here you have div root and div when you create a homepage it's going to leave under this rote create an about page is going to leave here contact page is going to leave here so this is like the root of the several pages and components that you creating your react application here in this script we have a reference to SRC main. GSX if you're thinking what GSX is don't worry we're going to cover that as we progress uh we can still open our application here to be sure everything is working we have git ignore this is for git stuff we have sink this is for slink configurations now we go to SRC here we have main. jsx which is is what we referenced here now this main. GSS think of it as an entry point to your react this is the entry point to your project this is where react is going to dump everything that it does and then this is the entry point to that react let me close this here so you can see so here you can see that we are doing react Dom do create root blah blah blah. render see here we're using react Dom because this is what is responsible for rendering your react stuff on the browser so here we do create root and you can see we're using documents. element by ID root which is this here remember I said this is like your entry point so you're selecting this and then you are rendering so do render and then you have this stuff here react. strict mode then you have this app then you have react. strict mode if you're thinking what is strict mode don't worry we're progressing in this course from beginner to advance so later on we'll get to understand how strict mode actually works but you have this and then you have your app components one thing you see here is that this this is like a normal HTML tag that you have where you have your tag and then you have this your your closing or you can even choose to have something like div and div like this this is your normal elements in HTML right well you can think of this also as an element but this is more of a react element which you can also call a react component which you can also call component for short so you have this app component and where is this coming from well this is coming from here so now if we open app. GSX this is our app components you declare function app this has some State and then you have all of this bunch of HTML stuff div a tag IMG tag uh you have your click event handlers and you have a bunch of stuff here and then you do export default app and that is why you can import app from this because you exporting it here and yeah you have all this stuff here you importing a couple of things here yeah don't worry we're going to look at that as we progress with this course but this is your app component you can see Vite plus react which is the Vite plus react showing here and if I change this to decode plus react see we have decode plus react here so this is your app component and when you're building applications you're going to create several components you can have 20 50 you can have as many components and then you can compose all those components in a certain way to build your application don't worry our next lesson is on components so we're going to learn more about components you also have your CSS file here which you can see we are importing like this so when when you're importing you can import normal JavaScript files or you can also import CSS so as you can see you can also import assets like this SVG asset here you have your asset under the source and then you also have this public directory and this public directory you can think of it as a place where you store your static assets can store your PNG you can store some CSS there and then you have node modules which we got by running mpm in store there are a lot of packages here that are required for our project and you have discs which like I showed you is the production version of your project which we got from running mpm run build Now One More Concept I would like you to understand is something called hot reloading and this is something that tools like vit helps you configure you can choose to configure this yourself but vit does that for you and what this means is that if I go back to app. GSX if I change this to U plus react I don't need to refresh before I get a reloading and I get this U so with hot reloading which is very specific to development experiences it allows you to see instant feedback based on your changes without having to come here and then click refresh so we have U plus react here we have count is count and I can say count is not count and over here you see how not comes so this greatly improves your development experience and this is not something specific to vit several tools have this I just wanted you to see that so that you would understand how things are changing quickly um by the way on my vs code I have auto save so if I change something it auto saves and once it saves I have that hot reloading so if you don't have auto save on then you'd have to first save your file because it is on saving your file that the hot reloading occurs now I've said a lot about components said a lot about GSX but what do this even mean let's get to understand that in the next lesson

Channel: Deeecode The Web

Views: 1,621

Keywords: deeecode, reactjs, simplereactjs, hot reloading, vite

Id: iUdJTMGC6aI

Length: 11min 52sec (712 seconds)

Published: Thu Nov 09 2023