React.js Full Course for Beginners | Learn React.js in 4 Hours | React.js Tutorial | Edureka

Just another WordPress site

React.js Full Course for Beginners | Learn React.js in 4 Hours | React.js Tutorial | Edureka

Hey everyone, this is Swatee and I welcome you all to Edureka’s YouTube channel. At Edureka, We provide online training on the most Trending Technologies with world’s best instructors and 24/7 support. Today, I’m here to give you a complete overview on react.js course. React as you might know is a front-end Library developed by Facebook It was released in the year of 2013 And since then it has continued to dominate the world of front-end development Thus we have curated this course in such a way that everything that you need to know about reactjs has been categorized into several modules. Module 1 talks about what exactly is react.js in module 2, you will see the various aspects of react in module 3, you will see what is a virtual DOM in module 4, you will see the advantages of using reactjs in module 5, we will see the applications of reactjs in today’s market in module 6, you will learn how to install react.js in your system in module 7, you will be learning about various fundamental concepts of react.js Such as react components, its lifecycle, State, props and many more. In module 8, you will see how to integrate a state management Library called Redux with react.js application in module 9, you will be given a brief overview of react router finally in the 10th module you will be working on an end-to-end project So that was all about today’s offering, This session will be further continued by Mr. Vipul Jain A quick solution would be to do subscribe to our Channel and hit the Bell icon to stay updated over to you Vipul Hello everyone My name is Vipul Jain I have 10 years of experience in web development which includes experience on react.js angularjs and many other web Technologies So in this complete video course series, I will be starting from the basic components react components props state and then moving towards the advanced reactjs topics which includes flux and Redux So let’s get So before moving to react.js and talking about what is react.js let’s talk about some of the differences between es5 and es6 standards So what are these es5 and es6 these are the basically the JavaScript standards and since world is moving towards modern web development We will be talking about more about es6 as compared to es5 So let’s talk about the differences So the first difference es5 calls react dot create class with an object and ESX It uses class which extends from react component that basically react component internally It calls reactor create class only if I talk about the S5 that create class accepts initial State function that is always called once when the component is mounted, but in case of es6 class in es6 class, we have a Constructor in state So after calling the super keyword once first, we will call the Constructor and then the super in the super it sets the state directly The most important thing when it comes to difference between es5 in es6 is The Binding of functions So when I talk about binding a functions in create class that is react dot create class in es5 It was very easy because every property that a function is automatically bound is by react but in binding if I talk about in es6 it’s a little trickier a little complex because functions are not Auto bound you have to bound them manually and the best place to do it is inside the Constructor with create class You can Define the prop types and default drops as properties on the object But with es6 class these becomes properties of the class itself So these are the basic differences between es5 and es6 classes or the JavaScript standard and now let’s talk about the syntax differences So if you can see on the screen on the left hand side and creating a constant called contacts create dot create class having a render method and the return statement But if he is six class we use a Constructor where we need to call the super to pass the props to the react component We now create a class which extends from react component instead of accessing the rear dot create class directly So these are some of the syntax differences between es5 in es6 now es5 in es6 drop types and get default props So what are these crop types and get default props? So in the es5 version we used to have reacted create class version the prop types property is an object so you can see here get default props and the prop types So this is an object in which we can declare the type of each prop but in es6 because es6 uses prop types again as a property on the actual class, so our class name is contacts So we are using the prop types

and default props as a property on the actual class instead of a property as a part of the Be a class definition which was there in es5 now how you bind the context in ESX? So you bind the context of any function or any event in London So as you can see here that there is a class which extends from be active component because this is a syntax which is used in es6 Then we have a Constructor and props in the super keyword If you see here Dave on click equal to this dot handle click dot Pine So the context is binded in line in es6 standard now in es6 and standard you have to bind the context inside the Constructor as we saw in the previous example, so if there is a table, which is an on-click event called this dot handle click so this dot handle click is binded inside the context that is the inside of the class which extends from react component So what are the advantages of es6 over es5 so in ESX you can create promises you can create classes the traditional functions have been replaced by Arrow functions So you can create Arrow functions Now, there is a concept of blocks scoping and modules So these are some of the advantages of JavaScript es6 standard and going forward in this complete video series I will be talking about the class components only those are es6 standards So let’s get started Now what is reaction is so we’ll talk about what is he actually is now so react if I talk about is an open source JavaScript library as you can see on the screen, it’s a JavaScript library So I say it’s an open-source JavaScript library for you can see creating Rich user interfaces that run in user browser It is developed by Facebook It is open source, and it is used to develop interactive user interfaces react focuses solely on Reading rendering and event handling functionality rendering is the conversion of data that describes the state of the user interface into Dom or you can say into the Dom objects that web browser can use to produce a user interface that the user can see and interact with now if I talk about what is react.js so react.js uses jsx to write the code and it uses a concept of virtual Dom The virtual Dom is a JavaScript object model that react uses to calculate the user interface changes So if I talk about react.js as I said, it uses jsx for writing the code which is basically the template syntax like HTML but provides also full power of JavaScript as well So jsx we can say It’s a combination of JavaScript and HTML now aspects of react.js there are three important aspects of react.js we will talk about first is the virtual Dome second is the data binding and third is the server side rendering but That is like talk about the architecture of a react.js application Any reaction has application is composed of a set of components So it includes a number of components and the inputs to these components are the properties which are referred to as props and state and this complete architecture of components props and state we will be talking about in the later slides So let’s talk about what are the different aspects of reactors Now, there are few things You should know in advance before you start playing around with react So if you have never used JavaScript or the Dom it all before for example, so I will suggest that please get familiar with those Concepts before trying to tackle or play around with react chairs So if I say, what are the prerequisites to play around with three react chairs, so you should have familiarity with HTML and CSS You should have basic knowledge of JavaScript and programming you should have basic Name of Dom Dom stands for document object model, then you should have familiarity with es6 standards which we talked about So you have to know es6 syntax semantics in features And then finally you have to know what is node.js and how npm is installed globally So these are some of the prerequisites I talked about to start with react chairs So let’s talk about virtual Dom Now This is the first aspect we want to know about react.js So let’s talk about the problem first What is the problem? So Dom manipulation is the heart of modern interactive app, but unfortunately, it is also a lot slower than most JavaScript operation So when you write in JavaScript document dot get element by ID This is the ID of the element dot innerhtml equal to some value Now what happens actually behind the scenes what happens is that browser need to pass this HTML It removes the child element updates the Dom You with the new value Then there is a complete recalculation

of the CSS for the parent and child for the complete tree and then the layout gets updated So that is each element exact coordinates on the screen And then finally there is a complete reversal of the tree or the render tree and then it gets displayed on the browser Now what happens as you can see on the point number four, this is very much heavy that is recalculating of the CSS and change layouts because they uses a complex algorithm they affect and finally they affect the performance of the application and as well as updating the Dom properties It’s very complex Now here we are talking about only one change Now, let’s say suppose if you want to update the Dom document object model 10 times directly, then all the above six steps, which I have talked about They will run one by one and they will update the Dom algorithms which will take whole lot of time to update all the Dom values That is why we say that real Tom is always slower than the virtual Dom, please remember virtual Dom is aspect or you can say concept which is introduced by react.js Now this slowness of the application can be made worse by the fact that most JavaScript Frameworks update the Dom much more than they have to for example, let’s say that you have a list that contains 10 items for example, so you check out the first item Now most of the JavaScript framework would rebuild the entire list That is the complete 10 list that’s 10 times more work than necessary So only one item is changed but the remaining nine gets rebuilt again, and again exactly how they were before So rebuilding a list is no big deal to a web browser but modern websites can use huge amount of Dom manipulation inefficient updating has become now a serious problem So what happens when you try to update the Dom in react the reconciliation process So what happens is that the entire virtual Dom gets updated the virtual Dom gets compared to what it looked like before and now you have updated it So react figures out the difference or which objects have changed only those change objects get updated on the real Dome and then the changes on the real down because the screen to change so I can say that in react for every Dom object There is a corresponding virtual Dom object So like any actual Dom virtual Dom you can say it’s a Note 3 that list the elements and their attributes and content as objects and their property to directly change What is there on the screen manipulating the Dom is a slow process but manipulating the virtual Dom is a very fast process or you can say it’s much faster because nothing gets drawn on screen It’s just like a manipulating the virtual Dom is editing a blueprint as opposed to moving the rooms in an actual house if you can see that on the screen in the given tree The red one the ones which have been changed and they have only been patched to the real dome instead of the complete tree So that is the power of a real Dom you can see now the important thing that how does react uses virtual term? It’s very important So as I said that in react every UI piece is a component and each component has a state so react follows the observable pattern and listens for State changes and whenever there is a change it has been updated in the virtual Dom which gets reflected to the real Dome So in summary what I can say that what happens when you try to update the Dom in react, so what happens that the complete virtual Dom gets updated the virtual Dom gets compared to what it looked like before you updated it and then it reflects the changes on the real dome which causes the screen to change that is the concept of a virtual term now, let’s talk about another Spect of react.js which is take a binding So react.js follows very important to learn that react.js follows unidirectional flow of data or one-way data binding as compared to other Frameworks which supports two-way data binding So in react.js throughout the application the data flows in a single Direction, which gives us a better control over the application So as you can see here that data flows from view to action from action, it flows to dispatcher on dispatcher multiple actions can work and from dispatcher it goes to store So react apps are organized as a series of nested components These components are functional in nature That is they receive information through arguments Now if I talk about this one-way data binding or unidirectional data flow so flux, I want to talk about little bit about here That flux is a new kind of architecture that Facebook uses when it works with react It is more of a pattern then a framework and it has four main components

You can see on the screen The one component is dispatcher Now what dispatcher is doing that it receiving the actions and it broadcast its payloads to the registered callbacks or to the store The second one is the stone So it store is acting like a container for application State and Logic the real work in the application is done in the store the store you can say is registered to listen in to the actions of the dispatcher and it will work accordingly and it will update the view So if I talk about view or more specifically the controller views, so react components they grab the state from the store they grab the state from the store and then they pass it to pass it down to the child components So that is how data binding Works in react.js It’s a one-way data binding or you can say you need a directional data flow now another concept of react jail that Server-side rendering so let’s talk about server-side rendering now So server-side rendering allows you to pre-render the initial state of your react components at the server side only so server-side rendering which is also called as SSR in a preheated form It is called SSR It is the you can say ability of a JavaScript application to render on the server rather than on the browser This is the exact definition of server-side rendering I repeat this definition server-side rendering is the ability of a JavaScript application to render on the server rather than in the browser Now there could be a question in your mind that why would you be ever want to do so so now I will list down some of the advantages that why you want to do so because it allows your site to have a faster page load time, which is the key to a good user experience It helps in the SEO that is search engine optimization because what will happen that without Side rendering or your server ships is an HTML page with nobody So just some script tags that are then used by the browser to render the application So in a nutshell, what is the difference between client-side rendering and server-side rendering so in client-side rendering your browser downloads a minimal HTML page? It renders the JavaScript and fills the content into it This is client-side rendering and what a server-side rendering on the other hand server-side rendering it renders the react components on the server And what is the output the output is the HTML content? So that is the use of server-side rendering So we talked about three important aspects of the xjs that is virtual Dom data binding and server-side rendering now, let’s talk about virtual Dom in detail So if I talk about virtual Dom as you can see on the screen that model gives data to view which in turn creates Adam for it So here a model so model had information For the user ID and location It has been given this data has been given to the view which in turn has created the Dom now model gives data to the view which in turns create the Dom but you can see over here that if I change the user if I change the user from ln2 Max that is the only change which has happened in terms of three properties as compared to three property Only one property has been changed and that property only be reflected on the real term That is the power of a virtual Dom So as I thought about that, what is a virtual Dom right? So virtual Dom only give updates to the real Dome it not only gives the update so that the complete page or the complete HTML or css does not get loaded again and again on the screen So now here see if location is changed if location is changed Okay, if I talk about the previous location, the previous location was u.s It was compared and then you can see in the real term The location is changed to UK because virtual Dom it has not put several load on The View and makes our processing also very much faster So with react.js well model gives data to the view If the Dom is empty react will create a dome for it That is also a beauty or you can say advantage of a virtual term as you can see here that with react.js when model has given the data to The View and if the Dom is empty react will create a dome for it, but at the same time it is checking with the previous values and if it has found previous value as Ln in the new value is Max, the user property has been changed to Max in the real term So let’s talk about the advantages of react.js now What are the various advantages of VHS? The first one application performance is increased So which means that the creating the dynamic web applications now, it has become very easier and react.js is very much easier to learn now how the application performance has increased We have already talked about that

It uses a concept called virtual Dom So enhancement of performance has been done or you can say application performance is increased because of the concept of virtual Dom It is used on the client side as well as on the server side react.js can be used both on client side and server side and it also known to be seo-friendly you can say library readability is improved This is one of the greatest advantage of react.js at the readability of the code or the readability of the application has been improved a lot Another is that it can be easily integrated or used with other Frameworks like Angular JS or meteor or View Even with knockout Json purchase another advantages of EHS I want to talk about here is that the reusable components so react.js focuses on the concept of reusability So react UI as we know that it is declared inside the components So if I talk about a component here at this stage, so component is like a function that accepts the props as inputs and outputs the declared interface the UI should be composed of as many as components as possible to maximize the reusability So the concept says that you should decomposed into multiple components your react.js application at the same time react.js is a very much famous Library So there are very much great developer tools available out there for you can say Chrome and Firefox There are browser extensions for react available in Chrome and Firefox browsers So these extensions you can say Allows you to inspect the react component hierarchies in the virtual Dom So you can select individual components and examine a negate their current properties and state So these are some of the advantages of react.js react chess is very much popular nowadays and is used by almost all the developers across the globe now applications of react.js So there are these famous applications which are using react.js in their applications or maybe browser application and some are using in their mobile apps So some are also using react native instead of react along with the react.js in fact, so some of the famous applications one of them is obviously Facebook Yahoo Uber Netflix, Twitter Instagram Dropbox and New York Times So these are some of the very big or famous applications which are using react.js or react native in their website or in their mobile app No react.js installation how you install the react.js in your application? This is very very important to understand now when I talk about react.js installation, so you can use it or you can install it in your environment by using the script tags either in a new HTML file or in your existing HTML file in a existing project So if you are interested in playing around with react what I want to give you that you can use online code playgrounds So I will show you that so what you can do is that you can use online playgrounds For example, you can use glitch you can use code pen You can use code sandbox also, so these are some of the you can say open playgrounds which allows you to write code in react.js if I talk about this particular code PennDOT I/O website So what you can do here is that you can write the HTML You can write your CSS and you can write your JavaScript as well But to configure this environment what you have to do that you have to click on this gear sign in JS Besides the JS Once you click over it, you have to select the react libraries, which is first is react.js and second is react Dom development or chairs these two libraries You have to search from here and then edit and another is Javascript preprocessor, which you have to act so once this is done so that you are ready to play around the react.js code in these you can say online editors, which allows you to write code in react.js, but if I talk about the actual installation in your project or in your website how you can add react to a website so you can add react to an HTML page so you can add react to an HTML page So when starting a react project a simple HTML page with the script tag might still be the best option okay it Only takes a minute to set up it will take just a minute to set up the react.js in your existing HTML file Now, I will show you how to add a react component to an existing HTML page You can follow along with your own website or create an empty HTML file for your practice But before that if I talk about react.js installation, you have to download some of the dependencies

