ReactJS Full Course: The Complete Beginner's Guide 2025 | React.js Training for beginners | Edureka

Hello everyone and welcome to the ReactJS full course. Your complete guide to mastering one of the most popular JavaScript libraries for building modern dynamic and responsive web applications. In this course, you will start with the basics of React, explore components, life cycle methods, hooks, rooting, and move on to advanced concepts like Redux and testing. Along the way, you will build real world projects that will help you gain the practical skills needed to become a React developer. So, whether you are aiming to create interactive UIs, improve your front-end development skills, or prepare for ReactJS interviews, this course will equip you with everything you need to succeed. So before we begin, please like, share and subscribe to Edureka's YouTube channel and hit the bell icon to stay updated on the latest content from Edureka. Also check out Edureka's ReactJS training course. It is designed to equip you for professional web development roles by helping you build dynamic and engaging user interfaces with React, a leading JavaScript library. This course covers core concepts including JSX, props, states, events, reducers, actions, and state management providing a strong foundation for developing modern web applications. So enroll today and start your React journey. Check out the course link given in the description box below. Now let's get started with our first topic that is introduction to ReactJS. So the first one is component-based architecture. In React component-based architecture, UI is broken down into reusable self-contained components. Each components has its own structure and behavior. In this layout, the page is divided into different parts. A navigation bar at top, a sidebar at right, and the main display area. In React, we build each of these sections as individual components, meaning each one can function independently. So, the next one is virtual DOM. The virtual DOM is essentially a lightweight copy of actual DOM. Instead of directly making changes to the real DOM, every time something updates, React updates this virtual DOM first. Once React has figured out what has changed, it then updates only the necessary parts of the real DOM and after that we have the development speed. React component structure allows us to quickly build and test small parts of the app individually. Since each component is separate, we can focus on building and styling one section at a time without breaking other parts of the page. This saves the time and help us to build application faster. So in short, React component structure, development speed and virtual DOM help us to create dynamic, efficient and user-friendly applications. So now let us move on to what is React. First of all, React is a open-source JavaScript library. React is maintained by developers worldwide and is focused on building user interfaces making it highly adaptable and communitydriven. The next one is React makes development fast, scalable and simple. React component-based architecture allows developers to break UIs into reusable parts speeding up the development and making the large application easier to manage. Next is React is used for building user interfaces mainly single page applications. React is perfect for single page applications where content updates dynamically without reloading the entire page offering a smooth user experience. And the last one is React enables data changes without reloading the page with features like virtual DOM. React efficiently updates the data in real time allowing the web applications to respond quickly without full page reloads. Now let us have a look on trending frameworks. So here is the data from Stack Overflow and here we can see that ReactJS is most trending framework currently. So React is the popular choice for developers nowadays. Now that we have a clear understanding of what React actually is, let us explore why it is a such popular choice among the developers. So the first one is virtual DOM. React's virtual DOM updates changes efficiently without refreshing the whole page making apps fast and responsive. The second one is development speed. With the reusable components and large community of pre-built libraries, React helps developers to build applications quickly. Next one is stability. React uses oneway data flow which means change in child component won't affect the parent component. This keeps the app stable and easy to manage. The next one is interactive interface. React makes it easy to build highly interactive UIs which means user can get smoother and more engaging experience. The next one is component- based architecture. React divides the UIs into components allowing us to build update and use part independently saving a lot of time and effort. The next one is serverside rendering. React supports serverside rendering which can improve page load speed and SEO by rendering the content on the server before sending it to the user. The next one is simple to use. React simple syntax and clear structure make it beginner friendly letting new developers start creating apps quickly. The next one is flexible development. React flexibility allows it to be used in a variety of projects from small apps to large scale enterprise applications. So now that we have covered the key components of React, let's move on to setting up your development environment where we are going to download VS Code and then we will install NodeJS for running React on our systems. Now to download Visual Studio Code, we need to visit the official website of Visual Studio Code. We are just going to click on this website and then we are going to just click on the download. If you're using Windows, you just need to click here. In case you're using Mac, you need to click here. So I'm using Windows. I need to click here. So now after the download process, you'll see something like this. You just need to click on I accept the agreement. Next. Just check these boxes. Create desktop icon. Open with code and open with code. Click on next. And finally click on install. So that will install Visual Studio Code into your system. So now after installing VS code into our system we are going to install NodeJS and to download NodeJS just visit this website NodeJS.org and you just need to click on this download the LTS version. So now after clicking on the download NodeJS LTS version you'll be able to download the EXE file. So after completing the download process you will see this interface. You just need to click on next. And I already have node installed in my PC. So I'm getting these options. Otherwise, you'll just get a next option. Let us say I want to change it. And then again you will click on next, next. And then you'll just get a finish option here. So that will start the installation of NodeJS. So after successfully installing the NodeJS what we are going to do is we are going to open our command prompt to cross check whether NodeJS has been successfully installed into our system or not. So for that we need to write one command. So the first command is node - V. So this right here is telling the version of our NodeJS. So the next command is npm v. So this is also telling the version npm version that we have installed. So by this we know that NodeJS and npm has been successfully installed into our terminal. So what is the next step? So next step is to open our VS code and then in VS code we are going to check whether Node and npm are working or not. So here I am on my Visual Studio Code. So I'm going to open my terminal here and here is my terminal. So inside terminal I'm going to repeat the commands. So the first one was node V. That's it. It is showing the version of node and it is successfully working in my visual studio code and then it is npm v. So now npm is also working in my visual studio code. So now we have successfully installed the vs code and nodejs into our system and now we are ready to create one project. So now that react is installed let's move on to creating our first react app. So to create our first React app, we are going to open Visual Studio Code. Inside this, we are going to open one folder. So here I'm going to create one new folder and I'm going to name it as ReactDev. We'll just select this folder. And now we have access to this folder. Inside this folder, we are going to open the terminal. And inside the terminal, we are going to create the app. So to create the app we are going to use this command that is npx create react app and after this you can provide any name which you want to provide to your app. Let's say I'll provide it as react and then enter and the installation of the dependencies will start. Just write y here and enter. So now this will create the react app and add the dependencies into my react app. So we need to choose the different project name. I'll just choose npx create react app and let's say counter. That's it. Now it should create my project. And now this is installing the packages into my folder. Right here we can see the counter app has been created and the package.json has been added inside it. Now let us wait till the react app is getting created. Now here we can see that our first React app has been successfully created. The node modules has been added, the source components has been added and we can see the package JSON and everything is added in our folder. So this is how you create your React app. And now what we are going to do is we are going to run our React app. So for that we can just use cd and the app name that is counter and enter. And after this we'll just start our react app. That's it. We are going to launch our react app. So here we can see this is our first react app. So by default when you are going to install the react app you are going to see these things. So now we are going to make some changes in our react app and then we are going to write the code for hello world. So there are some useless files that you need to delete first. So inside the src you are just going to keep the index.js and app.js. Rest you can delete. And that's it. I'm going to remove the logo also. Now we are going to make some changes in our app.js. So first of all we are going to remove these and then we are going to remove the code inside the return statement and we are going to write one heading here that will be hello world. That's it. We are going to save it and we'll move on to index.js. Inside index.js JS. First of all, we'll remove all this and then we are going to remove this and this. So now we are going to just save our file and just look at the output. So this is the output. The code we have written inside the return statement is hello world. So this is our first React app. We have successfully written our first code in React that is hello world. So now what we are going to do is we are going to learn some core concepts of react and then we will be creating one counter app. So now that our first react app is up and running, let's dive into the core concepts of React that make building application so powerful and efficient. So the core components of React includes components. Components are the building blocks of React app. Each part of your UI is component which can be reused to make development faster and cleaner. They help us to break down the complex UIs into manageable pieces. Next on we have JSX. JSX is a syntax that looks like HTML but works inside the JavaScript. It makes it easier to write the structure of your React component. JSX allows you to combine HTML like code with JavaScript functionality in one place. Next on we have is virtual DOM. The virtual DOM is lightweight copy of the actual DOM. React uses it to update the UI efficiently by only changing what's necessary making the app faster. This reduces unnecessary operations and improves the performance. Next on we have is state management. State refers to the data that changes in your app. React lets you to manage state inside the components. So when the state changes, your UI automatically updates. This is essential for handling dynamic data like form inputs or user interactions. Next on we have props. Props is basically short for properties. These are used to pass data from one component to another, helping you make your component dynamic and reusable. They allow you to customize component based on the data that they receive. Next on we have is event handlers. event handlers in React app functions that handles user interactions like click form submissions and more allowing your app to respond to user actions. They provide a way to trigger changes in your app based on the user input. So now that we have covered the core concepts of React, let's switch to VS Code and apply these concepts in real project. We will see how everything works together with hands-on coding. So the first thing again I'm going to do is I'm going to open one folder inside my Visual Studio Code. So I'll just create one more folder naming naming counter. I'll just select this folder and again we are going to create this app. So inside our terminal again we are going to write npx create react app counter. That's it. So our app has been created. Now what we are going to do is we are going to move into the app by cd counter. That's it. Now again we are going to delete the unnecessary things that includes index dot CSS logo and these two files. We are also going to delete this app dot CSS. So now we are going to create one more file inside it which will be counter dot js. That's it. We are going to work on these three files. And again one more file we should create for our styling. So it should be style dot css and that's it. So first of all we will start with counter.js. So by creating this counter.js JS we are going to understand the concepts of state props and event handling. So what we are going to create is we are going to create an app in which we will increment or decrement the numbers and by creating that we will be understanding the concepts of state management and properties and event handling. So first of all we are going to import the react to use the JSX syntax and define the react component. So it will be import react from react. Now here we are defining the properties that we are going to use which includes count, increment and decrement and along with that one reset. So these are the properties that we are passing. So basically counter is a functional component that takes the four props which includes count, increment, decrement and reset. These props are passed down from the app component enabling counter to display and manipulate the count value based on the user interaction. Now the counter component returns JSX that renders div element with class counter. Inside this div this div section the current count value is displayed inside H1 element as a counter count and then we have created these three buttons including increment, decrement and reset. The increment button triggers the increment function from the properties to increase the count when clicked. And after that we have this decrement button. So this triggers the decrement function from the properties to decrease the count when clicked. And then on we have this reset button. This reset button triggers the reset function from the properties to reset the count to zero when clicked. Now here we can see that each of the button uses on click attribute to call the function when clicked. Since increment, decrement and reset functions are passed as props from the app component. Clicking these buttons triggers the respective functions in the app that we are going to write. So for example, the increment button is clicked. the increment is called which increases the count in the app component state. This triggers a rerender of counter updating the displayed count. So that's it for the counter.js. And now we are going to create the app dot js. Now here we are on the app.js section. So let us have a look on the app.js. So for imports we are importing use state from react. This hook manages state within the component. And after that comes the counter. So counter component from counter that we have created. This child component will display the counter and the button from the user interaction. Now again we are importing this style. CSS from the style app that we have created. After this comes the app components. So inside the app component use state0 initializes a count state variable with the initial value of zero. And after that count holds the current count and set count is a function that updates the value. So state in react is persistent across renders meaning count will retain the value until it's updated by set count. And after that comes the event handlers. These functions are used to update the count state based on the user actions. First of all we have the increment. So it increases the count by five each time it is called by executing set count count plus five and then all we have is decrement. It decreases the count by one each time it is called and then we have this reset. So reset sets count back to zero by calling the set count zero. So by defining these functions the component becomes interactive allowing user to modify the state and see the changes reflected in the real time. So that's it for the app.js. We'll just save this file. We'll just save the counter.js and after that let us move on to the style dot CSS. So after writing counter dojs app dot js and we are just going to keep the index.js as it is. We have just excluded the codes. Those were not necessary. So we have already seen those in the first counter app that we created for hello world. So now we'll just save the index.js. And for styling dot CSS. First of all we have just styled the body using the font family display justify content alignment of items height and the background color. After that we have styled the app using these styling techniques. And then we have styled the counter. After that we have styled the button. And that's it. We have made the button hover. So that's it for the styling. Now we have created the counter app. Here we learned about three concepts. The properties, the state and the event listeners. So these are the three core components that we have learned. And now we'll just save this project and we'll run our project. So here is the counter app that we have created. So when we are clicking on increment the count is incrementing by five. When we are clicking on decrement it is decrementing by one and after clicking the reset button it is being reset to zero. So this is the simple app that we have created using props states and event listeners. So now that we have a proper idea about prop state and event listeners we'll now move on further and we'll just create our Mario game. So before that as we have now understanding about the prop state and event listener. So basically what are components? So all the files that you can see inside the source are components of the real. So app dot js is one component. Counter.js is one component. index.js is one component. So again the other core concept of react was JSX. So this right here the code that we are able to see is basically JSX syntax. So basically this is a JavaScript code but we have written HTML inside the JavaScript file. So this is called JSX. So now we have clarity about the core concepts of React. First of all the components. Here are the components. Then the JSX. These are the JSX and after that we have properties. These are the properties and then these are the event handlers. And we have also seen the state management. So after that we have this styling. So that's it about the increment project and I hope you are clear with the concept of prop states and event handlers. So now that we have clear understanding of the concepts of react, we'll be starting our Mario game. So let us now understand how we created this Mario game using React. So first of all, we'll start with the sources. In this there is a section named asset. In this we have included the audio font and the images that we are going to use. So after this we are going on the section of components. So inside this components we have one section that is items. In this we have included all the components that are being used in this game. For example we are using birds, bricks, clouds, key message, obstacles, sun and all. So after this we have this molecules. In this we have included the footer, the loading screen, Mario, the character and the mobile controls. Again we have included the title and the score. So now one by one we are going to have a look on this codes. So first of all let us start with birds. So inside birds there is a section of bird.js. So first of all we are importing the use effect and the use state from the react and after that we are importing the bird dot CSS from the stylesheet file. So first of all here is ready is a piece of state that starts as a false. It will later be set to true when the document is fully loaded and after this the use effect hook runs after the component mounts. It defines a function set load that sets is ready to true. So after that this part checks if the document is ready to fully load it. If it is, it calls the set load immediately. If not, it adds the event listener for the load event which will call set load once the page finishes loading. The cleanup function removes the event listener if the component unmounts or if the effect runs again. At last, we have the return statement. The component return a div containing another div for the birds. The class name of the inner div changes based on the is ready state. If is ready is true, it adds the class bird animate which likely triggers an animation. So that's it about the bird.js. Now let us look at the bird dot css. So for that first of all we have provided this gif and then we have included the background repeat as no repeat. background size, height, width, position, top and left. Then we have provided the bird animation and after that we have provided the key frames and media queries. So that we are already familiar with what are key frames and media queries. So now after birdjs we have bricks.js. So again in bricks.js the component imports the use and use state from react to handle the state and a life cycle events. So it also imports the CSS file bricks dot CSS to style the components and after that we have this const is ready. So here is ready is a piece of state initialized to false. This state will eventually determine whether the animation of the brick is active or not. After that we have is use effect. The use effect hook runs when the component mounts. It defines the function set load that sets is ready to true. And after that we have this if else statement. This part checks if the document is fully loaded. And if it is document ready state is complete. It immediately calls set load. If the document is not loaded yet, it adds an event listener for the load event which will call set load once the page finishes loading. The cleanup function removes the event listener if the component unmounts or if the effect runs again. And after that we have this return statement. The component returns a div with a class bricks container. Inside it there is another div for the bricks. The class name of this inner div changes based on the is ready state. If is ready is true it adds a class brick animate which likely triggers the animation. So after this brick.js we move on to brick do. CSS. So again in brick. CSS we have given this background image and the styling that we have included is background repeat background size height width position bottom and left. Next on we have brick animate. These are the animation that we have provided and after that the key frames and the media queries. So now after birds and bricks let us move on to the clouds. So again in cloud.js JS we have included all these functions just like brick.js and cloudjs. So you can just pause this and go through the code again. It is basically the same function. We are just importing the cloud css and we have changed this return statement. So after this again we have cloud dot css. We have included the background image, background repeat, background size, height, width, position, top and left. Again we have included the clouds animation and key frames and media queries. You can just pause this video and go through the code once and if you have any doubt you can just comment in the comment section. After that we have this key message js. Inside this key dot js first we have imported the key message dot css for the styling. So inside this we have basically created one press container and we have given two paragraphs including enter key and space key. So here enter key is for starting the game and space key is for jump. So after that we have included obstacles. So now let us look at the obstacle.js code. So inside this obstacle js first of all the component imports the CSS styling images for the obstacle and necessary hooks from the react. It also imports redux hook from the state management. So after that this patch is used to send actions to the redux store. Is play and speed are selected from the redux state where is play indicates if the game is running and the speed represents the current speed of the game. So now after that we have this use effect that sets up the interval that runs every 100 milliseconds. It dispatches action to update the redex store from the current dimensions and positions of the both obstacles by accessing their boundaries rectangles through the refs. Each property height, left, top, width are getting updated from the both obstacle. So after that we have one more use effect. So this use effect runs whenever the speed value changes. If the speed is non- negative, it sets the time out to adjust the speed to the small value after 1 second. This could be used to ensure that the game continue to run smoothly. So after that we have this return statement. The component returns a container of the obstacles. Each obstacle is represented as a image. This class name changes based on the isplay state adding moments classes if the game is active. The style props adjusts the animation duration based on the speed making the animation faster or slower depending upon the game's current speed. So that's it about the obstacle.js. Now we'll move on to the obstacle dot CSS. So here we have provided some basic styling techniques to obstacle container. Obstacle one two and then we have separately styled the obstacle one and two and then obstacle one move then obstacle two move. Then we have provided some key frames and media queries. So again if you have any doubt you can just comment down in the comment section and rest you can pause the video and look at the code. So after this all we are left with the sun. So we are importing the sun dot CSS for the styling and we have included one class container sun container and then we have given the class name as sun. So again inside the CSS we have provided the background image of the sun which is a GIF form and then we have provided the styling that includes background repeat, background size, height, width, position, top and right and again we have included some media queries into it. So that's it about the atom section. Now we'll move on to the molecules. So inside molecules what we have done we have created footer loading screen Mario the character score and the title. So now we'll just quickly look to the every molecule. So before moving on to the molecules we have just imported everything that we have created birds bricks clouds key messages obstacle and sun. So before moving on to the molecules here we have imported all of these things. So each line imports the component of specific file path. For example, bird component is imported from the dobirds file. The imported components are presumably react components that will be used in the application to render the different parts of the UI. And after that, this line exports all the imported components into single object. By doing this, it allows other modules to import any of these components easily from one central file instead of importing each of them individually from their respective files. So now first of all let us look at the Mario character development. So here the component imports style images or the Mario character audio files for jump sound and various hooks from the react and redux. So after that this use dispatch hook allows dispatching actions to the redux store. Several state values are selected from the redex store to manage the game state such as whether Mario is dead, the game is loading or the Mario's position and the dimensions. Now after that these selectors retrieve the position and dimension of two obstacles allowing for the collision detection. Now after that we have this audio handling. For this we are using use memo hook to create audio objects for jump, die and background music. This ensure that these objects are only created once optimizing the performance. Now after that this handle key function listens for the key presses. If the enter key is pressed the game isn't playing it dispatches an action to set the game as ready. And if the space key is pressed while Mario is not jumping that triggers the jump and plays the jump sound. After 400 milliseconds it stops the jump sound and resets its playback time. So after this right here you can just pause and have a look at the code one by one and if you have any doubt you can just comment in the comment section below. So after this we have again used this use effect that monitors the Mario's position and checks the collision with the both obstacle. So now if the collision is detected it dispatches the action to set Mario as dead and plays the dead sound. It also repeats the game score after the short delay. So that's it about the Mario character and you can just go through the code line by line. This code just shows the use of use effect and how we are controlling the Mario and when the collision is happening to change the state of the Mario and everything. So now let us quickly look at the CSS of Mario. So here for Mario we have given the styling technique which includes width, height, position, bottom and left. Then we have animated the jump and then we have added the key frame and then we have added the animation if Mario dies and key frame again for that and we have added some media queries. So now after the Mario character development let us quickly look at the footer section. So this component imports the CSS file for styling which would typically define how the footer looks and after that this defines the functional component named footer. Functional components are simpler way to create the components in the react. And after that we have this return statement. Inside this div, it displays the text copyright followed by the current year which is dynamically obtained from the new date get full year. This ensures that the copyright year is always up to the date without the manual change. It also includes the anchor tag that links the placeholder. The target blank attribute makes the link open in the new tab. And then adds the security feature to prevent the new page from the accessing the previous ones. And that's it for the footer section. Now this line basically exports the footer component as a default export of the module making it available for import in the other files. So that's it for the footer section JS. Now this is the footer section CSS. We have just styled the copyright button and the copyright link. So now after the footer design, let us look at the loading screen. So inside the loading screen, first of all, we have added the import statements. This imports necessary hooks, use effect and use state from the react, the Mario character image, CSS for styling and redux function, set loading screen and use dispatch. So now after this we have added this. This basically declares the functional component named as loading screen. So now after that we have used is ready. So is ready is the state variable initialized to false if it will set to true after the specified delay indicating that the loading is complete. So again dispatch is a function from redux that allows the component to dispatch actions to the store. And after that we have used the use effect. This use effect runs once when the component mounts due to the empty dependency array. It sets the timer for 5 seconds after which it updates is ready to true indicating the loading is completed. And then at last we have the return statement. The component renders a div with the class loading screen container. It displays the Mario character image using the image tag. While is ready is false, it shows an H1 element with the text loading. Once is ready is true, it displays the enter button. When the button is clicked, it dispatches the set loading screen false action likely to update the global redux state to hide the loading screen. And then at last we have this export default loading screen. So that's it for the loading screen. Now let us look at the CSS of the loading screen. So inside the loading screen CSS we have provided width, height, position, top, left, bottom, right, background color, color, display, flex, direction, justify content, alignment of items, gap and zindex. Then we have styled the Mario loading, then the loading title and then the enter button. After that we have provided this hover effect to the enter button. So that's it. You can go through the code line by line and again that is it for the loading screen. So now let us move on to the mobile controls. Again we have added the imports here and after that we have added this mobile controls. This defines the functional component that is named as mobile controls. And after that we have added this is play Mario jump is die. So this indicates if the game is currently being played. Mario jump indicates whether the Mario is currently jumping. Is die indicates if the game is over and dispatch is used to send the action to the Redux store. After that we have used use memo to create an audio object for the jump sound. This ensures that the audio is only created once for the performance efficiency. And after that this function is triggered when the start button is clicked. It checks if the game is not already playing and if it is not over. If the both conditions are met, it dispatches an action to set the game to ready. And after that, we have created this function. This function is called when the jump button is clicked. It checks if the Mario is not already jumping. And if he isn't, it dispatches an action to set him as jumping. Plays the jump sound after 400 milliseconds. It stops the sound and resets the playback time. And at last we have this return statement. So in this the component renders the div with the class mobile controls container. It conditionally renders the start button when the game is not playing or not over. Again the over button when the game is over, the jump button when the game is playing and at last again we have this export statement. And now again we have the styling of mobile controls. So here is the media query and then the mobile controls container and after that we have styled the start button, jump button and control button. Again we have styled these button by applying the filters and we have given the background color and then we have given the background color to the control jump button. So that's it for the CSS of mobile controls and the GS of mobile controls. You can go through the code line by line and again comment down if there is any doubt. Now at last we'll move on to the calculation of the score. So now we are at the score.js. Again we have added the import statements that imports the necessary hooks from react redux function and CSS file. So after that we have this declaration. This defines the functional component named as score. And after that we have used this query selectors for score last score play die and dispatch. So the score shows the current score from the redict store and the last score shows the last score recorded and the play is basically a boolean indicating if the game is currently being played. Die is basically a boolean indicating if the game is over and dispatch is a function that is used to dispatch the action of the redux store. And after that we have included this high score. This basically initializes the state variable high score. It retrieves the high score from local storage passing it as a integer or defaults to zero if the high score is not found. So after that we have used this use effect. This use effect runs whenever the dependencies change. That means incrementing the score if the game is being played or not over. It sets the time out to increment the score by one to every milliseconds and then updating the last score and the high score. And after that we have the return statement. So this component basically renders the div with the class score container. If the game is currently being played, it displays the current score. If the game is over, it displays the last score. It always displays the high score along with that. And at last we again have the export statement. So that's it for the score.js and we'll move on to the score. CSS. So for score dot CSS we have just applied these styling techniques including the media query and the styling of high score. So after that last one we have is title. So inside this title js first of all the component imports the CSS file for styling ensuring that the component has desired looks. So again after that we have this con title. This basically defines the functional component named as title. And after that we have this return statement. So the component returns the div with a class name title container which acts as a wrapper for the title elements. Inside this div an image element displays the Mario logo. It uses the imported Mario image as a source and it has the class Mario logo for styling and h1 element contains the text Mario jump style with the class title. This serves as the main title of the game. And again we have the export default title. So here is the styling. So first of all here we have styled the container. Then we have styled the Mario logo. Then title and then we have added the media queries. So that's it for the title. Now let us quickly go through this index.js file. So here each line imports the specific component from the corresponding directories. So footer displays the copyright information. Loading screen shows the loading animation and enter button. Mario represents the character and mobile controls provide the button for the mobile users. Score displays the current last and the high score. Title basically displays the game title. And after that this line of code exports all the imported components as named export. This means that when importing from this module elsewhere, you can access each component by its name. So again in the other index dot js file we have exported the atoms and the molecules. So that's it. We have covered all the atoms and the molecules that we have made for the Mario game. So now what we are going to do is we are going to run our project. So for running our project we are just going to add the command and then we'll be able to run our project. So here we are going to add the command to run our project. So we are just going to write that's it. We are going to give the command as npm start and it will start our project. So here is our game. Here is the output of our Mario game. It is the landing page. We can just click on enter and it is basically the screen. Here we have the enter key. We have to press the enter key to start the game and then we have to press the space key to jump. Here we calculate the score the high score. We have added these GIFs of birds, clouds, sun and the bricks. And here we have the Mario character. So here is the footer. Basically we have designed the copyright and this is the title. So this is the whole project that we have created using the reapp. So I'll just quickly enter key. And now I can see the game has been started. So again I can jump using the space key and my score is being calculated here. My current score and the high score is being calculated here. So this is the final project that we have created using React. Starting with the first reason to learn React which is React is easy to learn. Most developers love React because it is efficient, declarative, and flexible. What is even more important and exciting is that learning React is easier than learning other JavaScript frameworks. If we compare React with Angular on learning basis, React is a library and a complete solution that is built around one main concept, which is to give you more freedom in how you use the library to compose and organize your own component-based architecture. While Angular in turn is more like a constructor or a tree of components. So you need to understand how its elements behave, work and combine together. Nevertheless, React's relative simplicity does not purely depend on its file structure and component model, but also making the code easier to understand and launch. Of course, React doesn't burden developers with too many things to be mentally managed. It generally does have a simpler file tree and flexible component model, but also that's a significant benefit. React tends to have a substantially shorter dependency list. While Angular's dependencies from a dizzying set that's problematic to track, React aims to make developers life easier by considerably shortening the equivalent lists. The more difficult a technology is to learn, the longer it takes to start the development process. Therefore, a steep learning curve is one of the main reasons why React has gained so much traction in such a short time. Given React's simplicity, businesses today are more inclined to use it, thus building their projects faster. Now, moving towards the second reason to learn React, that is increased job opportunities. There are thousands of jobs in the world which demand ReactJS skills. There are more than 43,000 jobs available on LinkedIn alone in India for React. As compared to 2019, there has been 184% of increase in the openings for ReactJS developers in the year 2020. According to India today, a Quest report states after COVID 19, ReactJS developer is one of the top digital skilled jobs in demand. This quite a huge number of job opportunities makes React one of the skills most of the application developers want to learn and secure a good job. Third reason to learn React could be attractive pay scale. Of course, salary is important. Today, React has the best pay scale on most of the job suggesting websites like LinkedIn, Glass Door, etc. Talking about the salary trends in India, the current average salary for roles of React domain is 735K which includes the average salary of 597K for front-end developer or engineer, the average salary of 654K for software engineer and the average salary of 1 million for senior software engineer. Now this could be a major reason to learn React because money actually matters in professional career. The next reason to learn React is easy migration. Most of the communities that were not aware of ReactJS are now migrating to the ReactJS as it is very easy to understand and implement. They have started rewriting the code on React. Some top companies like Reddit, BBC, Netflix, Facebook, ASA, PayPal, Instacart, Uber Eatats, Airbnb, Twitter, OkCid, Netflix etc. are using React. This increases the job requirement of React skills in the world. A lot of successful and big organizations dare to migrate on React because React provides the facilities which help in migration easily. As mentioned in React documentation, when React deprecates a pattern, they study its internal usage at Facebook and add deprecation warnings which let them assess the impact of the change. Sometimes they back out if they see that it is too early and they need to think more. strategically about getting the code bases to the point where people are ready for the change. If they are confident that the change is not too disruptive and the migration strategy is viable for all use cases, they release the deprecation warning to the open-source community. They are closely in touch with many users of React outside of Facebook and they monitor popular open-source projects and guide them in fixing those depreations. Given the sheer size of the Facebook React codebase, successful internal migration is often a good indicator that other companies won't have problems either. Nevertheless, sometimes people point out additional use cases they haven't thought of and they add escape hatches for them or rethink their approach. React not only cares for the migration from other technology, but also from older version of React itself to the new year version of React. They don't deprecate anything without a good reason. They recognize that sometimes deprecations warnings cause frustration, but they add them because deprecations clean up the road for the improvements and new features that they and many people in the community consider valuable. For example, a warning about unknown DOM props in React 15.2.0 was added. Many projects were affected by this. However, fixing this warning is important. so that they can introduce the support for custom attributes to React. There is a reason like this behind every deprecation that React adds. When they add a deprecation warning, they keep it for the rest of the current major version and change the behavior in the next major version. If there is a lot of repetitive manual work involved, they release a code model script that automates most of the changes. Code mods enable us to move forward without stagnation in a massive code base and they encourage you to use them as well. So that's how React helps in migration. The next reason to learn React is reusability which is a boon for developers. React doesn't require big lines of codes to program an application. In React we say that everything is a component. A user writes small codes called components and combines them to form another component. Simply any app made with React is a tree of components. React follows write once use it anywhere principle. For example, if we are building an Instagram app using ReactJS, we will have many components like a separate component for navigation, another one for the story section also for news feed, then for profile and all other section of the application. Components are basically like functions. The word has seen a big jump in the increment of the number of developers switching to ReactJS for which reusability of code plays a vital role. Moving to sixth reason to learn React which is data binding. Data binding is the process of synchronizing data between the model and view. There are two basic implementations of data binding on one directional and two directional. React uses one-way data binding which doesn't allow child elements to affect the parent elements when they are updated. This makes code more stable and easier to debug. This also makes the code predictable and ultimately improves the performance of the application. If you compare React data binding approach with any other JavaScript framework, let's take Angular. Angular uses two-way data binding to connect the DOM values to the model data. This makes it simpler to work with but also has a negative impact on performance. It makes it slower when the application deals with lots of data requests. It also makes debugging difficult and results in less predictability. Another reason why you should use React is its flexibility that manifests itself in a number of ways. Flexibility is especially visible when it comes to the use of React for web development. Web development projects tend to grow into bulky systems that may be difficult to fix or enhance. First, when we talk about React's flexibility, we refer to the libraries innate modularity. As we know, React's architecture allows bundling front-end code into custom components. This providing a solid foundation for the overall development process optimization. The React's position on the scale of opatedness is stable. The library neither locks nor guides you into their way of doing things. On the one hand, it dictates how you should create reusable components. On the other hand, it gives a free hand to decide how to handle routing and testing our organized dependencies and more. This degree of freedom can turn out confusing for newcomers initially, but with time working in a React development environment becomes a pure delight for developers. This way, React allows you to write clean modular code breaking the project into separate components. As a result, when code is modular, it gets easy to maintain and scale. Second, React is super flexible in the sense that it can be integrated with other third-party libraries and MVC frameworks. You can choose to create a React project from scratch or gradually introduce React to your existing legity codebase. Creating a new React app is not too difficult. Embedding React components one by one into your code written using other technologies is not a problem as well and vice versa. It's relatively easy to integrate third party libraries into React applications. So using React for front end is a great choice. Besides, while we are on the topic of flexibility, it should be noted that another significant advantage in the ease of transfer and support of React Native apps. React Native is actually a framework for building native apps using React. So, if you know how to develop applications using React, you are already well on your way to getting wellversed in React Native too. They are conceptually similar. Most of the React concepts transfer to React Native. This you can waste no time, learn React Native and start developing mobile applications for iOS and Android with a native look and feel. If we compare React and Angular on this, as I have discussed just now, React gives us the freedom to choose the tools, architecture and libraries for developing an application. On the other hand, Angular offers a limited amount of freedom and flexibility. Now let's see the eighth reason to learn React that is fast rendering. React is a clientside JavaScript library that uses serverside rendering. Why is it a benefit? Enhanced support for serverside rendering turns React into a robust performanceoriented solution for creating content focused applications. Be it a web application or native rendered applications for Android and iOS. React has everything for a brilliant performance. Faster rendering has massive impact on reducing load times and quickly adapting the performance in real time based on user traffic flow. It's common knowledge that the faster the page load speed, the more users won't leave the website and will use your service or purchase your product. This is crucial for online business and after COVID 19, online businesses have seen a new milestone. React's virtual DOM is basically the prime cause of faster rendering and better performance of React apps. First of all, the React virtual DOM that is virtual document object model can be understood as a tree data structure of plain JavaScript objects. Accordingly, React's advantage over other frameworks is that it creates virtual DOM as a copy of the real DOM. And whenever the state change in a React component happens, it rerenders the virtual DOM first, compares the old version to the new one, and eventually only the required minimum is changed in the real DOM instead of rerendering the entire UI. React's virtual DOM serves as a layer between how things are supposed to look and the actual processes happening to render all of these things onto the page. Now let's move to the ninth reason to learn React that is easy debugging. When something goes wrong, it is important that we have breadcrumbs to trace the mistake to its source in the codebase. In React, props and state are those breadcrumbs. If you see something wrong on the screen, you can open React Dave Tools, find the component responsible for rendering and then see if the props and state are correct. If they are, you know that the problem is in the components render function or some function that is called by render function. The problem is isolated. If the state is wrong, you know that the problem is caused by one of the set state function calls in this file. This two is relatively simple to locate and fix because usually there are only a few set state function calls in a single file. If the props are wrong, you can traverse the tree up in the inspector looking for the component that first poison the well by passing bad props down. This ability to trace any UI to the data that produced it in the form of current props and state is very important to React. It is an explicit design goal that state is not trapped in closures and combinators and is available to react directly. While the UI is dynamic, we believe that synchronous render functions of props and state turn debugging from guesswork into a finite procedure. We would like to preserve this constraint in React. Even though it makes some use cases like complex animations harder, React results in not only easily debuggable code but also highly testable applications. React itself makes it easier to create a clean architecture that is friendly to testing. If you are working with React, we don't have to do any extra configuration of UI tests. Instead, we can use justest that is basically Facebook's JavaScript test runner that is configured right out of the box and works seamlessly with ReactJS applications. If we choose to develop a new application using create react app, just will go with it by default. So, we will be able to execute tests rapidly. Just is a nodebased runner. Therefore, while testing a ReactJS application, a developer can run unit tests in a node environment, not in real browser by mocking components under test. Traditional UI test execution tends to be slow, but with React, UI tests are run quite faster. UI tests often end up being brittle. However, by separately testing single React components in a node environment, we can avoid flakiness and ensure test results reliability. This is because in such a way we will be in a position to test pure functions which unlike with traditional end to-end UI tests is much less time consuming both in terms of writing and maintenance. If we are running unit tests using react we can be sure that it won't be a big challenge to write these tests quickly and update them easily. Now here strong documentation and community support for React becomes the final 10th reason to learn React. Being an open-source library, ReactJS has what it takes to keep attracting more and more newcomers to its community, which makes it stronger over time. The feeling of belonging to a community is a solid base that a software developer can rely on when learning new technology or working on a complex project. As a React developer, you will definitely get this feeling. The React library has once gotten into the growth loop and seems to intend to remain there as long as possible. As of today, ReactJS is one of the five top rated repositories on GitHub with over 170K stars and over 5 million applications publicly admitting to using it. React has a rich ecosystem to benefit from or contribute to. Besides, finding one's way around all this information won't be a big challenge as the React documentation can be easily found on the official website. The community is active, so you can get rapid feedback or response to your inquiry once you feel stuck. Currently on Stack Overflow, there are over 14 million questions tagged ReactJS that have at least one accepted answer. That's incredible how responsive the community is. So once you encounter a problem, chances are someone has already had the same problem and there is a solution to it so that you will only have to copy paste it from the corresponding discussion thread. With this I have covered top 10 reasons to learn react. Last but not the least, I want to say traditionally open-source projects get along without full-time developers and are being improved through the work of independent contributors who are committed to the project to a certain degree. But React's contributors commitment is much deeper than that which has a direct positive impact on React developers coding experience. [Music] JSX JSX stands for JavaScript XML. It's an XML or HTML like syntax used by React. It extends the ECMAS script so that XML and HTML like text can coexist along with JavaScript React code. This syntax is used by the pre-processors like Babel to transform HTML like text found in JavaScript files into standard JavaScript objects. With JSX, we can go a step further by again embedding the HTML code inside the JavaScript. This makes HTML codes easy to understand and boosts JavaScript's performance while making our application robust. A virtual DOM, like an actual DOM, a virtual DOM is also a node tree that lists the elements and their attributes and content as objects and their properties. React's render function creates a node tree out of the React components. It then updates this tree in response to the mutations in data model caused by various actions done either by the user or by the system itself. The virtual DOM basically works in three steps. First, whenever any of the underlying data changes, the entire UI is rerendered in the virtual DOM representation. Then the difference between the previous DOM representation and the new one is calculated. Once the calculations are completed, the real DOM will be updated with only those changes that have actually been made. You can think of this as a patch. In a virtual DOM, the changes are applied only to those elements which have actually changed or updated. This will not just make our application faster but also there is no memory wastage. Testability. React views can be used as functions of the state. Here state is basically an object which determines how a component will render and behave. Thus, we can easily manipulate with the state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug. Serverside rendering or SSR. Serverside rendering allows you to pre-render the initial state of your React components at the server side itself. With SSR, the server's response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the web page loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript creating the virtual DOM linking events etc at the back end. Oneway data binding. Unlike other frameworks, ReactJS follows the unidirectional data flow or one-way data binding. A major advantage of one-way data binding is that throughout the application the data flows in a single direction which gives you better control over it. Because of this application state is contained in specific stores and as a result rest of the components remain loosely coupled. This makes our application more flexible leading to increased efficiency. Simplicity. The use of JSX files makes the application really simple, easy to code and understand as well. Even though you can use plain JavaScript over here, using JSX is much easier. React's component-based approach along with the distinct lifestyle methods also makes it very much simple to learn. So that was about the features of React. Okay. So now that you've understood the features of React, let's move on and take a look at the prerequisites that are required in order to learn React. The first and foremost prerequisite is HTML. HTML stands for hypertext markup language and it is the standard markup language for creating web pages and web applications. A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup languages make the text more interactive and dynamic. It can also turn text into images, tables, links, etc. The next prerequisite that you will need to know is CSS. CSS basically stands for cascading stylesheets. CSS is a technology that is proposed and developed by the worldwide web consortium or the W3C for short. It was released to help free web developers from the tedious process of inline styling and make styling a separate entity in itself. Next up is JavaScript. JavaScript is a lightweight interpreted programming language with object-oriented capabilities that allows you to build interactivity into otherwise static HTML pages. The general purpose core of this language has been embedded in Netscape, Internet Explorer and almost all other web browsers. Following JavaScript is npm. npm stands for node packet manager. It is the default packet manager of NodeJS that is completely written in JavaScript. It was developed by Isac Zluto. It was released in 2010 and since then it is responsible for managing all the NodeJS packages and modules. NPM is the world's largest software registry which is completely free and open-sourced. Developers all over the world make use of npm for sharing software. Code editors or idees. Code editors and idees or integrated development environments are platforms where programmers write their code and produce their final products. Some examples are Sublime Text, Atom, Visual Studio Code, etc. So, basically, if you want to write your React code, you will need to make use of any of the code editors or ids. Okay. So, now moving on towards the next topic, which is the React architecture. As mentioned earlier, React is the Vi in the MVC architecture. The M or model architecture is provided by Flux. Flux is an architectural pattern that enforces a unidirectional data flow. It controls derived data and enables the communication between multiple components using a central store which has authority over all the data. Any update in data throughout the application must occur here itself. Flux provides stability to the application and reduces runtime errors. So now let's take a look at some of the important concepts in React. The first thing that you should be aware of is components. In ReactJS, everything is a component. If you guys remember, I've already given the one Lego house application example earlier on in this session. Just like the Lego blocks are combined together to make a single structure, components in React are integrated together to build one bigger and dynamic application. So therefore, in React, the entire application can be modeled as a set of independent components. These components basically serve different purposes. Components also enable us to keep the logic and the view separate. In React, multiple components are rendered simultaneously. State and props. State is the heart of React components. They are basically the source of data and must be kept as simple as possible. Basically, states are the objects which determine the components rendering and behavior. They are mutable and can create dynamic and interactive components. States in react are accessed via this state function. States also have something called as state life cycle. So basically we need to initialize resources to components according to the requirements. This is called as mounting in react. It is critical to clear these resources taken by components whenever they are destroyed. This is done in order to manage the performance and is called as unmounting in react. It is not essential to use state life cycle methods but you can use them if you wish to control the complete resource allocation and retrieval process. Props. Props is the shorthand for properties in React. They are readonly components that must be kept pure or immutable. Props are always passed down from the parent to the child components throughout the application. So therefore all the user needs to do is change the parent component state while the changes are passed down to the child component through props. On the other hand, a child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and is generally used to render the dynamically generated data. Keys. Keys in React provide identity to components. Keys are the means by which React identifies components uniquely. While working with individual components, we do not require keys as React takes care of key assignment according to their rendering order. However, we need a strategy to differentiate between thousands of elements in a list. So, this is where keys come into picture. If we need to access the last component in a list using keys, it saves us from traversing the entire list sequentially. Keys also serve to keep a track of which items have been manipulated. They should be given elements inside the array to give elements a stable identity. Debugging in React. Now there will be a point when a developer goes through a roadblock. It could be as simple as a missing bucket or as tricky as segmentation falls. In any case, the earlier the exception is caught, the lesser is the cost overhead. React uses compile time debugging and detects errors at an early stage. This ensures that errors don't silently turn up at the runtime. Facebook's unidirectional data flow allows clean and smooth debugging, fewer stack traces, lesser clutter, and an organized flux architecture for bigger applications. Event handling and manipulation of state. Whenever an event such as a button click or a mouse hover occurs, we need to handle these events and perform the appropriate actions. This is done using event handlers. So those were some of the important concepts of React that you should know when you're learning React. So now talking about the learning curve of React. React unlike Angular has a shallow learning curve and it is very much suitable for beginners. The ES6 syntax is easier to manage especially for smaller to-do applications. In React, you code in the JavaScript pay giving you the freedom to choose your tool depending upon your need. On the other hand, Angular expects you to learn one additional tool that is Typescript which can be viewed as the Angular way of doing things. In Angular, you need to learn the entire framework if you're just building a simple UI application. Now let's move on. So once you're done with learning the basic concepts of React, you'll have to adopt the projectoriented learning approach. This is because whenever you create a project, you will have a 360deree learning. This is because when you create a project, you will have to do everything by yourself. Therefore, you'll make use of all the programming concepts resulting in better understanding and implementation. Remember that you do not have to master the world in your first project itself. So start off by choosing a very simple one. Complete it by yourself and try your best not to copy anything from anywhere else. As you proceed, you can take a bigger applications and work on them. It is sure that you will face difficulties while making your applications. However, it comes with a reward of learning. if you are stuck at some point in your project, try to break down your problem into minor parts and then work on each of them one at a time. Now, once you've decided to learn React, remember that you're not alone. There are a number of developer communities that will help you along the road. In this session, I'm going to be discussing about GitHub, Stack Overflow, and Edureka community. GitHub as many of you would be aware of is the world's leading software platform that brings together developers from all over the world. It allows you to build your programs, share your work or discover what you are looking for. You can also engage with other programmers by asking them your doubts etc. Stack Overflow. Stack Overflow is another open community that entertains anyone who wants to code. It will provide you with some of the best answers for even the most trickiest questions and errors and will also help you share your knowledge with others using Stack Overflow. Not to forget, if you have any doubts or queries regarding any of the technologies, you guys can also check out the Edurekaker community website and get all your queries answered by experts. Also, make a note that the key to remember what you learn is to share. So, make sure you share what you learn with others. Last but not the least, stay updated. Technology sees new heights every day. The version that you learn today will get modified in the upcoming days. So, make sure you keep yourself updated with all the latest React versions and update your projects accordingly. [Music] Now, aspects of ReactJS. There are three important aspects of ReactJS we will talk about. First is the virtual DOM. Second is the data binding and third is the serverside rendering. But before that if I talk about the architecture of a ReactJS application. Any ReactJS application is composed of a set of components. So it includes any 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 ReactJS. 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 at all before for example. So I will suggest that please get familiar with those concepts before trying to tackle or play around with ReactJS. So if I say what are the prerequisites to play around with re ReactJS. So you should have familiarity with HTML and CSS. You should have basic knowledge of JavaScript and programming. You should have basic understanding 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 and features. And then finally you have to know what is NodeJS and how npm is installed globally. So these are some of the prerequisites I talked about to start with ReactJS. So let's talk about virtual DOM. Now this is the first aspect we want to know about ReactJS. So let's talk about the problem first. What is the problem? So DAM manipulation is the heart of modern interactive web. But unfortunately it is also a lot slower than most JavaScript operations. So when you write in JavaScript document getelement by id this is the id of the element dot inner html 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 value 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 traversal 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 DOM is always slower than the virtual DOM. Please remember virtual DOM is a aspect or you can say concept which is introduced by ReactJS. 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 off 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 reconation 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 DOM and then the changes on the real DOM they cause 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 node tree that lists 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 as 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 are the ones which have been changed and they have only been patched to the real DOM instead of the complete tree. So that is the power of a real DOM you can say. Now the important thing that how does React uses virtual DOM? 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 DOM. 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 DOM which causes the screen to change. That is the concept of a virtual DOM. Now let's talk about another aspect of ReactJS which is data binding. So ReactJS follows very important to learn that ReactJS follows unidirectional flow of data or one-way data binding as compared to other frameworks which supports two-way data binding. So in ReactJS 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 oneway 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. Flux is more of a pattern than 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 store. So 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 into 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 ReactJS. It's a oneway data binding or you can say unidirectional data flow. Now another concept of ReactJS that is serverside rendering. So let's talk about serverside rendering now. So serverside rendering allows you to pre-render the initial state of your react components at the server side only. So serverside rendering which is also called as SSR in abbreviated 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 serverside rendering. I repeat this definition. Serverside 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 server side rendering all your server ships is an HTML page with no body. So just some script tags that are then used by the browser to render the application. So in nutshell what is the difference between client side rendering and serverside 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 is serverside rendering? On the other hand, serverside 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 serverside rendering. So we talked about three important aspects of ReactJS that is virtual DOM, data binding and serverside 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 a DOM 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 ln to 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 DOM. That is the power of a virtual DOM. So as I talked about that what is a virtual DOM right? So virtual DOM only give updates to the real DOM. 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 US it was compared and then you can see in the real DOM the location is changed to UK because virtual DOM it has not put heavy load on the view and makes our processing also very much faster. So with ReactJS when model gives data to the view if the DOM is empty React will create a DOM for it. That is also a beauty or you can say advantage of a virtual DOM. Now as you can see here that with ReactJS when model has given the data to the view and if the DOM is empty react will create a DOM for it but at the same time it is checking with the previous values and if it has found previous value is ln and the new value is max the user property has been changed to max in the realm. So let's talk about the advantages of ReactJS. Now what are the various advantages of ReactJS? The first one application performance is increased. So which means that the creating the dynamic web applications. Now it has become very easier and ReactJS is very much easier to learn. Now how the application performance is 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. ReactJS can be used both on client side and server side. And it also known to be a SEO friendly you can say library. Readability is improved. This is one of the greatest advantage of ReactJS that 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 AngularJS or Meteor or Vue.js. even with uh knockoutjs or amberjs. Another advantages of ReactJS I want to talk about here is that the reusable components. So ReactJS 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 decompose into multiple components your ReactJS application. At the same time, ReactJS 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 and edit their current properties and state. So these are some of the advantages of ReactJS. ReactJS is very much popular nowadays and is used by almost all the developers across the globe. Now applications of ReactJS. So there are uh these famous applications which are using ReactJS in their uh 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 ReactJS 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 ReactJS or React Native in their website or in their mobile apps. [Music] So first of all we have the JSX. So we have under JSX. Now there are multiple components under React that makes the entire infrastructure as flexible as possible. So like we have JSX then we have React components then we have props then we have states life cycle events references keys and then we have available routes. So the multiple references that we have that we are going to discuss. Now the core important component first of all is components. So let's discuss on the component on the structure for components first. So components are what if we have web page. So if you want to update different content, if you want to handle different content uh you can say sections separately then instead of refreshing the entire page what we can do we can declare we can add different sections at as different components so that we can define different logic for different sections. We can have different separate views and then we can render multiple components in the same page where it can all have their own separate behavior defined. Correct. So first of all we have components. So components as we discussed entire application can be modeled as a set of independent components and different components are used to serve different purposes. This enables us to keep a logic and view separate. So React renders multiple components simultaneously and components can be either stateful or it can be stateless. So before we start creating components we need to include a few import statements. So we have to define the import react and then only we can import start importing the components and then we can define the individual functionality for these different components one by one. For example here we have this one declared as component. We can have the left sidebar dictated as a component and so on. So everything in React is a component and each component returns a DOM object. It spills the entire UI into independent reusable pieces. Each independent piece is processed separately and it can refer other components in output and it can be further split into smaller components. So valid react component accepts a single prop object argument to produce a react element and these are called functional as they literally are JavaScript functions. So here we can define a button where we can define a prop as on click and then we can link this to any of the other components. Suppose that if the if you talk about the simplest way of defining a component is through JavaScript where we can define function and then we can define the entire components and components can in react can be in two different forms. It can be stateful or it can be stateless. It can be stateful or it can be stateless. Now stateful remembers everything. Okay. We can we it has its own memory whereas stateless doesn't remember anything it does. So as soon as the entire statements are executed, it simply clears out its entire memory. So core which stores information about components in memory and it can change states. It contains knowledge of past, current and possible future state changes. It receives information from the stateless components if state change is required. It calculates states internal we can say internal state of components and it never changes the state contains no knowledge of past current and possible future state changes and it provides a differential transparency that is for some in for same input it will produce same output as well as a part of stateless components. Then we have props. So props are read only components. So whether components are declared as functions or class it must never change its props such components are called pure functions. So all component must act like pure functions with respect to the props as what we are going to define. All right. Now for example let's say if you want to create any component here we want to define the props as well. Then we can create a components and then we can create separate props. For example, if you want to create a component in React, then here it's always advisable to go to source and under source, we can create a separate folder. So here we can define folder name as components and then under components we can create the component file. For example, here we can create a component file as suppose cmp1. Suppose here we have suppose header header.js. So we have one component defined as header.js. We can define header.js. JS and first of all we have to when we are creating component we can import the react DOM element where we can define react tom from react dom element that we have to from in which this is currently present. So here we can define react to then we can declare a simple constant where we can define con constants such as my component. We can write any component here. Suppose here we can define my component. Now here we can make use of a simple lambda function. Now in here we can create a function where where we can define okay we want to return and then what exactly we are looking to return here we can define that those parameters. Suppose here we want to return a simple H2 as we have I can say component example. We can define a simple component example here. We can close the H2 element and then we can now once once we have closed it we can close the statements that we have currently opened up and then we can use react DOM dot render so that this particular my component that we have created this can be rendered this entire component can be rendered here and then we can define okay when which so here we are going to use document get element by id and suppose here we want to render this where we want to render this in the root id that we define in index or hal so in in id we have defined as root let's change the same thing under index as well so here we can define this to be root right so here we define entire root element here and then once we are done we can close index statements so we can save this and now if you want to include this back in our own statements and then we can easily do that. Right? So here we can simply define our own application we can define the own index wherever and however we want this to be rendered and then for creating a props. So props as we know all that no in simple terms if you say props is basically a shorthand for the properties. So, React uses props to pass attributes from parent components to child components and props are the argument based to the function or component which is ultimately processed by react. So here we can define multiple properties for it and then we can have it rendered depending upon what kind of property we are going to create here. So for example here instead of using the return statement here let's do one thing. Let's say here we create a simple function. So here we can define function. So okay let's return the statement here. Not a problem. So after this we can create a simple function. Let's create a function here by the name of app. So here we can define a function for app. And in here we can specify return. Now under return we can define suppose here we want to return a division and then under division for example we have multiple message that we want to save here. So here we can define message as username. For example, here we are going to save multiple username. Then here we can define message. And suppose we have John. Here we have again another message. Uh that means another username that defined here. Suppose here we have Selena. And here we have another message. This can be multiple components we can save. Suppose here we have Mike. This can be multiple username that we are going to simply render here. And then when we when we are rendering the element here we can define the entire function right. So now instead of define the the even earlier instead of defining the entire my component we can define the function and under function we can create a function for message that we have specified here. So here we can define message function and under message we are going to define this as props with the properties that we have defined. All right. So here we can define the entire properties as in how or well we want to render these as a part of the props and components. And then we have other properties such as we have states. So states are basically allow us to create components that are dynamic and interactive. So state is basically private. It must not be manipulated from the outside. Also it is important to know when to use state. So it is generally used with data that is bounded to a change. For example, when we click a toggle button, it changes from inactive to active state that you may have noticed and state is used only when needed and we have to make sure that it is used in render property that we have defined in re in our JS otherwise it won't include in the state and we do not use state with static components. The state can be the state can only be set inside the constructor al together. So we can include some code snippets and to see a small example. So for example we can come back to our editor. So let's say here we can create a new file all together. Let's say we name it as state one.js. Now here we can import react from react. And then we can also work on importing react dom from react. Now basically when we are working on the elements we have to make sure that we import the elements one by one. So here we have to import react with react dom. Now here we can start now for the state property. Let's say here we can define class for toggle where we want this to be extended. Now extend react dot component that we have imported or we can also or now to work on this one here we also have to import react component as well. So here we can also import uh if you want to import component then from the same react here we can define the component as well. If we are looking to import multiple things and here we can define react and component both from the library where we have defined it. All right. So here we can define a simple class as toggle as react component. Here we can define a constructor where we can specify a value for constructor and then we can define values such as here we can define a super where we can a super object for having the value and then we can use this dot state. So here we can store the state value as this dot state and here we can define is toggle here we can define is toggle on if it is now here we can define the property to be true then we can define this dot handle click should be set to using this pointer this handle click dot bind. So here we can bind this to the this binder that we have selected. So as a part of the state now here we can also now if you want we can bind this state here and then we can define multiple states as in when this when this should be on when this should be off and then we can alter m multiple states by define the state life cycle as well one by one. So we can define if state is again one then again how we have to switch different states from one state to the other that is something that we are going to look at as soon as we proceed further with the entire module step by step. Then we have life cycle. So react provides various methods which notifies when certain stage of life cycle occurs called life cycle methods. So these are special event handlers that are called at various points in components life. So code can be added to them to perform various task and they are invoked in a preditable order. An entire life cycle is divided into four different phases. We have the initial phase where we have get default props get initial state. Then we have component will mount, render and component did mount. Then in the updation phase here we have should component update, component will update, render and component did update. Then in the props change phase we have components will receive props should component update component will update render and component did update and then in unpound simply is going to define component will unmount. So component is going to be unmounted after a specific value based on the condition whatever we have defined and events are basically trigger reactions to specific actions like mouse over mouse click key press. We can set any kind of event parameters and then we can define it easily. We can do that now. As soon as any event is triggered, this is going to simply trigger the vat event and event passes the event arguments to the event handler. So whenever any event is specified in JSX, the synthetic event is generated and this synthetic event wraps up the browser native event and a pass as argument to the event handler. That's how it is structured. And then we have references. So references stand for again and references are basically used to return references to a particular element or component returned by render. So when we are rendering any element here then we can use references to specify a particular element. Now basically this is mostly used for managing focus text selection or media playback and then we can also be used for triggering imperative animations or we can easily use this with third party DOM libraries as well. you can do that. These are the main features available in React. And again, we also have the component for React router as well. So, React router is basically a powerful routing library built on top of React framework. So, it helps in adding new screens and flows to the application very quickly. So, it keeps the entire URL in sync with data that is being displayed on the web browsers. So in router we can have an easy understanding of the application views. It can restore any state and view with simple URL. It handles the entire nested views and resolutions. States can be restored by the user by moving backward and forward. It can help us in maintain a standardized structure and behavior while navigating it to the implicit CSS transitions. We can easily do that. [Music] Now we'll talk about components in detail. So first thing first that in React everything is considered as a component. So I will say in React everything is a component. So on the screen you can see that there are multiple components 1 2 4 3 and 5 and on the web browser we need to add them just like components. So they have been added just like a widgets or sections or 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 reusability 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 they 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 reactbased application but how it is divided internally into logical pieces. So the concept in of component in ReactJS 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 or the all other becomes you can say the branches and the sub branches. So in this diagram you can see the component one is the root of the UI tree. two and three are the children of one and four and five are the sub subbranches of the second component. So that is how you can split the complete UI in ReactJS 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 ReactJS it returns one DOM element and how it is returned that there is a API called react DOM and it has a method called render. So react DOM. 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 a enclosing tag. So here I am creating a ES6 standard component class component 3. So 1 2 4 and 5 three is here which is returned like this that hello world welcome to Edureka and ReactDOM. I am calling the component component one because component one is my root component and where I want to show you is the id of that div element that is document or 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 sees an element representing a userdefined 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 ReactDOM. with the welcome name. Welcome name let's say name is the prop over here having the value ripple and react calls this welcome component with the name vipple as the prop. So this becomes name equal to vipple is the props. Welcome is a component which returns h1 tag and then react dom efficiently updates the DOM to match this h1 tag. That is how a component is rendered in reactjs. Now the other fundamental the most again a very important you can say fundamental of ReactJS are the props. Now what are 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 a 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 Alex. So how can I return this property to this class component? By using this dotprops.name. So what this dotpropsame will return? This do.props.name when it comes to header it will return Bob. And this props.name for the footer component it will return me Alex. So how you can access props in ReactJS? If you want to access props in ReactJS the syntax is this.props.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 coding. So in the header component if I write this.props name in the previous example also I wrote this.props.name but the value was something different. And in this case the footer component will return me this.props.name. The value will be codi. 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 ReactJS. And how to access those props? The props are accessed using this.props name or you can say this.props dot the attribute name or attribute value. So if I talk about props, they work similar to HTML attributes. Data flows from downwards 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 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 props. So we can set some default properties 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 talked 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 sum having 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 why this is called a pure function. But when I talk about a impure function because the function is impure so it changes its own input. So for this particular function the input was account and amount and you can see there that I'm changing the value of account. So it becomes a 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 and props we talked about that there are two types of components you can create in ReactJS because components allow you to split the UI into 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 you 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 name which extends from react.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 get deep dive into some of the examples so that the three basic fundamentals which we talked about JSX components and props you can have better understanding about these. Okay. So let's get started. So I'm just opening the NodeJS command prompt. So I have opened the prompt. So I'm moving to the D drive and I'm moving to a specified location and then I am opening the code in a editor called Visual Studio Code. So let's talk about the basic example that how you can render the JSX in ReactJS. A very basic and simple example we will talk about that how you can render JSX in ReactJS. 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 library and then reference of the babel.js. In the script tag I have called react. And in that react. Because we want to render the JSX. Okay. And please remember that you have to use script type equal to text label to indicate the JSX code. In JavaScript of jQuery, we refer script type equal to text/ JavaScript. But when we are working with JSX, you have to use script type equal to text/bable to indicate the JSX code and include Babel.js. This is very important. And this Babel.min.js, 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 react.tren render I have written hello world. So let's run this piece of code. So I'm 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 react.nder 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 placeholder. 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. Okay. So here you can see that I have created an array names equal to some names and in the react. I am using a JavaScript names on the names array. I'm 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'm 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 l is hello a million hello kit. 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 and 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 hello Alice, hello Emily and 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 two. Now in the react.nder 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'm doing is I'm defining a component. So we talked about props we talked about JSX we talked about components. Right? So in this particular example I'm defining a component. So what is the syntax for defining the component class then the component name which extends from react docomponent 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 talk about before version 16 of ReactJS, it uses react.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.props dot some attribute to access them just like in this case I am using this.props.name. So what I'm doing is that in react.trender 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 let's say equal to name and its value is John now what will happen in the hello message it is returning hello this dotprops name as I mentioned while talking about the props that how you can access the prop okay how you can access the prop. So how you can access the prop? You can access the prop is this do.props dot attribute name. Please remember how you can access it. This dot props dot 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.props. Now what is the use of this dotprops children? So React uses this.props children to access component children nodes or you can say child nodes. So you can see here this do.props dot children. So please remember that the value of this.props dot children it could have three possibilities in fact. So if the component has no then the value will be undefined. Then the second possibility could be that if can it can have a single child node let's say an object and if multiple children nodes then it will become an array. I repeat that there are three possibilities while using this dotprops children. So component can have no children node then the value will be undefined in that case. If it has single children node then it will be an object and if it has multiple children nodes then it will be an array. So React gives us the utility called React. This is React. This is a utility given by React for dealing with this. Data structure. So we could have used react. Do map to iterate into the childrens 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 nodes list component that is a class component. So class nodes list extends react dot component. It implements a 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 dot children.m mapap. In this I'm calling this do.props 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 alli 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 types dotstring 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 input 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 prop type tells react that the title is required it is required and its value should be of type string. Now if we give let's say for example title a number value so where data equal to let's 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 type. 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 1 2 3. 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 props and for 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 a NodeJS website from where you can install the latest NodeJS version and once you install so there is a GitHub project provided by Microsoft opensource 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 a 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 app.tjs and app 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 built 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 uh one HTML file called index.html 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.js. In the index.js, we have ReactDOM. Now, as you can see at the top that we have imported react, we have imported react DOM imported the index from the solution structure. Now, ReactDOM.trender calls the parent component which is the app. App is the name of my parent component. So if I go to app.tjs 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 a image with a class name app logo alt equal to logo and h1 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 ReactJS that you have to compose your or decompose your complete application into multiple subcomponents. So at the top there will be a parent component and there will be subbranches or branches of that particular component. So the first component the parent component is app. Inside it I have called three different components. One is the demo class another is author and another is 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 over here this dot props and what is the attribute name? The attribute name is the demo class. The second sub component which is called is the author. Now author again has a attribute called author name which is used in this component class author extends component render implementation and then a return statement this do.props dot author name which means that whatever attribute to define over here can be used in the component by using the syntax this dotprops dot attribute name. Now the third component is a little bit different. The attribute name is a student name. 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 within 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 statement. After that I have done some calculations. So you can see here calculation 4 - 2 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.json file. So what is package.json. So package.json you can say is the introduction of any reactbased application or you can say the basic information of that reactbased application. So it gives me about the name about the version about the private dependencies and the 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 how I have to write it. So in the NodeJS 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 a image a text and this is react classes by ripple gen 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.tjs. 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.js and start making some changes in the code. So I'll start with again basic JSX elements so that you can understand how we can write JSX. This is a very simple example again react. H1 hello world. So if I go on the screen, I have not saved it. If I save this file and if I go to the screen, it shows me hello world. I have not refreshed the screen. It's very much reactive in nature. Okay. Now let's talk about some more examples. We'll quickly see some more examples. JSX. I'm just showing you as of now JSX props and components examples. Once this will be completed, then we will talk about state life cycle events and the remaining concepts of ReactJS. So in this particular example how you can add your JSX in the previous example if you have seen that in the react. I have added the complete element as the first argument for react. But there is one more practice which you can follow that instead of writing the complete JSX or HTML expression in the react. First parameter what you can do is that you can create a element outside the react. and then pass that element in the react. Method. So what I have done is that I have created a dummy text and created a const element. In that I have created a div structure. In that div 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 JSX expression is created, I can pass this to react. 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 expressions or JSX elements because your JSX elements can go bigger and bigger. If it is a single line JSX expression or JSX statement, you can very well write it in react. But if it is very big or going to become very very big then you can put it outside react. In a constant element and then you can pass the react. 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 react dom.render. So how the data flow goes it goes from react. So first we will see what is passed over here. The element which is passed is const element. Now in this const element what we are passing is in h1 hello format name and we have passed props as 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.last name is used as in the arrow function which are passed to this particular function as the properties. So return user dot first name and return user.last name. And in the react dom. 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. Hello format name. Format name is calling a user. So user is whipple gen. So hello ripple gen because whipple is the first name and gen is the last name. So let's close this quickly. Now let's talk about some other example that how you can render the elements in ReactJS. Now we'll start with react. In react. There is a parent component which is clock. Now what is happening in this clock is that this clock is declared as you can say class component. So class clock extends via dot 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 dot state we are passing date as the new date. In the component did mount and 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 tick function. We are setting this with the date new. Now what will happen that in the render method there is a h1 hello ripple and in the h2 how we set the state please remember that we set the props using this.props dot attribute attribute name and this likewise we set the state this dotstate dot attribute. So here what I'm doing this dot set state dot date dot to local string which will show me the current date or time. So hello ripple it is 10:36 p.m. that is how we can set the initial state and final state in ReactJS. Now components and props. Now let's talk about what are the components and props. So we already saw that in react. Here 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 div some P tag some H1 tag but in this particular example I'm passing a component to the constant element. The component name is welcome having some attribute called last name. Now in the definition of this particular component which is function welcome I am returning h1 hello props.last name. Now what is last name? Jen. So let's save this and let's check the output. You can see here hello last name. This is my last name. That is how you can render the components and props in ReactJS. It's very simple, very straightforward in nature. Now 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 called message having attribute message having the value as null. Now in the react.trender I'm 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'm 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 in native JavaScript and jQuery we used class equal to some name to let's say style any tag or component in JavaScript of jQuery. But in React we use the class name. This is a keyword. So instead of class we use class name. 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 text rendered is ripple box because the text is given over here is ripple box. So this is a box is small you can say a class which is defined. So if I go to in index dot CSS this is the box is 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 ReactJS. Now I will show you a very good example of ReactJS that how you can implement a multiplechoice question kind of functionality in ReactJS. Very important to understand. So let me close this. So for stopping this npm start you can press Ctrl C on your keyboard. It will ask that you want to terminate the bad job. You can press yes and then press enter. I'm just opening another example. Let's close everything. Just open this in Visual Studio Code. A very good example. We will see that again the same example uh index.js I have app.js defined and index js. In index js I'm calling react.trender. In this the parent component will be called. The parent component is app and here in app.tjs this parent component is written as a function component. You can see here that it is written as a function component. Right? So let's run this code first of all to see it running. So for running any react base create react app application you have to use the command npm start. So I have just entered the command npm start and pressed enter. So it will open up in the browser. So meanwhile we will see the code what is written in this function component in app.tjs. So in index.js I have written react. This is the parent component and document.getelement by ID where I want to display or render the output. Okay. So let's go to app.js. So in this app.js 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 specified 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 have written some static text. So it's running as of now it's 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 multiplechoice kind of functionality. multiplechoice question quiz you can say. So let me just do the uncommenting and let me comment this react. Else there will be multiple react. 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 multiplechoice question application which is created in ReactJS. 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 highlevel areas or components I have talked about. But at the same time I can split this complete UI into subco components. 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 score area. In this score area I have two subcomponents the correct answer and the incorrect answer. And in the question area I can have two subcomponents 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 go is correct and the state is changed to correct equal to one. 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 I'm 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 or 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.render. Now in this react. The first component or you can say the root or the parent component which is called is the quiz component. Now let's go to the quiz component. Where is the quiz component? So 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 initial state that is this dot 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 a render method. So in this render method in the return statement I have two subcomponents which I was telling you about that this particular quiz can be divided into sub components two subcomponents one is the quiz area and another is the score area. So you can see here one is the score area which will have the correct answers and the 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 the score area component. This is the score area component. As I told you that this again score area component can be divided into two subcomponents. 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 subcomponents 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 one 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 let's say wrong answer so it becomes a incorrect answer. Right? So that is how you can divide a react application or decompose a react applications into components or subcomponents. 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 subcomponents of the score area component. And then this quiz area is divided into the question and the answer list. So you can see over here that this quiz area is divided into question subcomponent and the answer answer list sub component. So these are the three important aspects and then we'll move forward to the other ReactJS fundamental which starts with states. Okay. So till now we talked about the fundamentals of ReactJS wherein we talked about ES5 and ES6 refactoring. We talked about what are the advantages of ReactJS and we also talk 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. 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 are states in ReactJS? So just like we have props, we talked about props in ReactJS which is used for data management in ReactJS. So in addition to props, React component have another way of holding the data and which is called a state. So what is a 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 eyes state changes event has happened on this particular eyes and because of this change of event state changes. So what is the state or the event which has changed over here let's say we have increased the temperature and because of this increase in temperature the ice has been converted to water. So what we can say is that the previous state of this particular object was ice 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 are mutable 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 are mutable. 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 and behavior. So 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 central to any tree and around it revolves the props and the state. But the important thing is that state should be kept simple as much as possible because we know what are props. 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 passed in by a component parent. So this value is passed to another component as a prop and the value is again passed to another component as a prop. Its 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 composibility of the component. So when we talk about props we have 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 composibility of any component. So when we talk about state in ReactJS, please remember that to use state in ReactJS, 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 a state? A state is just another way of holding the data in ReactJS. Now this is something very important that components in ReactJS can be in two forms. You can create again two types of component. one is a stateless component and another is a stateful component. Now what is the difference between these two stateless 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 stateless it calculates the state internal state of components and what is stateful? It is the core or heart of ReactJS you can say which stores the information about the component state in memory. The stateless components they never change the 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 states. The stateless components they contains no knowledge of the past. So for example, if there was a 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 inputs small small input same inputs you can get the same output. In stateful component it receives information from the stateless 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 ReactJS components. So as we talked about what is a stateless. So all functionbased components can be considered as stateless ReactJS component. But here we are talking about that when we are talking about state in detail we'll talk about state and we'll see many examples. So we will talk about only classbased components and not the functionbased components. So that's why we are saying over here that function based components can be considered as stateless ReactJS components. So stateless ReactJS components. So which means they are pure JavaScript functions. So we don't need to have state over there in stateless ReactJS components. But as per the future trend and the latest technologies we are using stateful ReactJS components which keep track of your previous state, your current state and probable the all the future states. So all class-based components can be considered as stateful ReactJS components and stateful ReactJ components inherits from a particular class called React do component. So state 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 stateless component and the stateful component in ReactJS. Before going to the demo I will talk about something called set state. So as we are saying that there are stateful ReactJS 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 the 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 new state with the old state. So for example your new state value is one and the previous state value was zero or maybe false and true. The latest value will become the combination of the new state with the 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 and 2. So a is equal to 1 and b is equal to 2 respectively. Now calling set state what will happen? So calling set state with the property b equal to 3 and c equal to 4. So it will produce a new object where b will become three and c is equal to 4. But the previous value of b was 2. So that is how the property of a remains unchanged. The property B in this case is overwritten by the new state and in this object of the state property C is newly added. So in addition to changing the state of 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 ReactJS 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.html a simple HTML file where I am calling a script called like button.js by using the script tag. And in this like button.js JS script I'm using the class component and the concept of state. So this is my first example or you can say first demo a very simple one to uh let you understand that how we can work with react js state feature or you can say aspect because react thinks of a component as a state machine and you can use this state to hold the component state. So let's write this code. What I want to do is that in react.trender render I'm 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 component. I don't want any function component anymore. I'm just commenting it and I have commented this and I'm also commenting this. Now what I'm going to do is that I'm going to write a component with the name let's say app. How I will write it? I will write class app. It will extends from a parent class called react.component. And in this react component, you have to specify a constructor which will have the parameter as 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'm setting over here. And this dot state I'm setting is let's say for example light is my property and initial value is false. And then you have a event for example uh this dot handle click is equal to I'm binding this event to the class this dot handleclick do.bind bind to this. That's it. So we have set the initial state and what we have done is that we have bind a 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'm just writing a a variable called where text where I'm checking the state. So this dot state dot like I will check this using a turnary 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've just created a variable and then I will have a return statement. Now what I'm going to write in this return statement, I'm just writing a simple JSX over here. A very simple JSX. I'm going to write a P tag. I'm just passing this text as an attribute in the parenthesis. I'm just writing a demi text. Now what we are going to do is that we have method handle click which we are going to define now. So handle click based on a event and in this event what I'm saying is that I'm 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'm setting the initial state. It has a 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 there 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 on 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 liked equal to false. Now I want to set the final state. Now final state is set by as I mentioned this dot set state. Now let's define the property over here. What was our property? The property name is like 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'm 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 in index.js and just save it. So what we are doing over here is that in the react. I'm calling a component. This component is defined in your app do.js. Now in this app dot js 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.js like button. Correct? Now what will happen that you have set the initial state using this dot state equal to liked false and in the handle click whenever that pt tag on click event will be called this handle click event will be called which will set the final state of this particular ptag. So what we are saying is that my initial state is false and whenever a button or any control will be clicked I am changing it to true. So I'm 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 uh button like it is showing 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 ReactJS but later on if you want some more operations or more frequent flow of data in ReactJS 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 stateful components. So for example, if we have let's say 10 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 10 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 state. So what I'm going to do is I will create more state examples or state demos to show you the concept of state in detail. I'm going to create a class component. So class app which extends from react dot component. I'm using a create react app GitHub project Facebook project you can say. And in the react dom. I have to call this app component. So let's call first this in index.js this particular component app. And then in app 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 we have to create a constructor which is passing the props and then in constructor what you are going to do you are going to set the super keyword. This is the first and most important thing to do in the constructor. And then what we are going to do in the constructor as I mentioned that the best place to set your initial state in ReactJS is the constructor. Okay. So I'm going to write this dot state. I'm setting the initial state over here. Please remember that if you have to set the initial state, you have to do it with this dot state. In this dot state you can define any 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 header. 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 state. So I'm saying render and then I'm saying return. In this return what I'm going to do is that I'm going to define my some custom you can say JSX. So let's define in return. So for example I have a div. I want to write a div. In this div I have H1 tag. In this H1 tag I will define 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 header because header is a property which we have already defined. And here I want to say this dot state dot for example content. In the previous example, you might remember that I used this dot props dot attribute name. Similarly, in state also while 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 dotstate dot header and this dot state.content. So let's 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 div what I'm doing is that I'm doing class component or you can say creating a class component and in this what we have done in index.js that in index.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 and just like we use props in this do.props dot attribute name the same way you can use state just like this dot state dot your attribute name in this case your attribute name was header and content. 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 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 where I'm writing let's say two more subcomponents. What I'm going to do is that in this div I have a div over here. I'm going to define two more submponents. So my parent component will be app and then I have two sub components for example let's say header and the content. So instead of this H1 tag and H2 tag which I have created what we can do what 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 where 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 header. 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 name 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 render method in the return statement. It has two child components. So we have to define these child components now. So what we are going to do is that we are going to define these two components now. So let's define these. So what I'm going to write is that I'm 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 subcomponent is the header which is having the prop value as this dotstate dot header and another prop value as this.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 div vhub. So I will say div and then I will say h1. 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 props dot in the header props. What is the name of the prop? its header header prop. 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 say dev. 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 prop attribute that is content prop. So what I will say this dotprops dot content prop. 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 subcomponents. 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 we were directly using the state value. how we were using state dot header and then in a 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 run the npm start command for this create react application. So you can see the output in local host 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 value is content from state. This was the direct way without using the props. How we have used the props by using the subcomponent concept. So let's implement this sub component. Yeah. Now what we are doing is that we have defined two subcomponents which is header and content. These are the two sub components class-based components and we have passed the value as props. Now you can see this dot state 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 state in ReactJS 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 ReactJS. But I will prefer I will recommend that you can use state with props and if whenever required or whenever you can say 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 state together in the same application. Now just a few tips of using state in ReactJS. 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'm 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 dotprops as we use here this dot state and here we use this dotprops. So this dotprops and this dot state may be updated sometimes asynchronously. So you should not rely on their value for calculating the next state. So if you want to set the value of the next state don't rely on the value of this doprops or this state. And the third thing which I want to tell you about state is that state updates are merged when 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 side for using state in ReactJS. So let's come back to this PPT and let's talk about the another aspect of ReactJS which is life cycle. Now what is life cycle in ReactJS or what is the use of adding life cycle methods to a class component in ReactJS? React provides various methods which notifies when certain stage of life cycle occurs called life cycle methods. So there are many methods in uh ReactJS which notifies when any stage of a 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 ReactJS 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 ReactJS 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 freed. So that's why we 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 dismount. So these methods are basically called the life cycle methods. Let me give you an example. Component didmount. This is a life cycle 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 ReactJS 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 DOM. It is just creating its way or about to make its way to the DOM. This phase you can say consists of the following methods which are invoked in a predefined order. So the first method is get default props get the initial state component will mount render method we talk about and the component did mount and as I mentioned that component did mount it method runs after the component output has been rendered to the top. So different methods they have their different you can say usage in any life cycle of a ReactJS 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 has reached the DOM it is added to the DOM they can update and rerender only when a state change occurs. So basically in the updating phase once the component is added to the DOM they can update and rerender only when a state change occurs. So this phase consists of the methods for example should component update component will update render and component did update. So please remember render is a common method in almost all the phases or the life cycle of ReactJS 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 component 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 and sets it. A component may choose to pass a state 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 has been rendered into the DOM. So in the initial phase what it was doing it was making its way towards the DOM in the initial phase. In the updating phase what it was doing that it has been rendered on the DOM. The component has been rendered on the DOM. Now the third phase is props change phase. After the component has been rendered into the DOM, the only other time the component will update apart from the state change is its props value changes. So please remember that through state we can change the value or through props also we can change the value. Just like we saw that this do.props.attribute attribute name for example this.props.name just like that we can say that this state attribute value just like we saw in the previous example. So what we are saying over here is that this dot props do attribute name can change can make the changes in the component and this 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 did update. Of course, render is a common method in every phase of the life cycle 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 DOM. This is called unmounting. So, we were talking about the mounting and the unmounting. Mounting means when the component is added to the DOM and unmounting means when the component is removed completely from the DOM and this phase only consist of one method no render method over here the only method which is there in the unmounting phase of a ReactJS application is component will unmount. Now let's see how the life cycle goes in a ReactJS 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 componented mount 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. where different methods could be called. So what are the different methods that component will receive props, should component update, component will update, render and component did 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 react dom.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 DOM again the life cycle start from react. 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 life cycle methods which we talked about. So so we talked about component will mount, componented mount and so on. So what happens with component will mount is that it is fired once before initial rendering occurs 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 amount. It is again only fired once in any ReactJS application after initial rendering occurs. It can use this dot getdom 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 occurs. So there is you can say very a minute difference between component will mount and component did mount. Will means uncertaintity. So it is going to render or the initial rendering has started but it has not been yet rendered on the DOM. And component did mount means it has rendered on the browser or on the DOM. It will be fired once the initial rendering on the DOM occurs. The third method is component will update. It is fired after the component updates are made to the DOM. You can use this dot get DOM node for updates over here. The other method is component did update. Now what happens with this method is that it invoked 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 DOM then you can call component did update and this method is not called for the initial rendering. Please remember this is very important that for initial rendering of the ReactJS 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 did update component will unmount. We already talked about this that this is a single method which is called in the unmounting phase of the life cycle of a reactjs application. It is fired immediately before a component is unmounted from the DOM and it's a very good place to remove message listeners or you can say 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 or state are 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 constructor that whenever we are using the class component in ReactJS, you have to use the constructor. You have to pass the props and then you have to use a super keyword. Now what is this constructor and 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 functionbased component. But here we are talking about state. So our focus is for class components. Please remember if you are not binding 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 or bugs in your application. So that is why it is said that the super keyword should be called before any statement in your ReactJS application. So first you have to call the constructor and then you have to call the super keyword so that this do.props should not become undefined. So what we are saying is that typically in react class based react 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. Please 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 event handler method to the class instance that will be done in the constructor of the class. Now this is just a 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 unmount 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 componented 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 dotforce update and the different methods which we can use in the updating phase is component did update and finally in the unmounting phase there is only one method which we can use which is component will unmount. 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 and life cycle. Now another important aspect you can say a very important fundamental of ReactJS 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 hover, key press, all these are called events in ReactJS. 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 a 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 event work in other UIs as compared to ReactJS and then we will talk about that how events work in ReactJS. Let's say I have a control let's say three controls or many controls button type of control. Now what happens that in other UIs on every control you have to implement a event listener and a corresponding event handler. This is very much required which decreases the performance of the application on the DOM 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 a event listener is implemented a corresponding event handler will be required. So that is how the different UIs or other UIs 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 then you will have only one event listener and one event handler attached to it. So which increases ultimately the performance of ReactJS application. Please remember that React events are named using camel casing rather than uh lower case. So you have to define events or you can handle the events with camel case only. And with JSX you can pass a function as 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 ReactJS let's see some of the demo of handling events in ReactJS. So for that I'm going to show you a example. We have talked about state. We have talked about props and JSX and all that stuff. So this is just uh you can say playground which I generally use to work with ReactJS which is codependent.io. So in this particular example what I've 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. So this is the react. Component which is login control. Now if I go to login control which is a component. Now in the login control 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 logout click. I'm 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 that please sign up and showing me the button of login. What is happening in handle login click and handle logout click? We'll 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 dotstate dot is logged in. 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'm taking a let 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 reactjs on click is a event this event listener is bounded to a event handler so this is binded to a event handler which is handle logout click and this is on click event is binded to a event handler which is called handle login click. So we'll see what is happening in handle login click and handle logout click. In handle login click we are setting the state and we are setting it to true and in the handle logout 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 login button and log out button. So I have two function components login button and log out button. So what I'm doing is that I'm again calling the event that is on click equal to props.onclick and in the greeting method what I'm checking is that if it is logged in then it will return another component user greeting which is again a function component and then if it is logged out then it will say guest greeting again which is a function component. So that is how you can use events in ReactJS. Now let's see another example of using events in ReactJS. So what we can do is that we have to start from react. In the react.render what we are doing that we are calling a component which is toggle. So this will become my parent component. Now in this toggle what I'm doing is that I'm writing the constructor that is very much required for a class component because I'm setting the state. Then there is a super keyword. In the this dot state I'm defining a property is lockdown true. So is toggle on is toggle on property is always true and I'm binding a event this dot handleclick. So this dot handleclick dotbind to this particular class and in this handleclick event what I'm doing is because I have used a button on the button I'm calling an event. 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 this dot state 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, the text becomes off. If I 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 is toggle 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, this dot state is toggle on. whenever it will be true the text shown as on. Now once I click on it now the this stateistoolon becomes false and whenever it becomes false the text is shown as off. 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 ReactJS that you have to come up with only JSX based application or component based 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 ReactJS in detail. So what I'm saying is that you can apply JSX components props state and then life cycle methods and some kind of events for example onclick events just we saw 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'm writing over here is that class app extend react.component. I have to define a constructor. The constructor I have to define props. I have to use the super keyword so that this dotprops 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. So 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. Uh let's remove all this. Okay. So let me copy this particular toggle example from here. So what I want to do is so in this particular index.js let me define this toggle. So what we have done is that we have defined the same component toggle over here. And in this toggle 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 a event and initial value of the toggle is true. And then the final value on the click of the you can say button I'm setting the state as this dot set state where I'm changing the value called is toggle on from true to false. Now let's talk about child events. What is the concept of child event in reactjs? 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 event from the parent. 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 a event handler for example let's say update state in the parent component and you can pass it as a prop to 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.js go back to index.js js and let's define a component with the name called app. And in the app dot js, what I'm going to do is that I'm 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 with the props and in this constructor I have to define the super keyword. So that this dot prop should become undefined. Now in this super we have to let's say uh define 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 let's say data and I have to define some data over here. Let's say I say it to initial data. This is my initial data. So my constructor is done. Now I can write here let's say for example end of class. This is just my end of constructor so that you can understand well. Now let's bind a method to this constructor. If you want to bind a 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 bind and this. So by this statement what you say because you have to define this inside the constructor. By this you are binding 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? So you are going to set the value of let's say data because that is the property defined. And let's say 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 state method. Now you have to implement always a 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 end of return statement. Okay. Now in this return what I want to do is that uh let's say create a container. So my container is div and in this particular thing what I want to do is I want to define a sub component because in this particular uh demo what I'm 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'm just taking a prop value over here with the attribute my data prop and I'm saying value of the initial value of the state is this dot state my attribute name is data and then what I'm saying is another prop I'm using is update this is the another prop you can use multiple props multiple attributes and I'm 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 extends react.component. And what I'm going to define here is uh implement a render method. And in this render method, I will have a return statement. That's it. Now in this return statement, what I want is let's say I have a container, a div again. And uh 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 dot 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 prop. That's it. Let me tell you that what we have done in this that in ReactJS 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 component. 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 component. So what I have done is that I have created a 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'm saving this. I'm just clicking and when I clicked it the button 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 subcomponent or child component. 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 these are rare cases but in rare cases you might want a component to hide itself even though it was rendered by some another 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 DOM 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. Let's go back to the slide now and let's talk about some other fundamentals. So refs. Now we will talk about refs. What is a ref in ReactJS? So ref stands 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 refs. So what I'm saying is that ref stands 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 ReactJS. So what happens that in the typical React data flow, props are the only way that parent component interact with their children. So what we have seen is that in ReactJS 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 to modify a child you rerender 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 say and which are called refs. Now the important thing is that when to use refs. So there are particular cases you can say few good use cases for using refs. 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 refs you can apply the refs in application where you triggering imperative animations or you are integrating with third party DOM libraries probably there you can use very well refs. So important thing is that avoid using refs for anything that can be done declaratively. Now how you create the refs? Refs are created using react.create ref method and they are attached to a react element via the ref attribute. So ref is a attribute. Refs are commonly assigned to an instance property when a component is constructed. So they can be referenced throughout the component. So this is very much important about react. Now if I show you that how you can use the refs. So let me go back to the same example. Now ref is used to return a reference to the element. This we have already know now what are the react refs. Although I will recommend that ref 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 refs. In this example, I'm going to show you that how you can use refs to clear the input field. Okay. So, let's remove everything. We have a constructor props this state. Let's remove this method and let's remove this render. Remove this class. Okay. So, we are using the same app component. What we are going to do is that we have a constructor with a props keyword and the super keyword with props. We have the initial state called this dotstate having let's say for example some blank data in this case and then you have this dot update state equal to this dot upupdate state dot bind and let's have one more you can say handler event handler which says this dotclear input equal to this dot clear input dobbind this constructor is closed over here let me save this file and then I'm going 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'm saying is this dot again I have to set the state. So I'm setting the state same value I have to use and that is data. So I am making it again blank. And after that I'm finding the DOM. So how you can find the DOM in ReactJS is react DOM dot you have a method or you can say function called find DOM node. So I want to find the DOM node. And how can I find the DOM node? I can find it using ref. So what I'm saying is this dot revs. I'm just taking a input value that is my input text box which I'm 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 this render method you have to apply the return statement. The return statement we are going to write some HTML or JSX. So I'm creating first of all the container. My container is div. I'm taking a input type value equal to this dot state dot data. So that will be the blank value initial value. This dot state dot data. I am taking a 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'm 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 where on click event needs to be defined. So I'm defining the on click event. The name of the button is clear. So on click what I want to do is that I want to call a 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 wraps where what we have done is that we have created a component called app. In this particular component what we are doing is that we are setting the initial state with a blank value and I have called two event handlers. You can say this dot update state and this dotclear input. Now in the update state I'm setting the value what is taken as a input from the user in a you can say text box. And then in the clear input what I'm doing is that whenever this clear input will be called I'm setting again the value to be plan. But in this case what I'm doing is that I'm making a focus by using the ref on that particular textbox control or 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 vipple and I click on clear you can see it has been completely cleared from here. So that is how you can uh use ref in reactjs. Okay. Now we'll talk about example or you can say a demo a project where the concept which we have studied till now are let me repeat one thing JSX we talked about components props state life cycle events and reps. So out of this eight important fundamentals of ReactJS, we have already talked about the seven important aspects. But before moving to the last ReactJS fundamental that is keys that how you can use keys in ReactJS, let me walk you through a very good example or you can say a small project. So the project requirement 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 whatever 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 ReactJS application. Now what is the step one? 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 ReactJS is all about UI. So you break the complete hierarchy into components, component hierarchy, which means that there will be a parent component, there could be child or subcomponents and there could be sub subcomponents. 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've done is that I have created different colo