First React app using create-react-app | VS code | npx | npm

hello guys today i'll be showing you how to write your first react program using visual studio so i'll be using visual studio so if you haven't download visual studio if you have atom or web stream the post process is similar i will be showing you how to download into the studio so go to this link i will be providing the link in the description so download this dot exe folder and double click to install so if you're using linux or mac os the process is similar just install visual studio code and open the visual studio okay i'll be opening from here bs code or maybe yeah just click enter and visual studio will open now go to this section terminal and just open your terminal now so to create react app you need to have npm or node install so to check if your node is installed in your system or not just type node hyphen b this will check so if you haven't installed i have already published the video how to install node.js and npm in your system so i'll be again putting the link in the description you can go there and just install the node and also check npm and the npm version is this so now next step is just write npx create react add and write the name you want to keep for the application okay i'll give react demo and type use npm now that's it so it will create your react app so it takes some time to create the react app i will be just forwarding the video now my react app has been installed in my system so if you are doing for the first time it might take some time you can also use npm instead of npx so if you use npm so i will be explaining the difference between npm and npx so if you create by using npm create react the same thing will happen but the difference is npm are installed globally so you have to care about the pollution for the long term and if you are using npx npx are not installed globally so you have to care free for the pollution for the long term so it won't create so if you use npm it will create globally and if you create npx so it will work for the only this particular app which we have named called i think react demo yeah right so it will only work for the react demo so dependencies will be only for the react demo so you don't need to be worried about the future problems when you might face if you use npm so next step is just type react start so before then that i'll be showing you the folder structure just open folder so this is in users and laser go to c drive users and laser and let me find a react app okay react demo now select the folder and it will open your folder now you can see here app.js this is the main main javascript file where you write your program and these are the dependencies and let me show you let me go back and go to terminal again and just type just go to go to this react demo folder so if you were in previous folder you can just change by using cd react demo right and now next step is to type npm done so this will start your react application and automatically open your new browser all right okay let's wait the react app to open now it's opening in the port localhost 3000 so it's opening in 3000 port right since my default browser is google chrome so it they directly open in you can also open in other browsers typing localhost and 3000 and this is the react application provided by using react create react app now let me remove this one okay let me remove this and also header and let's type hello this is my first react app now it will automatically reload in your browser as well see so this is the cool thing about react app it will automatically update now let me type i am learning react okay let me save this one and it will again reload in your browser okay thank you so much for watching please don't forget to like and subscribe my channel thank you you

Channel: Code With Arjun

Views: 474,181

Keywords: #React, #Reactjs, #createreactapp #create, #firstreactapp, #javascript, #reacjs, #react, #reactapp, #reactjs, #springboot, first react app using vscode, react tutorial, code with arjun react, code with arjun programming, codewitharjun, code with arjun, code with arjun vscode, code with arjun coding, code with arjun react tutorials, code with arjun tutorials, codewitharjun programming, codewitharjun javascript, react for beginners, react tutorials, react for beginner, start react

Id: -ERWlp828kY

Length: 7min 7sec (427 seconds)

Published: Fri Sep 04 2020