in your environment So first one is download and install the npm you can open the command prompt then go to a folder you can write the command npm start installation And then you have to install the web pack using npm You have to install react and then table table is used for jsx because internally JavaScript needs to be rendered in the browser So what are the things which are required for react.js installation? So the first and foremost file is webpack dot config dot J’s Now, what is this file all about it contains the information about the dependencies What are the all dependencies is there? And the files from their browser should start rendering from so it allows you to give the information of your startup file and then you will have a HTML file which contains the complete HTML template which is used by the browser to render the elements and then they will be a j6 file which contains the description of what all components we want to display on our web page and how they will behave so let’s get started and we will see that how we can use react.js in an empty HTML file how we can add the dependencies and before starting that thing Let me tell you one thing that before learning react.js You should install node.js in your environment This is official website of node.js from where you can download the node.js version The left hand side is the LTS version that is long-term support version And the right one is the current version You can install any words when you want while working with react.js that’s not a problem at all and the same time for the beginners for learning to This is a very good URL I would recommend that it allows you to understand complete JavaScript from here You can learn JavaScript if you are a beginner and you want to learn then react.js Concepts Okay, so let’s get started So what I’m going to do is that I have created a file So first of all, you have to add a Dom container to the HTML So what I have done is that under the plain HTML file I added to script tags so you can just like this add the script tags in your HTML file one script tag is for react.js library, and another is for react Tom So first of all, you have to add a Dom container to the HTML and add the script tags Okay So what I have done is that I have open HTML page where I want to add it added a you can say a div which is having a root day which is having an ID as root So once this is completely set up then I added the script tags So what are the script tags I have added one is Dr. Jason react Tom doj’s another script tag, which is required for react.js application is table dot window J’s, which is acts just like a preprocessor Once it is done Then I am ready to create a react component Okay So what I have done is that in the script tag, I have just used react domed render Now What is this? React Dome Riyadh Dom is a class or you can say API which contains a method called render So react domed render and this particular reactor MDOT render method takes two arguments It is very important to note that react Dom don’t render method takes two arguments The first argument is your HTML or you can say jsx element The second argument is the placeholder where you want to render your data or you want to render your element So that is how we write react Dom dot render So let me save this file and let’s run this file So if I run this file on the web browser? So here is the output of this file hello world This is a simple plain react.js file where I am added the script tags for react.js one is for react.js Another is for react Dome and the third one is required for the pre-processing of the JS X component, which is used over here in the H1 tag I have just written hello world and that is how it is rendered on the browser Okay Now, let’s check another example, so I have one more example to show over here So I have created two files index dot HTML and a JS file So let’s see this index dot HTML file what I have done So in this index dot HTML file, I have added some H2 tags P tags And then there is a div tag having an ID and there there are two script tags for react.js and react dom dom Jess And in this particular HTML file What I’m doing is that I’m creating a react component in a custom GS5 So what I have done is that I have created a file like button dot JS This is a custom file which will be next to my HTML page and after the started code in the like button dot J’s, if you see like button dot JS what I have done that I have created a component So this is class component

or you can say es6 is standard component Okay So what I have done that I have created a class like button which extends from react component as we said that it should have a Ter and super passing the props to this class I have said the initial State distraught State equal to life false and every component should have a render method and a return statement So in the render method and just checking that if they start state DOT, like it will return me that you liked this and return in the on click calling a Handler this what set state where I’m setting the state that like the equal to true So initially liked was false and finally it is clicked The button is clicked The state will be set as true similarly react on the render as we mentioned that it takes two arguments one is your element and another is your placeholder where you want to render the output Okay So, let’s see the output of this particular demo So you see here, it is giving me the desired output What is the output? So see what I have done is that in the HTML? First of all, I wrote at react in one minute this page demonstrate So this is just a simple static tag, or you can say static text, which is shown on the screen Now the important part there is a button Okay So on the click of that button, what I am doing is that I am setting the state So I’m setting the state from false to true So if you see in this example, if I click on this button, like this state has been telling me that you like this so that is how we can create components or you can say class-based components in react.js So let’s move forward now we will talk about some react.js fundamentals What are the various reactions fundamentals available in react.js So first of them is jsx, so we will talk about jsx components props State life Even traps and keys So all these will talk about in a stepwise manner in a particular order starting with J 6 So let’s get started with JS X So J SX stands for JavaScript XML It makes your HTML very easy to understand So if I talk about jsx, you can say It’s a combination of JavaScript plus XM Okay So JavaScript, or you can say jsx, it allows you to include XML like syntax in line with JavaScript So react specifically uses jsx to describe the composition you can say of react components in a readable way So what happens is that behind the scenes there is a jsx Transformer, which pre-process has the jsx and converts each element into a JavaScript function call So most of the projects uses Babel as a preprocessor You can say to convert jsx to JavaScript So the typescript compiler I can say that it is also capable of compiling the jsx Okay So if you are using typescript in your environment, you don’t have to use Babel as well JS X is a syntax, which is included in line in JavaScript files that is converted by a preprocessor like table into regular JavaScript Okay So this is all about jsx Now if I talk about what are the various users of jsx? So the first thing first why it is called the j6, it is called jsx because the type of syntax which is extension to a JavaScript and I will recommend you to use it with react to describe what the UI on the browser should look like Okay, so jsx may remind you of our template language, but it comes with the full power of JavaScript so you can also say that jsx produces react elements and react Embraces the fact that rendering logic is inherently coupled with other you elegy now ready GSX what is a regular Chase X So here what is written is a variable my component equal to react create create class So as we talked about react create class is a es5 JavaScript standard having a render function render method and a return statement Now, it will return this hello world So just like a regular j6 statement We can write in react components now jsx nested elements, so you can have multiple you can say HTML elements nested within each other in jsx expression or in a react component So just like here there is a div then H 1 h 2 p and Dave close So these are some of the elements which are nested or you can say j6 Nested elements now is specifying the attributes now attributes are always specified in curly braces Please remember that attributes if you want to specify any attribute, okay, or you can put any valid also JavaScript expression also but that should be inside a curly braces in jsx So for example, if I write 2 plus 2 so 2

plus 2 is you can say static text in terms of jsx, but if I put it in Cali braces so curly braces two plus two, it will become 4 So here also in this example some style is defined in the curly braces with background color as see on and in the return I am using this style div style equal to in curly braces the Styles then only this is tiles will be applied to the header So, please remember if you want to specify attributes in jsx You have to specify in the curly braces And if I talk about also attributes specifying in jsx, you can also use codes to specify the string literal as attributes You may also use curly braces But only thing is that don’t put quotes around curly braces when I’m betting a JavaScript expression in actor if you I will say that you should either use codes may be for string values or curly braces for Expressions, but not both in the same attribute So just try to understand that jsx is actually very closer to JavaScript and not HTML So there are a few key differences which has to be kept in mind while writing jsx So let’s move forward so you can embed the JavaScript So as I mentioned that if you have to calculate an expression because jsx is an expression to because as I mentioned that after the compilation of the code jsx Expressions become regular JavaScript function calls and a evaluate to JavaScript objects, which means that you can use jsx inside of if statements or four loops and while loops and you can assign it to variables, they accept it as arguments and return it from the function So in the return statement if you want to write any JavaScript expression you have to It in the curly braces then only it will be calculated else It will be treated as a static text Now, let’s move to another fundamental of react.js that is components now, we’ll talk about components in detail So first thing first that in react everything is considered as a company, so I will say in react everything is a component So on the screen you can see that there are multiple components 1243 + 5 + on the web browser We need to add them just like components so they have been added just like a widget so sections of web parts or specifically components and all these components are integrated together in react to build one react application So in react what I can say is that components lets you split the UI into you can say independent reusable pieces of code and you can think about each piece in isolation and that is where the concept of Usability comes into picture that each component can be reusable at a later point of time but conceptually components are like JavaScript functions You can say like that They accept some arbitrary inputs So the inputs to a react component is called props and the return react elements describing what should appear on the screen We can easily update or change any of these components without disturbing the rest of the application So as you can see that if I want to update or change any of the feature of this component one, I can update it without disturbing the rest of the application or you can say without disturbing the other components on my application Now how components are split internally So single view of UI is divided into logical pieces So on the left, you can see that it’s a single view or you can say react base application, but how it is divided internally into logical pieces So the concept in Of component in react.js always says that you should have a parent component and then you can have child components or subcomponents and it behaves like a tree So at the top you will have parent component or you can say base component and then there will be some branches or some branches beneath it So the starting components becomes the root It’s called The Root component and the rest of the all other becomes you can say the branches and sub-branches So in this diagram, you can see the component 1 is the root of the UI tree 2 & 3 are the children of 1 & 4 & 5 are the Sub sub branches of the second component So that is how you can split the complete UI in react.js components Now each component returns one Dom element So as I mentioned that in every component, you should have a render method and a return statement So each component in react.js, it returns one Dom element and how it is returned that there is an API called react Dom and it has a method called render

So react Dom dot render will allows you to render the different components on your application So the jsx elements must be wrapped in an enclosing tag So always please remember that if you have to embed the jsx elements inside a return statement or a render method, you have to wrap it in in closing tag So here I am creating a es6 standard component class component 3 so 1 2 4 & 5 3 is here which is written like this that hello world Welcome to edu Rekha and react dom-jot render I am calling the Component 1 because component one is my root component and where I want to show you is the ID of that development that is documented get element by ID content now if I talk about props and state so react components are basically controlled either by props or you can say by state so we will talk about them now But before that what are just a summary of the components that everything in react is a component each component returns a Dom object as I mentioned that component divides your UI or splits your UI into independent reusable pieces, and then each independent piece is processed separately a component can be divided into a root component and into the child components and then we can further split into smaller components Now, this is very important to understand that how you render a component So when react season element representing a user-defined component it passes The GSS attributes to this component as a single object and those are called specifically props So you see here This is a function welcome, which is just like a component having some props as a parameter So we call here react dom-jot render with the welcome name Welcome name Let’s say name is the prop over here having the value weapon and react calls this welcome component with the name people as the prop So this becomes name equal to people is the props welcome is a component which returns H1 tag and then react Dom efficiently updates Dom to match this H1 tag That is how a component is rendered in react.js Now the other fundamental the most again a very important you can say fundamental of react.js are the props now what our props so prop helps components to converse with each other or to communicate with each other This is I can compare it with you can say arguments or parameters of the function So if In this example class body extends react component return header and footer now in header name equal to Bob and name equal to LX So, how can I return this property to this class component by using this dot props dot name? So what this dot props dot name will return this dot props dot name, then it comes to header It will written Bob and this dot props dot name for the footer component It will return me Alex So how you can access props in react.js If you want to access props in react.js the syntax is this dot props dot name So using props we can configure the components So now I have another header and footer components and I’m passing a different value name equal to Miller and name equal to Cordy So in the header component if I write this dot props dot name in the previous example Also, I wrote this dot props dot name, but the value was something different And in this case the footer component will return Meet this dot product name the value will be Cody So Props are basically used with components They revolve around the components They help in the conversation of different components via props We can do the conversation or communication between the different components in reactions and how to access those props The props are accessed using this dot props dot name or you can say this dot props dot the attribute name or attribute value So if I talk about props, they work similar to HTML attributes data flows from downward from the parent component So as we are talking about a UI tree a parent-child relationship, so in terms of props, it’s a unidirectional flow of data props are immutable That is they are pure here We are talking about pure functions or pure components So Props are immutable so as compared to a state which is mutable, which we’ll talk later but props, please remember are immutable so they are pure in nature They can set default prop so we can set some default Pigeons around the props now, let’s talk about what is pure and impure here we are talking about so whether you declare a component as a function or a class, so as we talk about components can be of two types a function component or a class component, but it must never modify its own props So Props are always read only they are immutable in nature

So it is very well said that all react component must act like pure function with respect to their props So let’s talk about what is this pure function? And what is this impure function here? We are talking about So for example, there is a function called some having some parameters A and B, and it is returning a plus b, so in this particular example, this is called a pure function why they are called Pure because they are not attempting to change the input values They will always return the same result for the same input So by that what I mean is that I’m not altering the value of a or b inside the function definition That’s This is called a pure function But when I talk about impure function because the function is improved So it changes its own input So for this particular function the input was account and amount and you can see there that I am changing the value of account So it becomes impure function and that is not allowed when it comes to components and props because all react component must act like pure function So Props are read-only or you can say props are immutable in nature now components in props We talked about that There are two types of components You can create in react.js because components allow you to split the UI to Independent reusable pieces and you can think about each piece in isolation They are basically just like JavaScript functions, but there are two types of components which you can create based on es5 or es6 standard So if it comes to es5 standard, you can create a functional components, but the recommended way and I will recommend that you always create a class component So how we will create a function component normally just like we create a function so function welcome having some props or the parameters, but if you want to create a class component, so you have to use the keyword class the component team which extends from Viet dot component and it should have always have a render method and a return statement So that is these two are the different types of components which we can create but from a react point of view They are always equivalent these two forms of component are always equivalent Now another fundamental is state but before moving to the state or you can say another fundamental Let’s gets deep dive into some of the examples so that the three basic fundamentals which we talked about jsx components and props You can have a better understanding about these Okay, so let’s get started So I am just opening the node.js command prompt So I opened the wrong So I am moving to the D drive and I am moving to a specified location And then I am opening the code in editor called Visual Studio code So let’s talk about the basic example that how you can render the jsx in react.js a very basic and simple example, we will talk about that how you can render jsx in react.js Okay So what we have done over here is that we have a react Library the reference of a react Library Okay, and then reference of a react Dom dot library and then reference of the Babel dot J’s in the script tag I have called react dom-jot render And in that react dom-jot render because we want to render the jsx Okay, and please remember that you have to use script type is equal to text be able to indicate the jsx code in JavaScript or jQuery We refer is script type equal to Text slash JavaScript, but then we are working with jsx you have to use script type is equal to Text slash be able to indicate the j6 code and include Babel dot pin dot chase This is very important and this be able dot Min dot J’s This is a browser version of Babel Okay Now if I run this code what will happen that in this this script tag will get executed and the reactor MDOT render I have written hello world So let’s run this piece of code and just running this HTML file and opening it in a browser So you can see the output that it is showing me hello world, which is written in the script tag in real dom-jot render in the H1 tag So, please remember that this render method takes two parameters always the first is your jsx element And another is your place holder Okay Let’s move to the another demo where we will see that how we can use the JavaScript in jsx So as we know that we can also use JavaScript in jsx It takes the angle brackets as the beginning of the HTML syntax and curly braces as the beginning of the JavaScript syntax Ok, so here you can see that I have created an array name is equal to some names and in the reactor MDOT render I’m using a JavaScript names on the names array

I am using the map method which is calling on the name And on the index key that is a key value pair And in this I am returning the key equal to index Hello And the name now you see here this name is represented in the curly braces as a attribute because names if I don’t put it in the curly braces will be considered as a simple text So let me save this file and run this So you see here? Hello Alice Hello a million Hello Kate The reason being why this output because I have written here is hello and passing the parameter as a jsx So I’m using the JavaScript at the jsx and looping around the values in an array using the map function or map method which is inbuilt method of the array collection So that is why this particular output is shown LOL is hello a million Hello Kate because these are the three values which are there in my array Okay now, let’s move to another example Again, a very simple one that I have created an array having the key values as 1 and 2 now in the reactant not render I am calling this array Now what will happen that in my output it will represent that hello world React is awesome Now in the next in this example, what I am doing is I am defining a component So we talked about props we talked about jsx We talked about components, right? So in this particular example, I am defining a component So what is the syntax for defining the component class? Then the component name which extends from react component then it creates a component class and it implements a render method Please remember that the class components or the function components always should have a render method class components always implements a render method to return a component instance of the class So if I talked about before virgin 16 of reaction If users react dot create class to create a component class now, it has been deprecated and we are using the es6 standard Okay, now components can have attribute and you can use this dot props dot some attribute to access them Just like in this case I am using this dot props dot name So what I am doing is that in react dom-jot render as I mentioned, you have to call the parent component or you can have to call the root element in this case There is a component called Hello message Okay Now in the Hello message component, I am passing a prop with the attribute name Lex equal to name and its value is shown now what will happen in the Hello message It is returning Hello This dot props dot team as I mentioned while talking about the props that how you can access the problem Okay, how you can access the prop So how you can access the prop you can access the prop Is this dot props dot attribute name Please Remember how you can access it this dot props Attribute name this is very important to understand and now let’s see the output of this I’m opening it in the browser It is showing me the output Hello, John Okay Now let’s talk about this dot props to our children Now, what is the use of this dot props for children? So react uses this dot props for children to access component children notes or you can say hii notes so you can see here this dot props to our children So please remember that the value of this dot props for children It could have three possibilities in fact, so if the component has no code then the value will be undefined Then the second possibility could be that if it can have a single child node, let’s say an object and if multiple children notes then it will become an array I repeat that there are three possibilities while using this dot props for children So component can have no children note in the value will be undefined in that case If it has single General node, then it will be an object and if it Multiple children nodes, then it will be an array So react gives us the utility called reactor children This is reactor children This is a utility given by V at for dealing with this dot props for children data structure So we could have used reactor children dot map to titrate into the children’s of the component without worrying its data type being undefined or object So what I’m doing over here is that I’ve created a notes list component that is a class component So class notes list extends react dot component It can Clements render method and it Returns the instance of this particular class, since we are accessing the children of the particular component so we can use react children got map in this I am calling this dot props for children

