ReactJS Installation Tutorial | ReactJS Installation On Windows | ReactJS Tutorial | Edureka Rewind

Key Takeaways

welcome everyone this is swathi from ayurveka and in today's session we'll learn how to install reactors on our systems as you know there are many different ways in which we can install react shares on your systems but today I'll be showing you the two major ones the first will be installation by downloading the dependencies Via npm and then we'll see how to install by embedding the dependencies both of the processes will be followed by their respective programs so let's get started with our first method that is installation by downloading via npm so in order to install by downloading the dependencies you need to follow some steps let's see what are they so the first step is download and install npm so if you guys are not familiar with npm then let me tell you that npm is a package manager for JavaScript programming language and you must have it on your systems so let me show you from where you can download it okay so here you can see that we have on site it's called node.js.org in slash download from this site you can see that we have different kind of files for different configuration now according to your system configuration you can choose your file so as for me I'm using a 64-bit windows so for me I have to download this file once you have downloaded you need to open it and install it just click on run and go through the installation I have already installed it in my system so so let me just follow the next step quickly okay so next is open CMD and go to the folder so here it is saying to go to your project folder so now let me go back to my project folder so this is my project folder inside uh ee drive I have react.js as my project folder so what I'll do I'll open the CMD and inside I'll change my directory to e and then go to react cheese okay now as you can see I am inside my project folder so now you need to set up the npm environment so just type and see whether npm is working or not okay so now here you can see that my npm is working if you get this kind of message that this means that your npm is properly configured and is good to go in case you don't get this kind of message you need to configure it again so now let's move on to our next step what is our next step okay so our next step is using npm start installation so I need my command prompt and first I need to tell it that the npm in it now this npm init will create one package.json file as you can see I have my package.json file over here now it is asking me whether my name is react.js or not so here everything should be in lower case so just give it a name as react yes you can give it anything then version you need not to fill all the details it's asking for just give the necessary ones as for the name is the mandatory and then we have the author winner so for author I'll say edureka and I'll proceed okay so this is fine with me all the description I want all the details like this so I'll say yes and then I'll proceed with the installation next step we have is install webpack using npm so now we need to install the web packs for that we'll say npm installed webpack okay so here we are using saved if because we want it as a developer version not the production version so just hit enter and it will start installing the webpack now this webpack is responsible for combining all the dynamic components in our code it will help in importing the data from different code files so let it get installed so it's done installing the webpack now next we have to install the react so we'll say npm install react along with react Dom and Save okay so it's done with the react installation as well now we'll move on and install the babble for this so we'll say npm install okay so here we go let it get installed okay so here we are done with all our modules so now we are going to go with our coding so let's move ahead and see how our programs are created so now to create a program we'll be creating three files one will be webpack.config.js one will be HTML file and last one is the GSX file now this webpack.config.js is a configuration file which will contain the information about the dependencies and the files from where the browser should start rendering now then we will have the HTML file which will contain the HTML template which is used by the browser to render the elements on the web page then lastly we will have the j6 file it will contain description of what all elements we want to display on our web page so let's move on and see how the webpack.config.js file is created so now this is how the webpack.config.js file looks like in this you provide the entry and output point from where the rendering should start so here we are telling that we have script.j6 file in which we have the react code and then this code will be transpiled by the Babel loader into this file transpile.js basically in this file we are just telling which file will be transpiled to which one and how it will be done okay so next we have one HTML file this is the basic HTML file in which we just need to add one div tag and one script tag inside the div tag we will provide one ID so that later we can report it from the jsx file and then we have the script tag in which we will tell once transpiled file which will be created by the Babel next we have the jsx file now in this you need to import react and react Dom from their respective directories and then create a company that is my component or you can name it anything you want which should extend react dot component because in react everything is a component and then inside this we will create one render function in order to return the HTML representation in the end we will render my component over the uh div tag which we use in the HTML file and we will get it through its ID that is content so this is how all our file will look like on addition to all those file what you need to do is you need to open this packet Json which will be created by your npm now here when you open this you will find something as test that is Eco error note is specified now you need to remove this whole of the thing and instead of this what you need to do is it a webpack Dev server that is hot so now you need to add this line because using this will be running our code so now we are done with our code we have all our files you can see these are the same code and then we'll go back to our CMD and we'll check whether this code is working or not so for that we'll say npm run it as you can see it successfully working so next thing I need to do is I'll go to the browser and I'll say localhost 8080 and here my code is working so this is how we code by downloading the dependencies by the npm so let's go back to our PPD and let's see how to install by embedding the dependencies now in order to do so we need to follow two simple steps first is download the zip file from the official site and then second one is to add them to your project folder so let's see how it's done okay so now let's see from where we can download the zip file so let's go to the browser okay here you can see I have this site that is https colon double slash react hyphen cn.github dot IO slash react slash downloads.html now if you go to this site you can see that you have one download link over here now as soon as you click on this it will give you one zip file with all the dependencies inside it so I have downloaded it let me go to my downloads uh here I have this folder this ZIP file now when you open the zip file you can see we have one react folder inside it and inside that we have build and examples so you just need this build folder over here so just extract this once you are done the extraction you will get one build file like this and inside this you will have all the dependencies now what you need to do is just copy this and go to your project folder and paste it over there let me show you okay so here I am inside my uh project folder here I'll just paste it now if you open this file you can see that I have all my dependencies over here so let's go to the PPD and see how the programs are created so now for the program you will need one HTML file and one jsx file okay so now in this HTML file you have to explicitly add all the dependencies unlike the previous file which we created by either npm in that everything was done implicitly by the npm itself but here you need to create it and then add it explicitly so here as you can see I have added my script file as well which says that my react code Lies Over script.jsx and similarly I am providing one dip tag with one ID so that later on I can render my component with the help of this ID so now let's see how the jsx file works so here so if you guys remember in the previous jsx file which we created using npm in that we created one class my component and here we are creating variable my component so these are few minor differences over here so now if you see variable my component it has one function which is called create class and inside that we have render function which will return the HTML representation for it now similarly as we have done over there here also we'll call the react Dom dot render in which we will mention our component to be rendered and the place where we have to render it so let's see how it practically works so I'll go to my code okay so now inside this project folder I have already created my files as index HTML and script.jsx inside this build folder you can see all my dependencies are there so here you can see the code is same okay so now what I'll do I'll just run it and show you guys this code is working or not okay so for this I'll go to the browser and I'll say localhost okay as you can see Hello World so this means our code is up and running okay so we are done here with this file so now I hope that you guys understand that how the files vary when depending on the installation processes so this will be all for today thank you for watching have a nice day