What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka Rewind

Key Takeaways

welcome everyone this is STI from urea in today's session we'll go through reacts tutorial so if you guys are familiar with the term react CHS then you might know that it's a front-end Library developed by Facebook so today we'll learn in and out of react GS but before we start let's explore a react GS application ation I'm sure all of us spend a lot of time on Facebook if not a lot at least some so all of you can easily relate that this application looks exactly like Facebook comment section in this comment application we can add a new comment delete an existing comment or even can reply to some other comment let me show you how here I'm adding a comment I can delete my comment I can even delete some others comment if I have the authority and then I can reply to others comment like this perhaps you would have noticed whether I'm adding or deleting comments only that section is getting updated instead of the entire page so what I'm trying to say is that we do not have to reload or refresh the entire application to see the updates so how exactly is this happening well this is the magic of react JS and that is what we are going to learn today but here some of you might ask that why react JS when there are so many other Frameworks available out there to understand this let's take up Facebook as example so let's go back to the year of 2009 2010 when Facebook used to look somewhat like this if you guys remember during this time you had to repeatedly reload the page for new updates at the back end the Facebook was using the traditional data flow as you can see from this diagram the data came from various sources like the initial data the realtime data or the user input data now this data was passed to the dispatcher then to the store and then ultimately came to the view now now view is the part where the user is actually interacting with the application and being a user whatever you see on the browser as a web page is the view itself so if there is a change in data from any of these sources from the back end in order to reflect those changes on The View you have to refresh the entire page and then it's seen by the user this surely was not user friendly and moreover this traditional data flu had some drawbacks like it used the Dom now what is a dom dom stands for document object model it is an object that is created by the browser each time a web page is loaded what this Dom did was it can dynamically add or remove elements from a web page at the back end but each time it did that the browser had to create a new Dom object for the same web page this led to more memory consumption which ultimately made our application slow let's take another example to understand this suppose this is our application in which we have four blocks 1 2 3 4 Suppose there is a change block one from the back end but in order to see those changes we had to reload the entire page and then only we can see the changes now as you can see after reloading the one became 101 so guys this is where the react GS comes into the picture with react our entire application is divided into various components now each time data is added it will automatically update the specific component whose state has actually changed so if we have changed in Block one it it will automatically change the block one only without reloading the entire page this reduced our page reloading task and because of this the UI became more user friendly moreover the react uses a virtual Dom instead of the real Dom which makes our applications lighter and faster now what is virtual Dom we'll understand it later in this tutorial for now let's see how react changeed Facebook's UI so Facebook started implementing reactjs in its new feed section since 2011 after this its UI became more user friendly now whenever new updates gathered a new stories button popped up at the top of the page now clicking on this button will automatically reload only the new feet section without even touching the rest of the page this drastically improve the applications performance so what changed at the back end at the back end it still used the traditional data flow but now instead of loading the entire page again what react did was it blew up the priv view rendered the components with the update and then place the new view in place of the old one this was possible because unlike other Frameworks react don't have any explicit data binding in react the only thing we have is a render function which gets called once for each component in this render function we tell how our component will look like at any point of time then this render function returns a representation of our view since the components can compose other components the render function gets called Rec cursively resulting in building up the whole view so now that you have understood that why we use react chairs let's now proceed with our tutorial before we start off let's take a quick look on today's agenda today we'll first understand what exactly is react GS and then we'll find out some of its major advantages then I'll show you how to install reactjs on your systems once we are done with the installation we'll start coding with reactjs by taking up a simple program of world then we'll jump onto the various fundamental concepts which all lie behind reactjs so without any delay let's take up our very first topic that is what is reactjs as I have already told you that reactjs is an open source JavaScript Front End Library that is used to develop interactive uis though Facebook was using it since 2011 but it was introduced to the rest of the word on May 2013 and later on March 2015 it was open- sourced moreover the react GS is concerned with the component that utilizes the expressiveness of JavaScript along with the HTML template syntax that is it combines the features of JavaScript and the HTML and then provides us a dynamic language it is basically the view in MVC that is the model view controller it is not concerned with anything except for the view that is it handles a representation of our web page at any point of time but what aspects make it handle our Dynamic view so effectively let's proce proed further and find out well react has three main aspects first it uses the virtual Dom second it has oneway data binding and third it provides a server side rendering let's now discuss them in details the first is the virtual dor so as I've told that it uses the virtual D now many of you might be wondering that what is a virtual dorm and how it is different from the actual dorm well like an actual d the virtual Dom is also a notary that lists the elements and their attributes and contents as object and their properties react render function creates a not tree out of the react component and then Updates this tree in response to the mutations in the data model which are caused by various actions done maybe by the user or by the system now this virtual Dom Works in three simple steps first will be whenever any underlying data changes the entire UI is rendered in the virtual Dom representation after this the difference between the previous Dom representation and the new one is calculated once the calculations are done only after that the real Dom will be updated with the only the things that have actually changed you can think it as a patch as the patches are applied only to the affected area similarly the virtual Dom acts as a patch and is applied to the elements which have actually updated or changed in the real Dom this makes our application faster and moreover there is no memory W St unlike other Frameworks react follows the unidirectional data flow let's now move on to our next aspect that is oneway data binding unlike other Frameworks react follows unidirectional data flow or oneway data binding as you can see from this diagram in whole of the process the data is flowing in the same direction the major advantage of oneway data binding is that throughout the application the data flows in a single Direction which gives you a better control over it and because of this the application state is contained in specific stores and as a result of this the rest of the components remains Loosely coupled so our third and last aspect is the server side rendering server side rendering allows you to pre-render the initial state of your react component at the server side only because of this the page loads faster with the server side rendering the servers response to the browser is the HTML of the page that is ready to be rendered thus the browser can now start rendering with without even having to wait for all the JavaScript to be loaded and executed all of these features together makes react CH a powerful and robust language which provides us with some major advantages like because of the use of virtual DM the applications performance increases moreover it can be used on client as well as server site the react j6 file increases the readability of the code so it becomes easy to debug and maintain and lastly the Rea JS can be easily integrated with Frameworks like meteor or angularjs so now that we have already understood that what is reactjs and what are its advantages let's now proceed to its installation well installing reactjs is very easy you just need to add the reactjs dependencies to your code and then you are good to go you can add these dependencies either directly from online repositories or you can also download them and then add them to your project folder as you can see from this code I have added the dependencies here from the online repositories now let me show you how to add the dependencies after downloading them for that you need to go back to your project folder so now this is my project folder inside this I will be pasting all my dependencies for that I'll go to my downloads here I have already downloaded the dependencies I just have to copy this and then I'll go back to my project folder and paste them here like this so inside this I have all my dependencies which all I need so now to start coding with react you can use any text editor or any ID you want so here I'm using the webstor ID here inside my project folder you can see that I have already all my dependencies so now what I'll do I will create one HTML file here let me name it as index now in this HTML file we have to provide it with with some title like I have given it demo okay so now inside the head of this file now we have to tell that we have the dependencies so using the script tag we will add the dependencies one by one so let me see the source and my dependency source is the build folder in this first dependency which I need to add is the react. min.js now this is the main react dependency that you will need like this I have to add the rest of the dependencies okay so now I'm done with adding my dependencies so next thing what I have to do is I have to create one Division I have to create one division so that I can display my react code over here so I will give this division one ID as well okay so here I have given the ID as content so for now we are done with this uh HTML file now we have to create one react jsx file so for for that we will create one file let me name it as script. jsx so this j6 file is a file in which we will add our all the react code now j6 is a type of syntax that you can just type and it's very easy to understand in react as you know that everything is a component and each component needs a class to survive so first we have to create a component and then provide a class for it so let me just create one component okay so as you can see I have created one component named my component and then I have created one class so now I have created one component with the the name my component and then I have provided one class for it to survive now inside this class I will be adding all the functions and the attributes that my class is going to do so now each component has one render function which returns an HTML representation so here we'll add the render function which will contain what we want to display so since we are going to return the hello world just so here first let me just create the render function so render this is a function okay since this will be returning an HTML representation so inside the written I have to write we are rning only the hello world so I'll write hello world okay so just save it so now we are done with creating our comp component now you have to tell react that you want this component to be displayed over here so for that okay so here we are calling the render function of react Dom now inside this function I'll tell that I want my component to be displayed on the HTML page so for that I will fetch it by its ID so I'll call document do get element by ID since we have given the ID and its ID is content okay so now here we are done with our j6 file just save it go back to the HTML file so now you can think this jsx file as external CSS or JavaScript as we refer this file in our HTML file similarly we have to tell our HTML file that we have our react GS code in some other file so for that I'll say script and it source is script. jsx okay so one thing we need to add here is its type so its type is text Babble okay now we are done with both of the files now what I need to do is just run this file so now you can see that hello world it's showing that means we have successfully compiled our program and this is how the react CH is working so here you will see that I've written the same program here okay and and this is the my HTML file and then this is what we saw in the output since we are done with our first program let's now find out the various fundamental concepts working behind it here first we'll understand what is a jsx file and how it is used then we'll learn about the component and its different forms after this we'll find out what are props followed by the states then we'll have a quick look on different phases of component life cycle next we'll learn about the react events and how how they are triggered after this we'll see what are the references and keys and understand their importance in react finally we'll understand what is react router and then we'll proceed to our demo so without wasting any more time let's take up our very first topic that is the jsx so jsx stands for the JavaScript exml it's an exml HTML like syntax that is used by react this synex extends the ecmascript so that the XML HTML like text can coexist with JavaScript rea code this syntax is used by the pre-processors to transform the HTML like syntax that is found in JavaScript files into standard JavaScript objects with this file instead of just embedding the JavaScript into HTML we can embed the HTML into the JavaScript as well this makes the HTML code easy and also boosts of the javascript's performance moreover it makes our application robust let's now see how this GSX can be used well the first is the regular use of jsx which we already saw in our hello world program next is the jsx nested elements now as you know in react the render function can render only one HTML element at a time so in case you want to render multiple HTML elements then you need to put them inside the one enclosing tag let's see it how Okay so let's try and add one more HTML element inside this render function so here let me say I have H3 you can see as soon as I add add this H3 tag it's showing that here something is expected that means it can't compile when error symbol is coming so that's why we need to include this inside one enclosing tag so I'll be using div here so let me say div okay so I'll just cut it from here and paste it now inside this tag I can add as many elements as I want so let me just use H1 you can use any tag you want so just okay so now inside this I'll say urea I'll just save it go to my browser here you can see edura and hello world so this is how we can use multiple HTML elements inside our uh j6 code so the next is the specifying attributes you can always make your code Beautiful by adding the attributes to it let's see it how so inside this what you need to do you have to create one variable with the CSS elements so here I'll say that I have a variable let me name it Styles and I'll just say that in this the color will be okay let me say the color is red okay so here I will add this Styles as a style to my uh HTML element so like this style I'll say it will follow the Styles so now the entire division will be in Red so just save it go to the browser and reload it now you can see everything is in red you can specify style for a single element as well so you just let's just say that we have styles two and here let me say the color is yellow okay and I'll say my H1 tag will come in yellow color so I will say that it will follow the style two I just save it go back to the browser and reload you can see the Eda is in yellow color okay so this is how our attributes work so the next is embedding JavaScript into jsx as in normal HTML we embit the JavaScript Expressions similarly here also we can add the JavaScript Expressions directly into the code let me show you okay I'll go to the ID and I'll just say I'll take one H3 tag and inside I'll say just sum is something I'll throw in some random numbers over here so let me just say save it go back and here it will give me the sum so the sum is 13 so like this we can use jsx in different forms okay so here we are done with all the uses of jsx let's now move to our next topic that is the component since the beginning I'm saying that in react everything is a component so now let's find out what actually this component is to understand this let's again go back to Facebook as you can see this is a Facebook page now this page is divided into various components like this is a component this is also a component and again this is also a component like this there are many more components over here since in react everything is a component and each component returns a DB object it results in splitting up the entire UI into various independent and reusable pieces to understand this better imagine the entire UI as a tree here the starting component becomes the root and each of the independent pieces becomes the branches and which are further divided into sub branches now this pattern keeps our UI organized and moreover it allows the data and state changes to logically flow from the root to the branches and then to the sub branches moreover the component can always refer to other components let's see how this is happening okay so here I have one component named my component so let me just create few more components over here for this again I'll use the variable and let me name it as header so here I'll call the react. create create class so inside this again I'll create one render function now what I want that this render function should return me just one HTML representation to show that this is my separate component so so therefore I'll just simply uh write return and I'll put one h2 tag over here and I'll say that this is header component okay like this so I'll create one more component like this so for that I'll just copy this and I'll paste it up here and I'll change its name to footer okay and here it will say this is footer component so now how I can refer these components from my component for that I just need to go inside the enclosing Tab and here I'll just say header and moreover again I can just say footer like this save it go back to your browser and reload so this is how our components work we can call one component from other component as we have seen okay I hope this thing is clear to you now let's go further in our pbd okay so here a valid react component can always accept a single object argument and then produce a react element now these are called the functional elements as they are literally the JavaScript functions as you can see so here we are calling one handle click function now whenever this function is called it will always return return as one HTML representation so that's why these are called the functional elements on addition to this we can uh simply Define a component through JavaScript as you can see here we are creating one function which is named prop demo it is accepting one props and then it is returning one HTML representation so this is how the components work moving further in this the components in reactjs can be in two forms the stateful and stateless components the stateful components are those components which remembers everything it does whereas the state components are those components which doesn't remember anything it does so let's now discuss these components in detail so first we have the stateful component these are the core components which store information about this component state in the memory now these components can change the states as well they contain the knowledge of the past current and future possible changes in state of the component in case there is a change in state they will always receive the information from the stateless components thus these components are called the smart or Active Components next we have the stateless components these are the stateless components which always calculates the internal state of a component they can never change the state moreover they do not contain any knowledge of the past current as well as possible future changes of the state of a component these stateless components provide the referential transparency that is for same set of inputs it will always generate same output thus these comp are called the dumb components now I hope you have the fair understanding about the components so now let's move on to our next topic that is props the simplest way of describing props would be to say that they function similar to HTML attributes these are the read only components which provide configurational values thus by using the props we can always pass data from parent component to a child component whenever the component is declared as a function or a class it must never change its props all such components are therefore called the pure functions if you see this function as I have seen in this demo we have the function called sum which is accepting arguments X and Y so its prop is to always return the sum so whenever this function is called it will never change it prop in react the Only Rule we have and that we must follow is all react components must act like pure functions with respect to their props so let's find out how it's happening with the help of practical demo okay so now here what I'll do I'll use the header and here I'll provide the prop but before that inside this header since we have to provide information from the parent to the child let me say that my component is the parent component and header is the child component so from here I'll say that header has a name let me say name is let me say Alex okay now what I'll do I'll just copy and provide one more header prop so I'll just change its name to I'll say Max okay so now how we can provide this information to child component for that what we need to do here is I'll just use one H3 tag and inside this I'll refer my component so here I'll say this dot props dot since I've given the name so I'll say name here okay here we have to create one division as well okay so what I'm doing here is that I'm passing one name from my component from here from my component to the header component which is just printing out the representation so this is how the props work whatever you give as input it will always display the same out so let's just save this go back to the browser and reload so here you can see Alex and Max it's print so each time the header component is referred it will print this element I hope you are clear with the props let's now move to our next topic that is States so what is a state and how State can be assigned here in react the state are the heart or we can say the core of react components though most of the components simply take in props and render them but they can also provide States these states are used to store information or data about the components which can change over time because of user or system events you can say that they determine the component's rendering and behavior and therefore the state must be kept as simple as possible using the state it leads to a dynamic and an interactive components which adjust themselves according to the changes so let's now see how the States can be assigned with the help of the demo okay so since we have already used the props I'll use this footer to show the state now to access a state first we need to assign One initial state to the component because by default it state will be set to null so for that I'll call one function it's called get initial state and see inside this class I have two functions so I need to separate them so I'll put one comma over here inside foter I'll say I have user and I'll let me set its initial state to I'll say urea so it's uh the user initial state is urea so now whenever we call this user it will always display the urea now how can we refer to this for this what we need to do is okay now I'll add one div over here you just cut this from here and paste it and now here I'll say I have one H1 tag and here I'll refer to the state so to refer the current state what you need to call is this dot State and our element name is user so here you'll say user like this Save It Go back to the browser and reload it see so our user is Eda to make it more clear let's go back to the and here I'll say user is Eda more you can put any number of elements you want let me just say I have an ID also whose default state is 101 I'll save it and uh inside this I'll say okay here I'll use one break and then I'll say ID is and again I'll refer this thing with the this do state do ID so now again go back to the browser and reload it so here you can see user is Ura and ID is 101 so this is how we set the initial state but as I have told you that we can change the state as well so let me just say that after some time these two elements change their state so in order to do that what we have to do is we need to call one other function which will automatically change its state after let's say after 2 second it will change the state so I'll call the set timeout function and it will automatically after 2 seconds let me say the 2 seconds it will change the state so I'll write two seconds and after two seconds it will call one function so let me write that function as well okay so now inside this function I'll call this dot set State inside huh set state so inside this uh State function what I'll say that my username should change from Ida to let me say STI and my ID should change from 1012 let me say 303 okay so let's now just say it go back to the browser and reload this so now you can see the user is urea and ID STI okay let me just go back and I will increase its time to let me change it after 5 seconds so here okay so let's now see so here the user is Eda and ID is STI but after 5 Seconds it will automatically update to STI and 303 so this is how the react works works it will automatically update the Dom manipulations for us and because of this the applications become extremely fast so the state is mainly used if the component has some internal value and moreover which doesn't affect any other component then only we can use the states so I hope you guys are clear with the state okay so let's move to our next topic that is life cycle of the components so react provides various methods which notifies when a certain stage of life cycle of a component occurs and these methods are called the life cycle methods now these methods are not very complicated you can think these methods as the specialized event handlers which are called at various points during component life you can add your own code to these methods to perform various tasks when we are talking about the life cycle the life cycle is divided into four phases they are the initial phase the updating phase the prop change phase and the last is the unmounting phase now each of these phase contain some life cycle methods which are specific only to them so let's find out what happens during each of these phases the first phase in the component's life cycle is the initial phase or the initial rendering phase this is the phase when the component is about to start its life and make its way towards the dorm so in order to do so all these methods are invoked in an order so first or method we have is the get default props this method allows you to specify the default value of this do props it gets called before your component is even created or any props from the parent are passed then next we have the get initial State now this method allows you to specify the default value of this do state before your component is created just like the previous method it to gets called before the component is created so next method we have is the component will Mount method now this is the last method that gets called before your component gets rendered to the Dom there is an important thing to note here if you were to call set State method inside this one your component won't reender then we have our render method now this is a method you should be familiar with every component must have this method defined and this method is responsible for returning a single root HTML node though this single route may have many child node inside it so if you don't wish to render anything simply written null or false then we have our final method in this phas that is the component did Mount method this method will get called immediately after a component surrenders and gets placed on the domor at this point you can safely perform any domor quering operations without worrying about whether your component has made it or not now one thing you need to remember here is that except for this render method all of these life cycle methods can fire only one so this concludes our initial phase then we can move on to our next phase that is the updating phase so after the components get added to the domor they can potentially update and reender only when a prop or a state change occurs during this time a different collection of life cycle methods gets called let's see what happens when a state changes whenever a state change occurs the component will call its render method again now any component that is relying on the output of this component will also call their render function again well this is done to ensure that our component is always displaying the latest version of itself so when a state change occurs all of these methods gets invoked in an order so here our first method is should component update method sometimes you don't want your component to update when a state change occurs now this method will allow you to control this updating Behavior if you use this method and return a true the component will update else it will skip the updating part next we have the component will update method this method gets called just before your component is about to update one thing you should note here is that you can't change your state by calling this do set state from this method now again we have the render method so if you didn't overwrite the update via should component update method the code inside the render method will get called again to ensure that your component displays itself properly again the last method we have is the component did update method now this method gets called after your component updates and the render method has been called if you need to execute any code after the update takes place you can put it inside this method so now let's move on to our next phase that is the props change phase after a component has been rendered into the Dom the only other time the component will update is when a prop changes its value now this is when all these methods will be called the only me method that is new here is the component will receive props if you want to compare we can go back to the previous slide and you can see we have the should component update method component will update method render method and component did update method and then next phase we have should component update component will update render and component did update so here only this method is new now this method returns one argument and this argument contains the new prop value that is about to be assigned to it the rest of the life cycle methods behave identical to the methods which we saw in the previous phase so this is how the props change phase is completed now move on to our last phase that is the unmounting phase now this is the phase when the component is destroyed and removed from the Dom there is only one life cycle method over here that is the component will unmount method you can perform any cleanup related tasks here such as removing the event listener stopping the timers Etc draw after this method gets called your component is completely removed from the door so here we are done with all the phases of the components life cycle along with their methods so now let's move on to our next topic that is the events well if you guys are familiar with HTML and JavaScript then you might know that what are events in react also events are the triggered reactions to specific actions like mouse overover mouse click key press Etc handling these events are very similar to handling the events in do but here are some syntactical differences in react the events are named using the camel case instead of using the lower case moreover in frea the events are passed as functions rather than the strings here the event argument contains a set of properties which are specific to an event what I'm trying to say is that each event type contains its own properties and behavior which can be exist only via its event handler moreover in other uis one event handler is assigned for each event which leads to more memory consumption and also makes our work tedious but in react the event handler is not attached to the Dom elements directly rather it only uses the root event handler which is responsible for listening to all the events and then calls the appropriate event handler as per need let's now see how the event is created and triggered practically so so to make you understand I'll be using one demo code here let me show you how it will be looking so I'll show you how the events work by the help of this example here I have one bul now and one button with me so clicking on this button will turn on the bulb and again when we click it will turn off so let's see how this is happening for this let's go back to our code okay so now what I I'll do I'll leave this file like this and I'll create one more GSX file so here I'll say event script do jsx okay so now inside this file what I'll do I'll create one variable and let me just say its name as bul okay so again we'll call react dot create class and inside this we'll first we have to mention our render function okay now inside this render function I'll say that I have one image and uh just close it and uh I'll say that it's coming from some Source I'll uh name that Source later then we have one button over here okay so I forgot to put it inside the division so here div just cut it and paste it over here okay so it's fine now and now I'll add one button over here okay here I'll say that this button on clicking this button um something happens so what will happen I'll uh write it later for now let me just name it as click me okay so here we have one button clicking on which it will do something and here is one image which will be shown okay so here we are done with the render function since we want on our HTML page we want one button plus one bulb so here we have described both of the things now we have to set One initial state for our bulb status so let me say get initial State and uh this is a function and since inside this bulbs class we have two functions we have to again separate these and inside this we will see say that uh okay let's return return the status let me set the status first so I'll say the bulb status is by default it's uh false so now inside this I have to add to images as well because uh on the page we are displaying the images for that I'll go to my downloads okay here I have already downloaded two images I'll copy them come back to my project and here I'll say that I need one directory and I'll name it as image so now inside this I'll just paste them now here you can see I have both one and two image so this is the initial state but now we want that on clicking this thing this button something should happen so let us create one function to tell what exactly will happen on clicking the button so so for that I'll say that we have one function name switch so this is a function again separate it so now this function will change the status from false to true and true to false uh because we want on each click the status should change so here what I'll say is this dot set State okay inside this I'll say that my status should change so for that I'll say status status should always change from whatever the current status so for that this dot state DOT status and we want each time the state to change so for that I'll say not so whatever the current state is is it will always change it to the opposite one so if it is true it will change it to false and if it's false it will change it to true now we have to provide the source for for this what I need to do is inside this render function okay so here we have to put this code inside the return which I forgot okay return since return it will return as the HTML representation you must remember this thing okay so now inside this one what I'll do I'll say I have one variable and I'll say disp bulb means display bulb so which bulb will it display so here I will put the sources along with the conditional operator whatever the condition is according to that it will display the bulb so I'll say this do state DOT status if this returns a false it will show the image one and if it is true it will return the image two so for that I'll give the path of the image that is image 2.png so this is the folder where my image is and this this is the name of my File versus when my condition is false it will show image slash first image that is image/png okay just save it okay so like this this is we are changing the image over here so here I'll say that image source is dispay so depending on the condition it will automatically retrieve the image okay here we are done so here what is happening depending on the condition the image will change but now we have to tell it also that on clicking the button you have to do this thing so for that here I'll say that this dot switch that whenever I click on my button then switch function should be called so for that I have written this do switch here we'll call the react Dom do render okay and inside this I'll say that Gra grab this bulb component and display it over the HTML page whose ID is content so here we are done so save this go back to the HTML file and tell it that our jsx file is now event script. jsx so just save this now and run it now you can see we have a bul along with a button now clicking on this will turn this on and again if we click it will again turn off so this is how the events are created and react so now I hope that you can create your own events so let's take up our next topic that is refs ref stands for the references now in react a parent component can interact with its child components only through props so if you want to modify the child you need to rerender it with the new props this is the typical data flow so in case you want to modify the child without following the typical flow what you need to do is make the child an instance of the react component or the term element in such cases only you can use a reference now this the ref attribute makes it possible to store a reference to a particular react element or a component return return by its component render function now this can be valuable when you need to reference it from within another component a render function as you can see here one of my render function is returning one reference which is then used by another components render function so let's now see how this works practically so here I'll go back to my code here what I'll do I'll create one more uh script file because I don't want to confuse you guys with all these stuff so here I'll create one more file and I'll just name it as the ref script do jsx okay so what I'll do here I'll create one variable let me name it as uh riff component and again I have to create one class for this I'll call react do create class okay so inside this I'll be putting my functions so here first of all I have to create one render function so this render function will always return me something okay so here let me create one division first so what here I'll do I'll create one input text box along with a button so inside this text box you have to type your name which I'll take and display it back to the web page so how we can do it with the help of reference we'll see so first let me say that I'll use one h2 tag here and I'll say the name so here inside this I'll create one input element okay so its type will be text only and U and next I'll create one button for this let me say click that's it and here whenever we click this button something will happen that is it should retrieve the name from this input box and then displayed for that I'll say that on click it will do something so for now we are done with this so how the references are created now so here whatever we get as input I want this to refer by this method so for that I need to create one riff here so here I'll say that we have a refi and in this we have to take the input so from here we'll grab the input whatever the value the user is passing it will take that input and it will be be then referred by the function which will be called on on click so here I'll just name this reference as let me name it as input demo so let's say this dot input demo okay and it will be referred by the input like this okay so now let me say that okay let me put one break function over here so that this input text box and the should appear in different lines okay so here we are done with the render function now what we want to do is we will call one function over here that whenever with this is clicked it should retrieve the value from this thing so for that I'll create one function let me say display function so what this function will do whatever the user gives that input it will take the name and it it will display it over the HTML page so for that I need to create one more let me say I have H1 tag over here and I'll say hi to whatever the name is so here I want to display my user's name so for that I'll create one span over here and I will provide one ID to this so I'll just say dis name okay so now what my display function will do it will take this input value and it will display it on this area so for that let me create one variable and say it name so here I need here now this function can refer to my reference so to refer this we'll say this dot whatever our reference name is that is input demo I'll just copy this and paste it here and then I'll say that receive its value so here we are done so one thing here which we need to do is we have to display this name whatever the value is in name we have to display it over here so for that what we need to do is as you know to display it on the web page we have to use the inner HTML and for that we have to get the span by its ID so get element by ID and the ID name is disp name disp name and then we'll say do inner HTML and here we want to display the name okay so this thing is done here now again since we need to tell react that you have to render this ref component over the content area so here call the react Dom do render inside this you have to call ref component and again get the division by its ID so document do get element by ID where the ID is content okay so here we are done just save this file okay no here we are still left with this thing we have to tell that on clicking you have to call the display function on each button click this display function should be called so now we are done so we I'll just save this and uh I'll go back to the HTML and I'll tell that our j6 file has again changed and now it's like R script so save this and run this so here you can see that I have name and I have one button and then it says hi so as soon as I put my name over here and just click it it will say hiti so this is how the references are used but one thing you should remember is references should be used in the D need only so references can be used when you are trying to manage the focus or text selection or media playback then it can be used while triggering the imperative animations and moreover when we are integrating with the third party Dom libraries then also we can use the riffs so I hope now the riffs concept is clear to you so let's take up our next topic that is keys well keys are the elements which helps react to identify different components uniquely they are special helpful when we are working with dynamically created components assigning the key value will help you identify the components uniquely even after they have changed as you can see from this diagram here we have two components with different key values one with key 101 and one with key 102 now these are rendered for the first time so the react will render them without any problem but next time when we try to render them here the component one's key value is same whereas component two's key value has changed so now the react will render only the second component not the first one as the first component's key is same so here the react will think that as the key hav changed so the element is same so no need to render this one and it will go ahead and render the second component so this is how the key works in react now finally we come to our last topic that is router in react router is a powerful routing library that is built on the top of react framework using the router we can quickly add new screens and flows to the application it keeps the entire URL and sync with the data that is being displayed in the web page moreover it provides us some of the major advantages like it can easily understand different views of the application it can restore any state and view of the application just by using a simple URL along with this it can efficiently handle the nested views and resolutions with react router the state of the components can be easily restored by the user himself just by navigating backward or forward moreover by the router we can maintain a standardized structure and behavior of the application also it can do implicit CSS transitions while navigating only so here we are done with our router also I hope now you understand about reactjs thoroughly what it is how it is implemented and what all things we can do with it you know now so I think you guys are ready to create one application with react JS this without any more delay let's now find out the code behind our Facebook comment application which I used in the beginning so if you guys remember I showed the demo of this application so now we'll see what are the codes which are working behind this application okay guys so here we are with our code so to save time time I have already created the HTML the PHP and the CSS files which all I I'm going to use in my application and moreover I have already downloaded the pictures also uh so that I can display the profile pictures if you remember from that application okay so this is our HTML file I have included the dependencies here and I have told that I have one script. JX since I'll be naming my JX file as script only and and here I have added the CSS stylesheet as well so now next step what we have to do is create the jsx file so without any delay let's get started with it so inside this as we were doing earlier we'll create one script. GSX okay so now inside this file I'll be creating some components along with their functions and these all components will be uh doing some or the other work so here first we'll uh start start off by creating the base means first we'll create one wall in which all our comments will be posted for that I'll create one component named Wall form and then inside this I'll be putting some functions like get initial State means to set different states I'll be setting different states inside this and then finally I'll use one render function which will be displaying one text area so without any delay let's quickly start okay so here we are done with our first component now let's move on and create one another component and let me just name it as where comment form so now uh what this comment is doing that it will accept all the new perment and it will at the back end process them and integrate them with this wall so for that again we'll set the initial State and then tell that how many phases it will go through and then we'll put it to the render function so let's quickly do that okay uh so we are done with our second component as well now let's move on to our third component that is where let me say comment grid okay so now this component will be taking the comments and then it will link them to a particular user I have specified four users in my PHP files now whichever the user will add the comment it will take the comment and it will just integrate with it at the back end so for that what we have to do is again create the class and put some initial State and then give a render function to it and just add some methods in order to integrate them so let's uh proceed so here as you can see uh in this render function we'll provide one division in which we'll place our comments along with its uh related profile pick so this is how we are integrating the comments along with the pick so now we'll create one another component and now let me name this as comment block so now this comment will be displaying the comments along with its user in in order they are inserted like in this what we are doing we are presenting one representation this component will be taking in the comment and integrating it with its related profile pck and then this block what will do it will display it back on the HTML page so for that let's see so now we are done with our comment block so since this component is done after this we'll create one more component and uh what this component will be doing is uh it will be responsible for updating our comment fall like when whenever a comment is deleted or any comment is added at that time this component will get activated since we are updating the wall on this so let me just name it as wall update okay so I hope you can understand what's going on so let's just quickly create this component and see inside this component we will have some functions and along with that we will have the render function which will keep on updating the HTML represent presentation like whenever the comments are updated that is added or deleted at that time it will assign the particular profile pick and Link it with the component and then display so let's see how it's doing okay so here we are done with our update wall updates and then okay so here we'll create one more component that is wall feed and uh now this component will be responsible for maintaining all the comments on the wall so whether we are adding the comment or we are deleting it from there this component will render accordingly so let's just get on it okay so finally uh we'll create one final component so this will be the component which will be triggering the render function from this component rest all the components will be triggered so basically this is the component which will be responsible for our view so let's get started with this one okay so this is our final and main component so here we'll tell react that first you have to render this wall container then this wall container will call the wall feed okay so this is our wall feed component now this wall feed will uh in return then it will call Wall form and wall updates like this internally one component will call another component and this will build up our whole view so let's just quickly render this wall container so for this we have to call the react do do render and now inside this will tell that you need to render the wall container and you have to put it in the place of container so here we'll see document dok element by ID and let me just cross check the ID so ID is container just copy this one and go back and paste finally we are done with our whole of the reactjs code so there's no where no errors are there I hope yeah okay so here I'm on my browser so what I'll do I'll just say Local Host okay Local Host 8081 and my application is reactjs so okay so you can see that my application is up and running so let's just test it out whether it's working or not so I'll say hi yeah it's accepting the comments I can delete my comment and let me try replying so I'll say hello so as you can see our application is perfectly working so I hope I was able to make it clear how it's working how the codes are working so now I'll conclude this tutorial here thanks for watching and if you have any doubts or queries you can comment in the below section thank you have a nice day