and it could have three possibilities But in this case since we have a children, so our output would be hello world in this case the output will be hello world in a lie structure So that is how you can use or you can access the children components also of a particular component Let’s move to another example So prop types components can have specific attributes which are called props in react and can be of any types It can be of any type So here you can say prop type Taut string dot is required So what happens is that sometimes you need a way to validate the props so you don’t want users to have the freedom to in put anything into your component So react has a solution for it and it is called prop type So what we are doing is that we are saying that prop types is of type string and it is required This is kind of a validation we are doing so what is done in this particular example, is that the my title my title is a component has a props of title rock-type tells react that the title is required It is required and its value should be of type string now if we Let’s say for example title a number value So we’re data equal to let say 1 2 3, for example, okay, then it will result in an error which means the props does not pass the validation and the console will show you an error message something like let’s say failed prop tight So what I’m doing over here is my title I’m calling the component and there is a title where I’m passing the data and data is one two three Okay, so that is how you can Implement some kind of validations or you can apply some kind of rules where you don’t want to give the user a freedom to write anything in your component So these are some of the basic examples we talked about for jsx for crops and four components now, let’s move to another set of examples So let me close this very quickly Okay So these are again some of the small examples which allows you to work with jsx props and components but before starting this, let me tell you one thing very quickly that as I told you that this is the node js website from there You can install the latest node js version and once you install so there is a GitHub project provided by Microsoft open source project, which is called create react app So you have to write the command like this npm create npm install create react app and once you press the enter, so a project will be created for you complete react based project will be created for you which will allow you to have the complete solution structure in terms of index.js index dot CSS AB dot JS + AB dot CSS So you will have a SRC folder and a public folder So these two folders are very important and we will talk about this in detail So what happens once you create a Project based on create react App application a solution a builted solution is given to you which allows you to write the code or to test your different functionalities So it has two folders one is the public folder where we have a one HTML file called index dot HTML where we have defined a root element in a div with the ID as root If I go to the source folder the starting file is the index dot J’s in the index dot JS We have react dom-jot render as you can see at the top that we Imported react we have imported react Dom imported the index from the solution structure Now react dom-jot render calls the parent component, which is the app app is the name of my parent component So if I go to app dot JS there is a parent component class app extends component You can either write component or you can also write react component That’s not a problem at all Every component as I mentioned should Implement a render method and there is a return statement which Returns the instance of that particular class Now, I can write the jsx inside the component in the return statement simple HTML and the JS structure the div, I have given the div class name equal to app Now there is a header in this header I have implemented an image with a class named app logo, alt equal to logo and H 1 equal to class name app title Now this header tag is closed here Now you see the important thing over here In the main component as I said that the basic principle of react.js that you have to compose your decompose your complete application into multiple sub components

So at the top there will be a parent component and there will be sub branches or branches of that particular component So the first component a parent component is app inside it I have called three different components one is the demo class Another is author and another CMP style So first this demo class sub component will be called with this subcomponent a prop is defined a prop or you can say parameter is defined with the value react classes the value of this particular you can say prop it will be used in the definition of the demo class component So if I go to the demo class since it’s a class component, it should Implement a render method and a return statement So how you can use the props you can use the props by using this dot props So that is how it is used What here this dot props? And what is the attribute team that rebuke name is the demo class the second sub component, which is called is the author the author again has an attribute called author name which is used in this component class author extends component render implementation and then a return statement this dot props dot author name, which means that whatever attribute to Define over here can be used in the component by using the syntax this dot props dot attribute name Now The third component is a little bit different that rebuke name is a student named but here what I have done is that in the render method I have applied a custom CSS just to show you that how you can use the attributes are in the jsx in a curly bracket So where my style some styling has been given and in the return statement style equal to my style now this my style is put in a curly bracket, which becomes a jsx Point after that I have done some calculations you can see here calculation for minus two equal to it is in bracket then only this value will be shown Okay now to run this create react application if I go to package dot Json file So what is packaged or Json so package dot Json you can say is the introduction of any react based application or you can say the basic information of that react base application So it gives me about the name about the Virgin about the private dependencies and test scripts So there are some default scripts at the same time You can create some custom script of yours So there is a script called start So if I have to run this complete project or application however to write it so in the node.js command prompt I have to write npm start so I have clicked enter and this will open the browser on the local host on the port number 3000 So now you can see here the output that there was a header in the header There was an image a text and this is react classes by the pull chain and you can see the calculation has been done because we place the attribute the complete jsx or you can say JavaScript expression in the curly bracket So this is the output of this particular code, which I showed you in app dot J’s Now the beauty of this particular application is that whenever you will change the code whenever you make some changes you don’t have to run the npm start again And again, the changes will be reflected on the browser instantaneously so you can say that this particular application is very much reactive in nature So whenever you change the code or update any code, it will directly get reflected on the browser Okay So let’s go to index dot chairs and start making some changes in the code So I’ll start with again basic j6 elements so that you can understand how we can write jsx This is a very simple example again react dom-jot render H1 Hello world So if I go on the screen, I have not saved it if I save this file if I go to the screen, it shows me hello world I am not refresh the screen It’s very much reactive in nature Okay Now let’s talk about some more examples will quickly see some more examples jsx I am just showing you as of now jsx props and components examples Once this will be completed then we will talk about State lifecycle events and the remaining concepts of react chairs So in this particular example, how you can add your jsx in the previous example, if you have seen that in the react donbot render, I have added the complete element as the first argument for react dom-jot render, but there is one more practice which you can follow That instead of writing the complete jsx or HTML expression in the react dom-jot render first parameter What you can do is that you can create an element outside the react node dot render and then pass that element in the reactant dot render method

So what I’ve done is that I’ve created a dummy text and created a constant element in that I have created a device structure in that device structure What I’m doing is that I’m creating a button class name equal to button The text is button and then a sample text will be displayed Once this constant element or you can say a j6 expression is created I can pass this to react dom-jot render like this So let’s save this file and see the output you can see the output that there is a button and some sample text shown on the screen So this is the best practice you can say to write the jsx expression so jsx elements because your jsx elements can go bigger and bigger if it Single line jsx expression or j6 statement? You can very well write it in react domed render But if it is very big or going to become very very big then you can put it outside react dom-jot render in a constant element and then you can pass the react Dom render that element just like shown on the screen now, we will see the example how you can render the elements using jsx Now how you can render the elements using jsx? Now in this particular example, please remember that every react application It should start from Vietnam to render So how the data flow goes It goes from here Dom dot render So first we will see what is passed over here the element which is passed is constantly mean now in this constantly meant what we are passing is in H1 Hello format name and we have passed prop says user now What is format name? You can see that format name is used as a function component The parameter passed is user and for this user the properties using the arrow function here The arrow function is used the properties for this user user DOT First name and user dot last name is used as in the arrow function, which are passed to this particular function as a properties So return user DOT first name and return user dot last name and in the react download render I’m calling this element So let’s save this file and what output it will give me it will give me the hello user No formatting format name is calling a user so user is repulsion So hello, we pull chain because Ripple is the first name and Jane is the last name So let’s close this quickly Now, let’s talk about some other example It how you can render the elements in react years now We’ll start with real Dom render in react Dom don’t render There is a parent component, which is clock Now What is happening in this clock is that this clock is ticking weird, as you can say class component so class clock extends react component a Constructor a super is defined and we are setting the state this dot State please remember state is always set The initial state is always set by using this dot State and in this word State we are passing date as the new date in the component Did Mountain component will Mount we’ll talk about this later because these are life cycle methods in this just we are calling different different methods and we are setting the state in the tick method take function We are setting this with the date new now, what will happen that in the render method there is H1 Hello Whipple and in the H to how we set the state Please remember that we set the props using this dot prostitute attribute attribute name And just like wise we sent the state this dot state DOT attribute So here what I’m doing this dot set State dot dot dot to local string which will show me the current date or time So hello Whipple, it is 10:36 p.m That is how we can set the initial State and final state in react.js Now components in props Now, let’s talk about what are the components in props? So we already saw that in react dominant render we can pass the element but in the element again instead of passing the complete jsx statement, we can pass it as a component so you can see over here const element in the previous example, I showed you that in the element there was a jsx expression having some tail some P tag some H1 tag, but in this particular example, I am passing a component to the constant element The component name is welcome having some attribute for last name now in the definition of this particular component, which is function welcome I am returning H1 Hello props dot last name Now What is lasting Jen? So let’s save this and let’s check the output You can see here Hello lasting This is my last name that is how you can render the components and props in react.js It’s very simple very straightforward in nature This is just an interesting one having some null value So how you can conditionally render a react component

This is very important to understand that in element I have a component for your message having attribute message having the value as null now in the react dom-jot render I am passing this element and calling the message component So let’s save this file and see the output So there is no output you can see on the screen because I am passing a null value so you can also conditionally render a react component So let’s move to another example that how you can style the react component very very important to understand that how you can do The Styling in the react component because please remember just like a native JavaScript and jQuery We used class class equal to some name to let’s say style any tag or component in JavaScript or jQuery, but in react we use the class name, this is a keyword So instead of class we use I mean, so this class name I have defined in index dot CSS So if I save this and see so you see here This is the CSS which is defined and the techs rendered is Apple box because the text is given over here is Apple box So this is a box is small you can say class which is defined So if I go to in index dot CSS, this is the Box small class, which is defined so defining the class in CSS It’s pretty Same by the dot by the dot operator You have to define the class, but for calling that class instead of class keyword, you have to use the class name keyword This is very very important to understand in reactors Now, I will show you a very good example of react.js that how you can Implement multiple choice question kind of functionality in react.js, very important to understand So let me close this so for stopping this npm start you Press control C on your keyboard It will ask that you want to terminate the batch of you can press yes, and then press enter I’m just opening another example, which closed everything just open this in Visual Studio code A very good example, we will see that again the same example index dot JS I have AB dot J’s defined and index dot J’s and index dot JS I’m calling react dom-jot render in this the parent component will be called the parent component is app and here in AB dot JS This parent component is written as a function component You can see here that it is returned as a function component, right? So let’s run this code First of all to see it running So for running any react based create create react App application, you have to use the command npm stock So I have just entered the command npm start and press enter So it will open up in the browser so mean by we will see the code what is written in this function component in after chairs So in index dot JS, I have written react dom-jot render This is the parent component and document dot get element by ID where I want to display or render the output Okay So let’s go to app dot JS So in this app dot J’s since this is a function component I have a return statement over here in this return statement I have written some basic HTML So header tag is there so in this header tag, what I have done is that specify the class name because you have to specify it with the class name Some image will be there and then in the anchor tag, I’ve written some static text So it’s running as of now Starting the server npm server No problem We’ll move to the code again Okay Now in this particular example, what I want to show you is a multiple choice kind of functionality multiple choice question quiz, you can say so let me just do the and commenting and let me comment this react on dot render else There will be multiple react of the tender I don’t want that Okay So this is the application which we want to create Now The question here is that how we can create this type of application Now, this is a multiple choice question application, which is created in react.js Now as you can see, this is the output which I’m showing you now as you can see on the screen that there is a section called correct and incorrect So this is my score area you can say that this is called a score area below is is my question area Now These are the two high-level areas or components I have talked about but at the same time I can split this complete UI into subcomponents

So when I say this is the score area, okay or let’s say the outer complete boundary is the quiz then I have a square area in this score area I have to subcomponents the correct answer and the incorrect answer and in the question area I can have two sub components the question and the choices So if you see It asked me that what is 8 into 1 if I click on eight? See the answers goes is correct and state is changed to correct equal to 1 right So I just want to show you in this particular example that how you can decompose your UI or decompose your react application into subcomponents or you can say you can create a parent-child kind of hierarchy Although some advanced concepts are used to build this particular application which are not going to tell you as of now, but I just want to show you that how you can decompose an application if it is given as a requirement of problem to you then how you can decompose it into different components So let’s go back to the code and let’s directly go to react dom-jot render Now in this react dom-jot render the first component or you can say the root or the parent component, which is called is the quiz company Now, let’s go to the quiz component Where is the quiz component? This is the quiz component Now This is a class-based quiz component following the es6 standard class quiz extends react component having a Constructor super and a data set is defined with the correct answer now, once this data set is defined Okay Now we are setting the state initially state that is the start State and binding some click events or you can say functions to it But the most important part is the render method or which implements this component implements render method So in this render method in the return statement, I have two sub components, which I was telling you about that this particular quiz can be divided into sub components to sub components one is the quizzes area And another is the score area So you can see here one is the square area which will have the correct answers and incorrect answers And another is the quiz area Now, if I go to let’s say the score area score area component, so if I go to let me show you School radial component This is the score area component as I told you that this against core area component can be divided into two sub components one is for the correct answers and one is for the incorrect answers So you can see over here that there are two other subcomponents total correct and total incorrect, right? So these are the two sub components which are called in the score area component at the top now if I show you the other one, which is the question area So in the main one we have the quiz area in the quiz area I can have two sub components one is the question and when is the answer list so you can see this is my question and this is the complete answer list So if I say this question and if I click on lady, let’s say wrong answer so it becomes an incorrect answer right? So that is how you can divide a react application or decompose a react applications into components or sub components So in this particular example, let me repeat Once again, very quickly that this particular application divided into two main components that is the question and the score area again, the score area is divided into the correct answer and the incorrect answer those can be considered as two sub components of this core area component And then this quiz area is divided into the question-and-answer list So you can see over here that this quiz area is divided into portions of component and the answer answered it subcomponent So these are the three important aspects and then we’ll move forward to the other react.js fundamental with starts with States Okay, so till now we talked about fundamentals of react.js wherein we talked about es5 in es6 refactoring we talked about what are the advantages of react.js and we also talked about some of the fundamentals like jsx components and props So we talked about these in detail that what are the various types of components It’s we can create we can create functional components and we can create class components but going forward Please remember that es6 standard says that you have to create class components only because now we are going to talk about States So what our Estates in react.js so just like we have props we talked about props in react.js, which is used for data management in react.js So in addition to props react component have another way of holding the data and which is called a state So what is the state so components can change so to keep track of the various changes or the updates happening in the component over the time we use the concept of state

So in this example, as you can see, let’s say there is a nice State changes event has happened on this particular eyes and because of this change of events State changes So what is the state or the event which is change over here Let’s say we have increased the temperature and because of this increase in temperature the ice has been Take to water So what we can say is that the previous state of this particular object while eyes and when some event has happened on a component which is in this case is increase in temperature The final state has become water So for State we can say that unlike props component States our new table because in props we talked about that react props are immutable in nature, which means they talk about pure functions or they talk about that You cannot change the value of the props inside a component but unlike props the component States our new table So as I mentioned that react components have another way to hold the data and which is called State now objects which control the components rendering in Behavior So it states are the one which handle or control the components rendering and behavior and you can say this is the core of any react component as you can see on the screen that component is Go to any tree and around it revolves the props and the state but the important thing is that states should be kept simple as much as possible because we know what our crops how can you compare the props and state? So Props are the values which is passed in by a component parent so you can see here that the props these are the value power still by a competent parent So this value is passed to another component as a prop and the value is again passed to another component as a problem It’s a state is local mutable data that can be created and modified within the component This is the definition of State you can say so state is local It should be very simple in nature and mutable data which can be created and modified within the component Now, what is the use of having the local data or you can say local state having local data that can change within a component increases complexity and limits the composability of the component So when we talk about So we had local data which flows from one component to another component But the problem with this is that it can change within the component and can increase the complexity and also limits the composability of any component So when we talk about state in react.js, please remember that to use state in react.js, you have to use a class component There will be no more function components in our projects if you want to use a state and in the class Constructor, since we are talking about class components, so there will be a default Constructor over there We will initialize the component state to a sensible default value So just to repeat once again, what is the state state is just another way of holding the data in react.js Now, this is something very important that components in react.js can be in two forms You can create again two types of component one is stateless component and another is it stateful component now? What is the difference between these two? Glass and stateful because we talked about components components can be created by two ways Now when I say stateless stateless means it does not remember anything it does It does not keep track of any state And what is a stateful it remembers everything it does It keeps track of every change on an event or any update in the event Now, let’s talk about stateless and stateful First of all, what is a stateless? So as we talked about stateless means it does not remember anything it does and stateful Is it remembers everything it does which means if there is any change in the state, it keeps track of that particular thing or particular change or particular update because of an event now is stateless It calculates the state internal state of components And what is the stateful it is the core or heart of react.js you can say which stores the information about the components tattle memory the stateless components They never change State but stateful components as I talked about that they can change the state because there will be initial State and there will be a final state so they can change the state’s the stateless components They contains no knowledge of the past So for example, if there was initial state which you have set using this dot State and you want to change or update that state using this dot set state but stateless components, they don’t contain any knowledge of the past events only the current and possible future State changes can be tracked and stateless components when we talk about stateful They have knowledge of the past current and possible future State changes values

