React JS Setup, Installation and First React Project Creation

- and all this is freaking Trump regime technologies and a warm welcome for everyone to the session number two in a part of react learning series in our last session we have discussed about what is real its journey so far and important features of RIA continuation to re at learning series in this session we will look at how to configure react in our local system and how do we create our first project using yeah to set up react in a system first step is to install node.js and NPM nodejs provides a runtime environment to execute JavaScript code from outside a browser node package manager is used for managing and sharing the packages for either react or angular based projects NPM will be installed along with node.js node.js can be installed from the official node.js website that is HTTP colon double slash node.js dot o-r-g let us open the browser and let me type the URL HTTP colon double slash nodejs dot o-r-g here we can see download for Windows and we have two options either to go for LTS our current so led s is the one which is recommended for most users let's click on this and let us wait until it gets downloaded installable file is downloaded so let's click on open we can run next click next next next and click next click on install let's click finish No let's move on start all programs and let's check for new dot J's folder and in note dot J's folder we can find the command prompt no doubt J's command prompt that is open this node or J's command prompt and let's see whether the node is installed properly or not so there is a command available note space - V and we can see the version that is 12 which is being installed there we go now the node dot J's setup is done along with new package manager the next step is to install a tool named create react app using node package manager this tool will be used for creating react applications we can install this at system level ah it can be installed temporarily even at folder level we will be installing this at global using the below command now let us open the door Jess command prompt and then let's say npm install' - G G represents at global level and then we say create react app as we could see create react app is successfully installed now it's time to step in and create our first react project so I would like to create a react project in this specific folder of the drive so I copy this and let us make a command prompt to point to the diaper so it's a CD the follow me then we say D : now we are pointing to this specific folder using our command prompt now it's time to create a new project so we use create a react app and then let's say the project name I called as demo project now this will create a new project called as demo project in a specific folder class we have programs near will go it takes some time to create the budget you now the project is created successful and remember one important point whenever you are creating a project using react please do not leave any capital letters in a project named react will throw you an error when we try to do that how the project is created and let us use our node.js command prompt to navigate to the project which we have created so we say CD project as that is the project we have created and now we can see our node.js command prompt is pointing to the project which we have created now we can run the project by using a command perlis NPM start now at react starts a development server and which our application will be hosted from where we can access the application here we can see our application is running locally on this particular location HTTP colon double slash localhost colon 3000 and I will free navigate to the browser we would see our react application running inside the browser and you can see messages the command we have used to run the project is NPM star we have created a new project using react and we are able to successfully run the project but as a developer we would be more interested to know about the project which is being created its structure and we would like to play around it so it's time for us to get our reactor data when we think of editor for react there are plenty of options available like Visual Studio code react IDE sublime editor at am editor webstorm and few of us we will use visuals for your code as a editor Visual Studio code is a free IDE built for developing and debugging web applications it has integrated grid control on terminal Visual Studio coats intelligence hello special Sharia Code to provide us with useful inputs and not Oh completion teachers when we write the code so the next step is to install visual studio code I have kept the location from where Visual Studio code can be downloaded handy I copy this it has user browser to navigate to this location that is HTTP colon double slash code.google.com slash download and we can see there are options depend on our operating system so we can download the respective one I have downloaded for Windows and now I launch Visual Studio code I know we use Phi open folder program is created inside react programs demo project I select demo project and say s as one can see demo project has three different folders word underscore modules public and SRC we will understand what each folder would be holding in a later sessions the response we see in this browser comes from a file called as index dot HTML which resides in a folder called as public now if we open this it has head and body sections in it inside the body we can see it has one bill with ideas group but to understand the relationship between this output and the next dot html' has this output says edit s FZ / AB dot J's so let us get into this file put sits inside SRC so let us open this Abdur J's and in this F dot J's as one can see it has a function called as app inputs they are uttering a deal and the deal has and match some text and net link now we can make some change to this link and see if this change could be reflected in the browser let us see how this change now go back to the browser and one could see that this change is updated here now how it gets updated is something we'll discuss when we get into the act perfect now the next question is how these two are linked to each other to get an answer for that we have to open another file called s index dot J's inside SRC fold this index dot J's has one method called as react Dom read renderer to which we are passing two parameters the first one is the app function which we have created and second one is the element ID in which the contents of this function should be placed now how it works family will be discussed in detail when we get into area further with this we have the setup ready in our system to explore react further but let's say we are in office we have some free time and we are interested in playing around with there then we can use an online code playground we have few exits like Corbin code sandbox our Beach available now we're just go back to our pre PT so we are done with this step now the next one is online code editor so for example let's say we want to create project using Corbin then we can open this HTTP colon double slash code PennDOT IVA in a browser let me navigate to our browser all right so I open a new tab HTTP colon double slash code PennDOT Evo and here we have an optional s start coding and here I write a simple live they were ID is equals to test then we go to a J's section and then we say react down dot renderer it's one welcome to yet programming and let us close h1 , now here we can pass the container in which this content must be placed we say document dot get element by ID and the idea is test you but unfortunately our browser cannot understand this random dot random for that we had to refer to few JavaScript files now how do we do that page let us click on this pen settings which is what we called s and here you can see we can add external script resources I have kept them ready so we refer to the act then in the second one we would be referring to we have done so the second one would be pointing to a virtual Dom which is created are introduced by here before my clothes we had to set this javascript preprocessor to babble more about babble we will discussed in our upcoming videos now let's close and you can see the output here welcome to Jack programming I hope we all are clear on doing the project step and creating our first project using Riya thank you for watching this video and have a great day [Music]

Channel: kudvenkat

Views: 270,419

Keywords: reactjs setup tutorial, reactjs setup windows, reactjs setup dev environment, react setup tutorial, react setup from scratch, react setup windows, react create new project, react create app, install and setup reactjs, react setup on local computer, install react on windows, install react from scratch, setup react visual studio code, vscode react setup, installing reactjs on windows, install create react app globally, react projects for beginners, react js projects tutorial

Id: 0twjvW0c1r0

Length: 13min 3sec (783 seconds)

Published: Wed Feb 19 2020