How to run React JS app in Visual studio code tutorial | Download and install react in VS Code 2023
How to run React JS app in Visual studio code tutorial | Download and install react in VS Code 2023
How to run your first react js app project in visual studio code using node js is shown
#reactjs #reactjstutorial #vscode
Content
0.42 -> hi everyone in this video I'll be showing you how
to run your first react.js app by using visual
7.38 -> studio code so let's get started so for this we
need to First download visual studio code and
12.84 -> before downloading Visual Studio code we're going
to download node.js okay so just go to Google and
18.3 -> type download node.js you will be getting the
first link over here as nodejs.org just click it
25.62 -> and here you'll be having the windows installer
if you are using Mac you can use that particular
29.64 -> one I will go with Windows I'll just click it
so it'll get started and it is about 30 MB in
36 -> size so it will just take a few seconds yeah
so once it is downloaded just click it and
41.64 -> open when done so you'll be getting the node.js
setup over here the dialog box just click on next
48.3 -> and just click on I accept you can just like
read it through and again click next and this
54.06 -> is the default location where node.js is going
to get installed if you want you can change it I
58.2 -> will like keep the default one and I will click
next so these are some of the things that will
63.18 -> be like automatically installed so you can just
like leave it to default and just click on next
67.98 -> yeah so this is fine just click
next again and click on install
73.8 -> so once the installation is complete just click
on finish and if you just go and search for
78.84 -> node.js you'll be having this node.js app so
once you're done installing node.js we need to
84.06 -> add node.js path to the environment variable so
just search for node.js you will be getting this
88.74 -> node.js app and here you'll be having option
called as open file location just click it and
94.62 -> you will be having the programs and here you'll
be having node.js again right click it and go to
99.9 -> open file location so you'll be getting the path
where you have installed node.js which is local
104.82 -> disk C program files and node.js just click here
and copy this whole path and after copying just
111.96 -> go to search again and type environment you'll be
having the edit the system environment variables
118.86 -> option just click on open and in this you will
be having this environment variables click it
125.52 -> and under system variables you'll be having
path just click on path and then click on edit
131.7 -> and here you can see right C program files
node.js has been automatically added so if
135.96 -> it isn't automatically added you will just click
on new and paste this path and click on OK so just
140.76 -> check if this path has been added already okay so
once you're done adding this path close everything
145.2 -> and just go to search and open command prompt so
I will just zoom in a bit so type node hyphen V
157.08 -> so here you can see it will be getting
the node version here this means that
160.08 -> we have successfully installed
node.js also type npm hyphen V
164.7 -> yeah so we will be also having the npm node
package manager which allows us to install
168.78 -> many packages like libraries and stuff so now
we are done installing with node.js and yeah
174.48 -> next thing we want to download is our IDE which is
Visual Studio code it is more suitable for working
179.7 -> with react projects okay it's suitable for working
with all programming languages anyway so just type
184.38 -> download visual studio code you will be having
the first link as code.visual Studio code.com
188.28 -> click it and here you will be having for Windows
and Linux and Mac exact same thing like just click
194.7 -> on it your download will be getting automatically
started and thank you for already yeah it will get
199.32 -> automatically started and you can just like click
open when done and install it it's so simple I've
203.7 -> already like installed Visual Studio code on my
system and even if you still want to watch How
208.62 -> It's getting downloaded and installed you can just
click on the card that is appearing on top I have
213.06 -> done an entire tutorial around how to download
visual studio code okay so now we are done now we
218.88 -> have downloaded necessary IDE as well as node.js
so next we are good to go so after downloading
225.78 -> and installing Visual Studio code just go to
search and type Visual Studio code and open it
232.92 -> so you'll be getting your Visual Studio code
IDE very empty at first and at first you need
237.9 -> to install some extensions which will make
our life so easy when typing react.js code
241.92 -> so first we need to have the basic JavaScript
and HTML stuff so you will be having an option
246.6 -> called as extensions click it and you need to
have this prettier one okay prettier is so good
251.46 -> for like JavaScript HTML and stuff and if you are
like working with normal HTML and CSS just have
257.1 -> this live server as well just type search for live
server over here and just click on so let me just
262.38 -> show you how you'll be having an option like this
and in case if you haven't installed a particular
266.7 -> extension you will have install option over here
just click on install it will get automatically
270.84 -> installed so here we will be having react okay so
we'll just search for react and we'll be having
276.96 -> one known as react code snippet yeah simple react
snippets yeah this one so this is so good it will
282.54 -> like automatically create like a boilerplate code
so here you can see right if we just type import
288.24 -> we'll be getting the entire import and if you type
RFC it will create as an automatic function for
293.64 -> us so this is super cool it has like around 2.4
million downloads so this is a seriously a great
299.52 -> extension to be honest for react and if you want
you can also download this one this es7 plus react
305.34 -> Redux react native snippet I will install this
one as well this has like 7.3 million okay that's
311.82 -> a crazy number yeah so now we are done installing
the necessary extensions so I will just show what
317.58 -> are the things I have installed already yeah
extensions I'll just clear this yeah install
322.92 -> this for okay so just make a note of it these are
much enough for running a react project so once
329.1 -> you're done installing the necessary extensions
we need to create a folder in our system so I'll
333.18 -> just go to my new volume d I'll right click it
and I'll just create a folder known as react
342.96 -> project okay project over here and what
we need to do is I'll just go to file
347.76 -> and open folder I'll click this and select folder
trust yeah so this folder is currently empty so
355.2 -> here you can see right it has nothing inside it
so here we'll be installing our necessary node
359.94 -> modules and react project libraries over here so
I'll just go to terminal and click on new terminal
366.48 -> so here you can see I'm getting automatically
the path over here which is local disk C and
370.8 -> react project so after you like open the
particular folder in Visual Studio code we
376.68 -> will be like running the create react app
command so for this just search for react
381.48 -> docs you'll be getting the first link
as getting started react just click it
386.64 -> and in this getting started to the right side you
will be having create a new react app the third
392.76 -> one just click it and if you just now scroll down
scroll down scroll down and here you can see this
399.84 -> is the command that we'll be using npx Create
react app my app this is going to be our app
404.4 -> name so there are many theories saying that create
react app or CRA that's how you call it in short
409.92 -> form it is not good it is slow blah blah blah
but in case if you're just beginner and you're
414.78 -> not going to like work on any production side
or like scale your website to a real site this
419.7 -> is more than enough for practice and other stuff
this is fine for practicing and learning react so
424.8 -> yeah I will go with this now so I will just copy
this particular command and I will go to my visual
430.92 -> studio code and you need to be in that particular
folder location in terminal so I'll just paste it
435.72 -> and I'll just change the name okay my app so this
is like a standard keywords okay npx space react
441.66 -> hyphen react hyphen app this is like a standard
keyword you need to like have this as same don't
447.18 -> mess with that and after space here we will be
specifying our react.js project name and I will
454.02 -> just enter my project name over here which is
going to be first hyphen project and hit enter
464.4 -> so it will say creating a new react app in
D our react project folder and first project
469.38 -> that is our project name and will take some
time to download all the necessary packages
475.08 -> so once all the necessary libraries and packages
are installed you'll be having an option like this
478.92 -> NPM test npm run eject and you'll be also like
Begin by typing CD and npm start and happy hacking
485.76 -> so the first thing what you will do is you need
to run this particular command which is CD your
490.32 -> project name okay CD first project in my case I
will type it so we'll be coming inside this first
495.06 -> project folder so here you can see right react
Pro is my outer folder and first project is my
500.1 -> react.js project name so I'll just come inside it
and expand it so here you can see that these are
505.2 -> things that we will be getting automatically
installed after running the npx create react
509.16 -> app command so we're having Source these are some
JavaScript and CSS files so you will know why this
515.1 -> particular files are there after running the first
app and we'll be also having some PNG and images
520.08 -> so these are the node modules simple so yeah so
I'll just run and explain what each and every file
526.14 -> does so I will just now go here and it says like
we need to start our project by the command npm
532.32 -> start so it's going to be npm start and you need
to like CD first to the project and after that
539.28 -> only you need to run NPM start and hit enter so
we'll be getting react script start and you'll be
546.24 -> having this compile successfully webpack compiled
successfully and if you're like opening it for the
550.32 -> first time you want to like have a default browser
for opening your react app so you can like select
555.24 -> the browser you want I will go with Google Chrome
and click on OK so this is the first react app
560.64 -> that we will be having over here this is like the
edit SRC slash app.js save to reload so the icon
566.76 -> so you saw that PNG image right this image dot
logo 190.png that is the logo that is appearing
572.58 -> 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
580.26 -> can see right the paragraph text edit SRC app.js
code and save to reload so this particular text
587.22 -> will be appearing over here the exact same text
okay so if I just now remove all these things I'll
593.88 -> remove the entire thing I will just have header
and if I remove this and if I just put a H1 tag
600.72 -> H1 tag and I will just put hello like this
something and if I save it will get automatically
606.72 -> like restarted so if I go to my project so here
you can see right that particular image has been
611.52 -> removed and I'll be getting just a hello so
this is like the CSS file for this app.js so
616.92 -> CSS it's like imported over here and if I just
now create a new file okay in the source if I
622.44 -> create a new file I will name it as new file dot
JS and hit enter and if I just type R Okay small
630.6 -> okay it's going to be r f c e and hit enter
so we'll be getting automatically a react
637.68 -> JS component or function automatically created
so this is because of the extension that we have
642.96 -> like installed so it's like super useful you can
like you are having so many options like RFCE or
649.08 -> RFC like so many things are there so you can just
play around with that so this is it guys we have
654.18 -> run our first react app successfully and I hope
you would have found this video useful I have also
659.88 -> done many other tutorials in react.js node.js
CRUD using my MySQL mongodb as well as C C++
666 -> Java python so do check other videos of my channel
also the playlist subscribe me thanks for watching
Source: https://www.youtube.com/watch?v=zuyH4QUuTZk