So that’s why they are called stateful because they keep track of the previous state also stateless components You can say they provide referential transparency that is for small inputs It will produce the same output So if you give different different input small small input same inputs, you can get the same output in stateful component it receives information from the Toothless components if State changes required So these are some of the basic differences between a stateless and a stateful component Now, this is just again a summary for this stateless and stateful react.js components So as we talked about what is a stateless so all function based components can be considered as stateless react.js component, but here we are talking about that when we are talking about state in detail will talk about State and will see many examples So we will talk about only class based components and not the function based components So that’s why we are saying over here that function based components can be considered as stateless react.js components So is stateless react.js component So which means they are pure JavaScript functions, so we don’t need to have state over there in a stateless react.js components, but as per the future Trend and the latest Technologies, we are using stateful react.js components which keep track of your previous state your current state and probable the all the Our state’s so all class-based components can be considered as a stateful react.js components and stateful reacts J components inherits from a particular class called real dot component So estate also getting inherited from parent to the child So this was the brief about the state and what are the different types of component based on the state list component and the stateful component in react.js before going to the demo I will talk about something called sex tape So as we are saying that there are stateful react.js components, what does it mean? So you have to set your initial State and then you will set the final state So that is the you can say current state and the future state so there is a method called set State now, what does it do so you can set the initial state by using this dot state, but if you want to set this future state or you want to update the state you have to use a method called this dot set State Now set State method it merges the news It with the old state So for example, you are new state value is one and the previous state value was 0 or may be false and true The latest value will become the combination of the new state with a Old State So all the previous state will remain unless it is overwritten So if you are not overriding or overwriting the previous state it will remain in the memory So for example, consider a state object with properties A and B having values, for example 1 into so a is equal to 1 and B is equal to 2 respectively now calling side state what will happen so calling side state with the property be equal to 3 and c equal to 4 So it will produce a new object where be will become 3 and C is equal to 4, but the previous value of B was to so that is how the property of a remains unchanged the property be in This case is overwritten by the new state and in this object of the State Property seized newly added So in addition to changing the The component set State please Remember set State method is very important is also causes the component to be rendered eventually and for performance reason you can say set State calls a batch method and there is no guarantee that the state can change immediately So by this we mean that there is a method called set state by which we can set the final state of any react.js component a class component Now, let’s move to some demo that how we can implement this kind of functionality So, let’s see this So this is your index dot HTML a simple HTML file where I am calling a script called like button dot JS by using the script tag and in this like button dot JS script I am using the class component and the concept of state So this is my first example or you can suppose they know a very simple one to let you understand that how we can work with react.js State feature or you can say aspect because react things of a component as a Eight machine and you can use this dot state to hold the component state So let’s write this code What I want to do is that in react on the trailer I am calling a component Let’s say called app now I will go to app dot JS where I would be writing this component So this is a function components I don’t want any function component anymore I’m just commenting it and I have commented this and I’m also coming think this now what I’m going to do is that I am going to write a component with the name like say app how I will write it I will write class app It will extends

from a parent class called react dot component And Elders React component You have to specify a Constructor which will have the parameter s props And in this Constructor, you have to call Super Which will return again the props to the class instance and then you have to set the initial State This is very important that how you can set the initial state by using this dot State This is the initial state which I am sitting over here And this dot State and setting is let’s say for example light is my property and initial value is false and then you have event for example this Dot and double-click Is equal to M binding this event to the class is taught and we’ll click dot bind to this That’s it So we are set the initial State and what you have done is that we have bind event handler to this particular class Now We already know that every class component will have a render method So we will implement the render method over here Now in this render method, what I’m going to do is that I will have a return statement So before that I am just writing at a variable called where text where I am checking the state So this dot state DOT lie, I will check this using a ternary operator If it is true, then it will show me like else it will show me that I have not liked it That’s it I just created a variable and then I will have a return statement Now what I’m going to write in this return statement, I am just writing a simple jsx over here Very simple Jsx I’m going to write a P tag And just passing this text as an attribute in the parentheses I’m just writing Academy text Now What we are going to do is that we have method handled click which we are going to Define now So handle click paste on an event And in this event what I’m saying is that I am going to set the state now So in this particular example, what we have seen is that I have created a class component which extends from react component It should have this dot State reason being I am setting the initial state it has on click event you can say which is binded to this particular class Then there will be a render method which is required in this render method They will be a return statement and in this return statement I am checking the on click so on click event I’m checking over here and what I will call I will call this dot my event name What is my event name handle click now, although the click of the let’s say P tag what I want to call I want to call this handle click So in this handle click, what I’m going to do is that I’m going to set the state because my initial state is like the equal to false now I want to set the final State now final state is set by as I mentioned this dot sex tape Now let’s define the property over here What was our property the property name is light And what I want to Define is this dot state DOT like value, that’s it So what’s going to happen is that I have mentioned the not so it will automatically become true because initial value like value is false So this completes my code over here Let me repeat Once again I am using the create react App application in this create react App application We can change maybe the component name also So this component name needs to be called an index dot JS just save it So what we are doing over here is that in the reactant not render and calling a component This component is defined in your app dot Js Now in this app dot J’s What I’m doing is that this is the like button now like button is a class-based component You can see here that it is defined as class Now Let’s define this export default like button And this is used over here in index dot J’s like button, correct Now what will happen that you have set the initial State using distraught State equal to light falls and in the handle click whenever that P tag on click event will be called this handle click even will be called which will set the final state of this particular P tag So what we are saying is that my initial state is false and whenever a button or any control will be clipped I am changing it to true So I am changing the state of that particular control Now, let’s see the output of this particular application

What I’m going to do is that I’m opening it in the browser Now you can see that this is a static text and when I’m clicking this particular button like it is saying me the message that you like this just like we wrote over here you like this so it is showing me the message that you like this so that is how you can set the initial State and final state of Any react component now just to repeat once again that what we are saying is that for setting the initial State you have to use this dot State and for setting the final State you have to use this dot set State method just as you can see on the screen Okay Now we are talking about State here Let me tell you that state is similar to props but only thing is that it is mutable and fully controlled by the component because what is happening that right now we are storing our all the data in an array in a variable for example, but that is a good way to start with react.js but later on if you want some more operations or more frequent flow of data and react.js you can think of a state so you can think of a state as any data that should be saved and modified without necessarily being added to a database so you can say state is a place from where the data comes from and we should always try to make our state as simple as possible and minimize the number of State four components So for example, if we have let’s say ten components that need data from the state So we should create one container component that will keep the state for all of them We should not create ten components We should create one component as a parent component and then the other could be the child components Okay Now, let’s see more examples based on the estate So What I’m going to do is I will create more State examples or estate demos to show you the concept of state and detail I’m going to create a class component so class app which extends from react dot component I am using a create react app data project Facebook project You can say and in the rear domed render I have to call this app component So let’s call first this in index dot J’s this particular component app And then in AB dot JS, what I’m going to do is that I’m going to create a class component with the name app So first thing first first, we have to create a Constructor which is passing the props and then in Constructor what you are going to do We are going to set the super keyword This is the first and most important thing to do in the Constructor And then what you are going to do in the Constructor as I mentioned that the best place to set your initial state in react.js is the Constructor Okay, so I’m going to write this Dot State and setting the initial State over here Please Remember that if you have to set the initial State you have to do it with is dot state in this what state you can Define n number of properties any properties you want you can Define in this so let’s define over here For example, two properties one property I have let’s say for example later This is just a property I can write a text for it Let’s say header from State any text you can write this is just setting the initial State and then I have one more property Let’s say for example content This is my second property in my initial State and any text I can write which I can write as content from state So what I have done is that I have set the initial state with the two properties header and content this we are creating a class component now every class component you already know It should Implement a method which is called render and every render statement should have a return statement So I am saying render and then I’m saying return in this return What I’m going to do is that I am going to Define my some custom you can say j6 So let’s define in return So for example, I have a div I want to write a div in this day I have H1 tag in this H1 tag I redefined my one property called header And then again, I have a h2 tag where I will Define another property called content So let’s save this file now how you set the state now, even you can set the state in jsx So just like this if you want to set the state in jsx, you have to place this curly braces and what will be the state you want to become so it should become this dot state DOT value is better because header is a property which we have already defined and here I want to say this dot state For example content in the previous example, you might remember that I used this dot props dot attribute name similarly in state also by using the state we can use for setting the value

or showing the value passing the value to the component by using this dot state So here I had two properties header and content so I can use it like this dot state DOT header and this dot state DOT content So let us see the output of this particular example for this example, what we can do is that here I am defining a div and in this step What I am doing is that I am doing class component or you can say creating a class component And in this what we have done in index dot JS that index dot JS I have called this component This is my component, which is a class based component Please remember that while using the state always you have to create a class component Just like we use props in this dot props dot attribute name the same way You can use State just like this dot state DOT, you’re attributing in this case Your attribute name was header and continue Now, let’s move to another example where we can see that how you can use State and props in one single example It’s not always the case that you have to use only state It’s not necessary You can use a state and props together also, so we will create this example only or we can extend this example only So what we are going to do is that I have a return statement over here We are I am writing let’s say two more sub components What I’m going to do is that in this day I have a day over here I am going to Define two more subcomponents So my parent component will be app and then I have two sub components For example, it’s a header and the content So instead of this H1 tag and h2 tag, which I have created What we can do but I’m saying is that when you create a parent component, so parent component will remain the same that is app I can have some child components also bear I can pass the attributes or the values as props, which will Define that you can use props and you can use at the same time state in one example, so let’s do that So what I’m going to do is that I’m going to create two sub you can say components So let’s say one name is head of this is my one of the component and this is the prop value the attribute which I can pass like this Dot State DOT header and then I can close this component And another component I can create is let’s say component things will be content and I have a prop I can pass it as a prop and then I can write here this dot state DOT content What is the change we have done over here? What we have done is that we have created a class component that will be the parent component in the trender method in the return statement It has to child components So we have to Define these child components now So what we are going to do is Becky are going to Define these two components now, so let’s define these So what I am going to write is that I am going to write class My component subcomponent name is header again, it will be a class component So it is going to extends from react dot component And the same component I have to create for content So this content component needs to be defined So I have two sub components Now one sub component is the header which is having the proper value as this dot state DOT header and another Propel you as distraught state DOT content So let’s define this every component should Implement a method called render in render there needs to be a return statement Now in this return statement just like we Define H1 tag I’m going to Define this in a day we have so I will say it Dave and then I will say h 1 now in this H1 What I want to pass is although the value is coming from a state but the value which I want to pass over here is in the form of a prop So what I want is that I will say this dot drops dot the header props What is the name of the prop? Its header header problem? Similarly, what we are going to do is that in the content component again, we will have a render method And then there will be a return statement In this return statement what I want is that I want to define a h2 tag, let’s take it in a container that container is let’s it if I want to take it in a container And in this H2, I want to pass the props So what is the name of the probe attribute that is content prop So what I will say this dot props dot content Pro

Okay So what we have done over here is that in the previous example, if you remember that what we did was that we didn’t Define two sub components Okay, so in place of this, let me copy this somewhere and then can show you So in place of this earlier what we did we didn’t Define the two sub components What we defined was a container which was a div and in this div, we had one H1 tag in this H1 tag, what we were defining you are directly using the estate value how we were using state DOT header and then in h2 tag What we were doing we were using The content value so we were saying this dot state DOT content Now, let’s see the output of this particular example first what we have implemented without using the props So let’s save this file and let’s go to the browser So now what it is saying that header from State and content from State I have already done the npm start command for this create react application So you can see the output in localhost on the port 3000 header from State and content from State why this output is coming because the header value is header from State and content values content from State This was the direct way without using the props How we are use the props by using the subcomponent concept? So let’s implement this subcomponent Yeah Now what we are doing is that we have defined two sub components, which is header and content These are the two sub components plus base components and we have passed the value as props Now you can see this dot state DOT header header value will come and let’s say we can write some updated value new header from State and new container from state for example, and you can see the value over here new header from State and new container from State This is the output basically what we have done here is that I have showed you both the ways of using the estate in react.js, which means that you can use it without props and you can use it with props also, so there are you can say two ways of using state in react.js, but I will prefer I will recommend that you can use state with props and if whenever required or Never you can see apply the props Just go with it It’s not always necessary that you have to implement every time only with the state You can very well use props and stay together in the same application Now just a few tips of using state in react.js just a couple of tips from my side that do not modify the state directly don’t even try to modify the state directly You always use the set State method and the only place where you can assign this dot state is the Constructor These are the two main things So what I am saying over here is that if you have to specify this dot state where you can specify this dot State you can specify this dot state in the Constructor only This is the first you can say right way to use the state Now What is the other thing that State updates may be asynchronous in nature? So react May batch multiple set State calls into a single update for performance because this dot props as we use here this dot State and here we Distraught props So those drops and distraught state may be updated sometimes asynchronously so you should not rely on their value for calculating the next team So if you want to set the value of the next state don’t rely on the value of this dot props or is taut string and the third thing which I want to tell you about state is that State updates are merged then you call set state So what happens is that react merges the object you provide into the current state So these are some of the tips you can say from my sight for using State and react chairs So let’s come back to this PPT and let’s talk about another aspect of react.js which is life cycle Now, what is life cycle in reactions or what is the use of adding lifecycle methods to a class component in react.js react provides various methods which notifies when certain stage of life cycle of birds called life cycle methods So there are many methods in react.js which notifies when any stage of life cycle occurs Now, what are the different phases of that life cycle? So it start with initial phase then it comes to updating phase and then props change phase and finally the unmounting phase where you can free out some of the resources So what we are saying is that there are four phases in which you can Define the life cycle of a particular react.js application So what happens is

that it’s very important in the application with many components Let’s say there are 10 components in a react.js application It becomes very important to free up the resources taken by the components when they are destroyed So for example, a component is destroyed so it becomes very crucial very important to free up the resources which are taken by that component because once it is destroyed so the resources which has it consumed should get free so that Freddy can declare some special methods over the component itself or you can say we can declare some special methods on the component class to run some code when a component mounts or when a component – now so these methods are basically called the life cycle methods Let me Give an example component did Mount this is a lifecycle method example, it runs after the component output has been rendered to the Dom So let’s talk about these different different life cycle methods in detail now, so the first phase in the life cycle of any react.js application is the initial phase now, what are the different methods available out here because in this phase component is about to make its way towards the Dom it has not yet reached the Dome It was just creating its way or about to make its way to the Dome space You can see consists of the following methods which are involved in a predefined order So the first method is get default props get the initial It component will Mount render method we talked about and the component Edna And as I mentioned that component did mounted method runs after the component output has been rendered to the term so different methods, they have their different you can see usage in any life cycle of a react.js application Now if I talk about the second phase that is you can say the updating phase when it phase comes into picture So once the component is added to the Dom because in the previous phase that was the initial phase So we what we said that we talked about that the component is making its way or it’s on its way towards the Dom but now since it had reached the Dom it is added to the Dom they can update and re-render only when a state change occurs So basically in the updating phase once the component is added to the Dome they can update and re-render only when a state change occurs So this phase consists of the methods for example should component update component will update render and Component 8 update So please remember render is a common method in almost all the phases or life cycle of react.js application So we have talked about here the initial phase we have talked about the updating phase So please remember that neither parent nor the child components can know if a certain component is stateful or stateless and they should not care whether it is defined as a function or a class But the most important thing is that when we are dealing with State our components should be of a class type It should not be of a function type So that is why you can say state is often called as local or encapsulated So it is not accessible to any component other than the one that owns insects it a component may choose to pass as straight down as props to its child components just now we saw the example of the state and props now, let’s talk about the third phase that is props change phase So we talked about the initial phase We talked about the updating phase Now what happens that after the component? Been rendered into the Dome So in the initial phase what it was doing it was making its way towards the dome in the initial phase in the updating figured it was doing that It has been rendered on the Dome the component has been rendered on the down Now the third phase is props change phase after the component has been rendered into the Dome The only other time the component will update apart from the state change is its props value changes So, please remember that through estate we can change the value or through props Also, we can change the value just like we saw that this dot props dot attribute name, for example, this dot props taught name just like that We can say that this dot state DOT attribute value just like we saw in the previous example So what we are saying over here is that this dot drops dot attribute name can change can make the changes in the component and to start State can also make the changes in the component Now, what are the various methods which get invoked in this particular phase? In a predefined order component will receive props should component update component will update and component data update of course render is a common method in every phase of the lifecycle of a react application last phase in the life cycle of a react application is the unmounting phase This is the last phase of the component life cycle in which the component is destroyed and removed from the Dome This is called unmounting So we were talking about the mounting and unmounting mounting means

