How to Install React in Visual Studio Code | Run React JS in VS Code

hey how's it going everyone in today's video i'm going to show you how to install and run react in visual studio code for those of you who don't know me my name is norbert and i teach web development on this channel so if you're interested then please consider subscribing to it also please give this video a thumbs up if you did like it and with this being said let me move my face and show you how to install and run react on visual studio code [Music] now first things first when you open visual studio code you will be greeted with this it's just a empty ui now you can either open a folder a existing folder where you wish to create your your project so you have your folder please create a folder for projects don't just create them on the desktop but i will create my on the desktop because this is the quickest way i can show you this so you could either open a new folder for wherever you you're saving all your projects or just create a new folder i'm just going to call it react what are you doing react and i'm basically going to drag and drop it in here okay let me make this put it here now you do need the terminal in order to install or the command prompt in order to install react also you do need mpm and node.js installed in order to install and run react if you don't have them installed i have a video in the description below showing you how to install npm and node.js it's a very quick video so please pause the video right here if you don't have them installed go ahead install them and come back to the video now if you do have them installed then you need to open up the terminal or the command prompt now you can do this by going up and clicking on terminal new terminal you can just use the shortcut key which most case in this case because this is on a mac it's ctrl tilde or on a pc it's command till day so basically you press you hold down command or control and then till they and this should open up the terminal now when you have your terminal open you're basically working either in that shell which is the default option for mac or in the cmd which is the command prompt for windows and basically you can up multiple terminals and so forth so on by clicking here on this plus button now let's close them up and from here is where you will install and as well almost run react in order to install react we need the command np x then space then the command create hyphen react hyphen then space and now you have two possibilities if you already worked in visual studio code you know that you always need a folder where you can work in in the moment we are in our react folder that we created you can see up here on the left react now from here you have two possibilities please don't press enter don't do anything if you press dot this means that the react app that you're going to create will be created within this folder if you want to give it another name basically create another folder then you could you do here for example my actually this will not work in my app you can only use hyphen and lowercase letters in order to create react apps or to name them so if i type in my app this will create a new folder and within this folder react is going to create or install everything that react needs in order to run now if i press enter it will start installation now remember depending on your internet connection and your pc power this could take a couple of seconds or a couple of minutes so i'm going to pause the video here i'm going to press enter now this will start the installation you can see user no uh users nobody is just telling me the path where the react app is going to be integrated and you can already see it created a new folder knife i click on this folder you will start seeing here multiple folders and files being created actually i'm going to speed up the video a bit here all right we're done we have react installed and created a app now we installed react locally in this folder in this application in order to run react we just need the command mpm start but above here you see another command cd which means cd stands for change directory and my app is your app that you just created and if i now try to run react and just type in npm start this will give me a error because we are com we are currently in the react folder we are here and we need to go down in my app so basically we can use cd change directory we are telling the node engine from where it should take its resources and run a specific script that i'm going to show you which is going to start our react application so cd change directory space my hyphen app press enter and you can see down here that norber bm and heart pm whatever it is just a username is now in my app so node is now looking at this folder from here we can now type in mpm space start hit enter and now depending on what your default browser is and because i already have another react application open it will open it in that browser and on a specific port i'm just going to type in here yes this is also interesting for you so yes just have an npm start and yes why which i'm just going to drag it here just launched our very first react application you know what i'm going to make this smaller and also make my visuals to the code editor smaller and just put it right here right here and there we go so this is your very first react application you see here the react logo actually should still position it a bit better now in order to stop in order to stop the application you will go down in your terminal and either control or command on pc you will have command and on a mac you would have control and hold down control or command and then press c and you will see that the application just stopped basically if i would refresh here the page is no longer being served react has a built-in server and now i can show you actually if you go down here in this file package.json at the script level you will see the starting script so basically if i type npm and then this keyword start this will start react then if you want to build out your application you can then npm build then test or eject which you just send you out of your application but in our case we stop the server by using the m with the control c command now if you wish to start the server again again we're going to type in mpm you can see here start so start which just means npm node package manager is going to manage this package and it's going to launch this script and press enter and we're going to wait a couple of seconds and yes run it on the port we'll most obviously not see that and there we go our react app is running again now let me just show you something um all your files let me close up this package.json all your files and folders will be in the source file your build if you would run mpm build then this is what you will deploy later on you can see within here is that html file that you all know and love and this is where everything is going to be pushed in now we're going to leave this build file and we're going to go into the source file within the source file you'll see a couple of things which you don't know you will see a couple of things that you need and you also don't need but we're not going to go into detail what i'm going to show you is here this app gs this app.js is where everything all the magic almost happens and let me just show you something let's say i want to create underneath this react app which is this logo right here and i had it let's create here a h1 also let me just change this to react to h1 the title of my app if i hit save you will see down here my airplane also my norbert app kinky okay basically this is how you can modify your react application last thing that i wanted to show you is this right here this node module this folder is packed full with all of the node modules when you want to move your application you want to push it to github or whatever you see here in the git ignore that node modules are ignored so if something should happen to your application or if you want to move your application this folder right here let me also show you this so this folder if i click on get more information i hope you can see this is pretty small but it has 306 mega this means it takes up a lot of space on a disk and if i go into this folder my app and click on node modules and click on inspect again you'll see again that this folder is actually taking up the most the most space on the disk so this logically means you will not take this folder with you so you can just delete this folder boom it's gone now your application will crash because it needs the node modules no problem you can reinstall all of your node modules let me just drag this here again you see we're missing the node modules now we need to stop the server command c you are in our z shell again or in cmd and from here we just type in mpm install hit enter and take a look up here we quickly show it will quickly show you that all of you can see right here the node package modules are being re-installed so if you ever delete this or if you take an application download it from github it and it does not work mostly is because it's missing the node module because nobody uploads node modules because they take up a lot of space okay and you can already see our application is working again okay everyone so hope you enjoyed this video if you did please give it a thumbs up if you didn't give the thumbs down if you have any questions any kind of questions or suggestions leave them in the comment section below i'm norwich bm and i teach web development and with this being said subscribe to my channel don't forget to subscribe to my channel and click that notification bell so with this being said catch you on the flip side bye bye everyone you

Channel: Norbert BM Web Development

Views: 105,313

Keywords: install react js, run react js in visual studio code, install react js in visual studio code, react, react js, visual studio code, react tutorial, reactjs, react.js, react tutorial for beginners, vs code, reactjs tutorial, web development, learn react, node js tutorial, react js tutorial, create react app, reactjs tutorial for beginners, how to create react app in visual studio code, visual studio code extensions, react create app, install node modules in visual studio code

Id: Rs2BT6HrwMw

Length: 11min 27sec (687 seconds)

Published: Tue Apr 26 2022