How to run React JS app in Visual studio code tutorial | Download and install react in VS Code 2024

hi everyone in this video I'll be showing you how  to run your first react.js app by using visual   studio code so let's get started so for this we  need to First download visual studio code and   before downloading Visual Studio code we're going  to download node.js okay so just go to Google and   type download node.js you will be getting the  first link over here as nodejs.org just click it   and here you'll be having the windows installer  if you are using Mac you can use that particular   one I will go with Windows I'll just click it  so it'll get started and it is about 30 MB in   size so it will just take a few seconds yeah  so once it is downloaded just click it and   open when done so you'll be getting the node.js  setup over here the dialog box just click on next   and just click on I accept you can just like  read it through and again click next and this   is the default location where node.js is going  to get installed if you want you can change it I   will like keep the default one and I will click  next so these are some of the things that will   be like automatically installed so you can just  like leave it to default and just click on next   yeah so this is fine just click  next again and click on install so once the installation is complete just click  on finish and if you just go and search for   node.js you'll be having this node.js app so  once you're done installing node.js we need to   add node.js path to the environment variable so  just search for node.js you will be getting this   node.js app and here you'll be having option  called as open file location just click it and   you will be having the programs and here you'll  be having node.js again right click it and go to   open file location so you'll be getting the path  where you have installed node.js which is local   disk C program files and node.js just click here  and copy this whole path and after copying just   go to search again and type environment you'll be  having the edit the system environment variables   option just click on open and in this you will  be having this environment variables click it   and under system variables you'll be having  path just click on path and then click on edit   and here you can see right C program files  node.js has been automatically added so if   it isn't automatically added you will just click  on new and paste this path and click on OK so just   check if this path has been added already okay so  once you're done adding this path close everything   and just go to search and open command prompt so  I will just zoom in a bit so type node hyphen V   so here you can see it will be getting  the node version here this means that   we have successfully installed  node.js also type npm hyphen V   yeah so we will be also having the npm node  package manager which allows us to install   many packages like libraries and stuff so now  we are done installing with node.js and yeah   next thing we want to download is our IDE which is  Visual Studio code it is more suitable for working   with react projects okay it's suitable for working  with all programming languages anyway so just type   download visual studio code you will be having  the first link as code.visual Studio code.com   click it and here you will be having for Windows  and Linux and Mac exact same thing like just click   on it your download will be getting automatically  started and thank you for already yeah it will get   automatically started and you can just like click  open when done and install it it's so simple I've   already like installed Visual Studio code on my  system and even if you still want to watch How   It's getting downloaded and installed you can just  click on the card that is appearing on top I have   done an entire tutorial around how to download  visual studio code okay so now we are done now we   have downloaded necessary IDE as well as node.js  so next we are good to go so after downloading   and installing Visual Studio code just go to  search and type Visual Studio code and open it so you'll be getting your Visual Studio code  IDE very empty at first and at first you need   to install some extensions which will make  our life so easy when typing react.js code   so first we need to have the basic JavaScript  and HTML stuff so you will be having an option   called as extensions click it and you need to  have this prettier one okay prettier is so good   for like JavaScript HTML and stuff and if you are  like working with normal HTML and CSS just have   this live server as well just type search for live  server over here and just click on so let me just   show you how you'll be having an option like this  and in case if you haven't installed a particular   extension you will have install option over here  just click on install it will get automatically   installed so here we will be having react okay so  we'll just search for react and we'll be having   one known as react code snippet yeah simple react  snippets yeah this one so this is so good it will   like automatically create like a boilerplate code  so here you can see right if we just type import   we'll be getting the entire import and if you type  RFC it will create as an automatic function for   us so this is super cool it has like around 2.4  million downloads so this is a seriously a great   extension to be honest for react and if you want  you can also download this one this es7 plus react   Redux react native snippet I will install this  one as well this has like 7.3 million okay that's   a crazy number yeah so now we are done installing  the necessary extensions so I will just show what   are the things I have installed already yeah  extensions I'll just clear this yeah install   this for okay so just make a note of it these are  much enough for running a react project so once   you're done installing the necessary extensions  we need to create a folder in our system so I'll   just go to my new volume d I'll right click it  and I'll just create a folder known as react   project okay project over here and what  we need to do is I'll just go to file   and open folder I'll click this and select folder  trust yeah so this folder is currently empty so   here you can see right it has nothing inside it  so here we'll be installing our necessary node   modules and react project libraries over here so  I'll just go to terminal and click on new terminal   so here you can see I'm getting automatically  the path over here which is local disk C and   react project so after you like open the  particular folder in Visual Studio code we   will be like running the create react app  command so for this just search for react   docs you'll be getting the first link  as getting started react just click it   and in this getting started to the right side you  will be having create a new react app the third   one just click it and if you just now scroll down  scroll down scroll down and here you can see this   is the command that we'll be using npx Create  react app my app this is going to be our app   name so there are many theories saying that create  react app or CRA that's how you call it in short   form it is not good it is slow blah blah blah  but in case if you're just beginner and you're   not going to like work on any production side  or like scale your website to a real site this   is more than enough for practice and other stuff  this is fine for practicing and learning react so   yeah I will go with this now so I will just copy  this particular command and I will go to my visual   studio code and you need to be in that particular  folder location in terminal so I'll just paste it   and I'll just change the name okay my app so this  is like a standard keywords okay npx space react   hyphen react hyphen app this is like a standard  keyword you need to like have this as same don't   mess with that and after space here we will be  specifying our react.js project name and I will   just enter my project name over here which is  going to be first hyphen project and hit enter so it will say creating a new react app in  D our react project folder and first project   that is our project name and will take some  time to download all the necessary packages   so once all the necessary libraries and packages  are installed you'll be having an option like this   NPM test npm run eject and you'll be also like  Begin by typing CD and npm start and happy hacking   so the first thing what you will do is you need  to run this particular command which is CD your   project name okay CD first project in my case I  will type it so we'll be coming inside this first   project folder so here you can see right react  Pro is my outer folder and first project is my   react.js project name so I'll just come inside it  and expand it so here you can see that these are   things that we will be getting automatically  installed after running the npx create react   app command so we're having Source these are some  JavaScript and CSS files so you will know why this   particular files are there after running the first  app and we'll be also having some PNG and images   so these are the node modules simple so yeah so  I'll just run and explain what each and every file   does so I will just now go here and it says like  we need to start our project by the command npm   start so it's going to be npm start and you need  to like CD first to the project and after that   only you need to run NPM start and hit enter so  we'll be getting react script start and you'll be   having this compile successfully webpack compiled  successfully and if you're like opening it for the   first time you want to like have a default browser  for opening your react app so you can like select   the browser you want I will go with Google Chrome  and click on OK so this is the first react app   that we will be having over here this is like the  edit SRC slash app.js save to reload so the icon   so you saw that PNG image right this image dot  logo 190.png that is the logo that is appearing   over here and if I just now go to source and if  I go to app.js and if I scroll down so here you   can see right the paragraph text edit SRC app.js  code and save to reload so this particular text   will be appearing over here the exact same text  okay so if I just now remove all these things I'll   remove the entire thing I will just have header  and if I remove this and if I just put a H1 tag   H1 tag and I will just put hello like this  something and if I save it will get automatically   like restarted so if I go to my project so here  you can see right that particular image has been   removed and I'll be getting just a hello so  this is like the CSS file for this app.js so   CSS it's like imported over here and if I just  now create a new file okay in the source if I   create a new file I will name it as new file dot  JS and hit enter and if I just type R Okay small   okay it's going to be r f c e and hit enter  so we'll be getting automatically a react   JS component or function automatically created  so this is because of the extension that we have   like installed so it's like super useful you can  like you are having so many options like RFCE or   RFC like so many things are there so you can just  play around with that so this is it guys we have   run our first react app successfully and I hope  you would have found this video useful I have also   done many other tutorials in react.js node.js  CRUD using my MySQL mongodb as well as C C++   Java python so do check other videos of my channel  also the playlist subscribe me thanks for watching

Channel: United Top Tech

Views: 296,662

Keywords: run react js in visual studio code, React js tutorial, React js vscode setup, how to start react js in visual studio code, Download and install react js, how to create react app in visual studio code, Create react app, react js in visual studio code, react js tutorial for beginners, react js 2024

Id: zuyH4QUuTZk

Length: 11min 13sec (673 seconds)

Published: Fri Feb 10 2023