when the component is added to the Dome and unmounting means when the component is removed completely from the Dome and this weighs only consist of one method no render method over here the only method which is there in the unmounting phase of react.js application is component will unmount No, let’s see how the life cycle goes in a react.js application So we talked about the initial phase We talked about the updating phase We talked about the props change phase and then we talked about the unmounting phase So these are some of the methods which are mentioned over here So it started with the initial phase where we had the method called get default props Then get initial state will be called component will Mount will be called and then render will be called and then component it amount will be called as I mentioned that all these methods always called are called in a predefined order So please remember that if you write a method, let’s say for example, get default props and component will Mount so you should understand that in which order it will be called So first of all get default props will be called and then component will Mount will be called now, you can see on the screen that once this initial phase is done what we have the other phase that the props can change the state phase and then we have the update phase We are different methods Would be called So what are the different methods that component will receive prop should component update component will update render and component data update So these are the different methods in the update phase Now if I talk about the last phase which is the unmounting phase so what happens that the ad Dom dot unmount we call the component will unmount method for the unmounting phase for completely removing the component from the Dom that is the last phase or there is one method which is called over there, which is the component will unmount Once the component is completely unmounted or destroyed from the dorm again, the life cycle start from react dom-jot render And again, the get default props methods is called so that is how this complete life cycle again goes on and on now This is the description of these lifecycle methods which we talked about So so we talked about component will Mount component it Mountain so on So what happens with component will mount it that it is fired once before Initial rendering offers and it is a very good place to wire up your message listeners Please remember that this dot set state does not work here the other method in the life cycle is component did Mount it is again only fire once in any react.js application after initial rendering occurs It can use this dot get Dom node So what is happening over here is that component will Mount will always be called before the rendering occurs and component did Mount is fired after the initial rendering of birds So there is you can see various my new difference between component will Mount and component did Mount will means uncertainty So it is going to render or the initial rendering has started but it has not been yet rendered on the term and component did Mount means it has rendered on the browser or on the term It will be fired Once the initial rendering on the Dome Pockets The third method is component will update it is fired after the Updates are made to the town You can use this dot gag Dom node for updates over here The other method is component did update now what happens with this method is that it involved immediately after the component updates are flushed to the Dom So any change any update is there in the component? It gets flushed to the dog, then you can call component dead update and this method is not called for the initial rendering Please remember this is very important that for initial rendering of the react.js component component did update method is not used you can use this as an opportunity to operate on the Dom when the component has been updated So for example, it has been updated using the props or using the state then only you can use component adaptive component will unmount We already talked about this that this is a single method which is called in the unmounting phase of the lifecycle of a react.js application It is fired immediately before a component is unmounted from the Dom and it’s a very good place to remove message list So you can see General cleanup or Garbage Collection kind of activities you can do in component unmount method Another is component will receive props It is fired when a component is receiving the new props you might want to use this dot set State depending on the props just like we saw that we can use both props and state in a single application The other is that should component update now, this is pretty interesting that this is fired before rendering when new props are stata received It will return false if you know an update is not needed so you can check on any of the component based on the state and the props that if any update is required or not and accordingly,

you can return false and true based on this method which is should component update Now This is very much interesting Constructor We talked about the instructor that whenever we are using the class component in react.js you have to use the Constructor you have to pass the props and then you have to use a super keyword This Constructor in props that if you don’t initialize the state and you don’t bind the methods, you don’t need to implement a Constructor for your react component and ultimately we already talked about this will be converted into function based company But here we are talking about state So our focus is for class components Please remember if you are not finding anything in your component If you are not using any state, then you don’t need a Constructor in your class The Constructor for a react component is called before it is mounted when implementing the Constructor for a react component subclass You should call the super keyword before any other statement because if you will not call the super what will happen that this dot props will become undefined in the Constructor which can lead to errors or exceptions of bugs in your application So that is why it is said that the super keyword should be called before any statement in your react JS application So first you have to call the Constructor and then you have to call the super keyword So that this dot props should not become undefined So what we are saying is that typically in react as B3 a component you can say Constructors are only used for two purposes specifically it is used for you can say initializing the local state or you can say initializing the initial state by assigning an object to this dot State and then what we are saying is that for binding the various events or binding the event handler methods to an instance of the class You need the Constructor will remember these are the two basic purpose of using Constructor So if you want to set the initial state that will be done in the Constructor If you want to you can say bind even handle methods of the class instance that will be done in the Constructor of the class Now, this is just you can say pictorial representation of the different phases Now if I talk about the life cycle of any react application it revolves around the three important phases mounting updating and unmounting So what we are saying that first you add the component to the Dom you do some changes or updates and then finally you and mount it So what are the different methods which are shown on the screen? You can see that what are the different methods? We generally use while mounting updating and unmounting So in the mounting we place the Constructor we can call the method called component it Mount and then when it comes to updating phase we can use three different types of methods new props for get derived state from props or should component update we can use this dot set State and we can use this dot force update and a different methods which we can use in the up dating phases component did update and finally in the unmounting phase There is only one method which we can use which is component will unknown So this is just a representation You can say summarized way of representation of the life cycle of a react component So we talked about till here jsx We talked about components props States Life cycle now another important aspect you can say very important fundamental of react.js is events So what are events events are the you can say triggered reactions to specific actions So for example, we can have on click event We can have Mouse click we can have mouse-over key, press all these are called events in reactions So for example, there is an action So some action happened on the react component and then we have a react application which is called event Now some event has happened on the react component and it becomes a reaction So that is the definition of events Now first we talk about that how the concept of even work in other you eyes as compared to react.js and then we will talk about the Tau events work in reactives Let’s say I have a control let’s say three controls on many controls button type of control Now what happens that in other you eyes on every control you have to implement an event listener and Corresponding event handler this is very much required which decreases the performance of the application on the town because what is happening over here is that for different controls? Just like shown over here that you have a different controls different buttons or maybe another controls You have to implement the event listener on every control and when an event listener is implemented a corresponding event handler will be required So that is how the different UI is or other you is work when it comes to events Now, let’s talk about events in react how react manages events in react So what happens is that if you have different controls and you will have only one event listener and one event handler attached to it

So which increases ultimately the performance of react.js application, please remember that react events are named using camel casing rather than lower case So you have to Define events, or you can handle the events with camel case only The GSX you can pass a function and the event handler rather than a string So we will see that in the demo So before moving to refs now, the other fundamental of react.js, let’s see some of the demo of handling events in react.js So for that I am going to show you example, we have talked about State we have talked about props and jsx and all that stuff So this is just you can say playground which I generally used to work with react.js which is coat and tie Oh, so in this particular example, what I have done is that I am using a conditional rendering based on my click or you can say based on my event So we’ll start from react dom-jot render So this is the reactant render, which is calling a parent component, which is log in control Now if I go to login control, which is a component now in the login controlled, it is a class-based component, which is extending from react component Now every class component if it is binding something or setting the state, it should have a Constructor It should have a super keyword so that this dot prop should not become undefined now here you can see that I have defined two event handlers for binding in the Constructor of the class one is handle login click and handle log out click and binding it over there and setting the initial state that is logged in is false So initial state is is logged in is false that the user is not logged in as of now that is why you can see that it is saying in the output at please sign up and showing in the button of login What is happening in handle login? Click and handle log out click will see later first We will see the render render method implementation in the render method I have declared a constant is logged in equal to this dot state DOT is locked it now, what will be the value in this because it is initially set to true you can see here initially set to it is false and then in the events, what I’m doing is I’m setting it true or false So first of all, it will take the initial value I am taking a leg button and if is logged in if it is true, then this button will be called where I’m calling a component called logout button and if it is false, then I’m calling another component which is again login button If it is true then log out button if it is false It is login button Now you see over here on click this is called event in react years on click is a event this event listener is bounded to event handler So this is binded to an event handler which is The log out click and this is on click event is binded to event handler which is called handle login click So we’ll see what is happening in handle login click and handle log out Click in handle login click We are setting the state and we are setting it to true and in the handle log out again The user will be logged out So we are saying that is logged in is false So let’s see the implementation So what is happening that if I click on login? It is showing me the message Welcome back You can see on the screen So function user greeting is called welcome back And when I’m clicking on the button again log out it is saying me please sign in you can see over here Please sign up So what is happening? Is that in the log in button and log out button So I have to function components login button and log out button So what I am doing is that I am again calling the event that is on click equal to prop Stoughton click and in the greeting method What I am checking is that if it is logged in then it will return another component user creating which is again a function component and then if it is logged out, then it will suggest creating again, which is a function component So that is how you can use events in react.js Now, let’s see another example of using events in react.js So what you can do is that you have to start from react Dom daughter end up in the react download render what we are doing that we are calling component which is toggle So this will be My parent component now in this toggle What I am doing is that I am writing the Constructor that is very much required for a class component because I am setting the state then there is a super keyword in the distraught State I am defining a property is locked down through so is toggle on is toggle on property is always true and I’m binding event this dot handle click So this dot handle click dot bind to this particular class And in this handle click event What I’m doing is because I have used a button on the button I am calling in even now what is the event

on click on click event? What I’m doing this dot handle click and in this what I’m saying is there’s this dot state but is toggle on what will be the text of the button So when I will click if it is true it will be on if it is false The text will be off So let’s see the output if I click on this button text becomes off by again Click on it the text becomes on So this is just a text of the particular button, which we are changing based on the state So this dot state DOT struggle on so what we have done is that we have set the initial State First of all initial state is true So whenever it will be true distraught state DOT a standalone whenever it will be through the text shown is on a once I click on it Now the distraught state DOT test of alone becomes false and whenever it becomes false, the text is shown is of so that is how we can work with the basic all the fundamentals We can apply in one application It’s not like that in react.js that you have to come up with only jsx base application or component base application It’s not like that all the react fundamentals which we talked about over here should be used every time in combination then only you can learn react.js in detail So what I’m saying is that you can apply jsx components props State and then life The methods and some kind of events for example on click events just be so all these things you can combine in one react application So let’s see more examples of events So what I’m doing here is let me remove everything from here Okay, so let’s create a parent component app for a very simple example of the events So what I am writing over here is that class app extends? We are taught component have to define a Constructor The Constructor I have to Define props I have to use the super keyword so that this dot props does not become undefined So what I want to do is that I want to set the initial state with this dot State and then I want to use I can use here this dot update State also update state will be my Handler And I can Define the update state So what I’m doing, is that this Dot Update State DOT bind and I want to bind this to this particular class Let’s remove all this Okay, so let me copy this particular toggle example from here do what I want to do is So in this particular index dot J’s, let me Define this toggle So what we have done is that we have defined the same component toggle over here And in this struggle, what we have done is that we have implemented a Constructor as I told you Okay, and then in the Constructor what we have done that we have binded at the event and initial value of the toggle is true And then the final value on the click of the you can say button I am setting the state as this dot set state where I am changing The value called is toggle on from True to false Now Let’s talk about child events What is the concept of child even in react.js So when we need to update the state of the parent component from its child, so generally what we have learned till here is that you can update the child even from the Perry, but there could be some situations when you need to update the state of the parent component from below that is from the child so we can create an event handler For example, it’s a update state in the parent component and you can pass it as a prop The child component where we can just call it So let’s do that So what I’m going to do is let’s index dot J’s Go back to index dot JS and let’s define a component with the name called app And in the app dot JS What I am going to do is that I am going to define a class component with the name app, which extends from react component So this is my class component, which I have defined now in this I have to define the Constructor But the props and in this Constructor, I have to define the super keyword So that just drops should become undefined Now in this super we have to let’s say defined, for example, I have to Define initial state So what I’m going to do is that I’m going to say this dot state is equal to So I have to define a property property could be lets say data

and I have to Define some data over here Let’s say I see it to initial data This is my initial data So my Constructor is done Now I can write here Let’s say for example and of class, this is just my end of Constructor So that you can understand well Now, let’s bind the method to this Constructor You want to bind method you have to bind it inside the Constructor, please remember so let’s say I want to call update State This is just a method name You can use any one of your choice any name This dot update State how you bind it you bind it using the keyword find and this so by this statement what you say because you have to Define this inside the Constructor by this you are finding a method which is called update State and we are defining now the update State This is a method We are defining and in this update State what we can do we can set the state now what state you have to set your going to set the value of let’s say data because that is the property of the fine And let’s see what we want to do Is that data for example updated from the child component something like that could be of any text No problem at all So this is the end of the update statement phid now you have to implement always render method Now once you have implemented a render method, it should have a return statement So we are using a return statement over here So this is my end of render Method and this is let’s say and of return statement, okay Now in this return what I want to do is that let’s say create a container So my container is tip and in this particular thing What I want to do is I want to define a subcomponent because in this particular demo what I am going to show you that how you can update the state of the parent component from a child component So I need to have a child component over here So I’m going to define a child component which is let’s say name is content and I am just taking a prop value over here with attribute my data prop and I’m saying value of the initial value of the estate is distraught State My attribute name is data And then what I’m seeing is another prop I am using is update This is the another prop you can use multiple crops multiple attributes and I am saying is this dot update state? So what I have done is that I want to update the state of the parent component My parent component in this case is app and I want to update the state from a child component, which is the content So this class Is over here and then I want to define a subcomponent a child component because we have not defined it yet So I will write class content my component name child component name is content So I have to Define over here So I’m saying class content exchange react component And what I am going to Define here is implement the render method in this render method I will have how to turn statement that’s it Now in this return statement what I want is let’s say I have a container but then again and for example, let’s say I want to add a button and button will have let’s say on click event and on the on click event I want to call the props So what is the props attribute? I want to call this dot top start the update State prop update State prop I want to call this button is closed and let’s say the name of the button is as of now Give it click now one more HTML tag Let’s add one more HTML tag to use the another prop attribute and that is this Dot Props dot my data from that ‘s it Let me tell you that what we have done in this that in react.js when we need to update the state of the parent component from the child component So here you can see on the screen that I have created here two components one is the parent component which is the app component and another is the child company Now, what happens is that what you can do is that you can update the state of a parent component from its child Generally what happens in a general scenario that a parent component updates the state of a child component,

but in this particular example what I’m going to show you that how you can update the state of a parent component from a child company So what I have done is that I have created event handler update state in the parent component You can see that this particular event handler This is created in the parent component But it is passed as a prop to the child component You can see over here This particular event handler is passed as a prop to the child component So let’s see the output of this I am saving this and just clicking and when I clicked it the pattern was there in my child component you can see the state has been changed and it is saying that the data has been updated from the child component You can see over here which means that the event handler which we created in the parent component can be passed as a prop So one good learning from this particular example, we can get that the event handler which you are creating can also be passed as a prop and that prop can be used in another sub component or Child Company Now another thing which I want to tell you that how you can prevent component from rendering for example, there could be cases where you don’t want to render a component or you don’t want to hide a component all You got a rare cases, but in rare cases, you might want to component to hide itself, even though it was rendered by some other component So for that what we do generally is that we return null instead of its rendered output That is the only trick by which we can prevent a component to render on the dorm that you can return null instead of its rendered output Now, what we will do is that we can see the component events that how events are created in components So this I have already shown you the let’s go back to the slide now and let’s talk about some other fundamentals so refs now we will talk about reps What is a ref in react.js So resistance for references, you can say ref provide a way to access Dom nodes or react elements created in the render method This is the definition of reps So what I’m saying, is that resistance for references And they are used to return the references to a particular element or you can say component returned by the render So if I have a react element having a render method, I have to place some reference in my component So by using the ref’ keyword, I can place a reference to that particular component in react.js So what happens that in the typical react dataflow props are the only way that parent component interact with their children So what we have seen is that in react.js probably if you want to pass the data or you want to flow the data from parent to the child props are the only way Good morning, fire child you re render it with new props However, there are few cases where you need to you can say imperatively modify a child outside of the typical data flow So the child to be modified could be an instance of the react component or it could be a Dom element So for both these cases react provides an escape hatch you can see and which are called Rex Now the important thing is that when to use refs, so there are particular cases you can say few good use cases for using reps Those are you can manage the focus You can manage the text selection or you want to apply a media playback there You can apply the rest you can apply the Rifts in application We are you triggering imperative animations or you are integrating with third-party down libraries Probably there you can use very well reps So important thing is that avoid using Reps for anything that can be done Declaratively now how you create the Reps reps are created using react dot create ref method and they are attached to a react element via the ref attribute So ref is a attribute reps are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component to this is very much important about reactor app Now if I show you that how you can use the refs So let me go back to the same example now refuse to return a reference to the element this we have already know now, what are the reactor ads although I will recommend that rep should be avoided in most of the cases However, they can be useful when we need Dome measurements or to add methods to the components So we will see now that how you can use reps in this example I’m going to show you that how you can use reps to clear the input field Okay So let’s remove everything We have a Constructor props just start state Let’s remove this method

Let’s remove this render mode this class Okay, so we are using the same app component What we are going to do is that we have a Constructor with the props keyword and the super keyword with props We have the initial State called the start State having let’s say for example some blank data in this case and then you have distraught update State equal to this dot update state DOT Pine and let’s have one more you can say Handler event handler which says this dot clear input equal to this dot clear input dot by this This Constructor is closed over here, which we save this file And then I am going to Define this update State update State event handler we have to Define So I’m writing here update State let pass argument to it And then I’m setting the state as so this dot set State What is the value of the property value of the property? I have to Define over here Okay, the value of the property is data And in this data, what I’m doing is data value should be e dot Target dot value So we have defined the update State also that whatever value will be the input will become the set State value Now, we have to Define another method that another method is clear input So let’s copy and paste over here I have to define the clear input method now in this what I am saying is this dot again I have to set the state So I’m sitting the state same value I have to use and that is data So I am making it again Plank and after that I am finding the Dom so how you can find the doorman react.js is react Dom Dot You have a method or you can say function called find Dom node So I want to find the term node And how can I find the Dom node? I can find it using ref So what I’m saying is this dot refs and just taking an input value That is my input text box, which I am going to Define in the render method What I will do that I will use the focus method for this This is my clear input function And finally we have the render method Implement for the class And in the center method you have to apply the return statement the return statement We are going to write some HTML or chase X So I’m creating first of all the container my container is stiff And taking input type value equal to this dot state DOT Theta so that would be the blank value initial value the start state DOT data I am taking an event over here on change So whenever there will be a change in the text box this method or this event will be called and in this I am calling this dot update State and I’m also defining the ref which is very important ref is which I have defined here my input So on my input the ref will work So this input is defined So this text box is defined and now I will have a button control We’re on click even needs to be defined So I am defining the on click event The name of the button is clear So one click what I want to do is that I want to call binded method which is this dot clear input and after that simply, I want to place a H4 tag in this H4 tag I will show the final State value by using this dot final value How can I show that this dot state DOT data? So this completes my explanation of the rafts where what we have done is that we have created a component called half in this particular component What we are doing is that we are setting the initial state with a blank value and I have called to event handlers you can say this dot update State and this dot clear input now in the update State I am setting the value what is taken as an input from the user in a you can set text box And then in the clear input, what I’m doing is that whenever this clear input will be called and setting again the value to be planned But in this case, what I am doing is that I am making a focus by using the graph on that particular Xbox controller You can say input control now in the return statement in the render method I have taken a text box or you can say input control which is have some value then there will be a button So let’s see the output of this particular application So if I write let’s say we pull and I click on clear you can see it has Completely cleared from here So that is how you can use ref in react.js Okay Now we’ll talk about example

or you can say a demo a project where the concept which we have studied till now our let me repeat one thing jsx We talked about components props State lifecycle events and wraps So out of this 8 important fundamentals of react.js We have already talked about the seven important aspects, but before moving to the last react.js fundamental that is keys that how you can use keys in react.js Let me walk you through a very good example, or you can say a small project So the project requirements starts with this particular you can say example So in this example, what you can see is that you have to implement a search functionality where users can search from this particular text box and What they are going to search it It will be visible on the screen with that search result or that search keyword Now, what should be the approach of yours to implement this kind of react JS application Now, what is the Step 1 my recommendation is that you break the UI into different components or you can say component hierarchy when I say component hierarchy What does it mean that you break the complete UI because we have Jesus is all about you I so you break the complete hierarchy into components component hierarchy, which means that there will be a parent component there could be child or sub components and there could be Sub sub components So first thing first, what you want to do that you will want to do is to draw boxes around every component So in this particular example, what I have done is that I have created different colored boxes around every component and subcomponent and I have given them some names also, but the Of them Is that how do you know what should be its own company? Okay So by coloring this particular example, we can see that there are five components in this very simple application It’s a very simple application where there could be five components So one component you can see this outer boundary of orange color So let’s say I call this as filterable product table which contains the entirety of the example now there is a search bar This could be my second component in the blue color the blue boundary you can see it receives the user input now there is a product table You can see the Green Boundary This is my third component This is called I’d say the product table which displays and filters the data collection based on user input Now another is product category row, you can see here the cyan color sporting goods and electronics This is my product category though, which displays a heading for the each category This is my Component and the final component is the product rule which is in the red color which displays a row for each product So now we have identified the components in this particular example Now if I want to arrange them into hierarchy because components that appear within the another component should appear as a child in this particular hierarchy So what should be my hierarchy the hierarchy to break this component The particular UI is at the top I will have a filterable product table Then there will be two subcomponents search bar and the product table and in the product table I have product category though and the product rule so that is how we can build any react.js application Now, let’s build a static version of this Envy art Okay by creating you can say or different different components So just want to add one thing that if you want to make your you are very much interactive you need to able to trigger In just your underlying data model and we are going to use it because this particular application can be made easy with the help of State What is our state? The search takes the user has entered this is the state and the value of this check box because I have added a checkbooks also over here So let’s create this particular example in react.js application So before creating this, I have a sample data you can say a mock data which can be used for this particular example So, let’s start creating this particular application in react.js So I’m just removing all this stuff from here Let’s create this example and see how it works by using in react.js Select can close this and I’m going to open a new instance So I’m going to open it in Visual Studio code or else what we can do is you can try this example over here Okay So what we are going to do is now

that we are going to see that search example in this particular demo So in this particular example, we talked about that We will divide the complete UI or complete example into five different components So let’s write those components in the create react App application So for that I have a dummy data in this dummy data, what I’m going to do is first I have to create a class component The outermost at is the orange one For example, it’s a filterable product with the name filterable product and I’m writing exchange react dot company So this will be by parent component out of the five components This will be my parent company So I’m just writing the concept of for this class remember all the initial state and binding of the methods needs to be done always in the Constructor only So once this is done, I am initializing or setting the initial state by using this dot State you can always use the start State and can apply the properties So what are the properties I want to use to property which I want to use is for example, it’s a filter text Initial value, let’s say blank and another property which I want to use is in stock only I want to check whether the products are there in the stock or not initial value Let’s say false Now, what are the different methods which I want to bind methods which I want to bind is for example, let’s say this dot handle filter takes change This is just a you can see name of the event I have to bind it to the class So I will say this dot handle filtered exchange dot into this And after that what I will say this dot handle another event handler I want to bind to this particular class Please remember all this needs to be done inside the Constructor only don’t want handle filtered exchange I want this time handle stock change and I want to bind it That’s it So we have defined a Constructor We have defined two or you can say we have minded to methods now It’s time to Define them So first one is handle filter to exchange and another is handle in stock change These are the two methods which we are going to Define now and after that once these are defined the final thing is that you have to implement a render method for this particular class So first set the final state in this so This Dot Set State and there will be this dot set state So in the handle filter to exchange, so whenever there will be an exchange I want to set the final state So handle filter to exchange I am going to pass text property and then I am going to set the state So with which value I will say that filter text Will be whatever be the value of the fittest Now the second method which I want to bind is enderlin stop change So I will have another property for it that is in stock only and in the distraught set state but I want to do is I want to set the final value of this particular property, which is in stock only so I will say in stock only the property will be whatever be passed to it That’s it So I am done with finding the events in the Constructor setting the initial State and setting the final state in the to event handlers Now The final thing is to implement the render method So in the render method, I will have return statement So let’s close this return And in this return What I’m going to do is that I’m going to Define first of all the container let’s say I’ve defined a container now the important thing in this container What I am going to do is as I mentioned that I have total five components in this particular search example, I have five components to be defined and this is the first component on which I am working So what will be the other sub components other sub components? Let’s say is the search bar and another component would be the product table so you can see on the image that there is a blue boundary for the search bar component and there is a Green Boundary for the product component So let’s create those or call those components So search bar and saying that filter text what will be my future text It will be this dot state DOT filter text No, I can Define more you can say Properties or the values

which are available in the initial State What are those values which are available in the initial State? I have let’s say in stock only I can Define the instruct only over here What I will say I will say this dot state. In stock only and then on filter text change What I can do is that I can called my hand Look What is my Handler My Handler is is dot handle filter to exchange and on on install change I can again call a Handler which is this dot handle Constructing change so that is how you can define a search bar component So this is one of the component which is defined or you can say the sub component which is defined over here The another component which I want to Define is product table So another component which I want to Define is product table now why product table if you see in this particular example, this green one is the product table component and the blue one is the search component So what we have done is let me repeat Once again that I have divided this complete application just complete project into five components So the first component is the first one that is filterable product table The second one is the search bar And another one is the product table So we are as of now just calling the product table components of component So let me Define some properties for it For example, let’s say products what will be my products so I will say this dot props, which I’m going to Define this dot props dot products So to Define much note values for it one is products So another let’s say I want to Define What is the filter text in this case protects will be against him This will be this dot state DOT filter text and then I want to Define one more property for this component that is in stock only what will be the value of this in stock only the value of this instability will be distraught state DOT in stock only so that is how we have defined our another sub component which is product evening Now as you can see how we are modularizing this particular code So first of all, we are calling this filter product table in this filter product table This is the main component We are calling to sub components which is search bar and the product table So this is the main component and let’s define the main calling that is Tom render and this in this reactant daughter in the what we are going to say you’re going to say that we are calling the parent component What is the name of my parent component? It’s filterable product table I’m going to call it and I am going to call it on a prop What is my prop now prop is the values the Json data, which I have already defined my crop value will be equal to products So I will say react dom-jot render properly products equal to products So just have to close this first And in fact, I can close it with closing tag, and then I will say document dot get element by ID the ID which I have to Define where I want to render my output That’s it So we have called the parent component by using react out in the here We are passing the props as products, which is my sample Json data This is the sample Json data the category of the product the name of the product and what is its price So filterable product table is the first component which we have created which is our base component or you can say parent component Now the other components which we are going to create is the search bar, which is the sub component and the product table component So let’s start creating those components as well So what we are going to say is class name of the component is search bar So the name of the component is search bar which extends from the app dot component But this is my another component and one more component, which I will have which is again a sub components you can see which we have created is a product table so we can just write here class product table extends from we are taught component So you can see we have also created these two sub components which is the search bar and the product table now, let’s focus on the search bar that how we are going to implement the search bar component So in the search bar component the same thing we are going to first write the Constructor and in this Constructor

I’m going to define the props Once this is done I’m going to call the super keyword which will have again props This we have done now multiple times and if you want to bind some events over here in the search bar, then you can bind it over here itself So what I am saying, let’s say I want to bind couple of events over here So I will say handle filter text change handle filter to exchange So let’s say this Dot and the filter text change dot bind to this and I want to have one more event handler which is handle in stock I want to check whether their it’s in stock or not So I will say this dot handle in stock dot bind and this that is how I have defined the Constructor Once I Define the Constructor, I have to write a definition of these events, which I have written So first of all handle filter to exchange this is the handle filter text chain, and another one is I want to have handle in stock change So, let’s write handle install change Now in the handle filter texting what I want is this dot because I have the props so on treat exchange I want to pass the value which is written by the user in the text box So e dot Target dot value This is the value which is written by the user in the search and in the handle in stock change what I will say that this dot drops dot on in stock change What I’m going to write is that he dot Target that we will check that checkbox is checked or not Now once this is done we will implement the render method for this particular component So I will say render and then I will have a return statement which will allow me to write the jsx for this particular class So let’s say I use a form element of HTML and then I want to implement a textbox kind of functionality So for implementing this Xbox kind of functionality I am using input input type type will be equal to text Please holder placeholder for this input Let’s equal to search just a custom text You can see now what will be the value This is something very important that what value we want So this dot props What is the text which user has written? They start filter takes and what I want as an event I want an event on change whenever the value will change what I want to call So I want to call this dot handle it at exchange That’s it So my input is defined I want to Let’s Take A P tag, for example in this P tag What I’m going to do is again, I am to take input type Now this time it will be of type checkbox’ because in this example, you see I have a requirement of implementing a text box and then I want to implement a checkbox Okay, so I will say that this is of type checkbox checked I will check whether it is checked or not So I will say check Equal to this dot drops dot in stock only whether it is in stock or not and on change there will be a change event on change I want to call this taught until in stock change So that’s it And once this is done, I want to let’s say for example, give some space and I want to write some text that only show products in stock Just after the check box just like in this example in this particular example, you can see in the requirement that I want to show some static text that only show products in the stop So I have written only show products in the stock So that is how it completes the search bar component So we have written the two components as of now and now I am going to write the product table component Now this component is again, very important because in this component we are going to Define two, Subcomponents mode so this is our third component, which I’m going to write and after that in this particular component am going to call to small small sub components So let me Define those components very quickly what will happen you will understand what we are doing So what I am doing is that I will Define a very small components, for example, it’s a product category throat So I will say product category row exchange from react dot component This will be my one sub component for this product table component and another would be class product rule This will be again component extends

from react dot component That’s it So we have to Define these three components and our example or just complete project thgs application will be over So what I’m going to do is first I will Define this product table So the render method which is an implementation of the class And in this render method, what I’m going to do is that I will say Define some constants So what is the filter text Twitter text is this dot props dot protects and I’m going to define the stock value within stock only which will be this dot props dot stop only once this is done I am going to Define an array of the rows So area of the rows for example, every defined with cons Rose equal to an array have defined an array and let’s say one Define Last category so that I have the Tau many categories are there Let’s define it in a lot of now Now what I am saying that this sort props dot products because products and passing it as a prop and it is can say Json array so I can apply for each over here what I’m saying for each because on array you can apply the for each So in this case, I’m applying the for each and I’m on which quantity I want to apply the foreach I want to apply on a variable Let’s say for example product and want to apply a 0 function That’s it And I will write some conditions over here that index of filter takes whether it’s in stock or not And so on I will write some of the values over here I will create a structure And before that What I can do is that I can Define this product category rule So let’s define this product category though So I’m saying render now in this render method and defining a constant that is category is equal to this dot drops dot category and there will be a return statement for this now in this return statement and just using a TR structure for example in this TR am defining a header with a th and let’s say some call span by can give some calls pain Yes I can define a constant And what I’m saying is that in this th that is the table head I want to define the category so you can see here that this category is defined as a sporting goods or Electronics So I want to Define n as header that kind of functionality I want to implement So this product category we have already defined where we are displaying the category Now comes the product rule now in this product Row what we are going to Define So in this product robot, all I want is that I want the product may be the product name whether the products talked are not at the same time I want to price the product price So what I will say that I want the product name, I want the product price Okay, so let me do this and let me show you the example now So we have defined the product category and product row now You can see over here the product table we were writing the product table where product or name dot index of it at x equal to minus We are just comparing whether it is in the stock or not If it is there in the stop we are pushing it to the rosary so you can see here different different rows So we are pushing the values in the rules and then we are declaring to subcomponents product category though and product rule in which we have defined the category which will be the category header And then we have defined the product through individual where we are saying that we are using the product name and then we are also displaying the product price as you can see in this example that you have to define the product name and you have to define the product price Okay So this completes our demo of using this search example, let me save this and open it on the screen Okay and p.m. Start is this is running So just a minute They have doj’s I have nothing the index dot here is the search example and in the react dom-jot render I’m calling this route within is in place It should show up now refresh it Okay Now it is showing up So this is the output of this particular example, we have implemented the five components as shown in this particular example So let’s check the output Now Let’s say if I want to search for football it is giving me the result for football only correct And now if I want to remove this football from the search component that is showing me all the results

or you can say all the products with their prices if I check this checkbox, which is only show products in stock and the products which are in red are not in stock So it will hide those products which are not in stock for me And if I uncheck this checkbox, it is showing me all the products whether they are in stock or not So this is you can say a demo which I have shown you of the complete React J’s fundamentals where You’ll have used state where we have used props here created the components five components We have created So for example, let’s search Nexus 7, which is in another category It is giving me the result of Nexus 7 along with the product name and the product price So that is how we can create a very beautiful applications in react.js by decomposing the complete UI into different different components This is the beauty of react.js you can say Okay So now we will finally talk about the final react.js fundamental that is keys So what our keys in react.js so let’s talk about the keys now So if I talk about Keys, these are the elements you can say which helps react to identify the components uniquely So for example, if I have ordered list where I have some allies I have an unordered list UL where I have some of the Allies so I can Define These on them so that those react elements can be identified very much uniquely So basically I can say that these are the elements which helps react to identify the components uniquely So on the screen, you can see that I have to react Elements which is having to render methods, but they are uniquely identified by different different keys So for one of them I am using the key as 1014 another I am using the key as 102 so you can say that these are the basically things which helps us to identify the components uniquely Now, you can see here that if any of the key is changed again, I can check which key has been changed So Keys again, I will repeat that These are the elements only which are applied on react elements specifically and they help react to identify the components uniquely Okay, so we’ll see the example of peace now that how we can use keys in Applications this is an example where I have used the concept of keys just to let you understand at how we can use the keys in react.js and how they help us to uniquely identify the components in react.js So in this particular example, you can see that there is an array I have created constant numbers number array with five values 12345 starting from the index 0 obviously because it’s an array now the egg dom-jot render This is the first method which is called in this a component is called which is the number list So number list is a component and then there are props which is used called numbers and these numbers will have this array values and then document dot get element by ID Now Let’s talk about this number list component Now This is a function based component so function number list Now, as you can see over here that I don’t need any state I don’t need any Constructor That’s why I have no event which is getting behind That’s why I know Constructor No super keyword is used So in the function component that is number list is props is passed So numbers is props dot numbers because this numbers will be taken in the props Now list items numbers dot map again map is a very important you can say function when it comes to array or to iterate on the array values Please remember you can use the map function This is a predefined function in jQuery and JavaScript used for arrays where you can I trade through the different value of the arrays so numbers dot map number is just a key You can say now list item Now list item is again a subcomponent here I am using the key which is number dot tostring So I will have the key as one two, three four or five and value equal to number now in the function list item What I want to return is I want to return a list of allies having the props dot value So whatever will be the The number that will be shown as a lie, but all these will be identified uniquely So if I go to inspect element and just showing you that how you can see here So this is a ul and this is the LI structure which you can see over here So all these allies structure is defined or you can say identified uniquely with this key value So what will be the key value in this case that key value will be 1 2 3 4 or 5 Okay So that is how we can Define the key on the component or in fact, you can also Define the keys directly on you can say the HTML tag for example a lie

So one more example if we will see for the keys the same example, which I have shown but in this case, this is a very important thing to understand that when you are returning you are returning a ul and then you are returning the list items from the list item company This is very important to understand over here that how you are returning this ul and Ally structure in the output The right hand side you can see the output the important thing is that we have created here to functional components to function components are one is the number list, which is the main component called from react Tom to render And in this number list I am calling another sub child or sub component which is again a function component called function list item So function list item and passing the props I’m returning the Allies structure from here and I am also returning a URL structure from where the list items will be shown So what are the list item will be shown whatever the number which are there in my array, which is 1 2 3 4 & 5 So all these numbers will be shown on the screen as 12345 So let’s come back to the PPT again So we talked about he’s so basically we have talked about all the react.js fundamentals I will just again repeat very quickly for you that what all fundamentals we have talked about We talked about jsx components Props State lifecycle events reps and finally we talked about keys So these are all the basic fundamentals of react.js and we have seen very good demos based on these topics one last example, or you can say final demo based on these Concepts and specifically on lifecycle methods which I want to show you I’m going to show you that and then we’ll start with the advanced concept of react.js that is flux and Redux So I will talk about what is flux and what is reduxid detail But before that let me show you a very good example where we will be using the life cycle methods and I will show you how we can use a life cycle methods while working with react.js So again, I have came back to the same example Okay So what I’m doing here is I’m just commenting this particular code so that there is no confusion Let’s check the output It should show us nothing now Okay, that’s great It’s blank We have not written anything We have commented the complete code Okay, great So let’s write a fresh code now So what I’m going to do is that I’m going to show you a clock example, which will completely show you the date and time but here I’m going to use the life cycle methods which I’ve shown you in the different phases So one of those methods I’m going to use is component a to mount and component will Mount Okay So let’s get started I am creating a component So I’m writing class clock exchange from Dr. Dot component just like we are hunting every time but before completing this class component, I want to write which is going to render on the browser or on the Dom So the egg dom-jot render what I want to show and I want to show this clock component So component should be always in the curly braces and then I have document dot get element by ID where I want to render the output So this is done So we are sure that the first component of the parent component which will be called is the clock component That’s why I have written the react on top trender in the first place So first thing first, so since this is a class component, I need to have a Constructor and then in the Constructor I want to find the super keyword so that this dot props does not become undefined and then if I want to set the initial state, so I have to set it in the Constructor itself So I am seeing this strategy This is my initial state which I am setting so I am saying what is the date so I’m saying it let’s say nougat So I’ve defined the Constructor now outside the Constructor but I am going to do is that I’m going to define a method called it’s a tank which is going to work the ticker Nothing else So in this state I’m going to set the state So I will say this dot set State and what I am going to set the same state of the same property date with the new date So I’ve set the state now in the take method we will call the tick method later And now I am going to Define two lifecycle methods First of them is component did Mount so intelligence is helping me over here component dead Mount and next I want to call is component will unmount So again intellisense I can use the intentions

Great So in the component did Mount what we are going to do is that we will Define a property Let’s say this dot for example timer ID equal to I’m going to define a predefined method called set interval in this set interval What I want to set is I want to Define Arrow function and that Arrow function is let’s say this dot tape And I have to define the range for second travel now in component will unmount since I have to unmount the component I have to destroy the component from the Dom I will write clearinterval again a predefined one and in this I am going to pass this dot time already So that is how we can Define the life cycle methods now once these lifecycle methods have been defined What I’m going to do is default method which needs to be implemented as a part of the class is render in this render I will implement this return statement Okay Now in this return statement, what I am going to write is that let’s say let’s have a container So Dave is my container I will write some H1 statement Example, let’s say a to Rica React.js full course by the pull chain and then in a ch2 h2 tag another tag I want to take in the h2 tag What I will write that it is maybe with the time probably I want to say this dot state DOT date Maybe I want to convert it probably to local time string So I can convert it to local and string and I can place Also here So you can see the output that it is showing the output a to the kuryak Jays full course by the pull chain It is 11:29 and 59 p.m So that is how you can use the life cycle methods in react.js application and we have set the interval with one second So that’s why every time you can say the second value are getting changed So I will again repeat this that what I have done in this what I have done in this is that I have set the clock component in the clock component This is my parent component And since this is the parent component what I have done is that I have set initial State and in the tick method I have set the final State now in the component did Mount and component will Mount methods there are two methods which I’ve defined component will unmount and component dead mom in these two methods I have set the interval that every second it should show me the time interval What is the current time interval and in the render method in the return statement? Have placed this H1 and H2 tags So now let’s come to the another concept which is flux What is flux in react.js So let’s talk about something called flux now so till here let me repeat once again that we have completed all the eight react.js fundamentals which includes j6 crops component State and so on we have also talked about some lifecycle methods how to use refs how to use keys in the axis Now, what is flux now the question which will be coming in your mind is that what is flux? So flux is a pattern for managing the data flow in your application as simple as that So what I can say is that there are data patterns through which you can manage the data flow in your application fluxes one of them So the most important concept of react.js or you can say in data flow that in react.js the data flow is unidirectional by that what I mean is the data flow only in One Direction, so that is the you Floods before Deep dive into this flux I want to show you one website from where you can study if you want to go deep dive into flux This is a Facebook site Facebook dot GitHub dot IO / flux This is a very good side to learn flux starting from the basics to the advanced part So I will recommend that you go through this site Facebook dot kitab dot IO / flux This is our official side from the Facebook on the GitHub Okay So again coming to the PPT So we talked about flux flux is a pattern for managing data flows in your application And the most important concept is that data flows only in One Direction Now, what are the different parts or what are the different components in flux? So flux has basically four main components one is the dispatcher another is restored another is action and the view so we will see this in detail But before that this diagram is very important This is a representation of a data flow in any react.js application It is starts from View you can see the view over here Now what view is doing that view sends action to the dispatcher now dispatcher can have a number of actions

and number of actions can work on a single dispatcher Now the dispatcher’s sends actions to every store So what happens that one’s actions are given to the dispatcher from the view now dispatcher sends these actions to the store and then against or sends data to the view so you can see that this is a unidirectional flow of data in react.js, which is starts from view through actions It goes to dispatcher and from dispatcher it again goes to store and from store the output again goes to view and that is how it works in a unidirectional fashion Now, we will talk about all these different components of a flux dataflow one by one now What is dispatcher now as you can see in this diagram that dispatcher is getting acted upon by the actions so View, Sending action to the dispatcher So dispatcher receives action and dispatches them to stores that have registered with the dispatcher Now every store will receive an action there should be only one Singleton dispatcher in each application This is very important that in any react Jays application There should be only one Singleton dispatcher Let me explain you through an example So for example user types in a title for a to do and hit Center, so we are talking about a to-do application over here implemented in flux and readers for example, now what happens is that user types and title for to do and then press enter what happens next The View captures this event and dispatches and add to do action containing the title of the to do so in the title You must have written some to do that I have to do is this task this task and this task that becomes the title of the to do so what happens Is that the view which is there in your unidirectional data Flo it captures this event and dispatches a to do action or any kind of action containing the title of the 2D and then when it dispatches any action it is received by store So every store will then receive this action, please remember I am saying here every store and this will come out as a basic difference between the flux and Redux So when we will talk about Redux, then we will see that Redux always have a single Stone but in case of flux flux can have many stores so that is why it is written on the screen that every store will then receive this action So there could be multiple store in a flux base application Now, what is the store we are talking about store and store So what is the store all about systole is the place what it holds the data of an application This is the most important thing of any Redux base application in react.js store will register Then application dispatcher So store is getting the dispatched action from the dispatcher as an input or you can say the action is received as an input Now the data is stored must only be mutated by responding to an action there should not be any public sectors on a store only get us so action store is getting an action via a dispatcher and then store decides what actions they want to respond to every time I store data changes It must emit a change even so is stored and do some processing and then it decide that which actions needs to be responded to and every time a store data changes It must emit a change event here could be your there should be many stores in any application when it comes to flux But when we will study Redux, please remember there is only a single source of Truth in Redux application So there should be only one store when it comes to Redux And then we can see the same example, which we were talking about the to-do application So store receives a to do action via dispatcher Now it decided it is relevant and adds the to do to the list of things that needs to be done today and then the store updated stata and then emits a change even now what our actions in any flux application We are talking about actions actions are given to store by a dispatcher dispatcher dispatch has the action to the store now what our actions so basically action defines the internal API of your application what action needs to be taken they captured the way in which anything might interact with your application They are the simple objects that have our type field and some data but when it comes to action, it’s very important to understand that action should be semantic and descriptive when it is taking place They should not describe the implementation detail of that action So I will say that use delete user rather than breaking it up into delete you That ID clear user data and so on So remember that all the store will receive the action and they can know that they need to clear the data refresh potential by handling the same delete user action

So instead of longing the names of the action, you can be very precise while giving any action to the store now, this is just a action example So when a user clicks, let’s say delete on a completed to do a single delete to action is dispatched because in a to-do application some of the tasks could be completed and some are pending So when you click or when any user clicks the delete on a completed to do a single delete to action is dispatched to the store now what our views so we talked about dispatcher we talked about store we talked about actions Now the last thing which you want to talk about is the flux in the flux is views So this is the last component you can say of any flux data flow data from the store is displayed in views So views are the Which is displayed on or render on the browser on the Dom views can use whatever framework you want In most example, we are using the react so when a view uses data from a store, it must also subscribe to change events from that store So if you remember the diagram, which I showed you from view via action, it goes to dispatcher from dispatcher It goes to store and from store it again goes to view so when a view uses the data from a store because in a store something has been updated something has been modified So when I view uses the data from a store, it must also subscribe to change events from that store This is very important and then when the store em, it’s a change the view can get the new data and re-render it because it has become the updated data now or the process data, so that’s why we are calling that now from the store when the data will flow It will be the new data in which is going to be rendered For component ever uses the store and does not subscribe to it Then there is likely a double bug waiting to be firm actions are typically dispatch from views as the user interacts with the parts of the application interface So, please remember whenever there is a user interaction on The View So some actions will go to dispatcher which are dispatched to a store and there will be some processing happening some State changes happening in the store, which is again moved to the view and the views will have then the new data which they can re render on the browser Okay, so now we will talk about what is Redux in react.js because we have already talked about that What is the flux and what are its basic concepts? So let’s talk about Redux now so why we have to use Redux with react.js as we know that reactives only a view part in MVC model kind of application So to control the data flow we use Redux as a data flow architecture So the left hand side you can see that there is a application having multiple components which we talked about and if we want to flow the data in this particular application, we want Redux This is the basic use of Redux You can see now in react we already know that the data flow through the components and always remember that it follows uni directional flow of data that is data always flows from the parent component to the child component Now why we need Redux, so basically to understand what read access You must first understand that what is the state we have already talked about State and we also know that the child components cannot pass the data to its parent component in react.js So opposite flow from bottom to top It’s not possible the non-parent components can’t communicate with each other react does not recommend direct component to component communication this way So if you want to connect from this component to this component or this component from this component, so this component to component approach or this component to component communication It does not allowed in react.js and it is not even recommended to use this kind of approach So basically Britax offers a solution of storing all your application state in one place called a stone So here we are talking about two terms two important terms one is State and one is another one is a store So if I talk about State again very quickly, so a stateful react component is a job Script ESX class which we already know and every stateful react component carries its own state So if we have multiple components than every component holds or carries its own state in a react component the state holds up data and component might render such data to the user Now What is Riddick’s is doing over here Redux holds of the state within a single location and that single location is called a store now components that dispatch the state changes to the store not directly to the components This is very important because as I mentioned

that Redux holds of the state within a single location, which is called store and then components then dispatch the state changes to the store not directly to the components also with Redux the logic for fetching and managing the state It lives outside the reactor now the basic question, is that should I Was Redux or not? So using Redux or Lux for Estate Management is totally up to you Now when components dispatch the state changes to the store and not to the components now it is responsibility of the store to subscribe to that particular data because you see here from the store the components need to be aware of the state changes so that they can subscribe to the store Now What is the basic definition of a Redux? So from the Redux website now, what is this Redux website? Let me walk you through the official Redux website This is official readers Redux website read x dot Js Dot-org from where you can learn about the Redux in detail This is a very good website, which every developers follows to learn the Redux, please remember Redux has no relation direct relation with react It has no direct relation with react you can write Apps with react with angular with Amber with jQuery or even with vanilla JavaScript, but here we will see that how we can use Redux with react.js So that said Redux Works, especially well with libraries like react because it let you describe UI as a function of the state and Redux emits State updates in response to actions and react bindings for separate presentational components from other container components So we will see what is the definition of Redux So on the official website, it is written that Redux is a predictable State container for JavaScript apps now here we have three important terms What is predictable? What is the state and what is container? So let me repeat the definition of rhetoric from the official website Redux is a predictable State container for JavaScript apps Now what is predictable predictable means State changes follow the three principles now, we will talk About what are those three principles? And then there is another term called State the applications data What is the state over here? The applications data including the data related to the UI itself Now the third important term here is container so read X is the container which applies action to the pure reducer functions to return a new state Finally Redux has been designed for JavaScript applications So I will say that what is Redux Redux is a predictable State container for JavaScript apps now how it is different from flux earlier We talked about flux that what is flux what are its different components now, we have to see that how it is different from flux So when Redux influx, they share similar Concepts and principles still there are some differences between flux and Redux so flux differentiates between the dispatcher and store the reason being flux supports multiple stores Read X limits the application to one store, which means there is only a single source of Truth and which means the store and dispatcher can be combined into one dispatcher store and this dispatcher is stories created by Redux create stored function So there is a predefined function in Redux, which is create store function and it creates this dispatcher store kind of functionality in Redux So in short what is a Redux it is the hottest Library as of now for front-end development It is mostly used for application where Estate Management is required It is used in JavaScript application where we need State Management read X is a predictable State container We already talked about that It is also return on its official website that Redux is a predictable State container for JavaScript applications And finally just for the information that Redux it is developed by diagonal entry you in 2015, but let me tell you that it is the hottest Library as of Now for front-end developers out there, it can be used with any framework beat react angular Ember jQuery or even with vanilla JavaScript now Redux principles, very very important that we have to understand What are these redox principles So there are three Redux principles, which I’m going to talk about first is the single store as we saw that there is a comparison direct difference between flux and Redux flux allow multiple stores, but Redux allow only single store state is read-only This is again one of the principal for using Redux and change using pure functions only

So in redox changes are made using pure functions only So the first one let’s talk about the first one single Stone So with only react unidirectional data flow, we know that the data flow in One Direction only in react.js so direct communication between the components is not allowed So what happens generally is that Redux uses a concept called Dollar for storing the application State at one place If other components want to talk to that store for their State Management, then they have to subscribe to that store then only they receive the updates from the store itself So in the diagram you can see over here that this is a tree showing multiple components The state is managed in a single source of truth That is the store The store is single entity over here All the components state is restored in the store and they receive the updates from the store itself Now the second principle of Redux is state is read-only So we talked about what is the first principle of Readers first principle of Redux is that it has a single source of Truth it always follows the pattern of flux only but all the data flows through a redox system is in unidirectional Banner all changes to the state comes from actions, which are applied to the state and all actions are then we’ll to into Redux All part of the system can ever receive data from two sources This is very very important here because we are talking about the first principle of Freedom Redux in react.js Then there will always be a single store It cannot have multiple stores and all the components have to receive the updates or the changes from that particular store only now the second principle of Redux, the second principle of Redux is that state is read-only which means that you can change the state only by triggering an action So without triggering an action the state cannot be changed so you can change the state only by triggering an action which is an object describing what happened So some action needs to happen So in this particular example, you can see there is about there is no action on it Now triggering action has happened on it and now you can change the state because you can change the state only by triggering an action on a component which is an object describing what has been happened So we talked about single Of Truth we talked about that the state needs to be read only so we are saying that a state can never be mutated new states are produced by applying an action to the current state from which a new state object is produced and many of the times it is the recommended practice that immutable programming techniques needs to be utilized while working with Redux So basically here we talked about the single store we talked about state is read-only so in single, so let me repeat quickly Once again that the state of your application is stored in an object tree within a single store And this makes it easy to create Universal apps as the state from your server can be serialized and hydrated into the client with no extra coding effort So there will be always a single state tree which makes it easier to debug or inspect an application It also enables you to purchase your apps estate in development for a faster development cycle So we already talked about single source of Truth We talk them out state is Only the second principle of Redux where we talked about that The only way to change the state is to emit an action which ensures that neither The View nor the network callbacks You can say will ever write directly to the state instead They express an intent to transform the state And finally we are talking about the third principle of Redux that is change using pure function Solely The changes are made with pure functions only So to specify how the state tree is transformed by action fee right reducers, or you can say pure function So pure functions are called reducers and they are used to indicate how the state has been transformed by the action So reducers are just pure functions that takes the previous state and an action so you can say the combination of this action and the combination of the previous state This is the reducers they take this previous stated in action and the return the next state by using a pure function This pure function is called a reduced Over here Please remember to return new state object instead of mutating the previous state you can start with a single reducer and maybe as your app grows You can split it off into smaller smaller actions or smaller reducers that will manage the specific part of the state tree So what we are saying here is that because reducers are just functions so you can say pure functions you can control the order in which they are called you can pass the additional data or even you can make reusable reducers for common tasks such as pagination So with respect to reducers this function

or the reducers the function produces no side effects and many pure functions can be composed together to process different parts of your state tree Now, what are the basic components of Redux? So there are four components of Redux first is action producer store and view So let’s talk about them First one is action So plain JavaScript objects Chirpy loads of information for the store This is the action So there is an application actually happens on it And this action is sent to the store producers We already talked about at the reducers are the pure functions which specify how the application State changes in response to an action So for example, if this is a reducer the previous state and the action it is given to the reducer and it generates a new state But please remember the things which you should never do inside a reducer you can see these are the don’ts for using a reducer you should never mutate its arguments never try to mutate the state perform side effects, like API calls and routing Transitions and do not do in a reducer You cannot call a non pure functions like data dot now or math dot random in a reducer now the third read X component is stored store is an It which brings all the components to work together It calculates the state changes and then notifies the root reducer about it So there is a state tree where changes are happening from the application It is moved to the store and then it calculates this store calculates the state changes and then notifies the root reducer about it So what are the various responsibilities of a store the most important one that it is holding the application state it allow access to a state via get State method very important to understand it registered the listeners wire subscribe So if the components have to subscribe to the store, they have to go via the Subscribe way now the allowing the states to be updated via dispatch that is an action for dispatch always dispatches an action to the store and then some processing happens in the store and a new update or you can say updated state is rendered The View stores also handles the unregistering of listeners via the function return by subscribe Now, what is view the last Redux component we are talking about what is a view so view helps in displaying the data which is provided by the stew So we talked about that from view via action the data will flow to a dispatcher the dispatcher will dispatch an action to the store now from store the new or updated state or updated data will be rendered on the Dom using the view So basically view helps in displaying the data provided by the store now how the data flow in Redux components Redux architecture is concentrated on a strict unidirectional flow of data, which means that in react.js or read X components or Redux fundamentals the data should flow in One Direction only ten in all the application the data follows the same life cycle pattern making the Of your app more predictable and easier to understand and it also encourages data normalization to ensure the consistency of the data Now, we will see that how the data Flows In Redux component So you can see that actions These are the reducers which are working on the store from store They have been given to the particular component Some changes are rear ended when the store changes and these are the some of the container you can say smart container so dumb containers to which the data is passed or you can see new data is passed Now we will talk about create router So this is the last topic of this particular vigs full course video series and then we will see some of the example related to Redux Now, what is the react router so you can say react router again? It’s a library So you have to first install it using npm install react – router once it is restored a library gets added to your node underscore modules folder So react router is a powerful routing Library built on top of react framework It helps in editing You can say new screens and flows to the application very quickly So for example in your application, there are multiple Pages or multiple hyperlinks, you have to add new screens So react router Library allows you to do that the most important thing you can see the third point over here that it keeps the URL in sync with data that is being displayed on the webpage So here we are talking about single page Additions or developing single page applications with react.js because routing means

that it helps to route from one screen to another screen and the flows through the application very quickly and also keeps the URL in sync with data that is being displayed on a particular webpage So what are the router advantages in react.js The first one is that it easily understand the application views So if you have different different views in your application, it’s very easily understand that it can restore any state and view with simple URLs There will be no complex URLs and it will allow you to create friendly URLs It handles nested views and resolutions State can be restored by the user by moving backward and forward So in any application where there are multiple web pages, you have to move back and forth You have to maybe move backward and forward so State needs to be restored on different pages so router Allows you that a state can be restored by the user by moving forward and backward Then it maintains a standardized structure and behavior because as I mentioned that here using routing Library, we are talking about true routing Library We are talking about creating single page applications And finally, what is the advantage of a router that while navigating it it can do implicit CSS transitions, which means that the CSS remains seamless on your complete application whether there are multiple web pages or a single web page So let’s go to the Redux demo We will see Redux demo So this is the official website of Redux Now, I am going to show you to do application which is developed using react Redux and Redux Library So we know that Redux bindings for you can say react bindings for Redux separate the presentation components from the container components This is very very important to understand that what are the presentational components and what our container components when we work with react bindings for detox So what is the use of or what is the you can say advantage of this approach this approach of dividing or separating the presentation components with a container components It will make your app easier to understand and allow you to more easily reuse the components So what is the difference basically between the presentational components and the container components? We will see in this particular example So in this particular example, I am using you can say the Redux library because you can see here the create stored method, which is calling the always taking the parameter as root reducer So, please remember it Any deducts application there needs to be a root reducer and once you have the route reducer always the store will talk to root reducer only So if I talk about purpose of presentational and container components the purposes that presentational tells me that how the things look maybe about the mark-up HTML or about the style and container components means how the things work beyond the actual business logic lies, which means data fetching State Management or you can say State updates are the presentational components aware of Redux I will say no and container components Obviously Yes So presentation components they always you can say read the data from props and container components They will subscribe to redact state So in this particular example, if I talk about the presentational components, so if I go to the solution structure I have here a to do list dot J’s Now in this to-do list This is you can say to-do list created for a list showing the visible two dudes So when I will write something over here, I can see the visible to do which means all toodles I can see the active ones and I can see the completed one So for example, if I write here edu Rekha training and I press add to do So this is added to my to do list if I say Ripple react.js classes, and I press enter then again this to do has been added to this to-do list So to-do list here basically is working as a presentational component or you can say presentational layer Then I have another you can say reducers defined over here for example to do to lose dot J’s So this to do dot JS is returning me just an array of to do items with the properties ID text and completed so These are you can say we are talking about the presentational components only So another thing is that if I have a footer component over here so footer dot JS it this is photo component is where we let the user to currently see the visible to tooth so you can see here that when I entered at Eureka training and people react.js classes

This is my footer component where we can let the user to change the currently visible to room Now if I talk about app dot JS now, what is this app dot JS this app dot JS is basically calling at to do visible to do list and footer components It is calling the three components so you can say this is the root component that renders everything else So whatever is getting rendered as a output on the screen is because of this app door Chase So basically I can say that these are all the presentational components They describe the look and feel but don’t they don’t know from where the data comes from or how to change the state How to change the data they basically presentation components they basically render what is given to them So if you migrate from readers to something else then you will be able to keep all these components exactly the same they have no dependency on the read X Now Let’s talk about designing the container components So why we need the container components, so we need container components to connect the presentational components to Redux So for example, there is a presentational to-do list component I showed you this to-do list This is a presentational you can say component now, it needs a container like visible to do list So I have a container which is a container component for example visible to do list So it is showing me all the visible or you can say, oh it is showing me the visibility of all the tools which is there on the screen So basically The presentational To Do List component It needs a container like visible to the list that subscribe to the Redux store and once we substitute Scribe once we subscribe to the you can say Redux store and knows how to apply the current visibility filter to change the visibility filter We can have a filter link component or you can say filter link container component that renders the link that dispatches and appropriate you can say action implemented on click action over here So it dispatches and appropriate action on click So if I talk about this visible to do list or Jace if you see in this particular example and just defining the multiple cases, so in this particular visible to do list what Jays I am filtering the to do is according to the current visibility filter and renders our to-do list in filter link dot J’s I am getting the current visibility filter and renders a link So how about designing the other component? So we talked about let’s say presentational components and then we talked about let’s say container components now Everything you that how you can design the other components as well So here in this I have had to do dot JS contain them because sometimes it’s very hard to tell if some components should be a presentational component or a container company, for example, maybe sometimes form and functions are really coupled together such as in the case of maybe this particular small example So add to do this act to do is again a component It’s an input field you can say this is just an input field with a add button technically speaking I can split it probably into two components, but it might be too early at this stage It’s fine to mix presentation and logic in a component that is very small because this is just a text box and just a you can say button so you can see over here that I have taken the input type which is of a type text and then a button of type submit’ having the text at to so it sometimes happens that you don’t have to differentiate the presentational and Component Sometimes you can combine the two logic into one single component just like this now we will see the functionality that lets say this is complete and if I click on active pump em active to those it is showing me that active one completed It is showing me the completed one And if I click on all it is showing me all the tools over here So let’s say if I write react routers and click on add to do now I have three to do sin my list, which is showing me the all of all list if I show want to see the active I can see the active ones if I want to see my complete to those I can click on the completed one Now, let’s talk about one more example that how we can use the Redux concept of actions reducers and store with react.js So this is just another example having the same architecture of the solution We are in I have some components which is counted or JS and Inspector Jai specification dot J’s Then there are some producers defined here index dot JSP I want to increment and decrement functionality I want to implement and then I want to increment that if this number is odd and there is some amazing functionality which has been implemented over here So let me show you the output So if I click on this one,

so this shows increment by 1 because I’m returning the state +1 every time and when I click on this minus sign, which is decrementing so I am deducting it always from one from always from the state So when I click plus it is incrementing and when I click on the minus button, it is decremented Now, you see here I have implemented two more functionalities one is increment if it is odd if this number is particularly odd, I can click on this and increment now it is not incrementing because this number has become even at the same time We can also Implement a sink callbacks or a singing asynchronously I know functionalities in Redux with react.js if I click on this increment a sink it will take some fraction of seconds to increment you can see for L become the five now So that’s all about Redux So let’s go back to the PPT and this is the final slide demo So I will show you a demo very quickly of how you can create a calculator kind of application in react.js So in this application, we already know that we have to call react dom-jot render and app will be my route components So let’s go to after JS in this app dot JS you can see that I have make the simple code very very simple The reason being that it’s a very good practice while working with react.js or any application to divide your code into multiple components I could have written it on a single file on a single component That’s not a problem at all But for code modularity, it’s always free Ingrid and I also recommend that divide your code into multiple components So as you can see here app is my parent component Then I have two sub components one is info about app So in the components folder on the left hand side, you can see I have a components folder in components folder I have to subcomponents calculated or JS and info about AB dot J’s So first component or you can see sub component within the app tree is info about app and another sub component is calculator But once please remember that once the output will be rendered on the screen It will be rendered in a specified order in which the components are written or maybe the components are called So for example, first component, which will be called will be info about app So let’s talk about info about a first in this info about app I have written just a static text and anchor tag I’m showing you a calculator application which is built Using react.js so info about tab its class info about app extends component It’s a render method which is implemented for this class and a return statement simple J6 or HTML I have written in for about app Now What is the other component which is called after that the other component which is called after that is calculator Now, what is happening in this calculator? This is something very important because the complete business logic is returned in this calculator subcomponent So let’s go to the calculator subcomponent Now as you can see that in the calculator subcomponent I have implemented the complete logic Now this calculator subcomponent will start from class calculator extends component It will start from here Now in this what it is doing is that since it’s a es6 is standard or you can say class component It will add the Constructor in the super and here we are initializing the state with some of the properties So what all properties are mentioned over here display value operator waiting for operating first operand and clear all and some with default values Once this is done I can bind a handle click event or you can see event handler It should be done in the Constructor So this is very well done in the Constructor itself Now there are some methods which are defined over here for example process digit process operators All these methods or functions are doing some kind of operations mathematical operations on the numbers because here we are talking about a demo of a calculator application now the most important thing which I want to show you is this handle clicks This is binded in the Constructor in this handle Click What I am doing is that I am calling a function distraught process Nuki eat or targeted value either targeted value is the value which is entered which will be entered by the user on the calculator application Now the render method in the render method you can see that again in the calculator subcomponent a Sub sub component is called which is called calculator display now calculator displays another component button the render method you can see the complete HTML is written to show you the field so you can see the controls on the calculator a complete you can say complete HTML is returned and on that on click events are binded So if I go to this calculator display component

because that is a subcomponent of the calculator component This is a function component which has been created calculated display, which is props is passed over here and some kind of calculations normal mathematical operational This has been done So let’s run this particular code So we already know that to run any react.js application what you have to do that you have to write npm start I have pressed enter and now what will happen that it will open on the local host on you can say it default port number For example, 3000 all the create react App application They run on 3000 port number and let’s see what will be the output great So this is the output which is shown which is calculator kind of functionality developed using react.js now, we will see that how we have divided our application So I will go to app dot JS in this app dot J’s The first component was info about app Now in this info about a port was written that it’s the calculator built with reaction here So you can see in the output that it is written calculator built with react.js some you can say static text So this complete thing the top thing defines the info about app company as simple That if I talk about this particular component in react.js, this has been particularly developed using calculated or JS component why I am saying you this the reason being that please remember that always you have to divide your UI into different different components in react.js This is the basic fundamental of any react.js application and the same has been applied over here that the upper one was a static text or maybe any other functionality So this is divided into one of the component and the other functionality which is a calculate kind of functionality has been implemented using another component which is calculated chairs Now, if I do some basic operations in this calculator, you can see that it is giving me the correct output So these are basically some of the on click events So if I go to the code and go to calculated or Jays in the render method you can see that in the render method There are some button value 1 2 3 4 5 6 7 8 I so one two, three, four, five six seven eight nine These values are defined over here, which are you can see the digit Keys Then you have the operator Keys What are the operators is? These are your operator Keys the for operator Keys has been defined along with the equal to so this particular component is again rendered using this HTML, but for every control over there on the calculator screen on click event is defined This is very very important and every time whenever this control or keys will be clicked on the calculator to handle click handle click function You should handle click event which is binded to the Constructor initially just will be called every time so if I go to the screen if I want to let’s say perform or operations may be 7 minus 4 n equals It’s three great So that is how you can Implement small small applications in react.js Even you can Implement very big applications will be accessed using the advanced concepts Create that is flux Redux routing and so on so very quickly Let me show you one more example the same calculator example, I want to show you but the UI is totally different and based on different component methodology So let me close this and I’m opening another demo Okay, so let’s open This is in Visual Studio code And before explaining this particular code piece, this is another kind of you can say calculated functionality which has been developed I want to show you the output of this particular application So for that but I’m going to do is that I’m going to say npm start Okay Okay So it’s in another folder So now I will say npm start Now this is the large demo of this particular reaction occurs at Eureka series Now what I want to show you here is that in the previous example, we saw a calculator application in this is just another application which is implementing the same functionality a calculator kind of functionality, but there is a lot many difference in the UI So you see this this is again a calculator which is built on top of react.js like it is another libraries have been used over here and the same functionality Let’s say, for example, I want to do 5 into 5

It is giving me the output same operational output now if I go to the code and we’ll start with index dot JS the root component is obviously it’s app now if I go to the component and go to app dot JS now, this is very important to understand what we are doing what we are doing over here is that I have created a class component and two sub components are defined in this particular component, which is display and button panel Now for this play if I go to display dot J’s and display dot J’s What I am doing is that I am just defining the props and taking the value of the props And if I go to button panel dot JS now in the class button panel have defined the various buttons, you can see over here to various buttons are defined But if I talk about the logic the you can say container components because those were the presentational components if I talk about the container component container components has complete logic in calculator Chase because we need to perform the mathematical operations when it comes to any calculator kind of thing So that is why the complete logic is divided into another folder in calculator chairs where we are doing the operations for addition subtraction multiplication and division and percentage in all other operations related to a calculator kind of functionality So that’s why this has been divided into different different components is number dots Is operator chairs and calculator Chase? So in the previous example, what we did was that we wrote the complete code complete operational code of a calculator in one file that was calculated fears That was a one way of writing the code, but the another way of writing the code is this particular example where even a small piece of code if this is a very small piece of code where I am just taking some if conditions it could have been written into another component file, but I have created a separate file for it to maintain the code modularity and that is how you have to learn react.js So that’s all from my side I have shown you the calculator demo Thanks a lot Thank you I hope you have enjoyed listening to this video Please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist And subscribe to Edureka Channel to learn more Happy learning