Step By Step Mastering React | Mukesh Ranjan | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

31 Lessons (3h 28m)
    • 1. Course Introduction

      6:06
    • 2. React Introduction

      5:04
    • 3. Tools For React Development

      2:40
    • 4. Create First React Project

      4:06
    • 5. React Project Structure

      7:58
    • 6. Components

      6:06
    • 7. Functional Component

      7:07
    • 8. Class Component

      5:13
    • 9. JavaScript XML (JSX)

      6:15
    • 10. Props

      5:59
    • 11. State

      8:10
    • 12. Install Helper Extensions

      4:32
    • 13. setState

      9:38
    • 14. Destructuring

      4:44
    • 15. Event Handling

      6:21
    • 16. Event Binding

      6:30
    • 17. Method As Props

      4:53
    • 18. Conditional Rendering

      12:06
    • 19. List Rendering

      9:30
    • 20. List Rendering And Keys

      1:49
    • 21. Style React Components

      7:40
    • 22. Form Handling In React

      13:15
    • 23. Component Lifecycle Overview

      2:22
    • 24. Mounting Stage Lifecycle Methods

      9:24
    • 25. Updating Lifecycle Methods

      9:14
    • 26. React Fragments

      4:36
    • 27. Pure Component

      8:27
    • 28. React Memo

      3:31
    • 29. Refs

      6:24
    • 30. Error Boundary

      9:04
    • 31. Higher Order Component

      9:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

46

Students

1

Project

About This Class

In this course we are going to learn about React Fundamental in a step by step manner. Below are the topics which you are going to learn

STEP BY STEP MASTERING REACT
    Step 1 : React Introduction
    Step 2 : Tools For React Development
    Step 3 :Create First React Project
    Step 4 :React Project Structure
    Step 5 : Components
    Step 6 :Functional Component
    Step 7 : Class Component
    Step 8 : JavaScript XML (JSX)
    Step 9 : Props
    Step 10 : State
    Step 11 : Install Helper Extensions
    Step 12 : setState
    Step 13 : Destructuring
    Step 14 : Event Handling
    Step 15 : Event Binding
    Step 16 : Method As Props
    Step 17 : Conditional Rendering
    Step 18 : List Rendering
    Step 19 : List Rendering And Keys
    Step 20 : Style React Components
    Step 21 : Form Handling
    Step 22 : Component Lifecycle Overview
    Step 23 : Mounting Stage Lifecycle Methods
    Step 24 : Updating Lifecycle Methods
    Step 25 : React Fragments
    Step 26 : Pure Component
    Step 27 : React Memo
    Step 28 : Refs
    Step 29 : Error Boundary
    Step 30: Higher Order Components

-------------------------------------------------------

See You In The Course

Meet Your Teacher

Teacher Profile Image

Mukesh Ranjan

Learn Everything Step By Step

Teacher

I am Mukesh Ranjan. A Technical Consultant by Profession and Teacher By Choice. I have total 16+ Years of experience. In this 16 years of journey I have worked with Startup to IT Gaint. I have worked on various platform from open source to proprietary. My fields of expertise are Cloud Automation / Devops / Machine Learning / SharePoint. I am passionate about learning new technology and teaching. My courses focus on providing students with an interactive and hands-on experience in learning new technology that makes learning really interesting. I designed the course as per industry standard which you can apply in your day to day activities

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: Hello, guys. Welcome to the new course, step by step mustering. React. In this course, we're going to learn all the important aspect of the reaction. But producto discussing about the topic I wanted to discuss about why actually reused react so great. The anxious is a declarative as well as efficient. Joey's girlfriend will toe build user interfaces very easily. It makes creating interactive us has run and completely pain. Let's with the help off reactor. You can easily design simple views from different estates in your application and react will update and render just the right component efficiently when your data changes. And this gives you awesome user experience. So you must be asking that. Why should I learned reactive? There are so many frameworks every level for the same. Then I tell that react is one of the most popular Jaresko framework and currently is leading the position for Web development. React is capable of building any complex US keeping estate out of the dorm with the help of different Mecca necks that is virtual dome on. Deadwood, told on, ensures maximum efficiency by only really ending notes whenever it is required. Don't worry if you're not understanding all these Jagan's. I'm going to discuss all these things in detail in the coming session and one of the best part off reactors. It is much easier to learn. One would take few hours to loan reactors upon having a good command in JavaScript language . Another motivating factor to loan react joy script tremble is that it has huge community, and that would be really very helpful. If you gotta stuck in any off the issues while creating the application, you can directly approach toe those people for the solution. Another factor, which gives you confidence to loan this stream book is that it is the ring will from Facebook, and there are many companies and there are many application using reactors Main. You weigh development framework application like Instagram, Netflix, PayPal, Apple and Freeze Book itself. It is being designed in tow React framework. So there is no let's discuss about predict quizzical. This court's who take this course. You must have an idea about estimable five. The assess, as well as more than javascript, that is, is sick. If we're having a knowledge about these three topics, then you can easily start this court. You're not having any knowledge about these three topic. Don't worry. I'm having three separate courts on these topics. You can finish those and then come back to this court or no, Let's looking toe the topics. What are the topics we're going to cover in this course? So in this course, I'm going to a start with introducing react What actually reacted once we understand that, then we were looking toe tools which is required toe do the reactive Loveman. Once you understand that, tools, then we will proceed for though on we will get our hands dirty with reactive programming by creating our first project in react. Then we will understand that react project a structure. Once you understand that, then we will proceed for the run looking toe one off the basic building block off reactive programming that its components and there are two types of competent which we're going to discuss. One is the functional component. Another one is the class competent. Once you understand that, then we will proceed for though, and we will look in tow. One of the core concept off reactive programming is the JSX. So we will discuss about what, Actually JSX is Once you understand that, then we will proceed for the on one off the building block off. Reactive programming is props that we will discuss about along with that We will also look in tow the state What actually they state is how to create a state. Why? To use the state to all these discussion we will do once we are comfortable with the state . Then we will proceed further and we will put some extension into the visual studio court that will make our life easy while doing the react development. Once we don't with this, then we will proceed further and we will look in tow. How toe use the set of state weathered to mutate the component estate. Once you understand that, then we will look into the DEA structuring technique in react after understanding the restructuring, Then we will proceed further and we will look into even tangling in the same aspect. We will also look into even binding. Once we understand that, then we will proceed further and we will look into how toe pass method as props. Then we will look into conditional rendering list rendering Let's trending and keys. Then at the step 20 We're going to load about how toe a style our react components. So this is really very interesting topic. After that we were looking toe form handling how to handle forms within react. So this is also very important. We have discussed in a step 21. After that we will look into component lifecycle overview where I have discussed the world . Various lifecycle methods which exist within the class component off react. So in this aspect I have discussed the Step 23 that is more dingus stays lifecycle method along with the Step 24 operating lifecycle methods as well. After that, we will look into react fragments way to use react fragments. Then we have discussed about the pure competent. After that, we were looking toe react member. Along with that, we have also discuss about the traps within react. This is also one of the important topic. While working with react and at the Step 29 I have discussed about how to handle other within react component and how to design the fallback component when any error Auker within the competent. And at last I have discussed about the higher order components on this course is not limited. Toe these 30 topics in between. If I feel like any topic, it's really important that I'm going to introduce for that as well. But at a core level, you must have to understand all this topic to a start. Our toe start, you react journey. So on this note time stopping over, he'll see in the course. Until then, Bob, I take care. 2. React Introduction: Hello guys, welcome to the first session of a step-by-step mastering react. From this session onwards, we are going to start our new Joni width react. So let's start our discussion. So what actually the reactants? So in a simple term, I can tell that the react is an open source library which we used to design the user interface is this liability is being designed by the company called Facebook. There are certain important points we must have to remember prior to working with React and the point cell, react is not a framework, it is just a library that's main purpose is to design the beautiful user interfaces. So as it is a UA library, so that means we can use it with any of the technologies as well as the frameworks you can use. React with Angular, you can use react with uj is we are not aware about Angular and Angular and VJs is a java script that can be used to design the web applications. So you must be thinking that if it is a live feed, so how you can other important aspect of the web development like handling of HTTP request or how we will design the routing logic. Then I would tell that you don't have to worry about all these aspects of the web development as React go really well with other library which take care of all these aspects of web development programming. So now let us proceed further and let's understand that what actually the motivation to loan the React library. So to answer your question, I would say that in the recent year, react is one of the hottest technology that most of the companies adapting. So we've, most of the companies are adapting. So that means we have large number of job opportunity after learning react. So this is the point number 1. Number two is the success of any frame work library depends upon their users, how many number of users is being using, product. And believe we, the ax falls into that category where we have large community that helps us to design the better application using react. So that means whenever we go to stuck somewhere in our designing or development of web application, then we can easily reach out to those poor room to get the answers of the question. So now we get enough motivation. Let's understand that what actually the architecture of react, react is a component-based architecture. So which basically breaks down the application into smaller components. And each component is performed their respective design tasks. Who with the help of this component-based architecture, we can easily design of the complex design in a simple manner. So for example, if we want to design a website with the help of React waste architecture, then it will look something like this, where we have header, footer, left navigation, right navigation. And this one is the main content. So all these section can be designed as a separate component while designing this webpage. So here you must be asking that why actually we use component-based architecture in reacts with the major benefit it offers is reusability of the code. For example, you are designing an application where we are having header and footer this weekend leverage in other application as well by keeping this component as a configurable components. So now we have understand that what actually the component-based architecture is. Let's talk about the programming parity. So there are two types of programming paradigm. One is the imperative, another one is the declarative. React is a declarative buried him. So what does it means in a simple term? I can tell that with imperative paradigm, we have to handle the every aspect of programming, like writing the control flow logic. For example, writing the code in the vanilla Java script, where we have to manage every aspect of the program to know if you talk about the declarative paradigm is another way of programming paradigm where we need to just pause the instruction. The thing, for example, if you ever been used CSS. So while writing the CSS file, we are passing the declaration for each of these tiles. That is declarative. Programming. For example, if I want to color my div, I can specify that ID of the div along with this tile and remaining thing we will leave to the browser, what browser is doing under the hood. We don't bother about how we're applying red color while providing the declaration for color as red. We don't have to bother about this. So reactive programming falls into the same category where we need to pass the instruction in the form of J6 declaration that we will loan coming session. Don't worry if you're not understanding about these differences. After finishing this course, I will show you that. You will, you will understand that why React is declarative programming for the time being. Just remember that React is a declarative programming paradigm, which is all work and abstract the inner detail. So on this load time is stopping over here. In the next session we will talk about tools required for React developments. So see you in the next S until then, bye, bye, take care. 3. Tools For React Development: Hello guys, welcome to another session. In this session we are going to learn about tools required for React developmental. Let's look into the details. So whenever we start learning any new technologies, then we must have to understand that what are the tools required? Why learning technology? So in the same aspect by learning the react, we required these three things. First one is the node, second one is the text editor, and the third one is the react project is structured creator. So let's look one by one. So the first thing which we required is the node, which is our execution engine of reactor to install Node unique to visit this site, HTTPS NodeJS dot toward G. So let's go into that. Let's click on this link so it will take us the site. There are two option you are getting. One is the entity S1 and another one is the current one. Always go with the LTS will, as LTS is stable, wasn't. So once you click on this, then it will ask you to save the file. You need to save the file. And once it is being saved, then you need to run this MSI file. This is for Windows installation. If we want to install in other systems like Linux and Mac, then you need to go inside the downloads and then you will get other installable file as per your operating system. So you need to download it and run it. So once it is being done, let us proceed further. I haven't trend because I have already installed it. So once you have installed the node, then you require a text editor. I prefer Visual Studio code, so I'm going to explain this one. So to install Visual Studio code, you need to visit this site and heal. That is HTTPS core dot visually studio.com. So let's click on it. So it will take you to the Visual Studio code, say so now once you have reached to the site, then the post-test, if you need to download, the installer, will file as per your operating system. I am using the Windows one, so I am going to click on this button. If you are using other operating system, you need to click on this, then it will give you other options for different installable file as per operating system. So once you click on this and it will give you the option to save the point that is the EXE over here, as I have already installed it. So I'm not going to save this file. And once it is being saved, then you need to run it and follow the wizard. So now we have installed the required tools for React programming. In the next session, we will talk about React project is structured creator, where we will discuss about what are the ways by which we can create to the react project. Mainly we are going to discuss about two ways. First one is the NP EXP on other one is the NPM weight. Once the project is being created, then we will discuss about the folder structure of the react project. So on this note, time is stopping over here, see in the next session till then bug I take care. 4. Create First React Project: Hello guys, welcome to another session. In this session we are going to look into how to create our first react project. So let's start our discussion. So far we have installed Node and the text editor, that is Visual Studio code. So these are the two things which is required to create the react project. Along with that, we also required scaffolding tool. It's ease our world of project is structured creation. If you want to get the detail you vote this scaffolding tool, you need to visit this site, that is HTTP is github.com slash Facebook's lasts create iPhone, react tight hold Apple. This is going to be the tool for project structure creation. There are two ways you can use this tool. The first way is the end PX where you don't need to install it. The second way is the npm. Where do you need to install this Create React tab in your system and then you can use it. We will look into both the ways. So first we will create the help of this combined NBA create reactor and you should provide the name of the project or let's do it. So to create the project is structure. You need to compute the Visual Studio code and forced press control back ticks so it will open the terminal and heal. We need to specify the command. So let's specify it NPN, and then we need to specify a Create React have banned the name of the project. You should be providing the name of the project in a smaller case. So I'm going to specify Hello, react by n px. In total, it will start the creation process, and this process will take almost five minutes. So I'm going to pause this video. Once it is being done, then I will get back to you. So now it has created the projects were to run this project you need to come here and type cd name of your project. Hello, React and peaks coincide the directory. And here you need to specify npm start. And this will run the project. So let's look into that what output it is giving. So once you run this, then you will find this output over. He'll know let's proceed further. To stop it from running, you need to press control C, Then you need to click on Yes, why, and into. So it will stop running. So now we will look into the second way by which we can create the React Project. And the second way is the npm install, Create React f minus g. So we need to run this command first and then we need to specify this command to create the project. So let's do it with at, prior to that, we need to come out from this directory. So we need to write cd dot dot. We need to come one level down. And here we need to specify the command npm, install, Create, React app minus g, and then press in total, it will install the Create React app globally within our system. So I'm pausing it, it will take time. Once it is being done, I will get back. So now we have installed Create React app. So no, let's use it to. We need to specify Create React app and the name of the project. And this time I'm going to specify the low react npm into this will also take the same amount of time, almost five minutes rule, CEO, it has started building it and it has created a folder with the name of the project which we have specified. I'm pausing now. Once it is being done, then I will come back to you so that the project is structured is being created with NPM. So let's look into the output. To see the output, we need to specify a CD and go into the project and we need to specify Hello React VNP him folder. We need to go there first layer it CLS, and over here we need to specify npm start. And in total it will open the browser. And this time also we got the same outputs. So this is the output you will get. So now let's proceed further. So to stop it from the execution, you need to press control C, Yes, for y and into the ALS. So now this is the two way by which you can create the react project. So now we have seen that waste to create the react project. In the next session, we are going to look into what actually it contains. The project is structure. So we are going to look into what actually it contained in more details on this note I'm stopping over here, see in the next session till then, take care. 5. React Project Structure: Hello guys, welcome to another session. In this session we are going to look into the project extraction which we have created in our earlier session. So let's start our discussion. In the earlier session, we have seen that how easy to create a React application with the help of Create React app which we have read through and p as well as NPM. So now it's time to understand that what actually the files and folders involved in this application, as well as how the control flows within the application. So if you closely look into this project, then you will find that it contains three folders and for files. So now let's start our discussion with package.json file decade or JSON file contains all the dependency and scripts required for the project. So if you remember that we have executed npm is starts. So what is happening whenever you are providing npm is start. Then in the backend, it is going to be executed this script. And then the browser is loading our project. If we talk about the dependency, we are using the React library so that the reason here you will find that it has incorporated reactivities of 16.13.1. So now proceeding further, if we look over here, then you will find that we are having backup hyphen blog.js and this is being generated whenever. If we are using NPM, then on that time it is going to generate this log file. There is another packet manager tool that is Yon, if you are using yawn, then the lock file is going to be on hyphen blog.js. And as we have used npm that the reason it is showing over here packet hyphen blog.js ON this foil ensures consistency while installing the dependency. These fights are auto-generated files, so you don't have to worry about these files. The other file which we are having is the gitignore and the ReadMe file. So this is also auto-generated so you don't have to worry about as we are not going to touch this file now. But I want to give you some information about this file. This file mainly related to the Git version control. In this file we are specifying those information which we don't want to pushing to GitHub for example. He'll It has a specified that don't push anything to get up whenever you are pushing this project, then don't push anything from the node module from this PNP. Pnp, PNP ab.js file helps us to restrict file which we don't want to push to get help. So now let's discuss about README file. Readme file is used to write the information about your project and this information is being displayed on GitHub whenever it is being pushed. This file, you keep the information like how you can enlist lies your project, how you can run your project, how you can test your project. So see you, it has given this information so that it is really very easy for other users, whoever it is, whether it is a developer, tester, or any person who is part of this project. Now so far we have discussed about all the files in this project? No, let's discuss about the folders. The folders. First folder we are going to discuss is the node modules. So this is the folder where all the dependency which is being used within project is being installed. You can find many of them over here that is being used within this project and these dependencies being generated when we have around Create React app command. In simple term, I can tell that whenever if you are installing any kind of a dependency within your project that is going to sit into this folder that is node undiscovered module. So whenever you are running NPM install to install the dependency that is going to sit over here. Now let's proceed for though. Now we are having a public folder this contains, so here we have various file post we will discuss about manifest dot g starts with this while we don't use in this course as it is related to progressive web app. So we are not going to touch anytime this file. So one of the most important file over here is the index.html file. So now let's discuss about index.html. And this index.html file is the only HTML file which existed within your application. As we are building the single-page application. Within the application, the view might be changed, but this HTML file might get self-talk. And the best part to work with this file is we are not going to touch this file whenever it is required. We are going to turn the head section, but definitely we are not going to touch the body part because we want to react should handle this. And because of that, we will find over here we have only one div tag, that ID is root. So that react will take over this div tag with the help of this id that is roots. So now the question over here is how and where do we need to work while designing the React application? For this, let us look into another folder that is source folder. So here we will be working most of the time while designing the React application. So let's talk about this. So the starting point for React application is index.js file. Within the index.js 5V is specify a root component that is AB. Along with that, we also specify the DOM element which is being controlled way react, that is the root over here. This is the same rule which we have an index.html over here. So let us proceed further. How it will this app component is being rendered within this DOM element and the logic within App component we are writing in app.js. If you come over here, it has returned the following code over here, so that is being displayed within the browser. So let's look into that. So now let's run it. So to run it, we need to first press control back ticks, so it will open the terminal. And here we need to specify npm. Start with this will run the application, and this is the output. We got. This we have already seen. Now suppose that if I want to change the text over here, which is written over here, so where do I can do the changes? So too do the changes. We need to go to the app.js and where we need to do that modification. So I want to remove this one and I want to print hi, hello frog reactor. We can tell it like this. Save it. Let's look into the output and then we will find that it is being changed over here. So here we get 1.2. Remember, that is app component is the main component which provides the views to the application. So now let's proceed for those. So when we generated this application with Create React app, so along with app.js, it has also generated app.use CSS contains this tiling for the application. For example, if we want to change some styling from this color to blue, I want to change the background color. I'm going to change to Blue. Save it. Let's look into the output. So now you will see that the blue background color is being applied. So this gives us another point to remember that is whenever if we want to change this tile, then we need to change it to app.js file. So now let's proceed further. Now there is another file that is app.use test.js. This file you use to write the unit test cases. This is a topic for another course which I am going to design for the time being, you just ignore this one. You should just remember that whenever you will see such fine, that is mainly related to the unit testing and where we write the automated unit test cases so that we can ensure that whatever the component we have written that is working properly. So now let's proceed further. There is another file that is that logo Dort SVG. So this is the same logo which we are seeing there, that is this one. So now there is another file that is always poker dot js. This is again related to the progressive web app. So that's it all about the project structure of react. Whenever we are creating with Create, React app or Howard get executed. So whenever you are running, NPM is taught the index.html get sold into the browser. That index.html calls index.js. And this index.js is being associated with app component, that is the root component. In this example, we are using app.js where we're writing our custom core, whichever we want to display within the screen in the coming session, we will also look into how to create a class component and how to create functional component that is being incorporated within this app root component and that is being solved to index.html altogether. And this way we can achieve the component based architecture. So on this note, time is stopping over here. In the next session we are going to discuss about the components. So see you in the next session till then, bye, bye, take care. 6. Components: Hello guys, welcome to another session. In this session we are going to discuss about the details evoked component. So let us start our discussion. So in the earlier session we have discussed about the React is a component-based architecture. So now the cushion over here is what actually the component is. To answer your question, I would say that a component is a piece of code that represent a single part of user interface, all webpage. For example, if you remember our example over here, we have represented with this diagram where we had having a header component, footer component, left navigation and the right navigation. And at the center we are having the main content through all these portion is being scattered into a component. And the container which contains all these components are called app component. If you closely look into this diagram, then you will find that each of the nested component displaying their own user interface, for example, headed is representing the header portion, footer is representing footer portion. Same is the case with left navigation as well as the right navigation. And the main content Is represented within main content component, even though it is a separate component, but it is representing a single application. And with the help of such architecture, we are getting better control to design the robust application. So now the here, the first to remember comes for this session is with the help of this architecture, we can reuse the design component. For example, if we want to leverage the header and footer component in the other project, then we can easily use it by changing the parameter within the configuration of header and footer component. Configuration is applied through the concept of a state and props which we are going to discuss in the upcoming session in more detail. So note the other point to remember is that accompanied can be nested. For example, over here we are seen that app component contains another five component that is nested within App component same v. We can also ness the component within main component. We can introduce another two or three sub-components within main. As per our application logic, you have to just remember that a component can be ness states who know The next question comes in our mind is how these component is represented through code. So let us understand with an example. If you remember the earlier example where we have generated this code through Create React app and where we have explained the vote app.js. So app.js is the representation of the component through code. So in summary, I can say that it is nothing but a Java Script code. Logically we are telling it as a component in the upcoming session, you will also find that along with JSON extension, we will get some component with DSX extension that is also a component file, which we will discuss in more detail in the upcoming session. I have mentioned about this term because i want that you should aware about this dome so that when I introduced this term, then you will relate it with the component. So know, let's proceed further. So now let's discuss about component types. So what our component I react offers. So React offers to taper component types. The first one is the stateless functional component and the another one is the full class components. So let us first discuss about the stateless functional components. So basically functional components are basic JavaScript functions. So if you closely look into this code over here, you will find that the I have a function where we are passing the props as a parameter and within that we are using into HTML piece of code here I have represented with the arrow function. But if you look into the example which we have created through Create React app, it has created the function with the function keyword. For example, if we look into over here, then you will find that it is being created with the traditional approach. So here you must be asking that why it is called stateless? So to answer your question, this is because it simply accept the data and display them in some form. For example, if we look into that here we are passing the data in the form of drops, and that is being displayed through HTML elements. And nothing more than that when we discuss the vote to yet is stateful class component, then you will get more differences. But here I would like to introduce some tone so that you will be aware about whenever if we are using class component, it contains various lifecycle methods. No, you'll get another cushion. What actually this lifecycle method is, then I will tell it to heal won't rule of thumb for any technological, whichever technology you will learn, you will find that it is being adapted through real-time environment. For example, take the example of human being. We also have a stages of light. We born, we become charity, then we recommended, then we become older, and then we become die. So all these is TJ xat, our lifecycle methods. So on the same 30, react also offers class-based component that has lifecycle methods. We will discuss about all the lifecycle method in the coming session for the time being to understand the difference between the functional component and the class component, or say a stately it's functional component or a stateful class component. You should know that functional component doesn't have lifecycle methods support, but class component does have the lifecycle methods support through what are those lifecycle methods are when we will discuss about class components in more detail for the time being, you just remember that class components supports lifecycle method, but functional component doesn't support lifecycle method. Another difference, you will find it over here, class component or a stateful class component, extended through component class, or say inherited through component class, which contains all the feature of parent component class. On the other hand, if we will look into the functional component, then you will find that it is a simple function which is returning the HTML elements. So these are some of the differences between the functional component and the last component. In the coming session, we will discuss in more detail by writing the respective code for each tape of component. So on this note I'm stopping over you see in the next session till then, take care. 7. Functional Component: Hello guys, welcome to another session. In this session we are going to learn about functional components. So let us look into that. If you remember that in the earlier session we have discussed about two types of component. One is the functional component, another one is the classe con. So basically I have already been discussed about the functional component. It is nothing but a Java script function where we will return the ES6 code right now, don't bother about A6. We will discuss about mode in another session for the time being, just you consider that functional component contains a function and that function returns the UI element like this. So if you define the functional component in Reactome than I can tell that functional component is a component which receives props and returns the UI element. So to make the concept more concrete, what we will do, let's write a code so that we will understand that what actually the Frankston and how we can write the functional component react. So what we are going to do in this exercise, we are going to create a header component which will display a static text. So let's jump into the Visual Studio code. So this is the application which we have created with the help of Create React app. So now what I'm going to do, I'm going to remove the generated code from here. Let me delete it. So this is the first step, save it. Now the second step, what I'm going to do, I'm going to create a folder structure over here. And I'm going to create a folder called component. And this component folder contains all the component. So the first component which we are going to design is the header component. So now within the component folded, We are going to create another folder that is called header. And this header holder contain the component file, which is going to be header dot JS. And this header.html contain the functional component. So to create the functional component, we first need to import the YAG rom, the React library. And now the second step, what do we need to do? We need to create a function which will return the J ESX or say ASTM L. So you can write it with the traditional way. I will write function. It's given name, header. And over here we need to specify, and within that we need to specify return. So return over here, the H1 tag, I'm going to return and I need to specify header. This is just a place holder I'm going to specify. And then afterward we need to export it so that we can incorporate it into the app.js, that is our root component. So we need to specify export. If we will not express by the export, then it will not be incorporated and we will not get the context of this component. So we need to tell that default and then we need to specify the name. I'm going to tell that headed save it. So now we have written the functional component. Now let's proceed to the next test. And now the next step is we need to incorporate a header component in the root component. So how we will do that first, we need to add it over here. So now let's import the header component. So we need to specify import. And here we need to specify the component name, header and heal. We need to tell that from and then dot and then component. I want to use header. And here I need to tell that. This header component. So now we have incorporated, and if I want to use it, I need to tell that header clues it. So this is now incorporated into the root component that is absolute. Let's look into the output. So now you will find that it has put the header component into the App component and that is being displayed on this page. So now let's proceed for though. So here we have seen that the traditional way of writing the functions on the same note, we will also use the ES6 syntax with the arrow function. So how we will use it, we need to specify cons and we need to tell that header the name of the variable that is called constant, and then we need to specify the parenthesis. And over here we will tell that arrow function. So you have it. Now let's look into the output. Let's do some changes over here so that we will see the effect later with that and save it. And you will find that it displayed the header width arrow. Now let's proceed further. Now let's discuss about some points to remember for this session and the point to remember with regards to export. So there are two tape or export. The first one is the default export, which we are using it. And the second type is the named export. If you write export and remove this one, save it. So what is the difference between named Export and the default export? So the difference is, so when we exporting with default export, then we can import with any other name, for example, XYZ, and we can use it over XYZ and it will work perfectly fine. So let's look into the output and see, oh, there is no error, but no, you are exporting with the named export, then it must be imported with the same name. So let's look into that, save it. Now let's jump into the browser. And here you will find that it throws an error as it is not recognizing this x-y-z. So to make it working, we need to change over here. We need to specify within the curly braces, we need to specify header. And over here we need to tell that header and now save it. Let's jump into the browser to see the output and then you will find that it back to normal. So now I hope you understand the difference between the named Export and the default export. So let us proceed further. So now you understand that what actually the functional component is and how we can design the functional component in React, it is pretty much straightforward process to write the functional component in React, you just have to remember the steps. Step one, you should create a component folder. Within the component folder, we are going to create the folder with the name of the component which we are going to create. And that component folder contains all the files related to that particular component. Currently we are having a single file, header.html. Along with that, we can have header.html, which we will apply this styling into this component that we will look into further session of this course. Once we have created the file header.html s, Then we have created a function over here that is returning the J ESX or CST ML in a more simpler Tom. And once it is being done, then we have exported it after exploiting the function, the context of this component is available within the application and then we can incorporate over here. So app.js, as we already discussed about this, is the root component and all the component will be lead into this component. So over here I wanted to show you the diagram again. So in this diagram I had showed you that we are having five component and which is being placed within the App component. So currently we have designed a very simple static component which contains header, which is a static text. And in the app.js, we have imported this component and then we have incorporated it over here. So this is what I wanted to demonstrate to you in this session scene, the next session where we will discuss about the class component on this, no time is dropping over here. See you in the next session till then, take care. 8. Class Component: Hello guys, welcome to another session. In this session we are going to look into class components. So let's look into that. So in our earlier session we have discussed about the functional component. Now, let us look into the class components. So what is class component in react? In a simpler term, it is basically ES6 classes similar to the functional component class component also receive props. But the difference between both prop passing mechanism, you will find that we are passing the prop over here with the help parameter. And over here we passed with constructor. But in both the cases it returns the js X, which is nothing but HTML piece of code. If you see over here, the functional component is returning this J6 and over here the render function. And within that, you will find that render function is returning this DSX, which is nothing but HTML code. The benefit of using the class component, you will find something called is T and the state of the component is private to that particular component and it is being used to describe the user interface. So to understand it in a better way, let's do an exercise. So let's jump into the Visual Studio code. But prior to that, let us look into this diagram which we are having over here. So earlier we have created this header component with the functional approach. Now to understand the class component, what I am going to do, I'm going to create main component with the use of class component approach. So if you remember the steps, so first we will create the folder within that. So we are going to create a folder over here that is called main content. And within that, I'm going to create a file called main-content ab.js. Now next I need to import it suit to thing I need to import it. One is the react and another one is the component. And here we need to specify component from React c, which will let us know create the ES6. We will tell that class, and here we need to specify the name of the class to make this class has a React component. We need to perform two steps. The first step, it should be extended from React component class, as well as it should contain the implementation of the render method. So let's do it extends. And over here we need to specify the component class. Now the next step is we need to define the render method. So over here we need to specify the return, and then we need to specify the HTML, which is a j Sx. And we will tell that main content, this is simple. Keep it a straightforward TO make you understand what actually the class component is. Now the next step is we need to export default main content. Now, once it is being done, we have created a class component. Now we need to import it in our app.js file, and then we can incorporate it within the code of your app.js. So let's do it. So here we need to specify import. And this time we are going to tell that main content ROM and we need to specify a component. And over here, main content, no, let's add this component into the app. So how we can do that, call it main-content, Lowe's it, save it. Now let's look into the output. So to get the output, as usual, we need to specify cd. And over here we need to specify the name of the project. Once we're inside the project, we need to specify npm start and it will run our application. So here you will see that we have would the main content. It doesn't look like whatever the design which we have seen in our discussion, because we haven't applied any kind of a style on any of the component. How to apply a style on component that we will look into further session. So let's proceed further. So now we have seen how to create a class component. So now you can easily make out what is the difference between a class component and the functional component. The first visible differences. Here we are using the class keyword and which is being extended from the component class. And when we add creating the functional component, we are simply defining a JavaScript function, which is over here, the arrow function. And some time we pass the Brock parameter over here so that we can pass the value to this particular function. So for time being, you just remember this two differences. There are many differences between class component and the functional component. I will introduce all these differences a step-by-step manner. Whenever I introduce a new concept on that time, I will tell you this thing, whether it is being applied to class component or whether it is being applied to the functional component. The point to remember over here is a functional component is a simple JavaScript function. It should be written with the help of arrow function or with the help of function keyword. Whereas the class component is being extended through component class. And it is being created with the help of class keyword. And it contains a method called render and which should be returning the HTML. I know Reactome J6 as an output. So on this tote time is dropping over here. In the next session we are going to have a detailed discussion about DSX. So see you in the next session. Till then, Baba, I take care. 9. JavaScript XML (JSX): Hello guys, welcome to another session. In this session we are going to discuss about J6. So let's start our discussion. So he noted earlier session we have discussed about the class component and prior to that session, we have also discuss about the functional component. And while designing the user interface, we have used some HTML, something like this, where we are returning the HTML tags. And I keep on saying that this is not an HTML, this is G6. Same is the case with the functional component here also, I was returning H1 tag. Now this is the time where we will discuss about what actually this J6 is. So if you go by definition, then I will tell that J6 is a markup language used in order to create React elements. And as per the definition, we are doing the same thing over here. We are creating the markup. Then you must be asking that if the syntax looks like and as HTML behaves like an HTML, then why it is not an HTML? Why we are calling it as a J Sx. This is because the creator of React wanted to give the front-end developer tool that they were familiar with so that they will not go for another learning code who design the UI. So they decided that they should be J6 similar to HTML. And whenever we are writing J6 syntax, then under the hood, so many processing happen by the React framework and then it is being displayed on the webpage. That means if you are creating a div element H1 header and all those element which is used within HTML. And if you are writing within GSA, that will be processed back to the HTML code. For example, if we're looking over here, then you will find that we have applied the style OK class over here into the J6 and with the property's called className, which is being converted to class in the HTML when this page is being displayed to two proof you the point. Let's look into the output. So let's jump into the browser. So here we are having the output like this. Now let's inspect it, the header element, right-click on it, click on Inspect, and then you will find that here we are getting the header. The name of the class is being converted to the HTML class. Earlier it was className, which we didn't really use. Whenever we are using the class name in DSX, we will learn about className whenever we will loan J6 styling in the upcoming session. But here, the intention to show you this is that under the hood it is being converted to class. That is J6. Class_name is being converted to HTML class. So know, let's proceed further. So now the question comes over here is how all these magics happen? That is how J6 is being converted to HTML. So to convert from Jay E62, normal HTML, modern browser uses Transpolar. So hold this work. Modern browsers such as Chrome, Safari, or Firefox don't understand J6 directly. So how does J6 fit into all this? So this is where Babel comes into play. Babble is a build tool used in your development environment that is used to convert the J6 into pure Java Script. And this allows you to build modern apps using J6 without having to worry about rendering mechanism. Babble is not a single transplanted available. There are other variety of trans pillar every level, but bevel is mostly used. So now let's proceed further. Another point which I wanted to let you know about React is that is Jessie's is not only the way by which you can design the user interface, you can design your React application by other way as well with the help of React create element. So let's do an example without using the J6, We are going to create a user interface. So now let's create two header component without using J6. So let's create it. First, we will comment this out. Then we will specify a return. And over here we need to tell that react dot create element. And over here we need to specify which element I want to create. So first I will tell that H1 tags which specify over here S1 and the second parameter we need to specify the optional parameter. So what we will tell that we want to create to a class. So let's specify that. So we will tell that class and the class is going to be header. And the third argument we need to specify what text I want to print. So here I want to print to the same one header with that. Ok, so let's copy it and save it. Now let's look into the output, what output we will get. And here you will find that there is no difference and you can check over here, it has applied the class as well. So let's inspect it and seal it has created the header element H1 and heal. It has applied the class header. So let's change the text over here. Close this one, go to the Visual Studio code header with arrow. And we will tell that without j ESX, save it. Let's jump into the browser. And here you will find the output. So now let's proceed further. So this is the another way by which you can create the react component without using ESX. But the problem with this approach, you have to write so many code as well as you have to maintain the nesting of the DOM elements. And that is really a very cumbersome task when you're codes get increased. And New York component is having so much of nested element then on that time, writing search code is very difficult and very difficult to manage as well. So it is always preferred to use the J6 version of the code. So let's comment this one and let's enable this one, save it. Let's jump into the browser to see the output again. So we have reverted back to the J6. So now I hope you have enjoyed this session and you have to understand that how we can create component using JSC and how we can create component without usage AS X. So this is what I wanted to demonstrate to you in this session. In the next session we will discuss about props. So on this note, time is stopping over, you see in the next session till then, bye, bye, take care. 10. Props: Hello guys, welcome to another session. In this session we are going to look into props. So let's understand what actually proxies so far, whatever we have seen, either it is a functional component or a class component, we are creating the component which has the static values. So now the cushion comes over here is how we can create a component which will accept values from outside. And we can reuse the component without writing again and again. So to understand this, suppose that if we want to convert our this static header into a dynamic header, where whenever a user can logged in, then he should be greeted with the welcome message as well as membership detail. For example, you've heard designing a site which contains membership logic like gold member, Platinum Member, Silver member. So you want to design such logic where user will login, then the name of the user should display along with the details about the membership. So to design such dynamic behavior where component can accept the data from users or say dynamic data from outside. Then props comes into picture. So you can think prop as a parameter within the function which sent through component as an argument and that value is being used within the component. So how we can implement this to the first step, we need to specify the props as a parameter. Over here, it is a standard practice in React, you should give it a name. Props are, props is a shorter version up properties. So you can read it like the properties of header, raise various keys, whether it should be a name, whether it should be a membership, and that we will pass it through the component when we will use a two here. Now I specified that dropped. No, I'm going to use it. I'm going to keep it. Welcome. And then over here, I need to specify the name, this name I haven't defined yet. Whenever I will send it through the component on that time, I will pass it as an attribute. So let's write it. Robs dot name, save it. So now we have introduce a name property over here. So now the second step is you should go to the app.js where we are using this header component. And we need to specify the property like name equal to. And we need to specify the name which we want to pass it. For example, David, and save it over here. So let's jump into the browser to see the output. And then you will find that it has successfully displayed the dynamic value and the value which we are passing through Header component as an attribute. So now let's proceed further. So this, we have seen that how to pass a single value, same way, you can pass them multiple value as it is an object, it is going to be an object. So we can find the multiple, for example, a, I'm going to convert it as firstname and lastname. And over here I will specify the value, right, tell that Johnson, save it. And over here within header I need to specify firstName. And same way, I can use another one, props dot and the name save it. Let's look into the output. So let's go to the browser, so you will see it over here. It has successfully display both the properties. So let's proceed further. So we have seen that how to use props in functional component, let's understand how to use props in class component. So to use the props in class component, we need to use a keyword called this. And then we need to specify host. We need to use the curly braces. And within that I need to specify this dot drops. And the ropes which I'm going to define. I will tell that dashboard message, copy this one. Say wait, now I need to pass this desk port Message attribute. I need to pass some dynamic value. For example, dashboard summary. This is for demonstration purpose. So this message will be displayed within the main content area. So let's look into the output and you will find it over here. It has disappeared. The message which we have passed through an attribute, and this message is being displayed over here with the help of this keyword, this dot-product dot dashboard message. So it is pretty much a straight forward. So now we have understand that how to pass property within functional component as well as the class component. Now there was a requirement which I mentioned to you. Our welcome message should also contain subheading that will display the membership details. So let's look into that, how we can achieve this. So let's go to the app.js. And this time, I'm not going to use this closing bracket. I can use the closing tag over here header. And within that, I will tell that membership detail and I want to print it into edge three-headed three. And over here I will specify the message Platinum Member. No, I have provided this value. So how I can retrieve this value? If you look into the output, then you will find that it is not being retrieved. You will see it over here. I want that below it. It will display them membership detail. So how we can achieve this? Lets look into that. To achieve this, we need to do the following changes. Host, we will wrap this into a single div, as it is a requirement to keep it into a single div so that it will accept by reacts. We'll take it and put it over here. And here we need to specify, we need to specify within the curly braces, then it will accept it prompts dot. And here we need to specify children's David. Let's look into the output. So let's go to the browser. So you will see it over here. It has retrieved that value, which we have passed within the header component. So let us proceed further. So now we have understand that how it is easy to pass the dynamic value within the functional component as well as the class component with the help of props. And we can also retrieve the inner elements within the component with the help of children properties of drops. So this is what I wanted to demonstrate you in this session. In the next session we will discuss about a statin reacts on this. No time is stopping over. Yo see you in the next session till then, bye, bye. Take care. 11. State: Hello guys, welcome to another session. In this session we are going to look into each state. So let's understand this topic. So in the earlier session we have looked into prompts where we have understandable drops. That is get passed to the component through function parameter. If you look over here, we are passing the prop through the parameter. This is an arrow function and this is the parameter of the arrow function as it is containing only single value that the reason we haven't provided the anthesis. So this is what we have seen in our earlier session. No, let's understand that what actually the estate is and why is state is needed. One thing you always remember about prop is that drops is immutable. So that means once it is being assigned, you can't change the value of the props. So this is the issue with props. So to handle such scenario where we want to change the value of a component at runtime, then estate will come to rescue us. So how it rescue is a state is managed within the component and we can easily change the value of the state with the help of set estate function. When we are writing the class component, then we will use this multi-state to assign the state value or a component in a Java Script, DOM state is nothing but an object where we can keep key value pair to hold the information which is required within component. Let us understand with an example. First, we will understand that why prompts can't be used and how immutable behavior of props stops us to update the value of wild runtime. So to make the example more meaningful, I'm going to introduce another property which is containing the color for the div. And this color will represent whether the user is a Silver member or whether it is gold member. So let's do the modification. So let's use the style tag over here. Style I'm going to discuss later in the course, some other session for the time being just to remember that how you can apply a style to the reactive, so you can write something like this. There are various ways we can do, but for the time being, I am just using this one. So here you can specify the double curly braces. And within that, we need to specify background-color. And over here we need to specify the props which I am going to use, and I'm going to use membership type. I'm going to pass a color code over here, save it. Now, go to the app.js. And from here, we need to specify M-type. The user is a Silver member, so I'm passing it, gree, save it. Now let's look into the output and you will find it over here. It has applied the background color, which is representing the person is a Silver member. So now what I want, I want to overwrite this color while seeking of a button called Upgrade memberships so that it will change to gold membership. So prior to writing such feature, let's look into the problem of props when we try to change the value at runtime. So for example, if you go to header.html and over here, if you want to assign a value to the props, props dot M type, and here you are assigning as a gold membership gold, then you will find that it will fail. Because we are trying to assigning the value at which we have already assigned over. He'll, now again, we're resigning prompts value with the gold, so it will throw us the error. So let us look into the error, whatever we will get. So see you, it has throat the same mater that cannot assign read-only property M type of object, this one, so C, It has through the adder over here. So how we can resolve this error? So let us look into that. So to resolve this error, I'm going to change this functional component as a class component so that I can use a state object and build the logic for the requirement. As a state offers us to overwrite the value at runtime. So let's do it first, delete this line, this is not being required now over here, I need to change the export from class and cause two will go. And over here, I need to specify exchange component. Once it is being done, then we will change it to render function render. Once it is being changed, could this out curly braces and within over here, we will specify that. Now the third step we need to introduce the constructor so that whenever an object is being created, it is being initialized. So the pattern should be like this. We need to specify constructor keyword. And along with that, we need to also specify keywords so that it will pass the value to the component which is the superclass of this particular component, header component. So this is a pattern, you should remember it. And then afterwards we need to specify like this dot is state. I'm going to create an object estate. And within that, I'm going to have a key-value pair like M type. And I will specify earlier the user is a silver members who I will specify, agree, save it, and I will remove this one, this emptied from here because I don't want to pass it as a property. So once it is being done, we can also export it as we have used the named export. So I can tell export, then this error will go away, save it. And over here we are getting various era to resolve this error, we need to specify this keyword, this dot-dot-dot drops again for each of the props, which we have used earlier with the functional component. Here we need to use this theme is the case with this one, this dot props and this.tab. So now we should make sure that we are returning a currently we are not returning. So that the reason we are getting below editor makes sure that everything is being returned like this. We should specify over here, return z with the semicolon you should remove it, makes sure that you are closing it to proper place control, X control, we save it. Now this is being done. No, let's look into the output. So output came very well. No, we need a button over here, which I will click. And it will tell that upgrade memberships so that it will change the color from silver to gold. So let's do it. And over here we will introduce a button, button, button. And here we need to specify, say, upgrade membership. Now we have created it. Let's look into the output. Now we got some ugly looking button that is fine. If you click it over here, you will not get any functionality. Now let's add the functionality. So let's go to the Visual Studio code. So to add a click event, we need to specify on click to remember the camel casing as it is a part of React naming convention. So you should remember it. And over here we need to pass the arrow functions within the curly braces. I'm going to define the arrow function and which is being called this dot upgrade. I'm going to define this method upgrade membership. So I have defined or arrow function. Now let's create this upgrade membership. So over here you will go up and then we need to create upgrade membership over here. And what this method will do, this we'll call this dot set state. And this state is used to update the value of the state to which value I want to update, I'm going to update em type. So let's do it over heal within the curly braces, I need to specify m type, and I want to change it to the gold membership. So I'm going to change the color IV it. So let's look into the output. And prior to seeing the output, you have to make sure that you are going to change it to what your state from prompts to estate and C with no, let's look into the output and over he'll, let's click on upgrade membership and then you will find that it has changed the color. Now the David Johnson user is from silver to gold. So this is just a demo. With the help of this demo, I wanted to demonstrate to you how to use a state object and how we can change the value of state object at runtime. So now let's proceed further. If you have any doubt about onClick method and event binding, then don't worry, I'm going to have our details session in the upcoming sessions. So, so on this note I'm stopping over here, see in the next session till then, bye, bye, take care. 12. Install Helper Extensions: Hello guys, welcome to another session. In this session we are going to install some of the useful extension which will help us to write the code in React programming more efficiently. So let's look into that. What are those extensive? So prior to proceeding to the next sessions, I want all of you should install extensions. The first one is yes, seven, react Redux graph keyword, React Native snippet. This is very useful and very handy snippet tool or says snippet extension, which will help us to give the starter code for writing the react component. I have already installed it that the reason you are seeing over here and install option, if you will search for this, you need to search like ES seven, react redex. So you will get this option to once you click on it, then you will find the install option over here and you need to click on the install option. Then this extension gets installed into your Visual Studio code. Other extension you have to install is Auto Import. This is pretty handy tool whenever you are inserting a component, so it will automatically identify the component, the path of that particular component. So this is really very handy. You should install it as well. So over here you have to search for or to import. Now, the next one is 3t it so retired is very handy once, so we can also download that one as well. So over here, I have already downloaded it. So prettier is used to do the code formating. If you look over here, then you will find that whenever I'm saving it, so it is putting the semicolon or whatever the required formatting thing it is putting their so to source here, you need to write it over here, prettier. And once you get the prettier code four meter, then you need to install it. You will get the install option. I already installed that the reason you are getting over here on installed. So once you install the pre-clear, then you need to follow the instruction, whatever the instruction which is given over here, you need to follow that and configure it accordingly. No, let's look into the ES seven snippet, one that is really very important and very useful. So let's look into that, how it is useful to us. So let's go to the Explorer over heal. And for the time being, I'm just going to insert a file called test.js. Now over here, if I want to write a functional component, so I need to type RFC and inter. So see you. It has given us the functional component boilerplate code. And here we can write the component same with that. If I want to generate class component, then I need to write RCC into. Then it will give us the boilerplate code for the class components. So in the same quote, If I want to generate or if I want to insert the constructor, then I need to write our const and Intel. It will generate the boilerplate code for constructor. So you will see it over here. It is very much handy and very useful. Suppose if you want to generate arrow function based functional component, then you need to write RRE FC in talked. So CO it has generated the functional component which is based upon the arrow function. Now let's look into the prettier example. Suppose that if I'm inserting console dot log and heal some message test and I'm saving it seems there is no semicolon, save it and you will find that the prettier has applied the formatting, the entire file, and it has applied the required formatting, like a statement should be ended with a semicolon. So it has applied that. And all these setting is coming from here. Go to the preference, there is a settings. And over here you will find the prettier settings. And here you are specifying that. So when you are saving, then it should be ended with this semicolon C. Yo you have clues in this option that the reason it is ended with a semicolon. So you can enable and disable the reference setting by going to the file preference settings. And then you need to choose the extension, whichever extension where you want to apply the preference, all third party extension, you will get it over hill and eat. Third party extension should come with some configuration that you can apply from here. So this is what I wanted to demonstrate to you in this session. Now going forward, I'm going to use these extension regressively so that we can mainly focus on the concept instead of writing the code. So on this note, I am I stopping over here, see in the next session till then, bye, bye. Take care. 13. setState: Hello guys, welcome to another session. In this session we are going to look into important aspect of set estate. We have already used the city-state in our earlier session. In this session, we will look into some of the internals of set estate. So let's jump into the visible is to do code to understand it better. So to understand the city-state in more detail, let me create a component over here with the name called counter. So let's write it counter folder we're going to create. And within that I'm going to create a file called counter ab.js. Save it. This component will contain a count value and a button that will increase the value of the count. And for this exercise, I'm going to create a class component as we are understanding the set estate method. So let's create it. So to create a class called point-in-time, going to use a snippet called r c e. So that will generate the boilerplate code for class component. So let's write count over here, and this is going to be used to display the count value. Next, we need to initialize the state object with the account key. So how we can do that, we need to generate the constructor and how we can generate the constructor code. We need to write our const and Intel. And over here we need to specify the account key and heal. We need to specify the value. And that is being initialized with 0. And this property can be used to increment the value of the count. So now the next step is we need to display the value over here. So how we can display that, we really tell that this dot is theta dot count so that it will display the value. So now the next step is we need to add a button over here. So to add the button, so let's wrap it into a parenthesis. And within that, we need to specify your div tag. So let's specify the div tag. And within that, we can wrap this div along with the button tag. So let's write button over here. And we can tell it in countrymen. To increment it, we need to bind with a method on click, put it into a curly braces. And over here we need to specify the arrow function. And within that, we need to specify this dot increment and we need to define the increment method over here. So let's specify increment. And here we need to write the function. So, but prior to using it, the set of state, what I'm going to do, I'm going to show you if you use this data object to directly assigned the value, then what will happen? So let's do it. Suppose that if I'm using the state value, that is, the state properties count and I'm going to increment it by one. And I'm going to directly assign it to the state value. So let's look into that. Plus one, save it. And over here, I will also console log it so that you will see the output. So let's do console log this dot state, dot count, no, save it. So let's add this counter component to the app. So how we can do that, we need to specify over he'll counter inter and you will see it over here. The magic of Auto Import. The moment I have selected the counter, it has automatically inserted the path I haven't inserted over here. So let's save it. Let's jump into the browser. And over here it has inserted the counter. Let's click on it. Then you will find that it is not incrementing. But if you go to the console, then you will find that it is incrementing the value. Let's click on it, then CO, it is incrementing, but it is not displaying over here whenever we are using this dot the state, and we are directly assigning the value without the use of set estate. So it gives us the conclusion that the state is not re-rendering within the UI if we are directly assigning the value to the estate without using the set estate. So let's perform the same thing with the help offset estate. And let's look into the different. So let's jump into the Visual Studio Code and over he'll, let's go to the counter ab.js. So let's modify it. Let's delete this one. And we will write that this dot set state. And we will accept the object. And over here we need to specify count. And then we will tell that this dot state, dot count plus one. Save it. Now let's look into the output. Now let's click on this increment button. Then you will find that it is incrementing now. So here we got the point to remember that whenever you want to assign the value to the estate, you should always use set estate method. If you want that, you should re-render the estate. Else you restate values not being re-render If you are directly assigning the value to the state. So now let us proceed further. So now over here you have to observe one thing, the value which is being displayed in UI, which is different than the value within the console. So why is it so this is because the calls to set state is asynchronous. So whenever you are clicking the button, a console.log is displaying lesser value than the value displayed on the UI. So what is happening? Console.log is displaying first prior to increment. This is because set estate tastes as synchronous by nature. So how we can resolve this issue? So to resolve this issue, we are going to use the call back function within the set estate. In the first statement, we are passing the estate where we're resetting the state value over here. In this case, we are setting it the count value and incrementing by one. Now I want to execute after setting the state, I want to execute some of the code. Then I need to specify over here the callback function. So we need to tell that. And here we will take the code which we have defined outside. So this will resolve our issue. So take this code and put it over here. Now save it. Let's look into the output. So clear the uglier output. And now click on increment button, and then you will find that both is now sync now. So whatever the value which we are getting in the way, the same value we are getting into the console. So here we get the point to remember is whenever we want to execute two. Any code after cell state, then we can pass it through callback function. So now let's proceed further. So, so far the simple scenario we have covered it very well and our logic is working perfectly fine. So now let's understand how certain state behaves when you call it multiple times. So for example, I'm going to define another method over heel that is called increment by five. And over here, within this method, I'm going to call this increment method five times, so that whenever it is being clicked, the button will be Click. The increment by five method will be called, and this will call five times this increment method. So let's look into the output, what output it is giving us. So save it. So here you need to specify this. Let's copy it so that it will not throw this error, save it one more time, save it. And now instead of increment method, I'm going to call this dot increment by five over here. So let's copy it, paste it over here, save it. Now let's look into the output, what output we will get. So the expected behavior is whenever I will click on increment button over heal, the count should be five, as we are calling it five times. So let's look into that whether we are getting it or not. So whenever you will click it, then you will find that it has just increment by one. And over here it has printed five times one. So why is it so because react group multiple set estate call in a single statement. And that is because for better performance. So over here, same thing happens to our case. It has grouped all the set estate call in a single statement and a single city-state should be called. And that the reason we are getting over here, count one. So how do we resolve this issue? So let's jump into the Visual Studio Code to resolve this issue. So to resolve this issue, you should always remember that whenever if you are having a requirement to update the state on the basis of the previous state, you should always pass the callback function as an argument within, say, testate method. So let's pass the arrow function within the state. So change it to the arrow function. We will tell that over here, previous state, previous state. And the wisdom here, we need to define the body of the function. And over here we will tell like this. And here, premise state, take this one and put it over here. Now save it. Now let's look into the output. But you should make sure that you should remove this, this. So let's save it. Now let's look into the output. So now let's click on this button and let's look into the output. Now it is taking the five calls and updating it each time. So click on again and again. Then you will find that it is incrementing by five. And each time it is updating the state with the help offset estate method. So this is what I wanted to demonstrate to you in this session soon in the next session till then bug I take care. 14. Destructuring: Hello guys, welcome to another session. In this session we are going to look into D is structuring, which is the topic of JavaScript ES6 Taiwan to reiterate that topic in terms of React for props and estate. So let's understand it. D is stretching is one of the coolest feature of ES6 that we generally use to unpack the value of addicts or properties from object into distinct variable. The purpose of using D is structuring in React is it increases the code readability. So let's look into the example how we are going to DA, structuring the props within functional component which we have created earlier. If you remember our previous example where we are having a header component and that is receiving two prompts from apps whenever we are using apps. And over here we are passing this value, the F name and L name. Now, instead of using the dotted notation, we can look into the weeds. To D is structured the prop object. So there are two ways to structure the props object in functional component. So let's look into the first way. So the first way is curly braces notation. Instead of this props bet ammeter, we will pass it something like this. And over here we need to specify the curly braces, and we will let specify fname, lname, and that we will use it over here. We will remove this as well as remove this one as we'll save it. Let's look into the output and you will see here there is no change in the output. We are able to display the same output, whatever we are displaying with the dotted notation. So let us proceed further. So over here, what it is doing, it is extracting the values from the props object within the parameter itself. So this way of structuring is known as D structure in parameter. Now the another way we will look into D is structured in function body. So to understand the second way, I'm going to revert it back with the same crops. And over here in the body of the function, I will specify calls. And over here in the curly braces notation, and we will specify F name comma L name equal to drops. Save it. No, let's look into the output and then you will find that the output is same. So now let's proceed further. Now let's look into the class component. How we can use the D is structuring in class called pollen. In our example, we are having a class called Poland core main content. Though in the class component we are going to perform the DA structuring within the render method. And over here we need to specify a const. And within that, we need to use the curly braces and the name of the variable that is dashboard message. I can keep it over here and then we will use this dot c wit and over heal. We need to remove this props, save it. No, let's look into the output. Then you will find that there is no changes within the output. We are displaying it as is whatever we are displaying without the DA structuring, we are getting the same output with the help of t structuring. So know, let's proceed further. So now we have seen that how to D is structured the props in class component. Let's look into how we can be structured the data object. So if you remember that we have created a Counter component where we have used this estate. So what we're going to do, we're going to do a structured this state, and I'm going to create a count variable. So to do that, we need to again go to the render method and the Ohio, we will tell that caused curly braces. And the name of the variable is called as we are using the count over here. And then we will tell that equal to, and this time we will tell that distort estate. Save it. And over here, make sure that you are deleting this one. Now save it. Let's look into the output. Now let's click on the button to see whether it is working or not. It is giving us the same output. The only differences from the holding perspective is we are using the restructuring the state object. So let's proceed further. 1.2. Remember I wanted to give you here is whenever you are using is D restructuring or, or props, D is structuring, you should put those same variable name over here within the curly braces we have used as a key within the object. For example, if you are having the multiple keys over here. So you can specify with the comma separated and the name of the keys so that your JavaScript interpreter should come to know that in which variable the value of the object is being assigned. So on this note, I'm stopping over, he'll see you in the next session till then, Bob, I take care. 15. Event Handling: Hello guys, welcome to another session. In this session we are going to look into even tangling in react. So let's jump into the Visual Studio Code to understand this topic. So whenever you are visiting any of the web page, then you were doing some interaction to the webpage. And whenever you are doing interaction, the event gets triggered. So event comes into various forms like mouseClicked focus, keyPress event, and many more. And whenever the event gets triggered, webpages perform some tasks. So in this session we are going to look into how we can handle the event in React as it is cool concept to understand while working with React. So first we will look into how to handle the event in the functional component, and then we will look into the class component. So let's create a functional component. So I will create a folder over here, fc button. If it end over here, I will create a file called C button dot js. And over here I will generate the functional component code with the help of RFC. So this will give me boilerplate code. Now here I will keep a single button that is called log me. And over here I'm going to associate the onclick event. So onclick event, we need to specify the camel casing over here or click. And within that, we will tell that curly braces. And within the curly braces, I'm going to specify the name of the function, which I want to associate with this onclick events. So for example, I'm going to tell that log mean. So this is going to be our function. So let me create an arrow function over here. I will tell that caused log Mi equal to parenthesis is start. And then here we need to specify either function sold or log and just a message we will print. So let's write it, logged, save it. Let's look into the output. But prior to that, let's add it over here. Here I will specify Fc, what turns IV it. Let's look into the output. So here we got a button over here to check it whether it is working or not, we need to click on F2, and then let's click on this button. Then you will find that it has printed it within the console logged. So that means it is working. So this way you can capture the uneven in React. I have akin onclick as a demonstration purpose, but same concept can be applied to any of the event. So let's handle some other event for the same button. So let's jump into the Visual Studio code. So as I mentioned, we can handle other event as well. So we will tell that this tame on focus and another method I'm going to call, and this time log me on focused, take this name and let's create another arrow function Const. And over here this time I'm going to specify console.log got focused, save it. Let's look into the output, technically this console over here. Now, the moment I will put my focus on log me button, then you will the two wheel, what output gets generated. So you will see it over here. It has console log the god focus. No, let me click it. Then you will find that it also again printed the god focused as well as the log two. So this way you can handle the event in react. So know, let's proceed further. One important point to remember I wanted to tell you over here is 1.2. Remember I wanted to tell you that don't use parenthesis after log me or whichever the function which you are calling all onclick, if you will specify that the parenthesis then this is being called prior to clicking on it. So let's look into the output node, save it first, then you will find it to heal it has logged and to clicking on it through this. So this is not the expected behavior. It should be whenever I click on it, then only it will get called. Whenever I'm clicking on it only got focused. It's being displayed over here. Note though, logged one, log d is coming from the onclick. And this is happening because this is representation of the function call. So whenever we are calling a function, then we need to call it with this syntax. But whenever, if I want to associate the function with the onclick, then you should remember that you don't specify the parenthesis. This is very important. Now I have removed it. Let's look into the output again. Let's clear this one. Click on Log me, so you will find that it again printed log. Let's proceed further. So now we have seen the functional component event handling. Let's look into the class component even tangling. To, To do that, I'm going to create a class component, chords CC button. And within that we have a file called CC button ab.js say with no end over here, we need to specify RC into so that it will generate the boilerplate code with the help of snippet. On the same note, we're going to write the button and specify again, log me and over heal. We need to specify onclick braces and over here the name of the function. But this time we are going to x is the function with the help of this keyword, this dot, and the name of the function we are going to create, like log mean and make sure that you are not specifying the parenthesis over here. So know, let's create the function over here. So we will tell that log me and we will specify over here paranthesis from the body of the function. I'm going to tell that console.log logged class com Poland to save it. Now let's look into the output, but prior to that, let's add this into the App component. So here we retell that CC button, save it, let's look into the output node. So here you will find that we got this button. So to make it different, let me change the level of this button first. So here we need to tell that class logged me, save it, let's jump into the browser. Then you will see it over here. It has painted like this. Now over here, press F2 L, and now click on Class log me, then you will find that it has logged the class component. So this way you can handle the event within the class component. So let us proceed further. So the second to remember for this session is whenever you are accessing the function, you should be accessing through the, this keyword and make sure that you are not specifying the parenthesis in the function name. So this is what I wanted to demonstrate you in this session. See in the next session till then, take care. 16. Event Binding: Hello guys, welcome to another session. In this session we are going to look into event binding. So let's jump into the Visual Studio Code to understand this concept. So in the earlier session, we have created this class component and where we have binded over here on click, this method is going to be called. This is perfectly fine whenever we are using this method to print the console.log within the console. But this way of using the method will fail if you are trying to build something meaningful. So let's understand with an example over here. So instead of printing this message on the console, I want to print this message on the UI on click of a button. So how we can do that, we need to come here and we will insert a constructor for that. We will use those snippets are constant over here, we need to specify the log message. And here we will tell that we will print the same message over here. So copy it and paste it over here. So it will change the message also to change the state value, we will use this dot set state. And within the set state we will pass the properties log message with the new value. So here I can specify button clicks. So once the button is clicked through this message get displayed. So let's look into that, whether it is working or not. And here we can use the status and we will print it into S3 tagged with the tag over here. Within the curly braces, we can specify this dot t dot log message. Save it. Let's look into the output now. Then you will see it over here. We have successfully displayed the message logged class component. Now, if you will click on it, so it should change the text from logged class component to button clicked. But this will throw an error. So let us look into that. So CO, it has throw error as it is not understanding what actually this keyword is. So that means it lost the cortex of React component. So let's look into the ways how we can resolve this issue. To understand that, why it lost the context, you have to go through my course, which is a step-by-step mastering modern java script, where I have explained in detail about the this keyword. So I would request that you have to finish that section as it is mainly related to the Java script, not related to the react for the time being. You just consider it. When the code gets executed, then it lost the context of react. So once it lost the context of react, then it doesn't know about the set state. So this is representing the context of the current object. So to get the context back, we need to bind it. So we need to tell that dot bind, there is a method called Bind and over yield. We need to specify this, the moment u is specified that so it will keep the context intact. No, let's look into the output. So let's jump into the browser, makes sure that you are saving the file. Now let's click on this button. Then you will find that we will get the button click message. So that means this time it doesn't laws the context of this keyword, which is mainly representing the context of the current object, that is our cc button class and which is being inherited from the component class of the react. So this is one of the way by which you can bind. The event handler to achieve the same thing. There are another three ways by which you can bind the event. So let's look into those ways of binding the events. So let's jump into the Visual Studio code. Now let's look into the second approach, which we have already seen earlier. So this time we are going to create an arrow function within the onclick, and we will call this method over here. So how we can do that, we need to specify over here the parenthesis and then the arrow function over here. And this term, I will tell that this vlog. So here you need to specify the method name, log me and save it. Now let's look into the output. So let's click on the button over here, and then you will find that it is working as expected. So now let us proceed further and look into the other way. That is third way to bind the event handler. So let's now discuss about the third approach and which is recommended approach by React documentation. Through this approach, we bind the event handler in constructor instead of render function. So let's look into that, how we can do this thing. So let's revert the layer change control zed. And over here we will take back the earlier thing. And over here I will copy the earlier bind method. And this time I will remove this part from here, save it, and then I will go to the constructor. Within the constructor, I will tell that this dot log Mi equal to this dot log me dot bind with this, save it. So this time we have binded it within the constructor. So this event handler is binded within the constructor instead of render method. So let's look into the output. So now we got the message over here, log class component. Now let's click on the button. It should chain the message from logged class component to button. Click, click on it, and it doesn't the expected behavior. So we have seen the third we know, let's look into the fourth way. So now discuss about the fourth way of event handling. This time I'm going to remove this one. And instead of that, I'm going to create the arrow function over here. So this is the way I generally prefer. So what I do, I can create this function as arrow function converted. We will use the arrow operator over here, and this time I will save it like this way. And this time I haven't binded anywhere. I just use it as is. The only thing which I did is I just converted this function into an arrow function and just leaving it, let's look into the output, what output we are getting. So let's click on the button. You will find that it worked as expected. So let's proceed for the benefit of using the arrow function is that it will retain the context of the react component. And because of that reason, it is not losing though in really referring to the current object. And that is our cc button and which is being inherited from the component class of React. And this is the preferred approach of mine as it provides more readability to me. And now you'd request you, You should also use the same. So on this no time is stopping over here. So in the next session till then, bye, bye, take care. 17. Method As Props: Hello guys, welcome to another session. In this session we are going to look into methods has dropped. So in this session Monday, we are going to discuss about how to pause method as props. So let's jump into the Visual Studio code. So, so far, whatever we have seen that we are passing the values to other component with the help of prop. So like the given example over here, we are passing the dashboard message as an attribute. And this attribute is being captured within main content. If you go to the main content, then you will find that we had kept getting this props. And then we are taking into this variable, which is we are getting the value in the dashboard message and that is what we are printing. So what we are going to do in this session to let us understand with the diagram to what we are going to do. We're going to create a child component called Report one within the main content component. And this component holds the child component. And whenever we are clicking the button on the child component, it should change the message from dashboard summary to report one summary. So that means we will create a method within the main content component. And that method is being passed to the child component as an attribute. And within the child component there is a button available. That button contains the reference of the method which we have defined in to the paid-in component. And when we click on the channel component, so it will change the dashboard summary message to report one summary. And this desk would somebody method is resides in the state of the main content component that, that is the parent component. So let's jump into the Visual Studio Core to design this within reacts with the first thing. What I am going to do, I am going to introduce the constructor over here. To introduce the constructor, we will use our const and this will give us the boilerplate code. And over here we will tell that report message, and this contains dashboard summary, and this message is being displayed within the H1 tag of the mean component. So let's write it. So we will change it to this dot state dot RMS h. Now let us look into the output to output wise. We don't have any changes. We are getting the same message, but this is coming from the state. Now let us proceed further. Now the second step, what I'm going to do, I'm going to create a child component called Report one. So let's created select the component folder, click on the folder and give it a name, that report one. And within that, I'm going to create a JS file record report 1.jpg. Now over here we will generate the functional component with the help of RFP snippet into, and this will give us the boilerplate code. And within he'll, let's add a button over here button. And this button will have a reference of the main components. So we can tell that onclick, we get the reference crops. So we pause the props post over here. Let's pass it first. Props and this prompts contain the reference of the method which is being defined within the main content component. And I'm going to give the name main content. Let we will give it name. Now let's proceed for the overhear. I will tell that report one, but conceive it now the third step, we will add this component within the main content ab.js. Over here I'm going to add this button, so let's add it report one and we're going to close it, save it. Let's look into the output, what output we are getting. So we have successfully added the child component. Now the next step is to add the functionality to this button so that whenever we will click it, it will change to report one summary in straight off dashboard summary. Now over here we need to create an arrow function and that is going to be update. We will tell that update message and that update message will update the state message of main components. So let's write it equal to parantheses then hetero function. And over here we need to specify this dot set state and we need to set this date, our message to report one, somebody, save it. Now the next step, step five, we need to pass this as an attribute. So first we will grab the name which we have defined over here, main-content Hamlet. And this we can specify it over here as an attribute. And within that, we will tell that this dot update message, which we have defined over here, save it. Now we have completed all the step. Now let's jump into the browser to see the output. So now the expected behavior is whenever I will click on this button, it should change thrown dashboard summary to report one summary. So let's do it now. So we are achieving the expected behavior over here. So let's proceed further. So now we have understand that how we can pass the method as a problem on this, no time is stopping over here. See you in the next session. Till then, bye, bye. Take care. 18. Conditional Rendering: Hello guys, welcome to another session. In this session we are look into conditional rendering. So this topic is mainly related to rendering the ESX as per the condition. So let's start our discussion. Within react, we can achieve the conditional rendering with the four ways. So the first way is the E fields condition. The second way is the element variables. Third weighs the ternary conditional operators. Fourth, and the mostly used conditional rendering is the short-circuit operator. So in this session we are going to cover all these four ways of conditional rendering one-by-one with an example. So first we will look into E fails conditional rendering. But prior to understanding this, let's create the base for. And the example which I am going to cover over here is the same example which I have used earlier so far in our learning process. We have used this example where we have created a variety of different component to understand the various topics. So on the same aspect, I'm going to use the same example. And over here I'm going to introduce a login component. And that component is a class component where we will have a state object and which contains the properties logged in flank, that is a boolean property which contains true or false. So prior to loading all these component, the login component will check that flag. If the flag is true, then it will load all these component or else it will load the header component with welcome guest message, the visitor to register to the. One thing I wanted to let you know about this example is that I am going to keep it very simple so that we can understand the concept instead of full-blown feature development. My main focus with this course is I will explain the concept of react to that. The reason I am keeping all these example very crisp without any CSS included over here, so that you can understand the core concept of React and you can apply the same logic whenever you are going to work with the project of React and you will not face any difficulty while writing the code for React project. So n of, of torque. Now let's do our hands dirty. So the first step, what I'm going to do, I'm going to introduce her login component. And I will move that login component within our root component, that is app component. And that login component contains Phil's conditional rendering. And as per logged in flag property of state object, the rendering so would happen. So let's jump into the reasonably studio court. So over here what I'm going to do, I'm going to introduce a component called login. So over here, select the component folder and then click on this icon. And over here we need to specify login. And within that, we need to create a file called login ab.js, and this will contain our logic. So we are going to create the class components. So we need to write our c. So this will generate the code for class components and let's enter. And over here it has generated the class component. Now the second step where we need to add the constructor over here. So we need to write our calls that will generate the code for a constructor. And over here we will tell that logged in, this is our flag and it contains true or false was we will keep it falls. And then over here we will take all the component which we have created in the app. So from here, we will take this one, all the component come to the login ab.js. And over here we will paste it, save it. Now this will add it over here. So we need to take the reference of all these components. So you should remember that all these reference is going to be changed. So you should make sure that we'll put it over here and here, this will also change. So we should make sure that you will be using the correct path of opponent tells you will get the same way. We can use it for main content as well as the counter, save it. So first step, we have successfully created the login component, and within that, we have added the all the component which is existing within the app.js. I have inserted into the login ab.js. Now over here, we would need to add the login component. So let's add it login and then save it. Now this is pretty much straightforward. Now if you go to the browser, then you will find no difference in the output. And over here you will find no difference. But internally we have changed the structure. No, we will introduce the E fields block within the login component. So let's do it. So go to the login ab.js and over heal. Within the render method, we are going to introduce 0s fails blocks. So within that, we are going to write this code. And here we need to write the condition this dot is t dot logged in. So this will check that whether it is true or whether it is false, then only it will display the DSX content. Save it. Now we need to write the else condition. Now over hill, we need to write else. And within that we need to write the body of the else and else will container div. So Dave over here, better take this copy of this and paste it over here. Remove every component, just keep the header component over here, make sure that you are putting it into the return. So take the return and save it and make sure that you are closing the tag over here also. And to make it simple example, I'm going to just give a name called F9. We will keep it guessed and L name, we can tell that please register this is for sake, the simplicity I am just keeping like this else, we need to design the entire logic other component to handle such kind of a scenario. Here my main intention is to showcase the, how we can do the conditional rendering. So that means we are having two different block of code which I want to render as per the condition leads register over here, save it. Now the current value of the flag is false. So this condition will be rendered, this header will be rendered. So let's look into the output, then you will find that it is working as per the expected logic. Now let's proceed further and change the value of the flag. And over here we should come here and. Tell that truth, save it. No, let's look into the output then you will find that it is rendering all the components, whichever is being defined within the if block when it is true. So let us proceed further. So another way of conditional rendering is the element variables. So let's look into that. This is also very much a straightforward. We need to create a variable called let Logan J6. And this will hold keep and this variable will hold the DSX as per the condition. So how we can do that was let's return this one over here. We need to specify first return, and here we will tell that div, and then we will tell that login DSX. Now, the other step is we need to remove this return. Instead of that, we will write login JSC equal to, and this div makes sure that you should be removing this closer also, same is the case with the else block, copy this one, and instead of return, we will be assigning it over here and make sure that you are closing this one. Save it. Now you will notice over here it has added the prettier has added this parenthesis. So that is the benefit of using the prettier extension through if we're doing any kind of a syntax mistake, then it will take k. Now let us look into the output. Here you will find that there is no change in the output. So let's chain the flag from true to false. So we're here, we need to go to the state variable and we will mark it as false, save it. Let's look into the output and you will find that it is working perfectly fine. So let us proceed further. Now we will look into ternary conditional operators. So let's jump into the Visual Studio Code told this and this. So this is going to be pretty much straight forward. What we need to do, we need to first remove this statement from here. So this block, I'm going to remove it. And over here I need to mention the question mark. This is our ternary operator and make sure that we will be removing the login DSX variable also, we don't require now and over here the semicolon I'm also going to remove and this brace is also not needed. Else block also go away. Login ab.js x will also go away. And over here we need to put the colon that is going to be Else part. And over here, we need to make sure that we will be removing it. This, you can remove it from here, take this return and remove this braces. It is extra addresses. And over here we need to specify the return. And all this will come within the return statement. So you should make sure that you will be closing within that. So I'll just close it, save it, and then you will find that everything is perfectly point. We have applied the ternary operator. This is the question mark. Whenever if it is true, then it will execute this part. And if it is false, then it will execute this part. So this time the flag is false. So it is going to execute this part and it is displaying as expected. Now let's change the flag now. So let's mark it true over here to verify whether true part is working or not, save it. Let's jump into the browser to see the output. Then you will find that it is working as expected. So now let's proceed further. Now the final approach we are going to look into is the short-circuit operator. So let us look into that. But prior to looking into the short-circuit operator or approach, One thing I wanted to let you know that if you are having only the if condition, then only you can use it because else part generally missing in the short-circuit approach. So let us understand with an example. So over here, we worked well with the ternary operator, with the if-else condition. But suppose that we are not having the else condition, then short-circuit approaches pretty much very handy to how to use the short-circuit approach. So over heal, we need to specify in the state of ternary operator, we can remove it. And over here we need to mention and operator, and this will go away. So there is no meaning of this thing, so we will remove it. So what will happen if this value is being true, then only the second condition gets executed. If it is false, then the second condition will not execute it. So save it. Let's look into the output and you will find that it is working perfectly fine. So now let's change the flag. And if you're changing the flag from true to false, then the expected behavior is it should show the blank page as we are not handling the else condition with the help of short-circuit operate. So now come over here and change it to false, save it. Let's look into the output. And as expected here we don't have anything to show as we are not having the else condition within the short-circuit operator approach. So let's proceed further. So here what is happening at the first instance only, it is getting false over here, and then it is not checking the second condition because forced condescend is being field as it is false. So this is what I wanted to demonstrate to you in this session. So let's wrap the session. So in this session we have seen all the methods of conditional rendering. We have started with the if-else conditional rendering. Then we have seen how we can assign the DSX into a variable and that variable is being returned. We have also, we have also looked into the ternary conditional operators, which comes very handy for handling the if-else logic of js X with the help of ternary operators. And at last we have seen the short-circuit operator approach that is very handy if we are having a single conditional rending of js X. So always go for short-circuit operator approach. So on this note, I am stopping over here, see in the next session till then, bye, bye, take care. 19. List Rendering: Hello guys, welcome to another session. In this session we are going to look into list rendering. So let's jump into the studio code to understand this concept. So in our earlier session, we have looked into how to render the DSX conditionally. So to understand that concept, we have designed the login component. Now to understand the list rendering, we are going to design a fruit bowl component. So let's look into the example. What example we are going in this session so that we will understand the list rendering concept in react. So in this session we are going to design this fruit bowl component. And what it will do, it will retrieve this java script object. And that object contains name price in his truck properties. And this object is an object that is nothing but the list. So our fruit bowl component will retrieve all the prices and the names of the object football and display as a list. List rendering is one of the common feature in any of the web development. And in React, it is one of the most commonly used feature which we generally use in all of the applications. So let's jump into the Visual Studio Code to start the implementation of this example. So as usual, the first step we need to create a folder and then we need to create a file. So let's do it. So we will come here, select the component folder, click on the folder icon, give it a name, fruit bowl and width. And within that, we are going to have a file called root ball ab.js. And this file will contain our logic. So this is going to be a functional components. So I will tell that RFC and this will give us the boilerplate code. And over here we need to specify the component structure. So let's create forced the fruit bowl object. So we need to rate something like this Const. And over here we will tell that o VJ, who fall equal to it is an array of object. And within that, we need to create object one by one. We will tell that name, name of the fruit I am going to keep Apple. And over here we will keep on other properties. That is price, and we will keep it 200 rupees. And then we will keep on other properties called Ines doc. And then we will tell that true or false whether it is every level in stock or not. So over here, we will specify the coma and then we will copy the, this object and make three copies of it so that it will save our time. Put it over here. Let's change the name of this fruit, orange. And over here we will tell that 200 rupees, and for this one grapes. And over here we will tell that 300 rupees. So we have created the object now. Now the next step is we need to create the J6 to retrieve the value of this object. So how we can do that, we are going to tell that we will use UL element and this element contains the LI element. So let's write it. And over here we need to specify the name of the object which we are going to use it as it is a JSON. So we need to specify two. We are going to use the map function of the ADA object. If you are not aware about the map function, then I would suggest that you should refer to a modern JavaScript course. That is a step-by-step mastering more than Java. Where I have covered the map function in detail. And along with the map function, I have covered all the feature of ES6 in detail in a step-by-step manner. But for the time being, you can understand that map is a function which we use generally do I read the array and transform that adding to some of the other meaningful array. So let's look into that to how we are going to use it to remove this one. This is going to be inside the map functions h2. We will tell that the object we are having is the OBJ fruit bowl. So this fruit volt is having a map method, so we will write Map and within that we are going to pass an arrow function and we will retrieve each of the fruit information over here that contains three properties named price and in stock. So here we will tell that fruit, that means individual element we are going to retrieve. And that, and that is an arrow function. This is working as a parameter. And within that function that we are going to pass. And over here you should remember that you are going to use the parenthesis in state of braces as it will not understand that what actually the braces is. So within that you should use the parenthesis. So Enter, and now we will write the body of the function. So first what we will need to write o as it is an you will elements within that, I want to generate the LI tag that is going to be either dynamic. And over here we need to specify that I am going to have or name of the fruit and which is going to be three type. So let's write it H3. And within the S3, we will retrieve the name of the fruit. If you will go there in our diagram, then this is the format we are having. So let's do it now. So let's write it over here, fruit dot name, and then there is a hyphen. So let's mention the high turnover here. And then we need to specify the price through price. So this way we have created the LA elements. Let's save it. So now we have created the fruit bowl object, which is doing the listing of all the fruits with their prices. So now next step, we have to also include the H1 tag over here. This H1 tag contains the heading. So we will tell that fruit bowl, the wit. Now the next step we need to add this fruit bowl component into the app.js. So let's comment this one as we have understand this concept. And now we need to add the fruit wall over here. So we will tell that root ball and the moment you will add it. So it will also add the reference of this fruit bowl. Save it. Let's look into the output, what output we are getting for this. And you will see that it has listed all the fruit with their prices and whatever we have seen in the diagram, it is printing those values. Here. You have seen that the space between these thing, we will handle this when we will understand this tiling of the component, how we will do the styling in React prototyping, you just ignored it. Now we have understand it. Let's proceed further. So what is next now? So the next step is we will improve eyes the code, as it is not the standard practice to put the coded like this. So what we will do, we will make it retail is standard. We will keep the return function very neat. So we will grab this code and we will put it into a variable and that variable is going to be return. So just give a name over here. And we are going to create a variable cost. And we will tell that list fruit. And this list fruit contains the given code. And over here we will pass the code and this list fruit, we will return it. So come here and here, and we need to specify a list of fruit, save it. Let's look into the output and then you will find that there is no change. So know, let's proceed further. So let's improvise the court further. If you get more experienced with three egg, then you will find that the list component is being divided into two parts where you will part exist in one of the component and all these LA, part, existing other component. And the value of the, each individual fruit is being passed as a props. So let's follow the same pattern. What we are going to do, we're going to create another component called Fruit ab.js and which will contain this information. And that component is being placed over here. So let's do it. So within the same folder, what we are going to do, we're going to create a fruit component. So let's write it routes.js. And within that, we are going to generate a functional component with the help of boilerplate code, RFC. So now with this boilerplate code, we will write the light code. So let's grab it to. We will grab this code from here, control x, and we will go to routes.js. And over here we need to specify the LA information. No, save it. Now we will grab this. So once we grab it and we have pasted it to heal. So to make it working, we need to specify brought the props dot name equal to four. We know we will specify props, dark fruit, dot price. So here we have specified prop dot-product dot name, and then we have specified prompts, dot-dot-dot price. Now let's go to the football dot js. And over here we will use the fruit component. So how we will use it, we're going to tell that fruit into so it will add the reference and the moment you will let the reference. So it has interrupted. Why? Because we have used o extension called auto input that the reason it is inserting it. And over here we will pass the fruit. We return deck fruit equal to fruit, and let's close it, save it. Now let's look into the output. There is no change in the output. You will find, you will see two over here, there is noting. But the code which we have written that is much cleaner code and you will find the same pattern, the list component design. So now let us proceed further. So now if we will look into all the code, then you will find that it is much neater, whatever we have written, and it is up to the standard of React development. So on this note, time is stopping over here. I hope you enjoyed this session. See you in the next session. Till then bug I take care. 20. List Rendering And Keys: Hello guys, welcome to another session. In this session we are going to look into list rendering and Keith. So let's jump into the vessel is 2D your code to understand this topic. So in our earlier session, we have looked into how to handle the list object two components. One is the fruit ball and within that, we have created a child component called routes.js. And we have achieved this output, and this is the output we got. But you know one thing, this output contains an error. So let us look into that era. So here you will find that this is the error we are getting if we are not providing the keys for each of the list item while doing the list rendering. And what is the issue? It is each child in a list should have are unique. So what does it mean? So it means that react is expecting a key that should be unique for each of the item which we are iterating through them map method. So how we can resolve this warning by introducing an ID to each of the item. So let's do it. So to resolve this issue, I'm going to add another property called ID and we retell it over here. One for other fruit also, we will introduce this ID. We will tell it to, then we will tell it three, save it. Now we will use this ID as a key. So let's do it. And over here we will mention the Id like qy equal to. Within the curly braces, we need to specify fruit dot id, save it, give it a space over here, save it. And now let's look into the output whether we are getting an error or not, then you will find that there is no warning for the key Hugh, As we have provided the required key to the list item. So this is what I wanted to demonstrate you indecision suing the nation till then bubble, I take care. 21. Style React Components: Hello guys, welcome to another session. In this session we are going to look into a style React component. So let's understand what are the ways ever liberal to style the component in reaction, react we can do is tiling of the component in various ways. The first way we will look into CSS, this tile heats. Once we understand that, then we will look into inline styling. And there is another way called CSS modules that also we will look into. So these three mechanism we are going to look into for styling the react component. So let's jump into the Visual Studio code and understand the first way of styling React component, that is CSS style sheets. So we are into the Visual Studio code and we are going to use the same example which we have been following from the beginning. So let me show you the output then we will understand the styling of the react component using CSS style sheet. So this is the output which we know about it. So in this example we are going to decorate header component and we will understand the styling technique in React component. So let's jump into the Visual Studio code. Since beginning, you must be wondering that why I am going with the folder structure. Every component is based upon the folder structure. Why m. Naught keeping a file, a single file, a loan within the component holder. That is because we can keep all the assets which is related to the, that particular component. I can keep it at one place, for example, now I want to decorate the header component with some as tight. So I will create another file that is a CSS file over here called header dot css. And so that we can keep all the assets which is related to the header component in a single folder. And in the long run, this structure will help us to maintain the code in a better manner. So let's write some CSS for the component. If you are having an idea about CSS, then it is perfectly fine. If we're not having, then you can refer my core. Let's learn CSS3, step-by-step promise grad, where I have covered all the basics of CSS three in a step-by-step manner though. Now let's write some CSS over here. So first we will use dot notation over here for defining a class called header. And this contains IE, which is a 100%. Then wait, I'm going is also a 100%, then it should be floated left. So let's write it left the background I want to keep a blue color would be good. So let's write blue and you can keep whatever you'd like, adding a worn or top and bottom 40 pixel as well as left and right also I want so that the header become big and the color of the text I want white. So I'm going to tell that as F, F, F, so this is y. So I have defined a header class. Now the next step is I need to associate this CSS into the header components. So how I can do that, lets look into that. So the first step is we need to. Import the header to we need to specify you overhear dot lattice has VIA referring in the same folder. So we need to specify you over here, header dot CSS. So we have imported to the CSS over here. Now the next step, we need to specify the last. So to specify a class in react, we need to specify the class name instead of class as classes being reserved within the HTML. So to use this, this class header class which we have defined over here. So I'm going to use it in this header.html. So I need to specify header, save it or let's look into the output. Then you will find that we have is tangled our header component with the help of CSS style sheet. So this is the first way by which you can just type your component. Now let us proceed further and look into the inline style. That is our second way to apply this tiling react now we will look into in lameness tiling. So let's jump into the Visual Studio code. So in lane is telling is also pretty much straight forward. Instead of header dot CSS, what we will do, we will take it all the configuration for CSS, copy it and we will create a variable over heal for a styling and we will specify const. And over here we need to specify header. And within the curly braces we are going to find the properties. For example, copy paste all the thing, remove this part, this one also. And over here we need to specify all this in within the courts. So make sure that you are specifying within the quotes. And instead of a semicolon, you need to specify the coma. So for the left also, it is going to be within the courts. This property also going to be in the core to make sure that you are specifying within the courts ALL this will go into the double quotes or single quotes, whatever you want to use it, you can use it as specifying that. Now save it. Now the next step, instead of class name, I'm going to use something called a style over here. And this is time review contains this variable. And whenever you are using variable, we should specify within the curly braces as it is a js X over here, we need to specify header, and this time we will specify green to make the difference, save it. Let's look into the output and then you will find that we have applied the inline styling. So this way you can specify the inline styling. Let's proceed further. When you are using inline is telling you will find that there is no separate file we have defined. We have used the same DS file and where we have defined all the configuration for styling within the component file which we have created for the components. So no, let's look into CSS module way to create the style for React component or say, with the help of CSS, more deal, we are going to apply this tie loan React component. So let's jump into the Visual Studio Code to understand this, creating CSS module is also very straight forward. You need to click on the header folder over here, that is the component folder. And within that, we need to insert a file, new file called header dot. And this time we need to specify module dot CSS, press enter, and then we will keep the same CSS which we have created as a normal stylesheets. We'll write it over here and then save it. So how it is different from the header dot CSS and header.html dot CSS. So the difference is the way how you are importing it. Now to use this header module, what we need to do, we need to import it to post, let's import it. And we will specify as tiles from and the name of the file key over here we need to specify header Mordor, CSS. Now this is being imported. Now how we can use it, we need to specify you over here instead of style, we need to specify className. And within that, we need to specify styles, styles, dot header, save it. Let's look into the output. And this is the output we got. So this is one of the way you can apply the style to the component. So let's proceed further. So now we have seen all the three ways. We have seen CSS style sheets, we have seen in line styling, and we have also seen CSS modules. So this is what I wanted to demonstrate you in this session. I hope you enjoyed the session soon in the next session till then, bye, bye. Take care. 22. Form Handling In React: Hello guys, welcome to another session. In this session we are going to look into form handling in react. So let us start our discussion. So far, whatever we have seen that that is mainly related to displaying the content on the page. In this session, we will look into how to capture the input from users. So in this aspect, we will look into how to capture inputting text field within the form in React. But prior to that, let's understand a about some of the basic to handle form in react. So let's jump into the diagram. Consider we are having an input element capture the fruit name. This input element can have the value the user input can change based on user interaction over heels, suppose that if any user is coming and providing the fruit name, then the value of the input field gets changed to how we can deal with the value which is being changed within the react component, that is through state and set estate. So in a control component, the value of the input field is being set to the state properties. Next we have an onchange event that is being fired whenever text field value is getting changed. And we have onchange handler where we are setting the state object properties with the help upset estate. And when the state gets updated, the render method gets called and the newest state is assigned as a value to the input element. And this diagram is the representation of the all cycle, whatever I have explained now. So let's understand with an example in Visual Studio code. So as a result, we are going to create a folder called form. And within that, we are going to create a file called form dot js. So let's create it form dot js. And then we will generate the boilerplate code with the RC E snippet it. This will give us the class component. And over heal, we will write the JS export form elements. We are going to create the form for fruit bowl. So let's write it through ball, save it, and let's add into app.js so that we will look into whether it is working or not. So here we need to specify for add it. Let's comment this one has, this is not required. Save it. Let's look into the output, what output we are getting. So we have successfully added the form component over here. Now we will enhance this. So let's jump into the Visual Studio Code. Let put this inside the H1 tag so that it would be a little bigger. So we're here, we need to specify a Chuan, save it. Let's look into the output. This looks much better. So let's write the input element over there. So to write the input element within the form post, we need to include the form tag. And within that, we are going to keep her, Dave, and within the div we're going to keep a level. So let's keep level. And that is four root name and the input field, which will be used to grab the input from the user. So it is going to be input. And over here we need to specify dying type is going to be the text. Save it. Let's look into the output, how the output is coming. So we got this output to write know this form is as HTML form to make it react controlled component. We need to perform two things on this fall. The first step is to introduce the state object within the form component. This is data object control the value of the form components. So let's do it first. So to introduce it, we need to introduce the constructor over here. Let's generate the constructor code with the help of snippet are constant. So it will give us the snippet for constructor. And within that, we are going to introduce a property called Root name and which is Lankin Healy. Say wait, next time I'm going to assign the value of the input field to this state. So I need to write something like this value equal to and within the curly braces, we need to specify this dot state dot root name. But you know what, this will not work. You look into the output and over here, if you try to write something, it will not take any inputs wood to make it working. We need to handle the onchange event. So let's do it. So let's handle the on tin. You wouldn't evil he'll do we need to specify on change. And within that we are going to create an onchange handler. So let's specify this dot, this I'm going to create on change and lip. And over here we need to tell capital C. Now next I need to create this on Changed handler, and that is going to be an arrow functions. So we retell that on Changed handler over here. And this will accept the event that we need to specify the event over here. And this event contains the target value, that is our input text. So here we need to tell that this dot set state, and this will set the root name to the value of the textbox. So I need to specify event dot target dot value v. So what this will do, it will assign the value, whichever value we are going to type within the input box that will be assigned to this particular object properties that is fruit name. So let's look into that. So now you will find that when I type something like apple, so it is accepting the input, whatever the input which we are passing over here earlier, we were not handling the onchange event that the reason it was not accepting the input keys. So let's proceed further. So handling the chain is the second step by which we can make normal HTML form into a control component of reacted to make the normal STM will form two will control component what we did, we have host introduced the estate into the component, and then we have introduced the onchange handler or setting up the gate property from the input values which is provided by user we are handling through onChange event. And we have written on change handler where we are setting the state object property that is fruit nato. Let's now introduce another input type that is also our text field that will be used to capture the price of the roots. So to capture the input or price, we need to copy this one and we will change from root name to rise. And over here, we will specify the price over here, which we are going to put it into the properties of a state. Put it over here. We will tell that price and that should be blank for now. And then we need to define the teen handler for price. So let me write on rice handling. So we are going to define the who let me define over here. So we are going to do the same activities or the price. So let me copy pasted so that we will save the time. And over here, we will specify all rice change handler. And that will set the properties of a state that is price over here, save it. So now we have produce another text field that will capture the price of the root. So let's look into the output. The form looks pretty much, I believe we will redesign it in our next session. We will make it full-blown project for the time being. I just wanted to introduce the concept of form, how to handle form within react that the reason I'm not focusing upon the beautification of this form. So for time being, we will consider this ugly form. So let's write something. So it is working now. And over here, let's look into the price field. So we will specify something. So it is taking the input, that means whatever the input which we are providing over V0, it is going to set within the state of this particular component and this we are handling through the onchange event better to write creeps over here. So now next we will handle the submission of this form. So let's introduce a button and handle those submit event. So let's introduce the submit button over here. For introducing submit button, we need to write button. And over here we need to specify the type of the button is going to be the submit and heal we need to specify made me the button level, save it. Let's look into the output. Then we will find that we have successfully introduced a button over here. If you click over here, then you will find that the pH gets refreshed. So that means this is a default HTML submit button. So to make it as the application is specific, we need to handle the submit event. So let's do it to handle the submit event of the form. We need to handle onsubmit handover heal, we need to specify that within the curly braces, this dot handle, submit. This is the handler we need to write, and this is going to be an arrow function against what we need to tell that handles submit and over heal. We need to grab the input which is being entered within the text field of fruit name and pray, and that we will alert it into the dialogue box for the time being. We are alerting those thing into an alert. In the later part of the course, we will design something meaningful where we are entering the root name and price within the textbox. And when it is being submitted, it is get inserted into a table on the webpage with all the styling applied. So let's do it. So we need to specify the event and then we will alert the fruit and the price were. To do that, we need to write a Alert. And over here we will use the template string. And here we will specify within the curly braces. Here we need to specify their dollar and then the curly braces. And over here we need to specify this dot is treat dot root named over here we need to specify comma and we will tell that route name is this one and price is dollar curly braces, this dot, dot, dot price, save it. Let's look into the output. So let's us specify some fruit name over here. Apple, and the price is a 100 rupees. Click on submit, then you will find that we are capturing the input within the state. That is being displayed on this alert box. So if you click on OK, then you will find that it's gone. So this is the default behavior to how we can make sure that the value, whatever value which we have written that will not go away. So to handle the default behavior, we need to grab the event object and we need to access the preventDefault method. We need to access this, and this will prevent the default behavior and we will not lose the data after submitting it. So let's look into the output. So here this time I will provide oranges and over here we will tell that 200. Let's submit it, okay, then you will find that we are not losing the value which we have entered into the fall. So this way, and we can prevent the default behavior. So let's proceed further. One thing you notice over here that we are having multiple change handler for e tilde p. And it is very much cumbersome and it is very much complicated. Whenever, if our size of the form is getting increased with multiple input elements, then that means we need to handle each of the element with different change handler. And this is quite problemistic. So how we can design a single chain handler that will work for each of the input element. So let's look into that, how we can achieve this thing. So let me get rid of this one. So let's comment it out. So we are not having other chain hand let a part from the chain handle it. So, so the first step, we need to introduce the name of input element. So I am going to specify name and make sure that whatever the name which you are willing to provide over here, that is matching with your state properties. So for fruit name, I'm going to specify the name of the inputField is fruit name, same is the case with price. And over here we need to specify the name of the input field is price. Now, the next step, make sure that you are assigning the same Changed handler. Now the next step we should make sure that the event where we are grabbing the value same way we will grab the name, but this time this is going to be their dynamic. So how we will provide that we need to specify the square bracket so that we will access the dynamic value, which is a state object property. And what is the name of that? So how we can grab it, we will tell that event dot, target or fname. And this name is similar to the name of the state. So that means we are telling that this fruit name, if it is a fruit name, then it will take the fruit name over here. That means this property get taxes. If it is a price, then this property get taxes. So that means with the single change handler, we are able to handle all the input fields. Now, let's look into that, whether it is working or not. So let's save it and over he'll let us try to write something and you will find that there is no changes. It is working perfectly point banana. And for price, we have removed this one. We have, if you remember that we have already removed this on price change handler, we have applied the onchange handlers. Same way. We will specify over here, 200. Let's submit it and you will find that it is working perfectly fine. So this way you can handle the multiple field onchange event with the single on change handler. So this is what I wanted to demonstrate you in this session. I hope you enjoyed the session. See you in the next session. Till then, Bob, I take care. 23. Component Lifecycle Overview: Hello guys, thanks for joining this session. In this session we are going to look into component lifecycle overview in React, component goes through several stages in its lifecycle. And react provide several method in each of the SDGs which we can override as per our requirement. So in this session we will look into all the methods which is available within the class component to these methods are specific to the class component and that is not every level within the functional component to let's look into the phases of the component along with their methods. Class component to go through various phases. And the phases are mounting, updating on mounting error handling, the mounting lifecycle methods called when an instance of a component is being created and inserted into the DOM. The updating lifecycle method called when a component is being reprinted as a result of change to either its props or estate, the mounting lifecycle method gets called when a component is being removed from the dom, the error handling lifecycle method gets called when there is an edit during rendering in a lifecycle method or in the constructor of any child components. So now let's look into the water, the methods which belongs to the mounting fees. Within the mounting fees, we have ODE methods which is being called the first one is constructor, the second one is static get derived from. The third one is rendered method and the fourth one is component did mount method. No, let's look into the updating crease methods. So during the updating fees we have five method that is a static get derived estate from prompt shoot component update render method gets snapshot before update and component data update methods known. Let's look into an mounting base methods do routing and mounting. We have only one method that is ct component will unmute. And at last, let's look into the editor handling is T lifecycle methods editor and link fees has two method that is a static gait derived state from Editor. And another one is the component Date GAT. It is really very important to understand all these methods and when these methods get scarred while working with React. So on this note, I'm stopping over here. In the next session, we will look into all the methods of the mounting phase. We'll see you in the next session till then. Well, bye, take care. 24. Mounting Stage Lifecycle Methods: Hello guys, welcome to another session. In this session we are going to look into mounting lifecycle methods. We will discuss about each of the methods which is being used within the mounting fees off lifecycle of React component. So let us start the discussion. As I already mentioned, that mountain crease contains food is Tejas, which is represented in the form of methods and the execution of this method in the same order, both the constructor gets executed, then afterwards, aesthetic get data, icj is TD from prompts gets executed. After that render method gets executed. And at last component did mount gets executed. Now let's look closely what actually these methods are. We will start our discussion with constructor. A constructor is a special function that will get called whenever a new component is gets created. So here the question is why we actually use the constructor? So to answer your question, I would tell that constructed is being used, folding is liaising the estate. It can also be used to bind the EventHandlers and all the initialization which you want to perform for that particular component then constructed as the place. One of the important point to remember here is that don't use constructor or any of the side effects. Side effects like HTTP request, Who don't call any of the HTTP, just call within the constructor. You have been noticing One more point. Whenever we are creating a class component and we add using the constructor to directly set the state without using the set estate method. So this is the first method which is getting executed in the mounting phase. So let's now discuss about the static gait derive estate from Prof. This is the second method which is being executed in the lifecycle of the component. And this method is really very useful when the state of the component depends on changing prompts over time. Suppose if you have a component, the real estate of the component depends on the props or which is being passed to the component insert scenario, you use this method to set for aesthetic, get derived a state from props method 1. You always remember that this method is a static method, so it doesn't have access to this keyword. So that means you can't call this dot set state in this particular method. Instead, you simply return the object that represents the newest state of the component. And this method is also not the right place to call the side effects like HTTP request. Once execution of a static gait derived state from prompts methods get completed. Render is the method which is get executed after aesthetic get day-to-day state from prompts method. So far you already familiar with the render method and you know that ended method is the only required method in the class component. In the render method, we simply read this dot props and this.tab state and returns the DSX. One thing I wanted to let you know about the render method is it is a pure function as the render function is pure function. So whatever props and distinct you will give it, it will return the same. So what thing you don't perform within the render method? So within the render method, you don't change his teeth or interact with DOM or make any magic school as it is not recommended. There is another point to remember for render method is if render method contains the child component, then children components lifecycle methods are also get executed. Along with the parent render methods. So now let's proceed further and let's talk about component did mount method component did mount method is the final method in the mounting phase, this method is called only once in the whole life cycle of the component. This method invoke immediately after a component and all its children component have been rendered to the DOM. So you must be asking what thing we can perform within component did mount method, then I would say that this method is perfect place to call HTTP request or any side effects you can interact with DOM or perform any ajax calls to load data in a simple term, I can say that component did mount is the perfect place to any slice, the DOM nodes and load data by network request. So we have discussed so much of theory about this topic. So let's do some exercises to make our knowledge more intact about this topic. So let's jump into the Visual Studio code. So we are into the reasonable is to geocode. Now what we will do, we will create a component to verify all the methods of mounting is teach. So let's create a folder first. We will call it as life-cycle reading component. And within that, we are going to create a file with the same name, lifecycle variant component.js. And within that, we will generate the boilerplate code with the help of snippet adds it is a class component we will call RC. And in total, this will give us the class called ponens boilerplate code. So now the next step is to generate the constructor code as it is the first method which is being executed within the lifecycle method go our cost we will generate with the snippet and over here, we will specify the name and we will tell that we didn't component. This is just for demonstration purpose. And here I will console log it so that we will verify that which method is being called while doing the mounting. So here we will tell that parent component constructor save it. Next, let's introduce the aesthetic. Get you derived it from prompts to this is static method, which is being called. This method will accept crops and state and it should either return new estate or null. To keep our examples simple, we will return null. So let's return now logo here. And prior to that, we will also console log or parent get to drive to eat from Prob method call so that we can verify that when this method is gets called while execution. Now the next method which is being called is the render method. So let's go to the render method. And also here we will tell that console.log Baden component render third call. And over here we will specify wherein component or a place holder get lost in the mounting is teach the method which is being called as the component did mount. So let's write it. We will tell that component did mount and heal. We need to specify console.log. And within that, we retell that Vaden component did mount call, save it. Now let's look into the output to verify the execution of the mounting is teach. But prior to that, make sure that you are adding into the app.js. So let's comment this one and let's add LC parent component. And over here it has added the path because of Auto Import extension. Now save it. So let's look into the output node. So over here you will find that the constructor gets called first, then get derived state from prompts method gets called second, after that, render mid-thirties gets called. And at last you will find that component did mount method gets called. So this is the order of the execution of the methods within mounting is t. So let's proceed further. Now suppose if you are having a child component, then what would be the execution order? So let's create a child components. So to create the child component, we should select over, he'll create a folder called lifecycle child component. And within that, we are going to create a file called LC child component dot js. And we will generate the snippet RC, and this will give us the boilerplate code for the class component. And over here we will keep all the console log which we have used over your. So grab it and we will do certain modifications. So copy this one. And over here we will come and pasted. And within that, we are going to tell that child component over here we need to specify child, child here we should also mention child. This will also contain child. This is going to be child component that save it. Now let us look into the output. Now, let's put this component into the parent component. Over here, we need to specify within the div. So here we will tell that we will use the parenthesis. And within that, this div, we're going to use it and we will tell that LC Child Component, save it. Let's look into the output. Then you will find it over here. Forced pairing constructor gets executed, then get derived state from propagates executed. After that within the render function, it calls the child component constructed. Then child get derived estate from prop method gets called, then render method of child component gets called. Then the child component did mount method gets called. And at last, parent component did mount method gets called. So this is the order of the execution within the mounting a stage when it contains the child component. So now with the help of this example, we come to know about what is the order of execution at mounting stage. And this will help us to write more robust code. So this is what I wanted to demonstrate to you in this session. In the next session we will look into updating is teach methods and their order of execution. So on this note, time is stopping over yields in the next session till then, bye, bye, take care. 25. Updating Lifecycle Methods: Hello guys, welcome to another session. In this session we are going to look into updating lifecycle methods. So let's start our discussion updating Fe3O4 React component lifecycle contains five method. These method is being called when component is being read ended because of changes either in props or estates in the updating query. The first method which is being executed is the aesthetic get derived state from props. We have already seen when we were discussing about mounting fees. This method receives prompts and a state as a parameter and returns the updated state when it is being re-rendered, You can also return null in this method, you should remember that whenever a component is being re-rendered, this method gets called this method, which entity used to sit this tweet from Paul to new estates. So what you don't use in this method, you don't use the side effects like call in this method and this method used very rarely. So now let's proceed further and discuss about should component update in the execution cycle of the updating phase. This is the second method which gets executed after a static get derived a state from prompts method. This method accepts next props and next state as an argument. And this method dictates whether component should read ender or not. By default, all the class component should re-render whenever it receives props and the state. But we can stop the default behavior by returning false. How we can use this method, we can compare the current state value, the next prompts and state values. And if there is a change, then we can render the component. So now the question over here is, why do we use this method we generally use to optimize the performance to what should we don't do in this method. Again, over here, we will not perform any of the side effects like HTTP calls. So now let us proceed further and discuss about the render method. This method we already know about it. This method also gets called whenever the component get update date as we already discussed about this method, except the crops and the state and returns, the DSX we have also discussed about don't use this method to change the state or interact with the DOM and also don't perform any of the ajax call. So once render method executed within the update increase, the another method which gets executed is the get's snapshot before update. This method accepts previous state and the previous props. This method gets called right before the changes from the virtual DOM are to be reflected in the DOM. This method is very rarely used and it can be used to capture the information from the dog. It snapshot before update, either return null or some process data, which we can use in component D update methods. So now let us discuss about the component did update method competent DW corned off to render method in the rerender cycle, this method accepts three parameter grievous prompt previous says T, as well as the snapshot value we have processed in the get's snapshot before update method, one thing you have to remember about this component did update is it will be called only once in the re-rendered cycle. And this is the place where you can perform the ajax call or say side effects. You can perform HTTP calls to the services to face the data and use the data into the component. One best practices which I wanted to share with you whenever you are using component did update for adjuncts call. You should compare the previous props and the new props and then decide the edge x call. If you don't perform this comparison, then every time you need to perform those, so we score, and that is really not a good practice. Let's jump into the Visual Studio cool to see all this thing in action through to demonstrate all the methods of updating feeds, I'm going to use the same example which I have used in earlier session. So the first method which gets executed is the get derived estate from prop while updating phase while doing the update as it is already there. So I'm not going to write it. The another method which gets executed is the shoot component updates. Who lets write it should component of date. And here we will console log it console.log should component of date can tell parenthood component update method and make sure that you are returning true, return true, save it now. Further, the third method is already in place that is rendered. So if you go there, then you will find over heal the render method. Now the fourth method is get snapshot before update or let's use it. Get snapshot before update and over he'll prep props, coma, ribose, treat. And within that we will console.log didn't get snapshot before update. Let's save it. And the last method is component did update and we will call it. And over here we need to specify console.log and we're gonna specify Peyton component did update the width. So now we have introduced all the five methods which we get to provide an update phase. So let me put the same method into the child component. So let's copy it all these four, this is already there. These three, we can copy it and go to the child component. And over here we will put, and this time we will mention child, child and child, save it. So now the next step is we will introduce a button which will trigger the change in the state. And once they stayed Gates change, the update piece of component gets triggered. So let's do it. Let's go to the parent component and let's introduce a button over here. So we will tell that button. And over here we will put the onclick event. And here we will specify this dot on three event. One method we arrow function we need to define. And over here we will tell that of date v's demo and over he'll take this one and heal. You need to specify onclick event equal to. This is going to be an arrow function. And within that, we will do this dot set state and we will update over here we are having a property called name and we will update it, pay rent, update, demo, Save it. And this one also we will put into intuitive owners put it, could this one save it. Now, let's go to the browser to see the output. You know what, we are doing, a mistake over here also get it rectified, which I told that we need to either return null whenever we are using gets snapshot before update or the next props or a state. So this time we will return null and make sure that you are repeating the same into the child component. So here also you need to as specifying that if this one, this one. So now let's jump into the browser to see the output. So overview, you will find that this is the mounting feeds methods gets executed. To demonstrate the updateFeed method, I need to clear this output and click on update phase demo so that state gets updated and the update phase gets triggered. So let's do it. And then you will find that the update method gets triggered to CEO for state get triggered. The good derived state from prop method gets triggered of the parent, then the should component update, then the red render method of the painting. And once it is being rendered, within that, we are having a child component sources. Again, the child component get derived is TD from prop method gets executed after that childhood component update method gets executed, then chiral component render method gets called. Then child gets snapshot before update gets called. And then he over, he'll parent gets snapshot before update, it's executed. And after that child component dw dt gets executed and at last paid in component DW It gets executed. So this is the order of execution. So let's proceed further. So now we have seen the updating fees. So now we will discuss about the remaining lifecycle phases. That is, and mounting which has component will unmount this method we generally use to do the clean-up task, like canceling any network request, removing event handlers, canceling any subscriptions. So now the question over here is what is not to do in this method? So my answer is, don't use set estate method in this method as it is on mounting fees. So component will never rerender in this phase. So know, let's proceed further and discuss about error handling. This phase of life cycle gets triggered whenever any editor gets socket. And this phase offers us two methods. Post one is the static get derived estate from error. And the second one is the component did get in and simple TO mike and say that these methods gets executed when there is an error, either during the rendering in a lifecycle method or in a constructor of any child components. These lifecycle method I'm going to cover in detail in the upcoming session when I will discuss about error boundaries. So this is what I wanted to show you in this session three, in the next session, till then bubble, I take care. 26. React Fragments: Hello, thanks for joining this session. In this session we are going to look into fragments. So let's start our discussions. What is fragment too? As we're all aware that react implementation is inspired from the DOM. So that means it is a hierarchical structure. And whenever we work with reactant, we are returning a single development which contains all the other child element within the project. But sometime in our project, while designing the component, we don't want to group the element as well as the component in a div tag. And along with that, we also want to dx m tech should be intact with to handle such situation. Where do we want to group the React element without using div, then fragment comes. So let us understand this with an example. To demonstrate this thing, I'm going to create a component folders. I let the component folder select this icon and it will heal. We will tell that fragment example, and this will contain a file fragment example ab.js. And this time we will generate the functional component with RFC snippet. And over here we're specifying some text like reactive bite F. So far, so good. C, which we will put this component in app.js. And over here we will specify rag mint exempt. Really close it if this, let's jump into the browser to see the output. So here you will find that we are getting dxdy step-by-step. No, let's proceed further. So now what I want in the fragmenting sample, I'm going to add some other element, like I want it over here. Let me remove this div tag. And over here I want to be H1 tag and this text will go inside. The H1 tag would take over, he'll delete. This goal would have paranthesis. And within that I'm going to introduce some other element as well, paragraph element I want to introduce and I will tell that lets learn step by step every concept. So over here you will find that broke the rule of React. Every element should be grouped into a single element. Would that the reason you will find that it is throwing an error over here. But try to resolve this issue, we have to understand that what they added, it throws, let's hover over heal. Then you will find that J6 expression must have one parent element. So this is the rule of react. Whenever we are returning any of the element, It should be returned as an hierarchy to know, let's save it and let's look into the edit which react throws. So over here also it is thing that adjacent j six element must be wrapped in an enclosing tags. We would let us do it the same which, which reacted. So what we will do first, we will enclose these tags within a div, and then we will look into what kind of DOM structure is being created by reacts with. Let's do it here. I will mention div and take this closing div and put it over here, save it. Now we will go to the browser to see the output, to overhear the look wise, there is no changes. And if you go inside that, if you click on Inspect, then you will find that within the div, which is inside the app, it contains another div, and within that we are having one NP tank. So what I feel that this div is not required as it is just get inserted due to the React rules. And this, Dave, I want to avoid it. How we can do this so that react will not add another DOM element which is not required to achieve this reactor forces fragments. So let's look into the example how we are going to use the fragment. So let's jump into the Visual Studio code. So overhear what we need to do. We will remove these deep tank as it is not required and over heal, we need to specify fragment and the moment you will add fragments CEO or to import gets inserted, this important option fragment, and you will close this one and grab the ending tag and put it over here, save it. Let's jump into the browser to see the different output ways. There is no difference. But the moment you who click on Inspect, then you will find that there is no extra div tag which gets inserted in the earlier example. But when we inserted the fragment and you will find that that fragment helps us to avoid the extra div tag within the DOM. So now let's proceed further. So now we have understand that what is the usage or fragment on this note never stopping over here. And this is what I wanted to demonstrate to you in this seasons, in the next isn't till then bubble I take care. 27. Pure Component: Hello guys, welcome to another session. In this session we are going to discuss about pure component. So let us start our discussion in one of the live session, I have discussed about the best practices within the subcomponent update, where I mentioned that whenever you are rendering the component, then prior to re-rendering, you should compare the difference between the current props and state values with the next plop sent a state values. If there is a difference, then perform the 3D rendering. And pure component concept is related to this logic only. So let's go to the earlier example which we did and look into shoot component update implementation information. So let's jump into the Visual Studio code. So if you remember that we have created LC parent component that is laid cyclic parent component as well as the LC child component to these two component which we have created earlier. And now, if we will go over here and hover on food component of D, then you will find one information about this method call to determine whether the change in Props and district should be triggered. Rerender, which I mentioned, component, always return true. So CO, What It has mentioned, pure component implements a shallow competencies and all props and this t, it returns true if any props or restate have changed. Shallow comparison concept is related to the V600E. Java is clip. You can refer my modern JavaScript courts where i have explained these things in detail. So you can refer that course and you will get the information about this ALU comparison for the time being. I just wanted to let you know that this is the comparison between the reference data type. That is an object will compare the reference of the object. If you want to learn more about this, then please refer my earlier course, step-by-step mastering modern JavaScript course, where I have explained what is primitive type, what is reference type? All the basic concepts of Java Scripting detail. So theoretically you understand that what actually the pure component, it's internally pure component implements. So silo comparison or props and state and return true if any props or is Th two, and it will not perform the re-render activity within the pure component. There is no change in today state. So we will understand with the example how it is different from the regular components. So let's do an example now. So I'm going to create three tapes of component post one is the parent component, which will hold the regular component and a pure component. So other two component which I am going to create, which is host one is the regular component and the second component which I will create, it's called pure component two. Let's look into that, how we will create it through to create the component. As a result, we need to select this folder. And over here we need to as specifying v component that is representing the radiant component. And within that of file, I'm going to create. Dc component on chairs, and this will holds the other two components. And I will generate the code with the help of snippet. And here we will specify those component which I am going to create next to the next component I'm going to create is the regular components. Who over here, I am going to create, I'm going to select this component folder, click on folded and over here, RC component. And this will contain the foil on component.js. And over here we need to specify the snippet or c. And here we will tell them, See component a, we know let's create the pure component. So how we can create the field component, we will follow the same as tips, the component click on folder. And over here we will just specifying your component door, this folder I'm going to create pure component. And within that, I'm going to create the final chord. We're component.js. To, to create the pure component, we need to use the snippet are V, C, E into. So here you will find that it is extended from the pure component class. So let's add text over hill. We would retell that pure component warning and let's add these component into the parent component. Camille. Over here we will specify the irregular component and then we will add pure component, no ads, this parent component within the App component. So let's do it. So let's go to the App component and over he'll just select this one, comment it. And here we will specify the patient component. Let's specify that as our parent component and it, let's save it. Now let's jump into the browser to see the output. So you will find that both the component gets added, but we are not seeing any visible difference for to understand the behavioral difference between both these components. Let's do some modification within the component. So let's jump into the visible is to do cool. So to demonstrate, I will do, I am going to introduce her constructor over hill and where I'm going to initializer is teat value. And this time I am going to tell that name and over he'll, I've written that viewer component demo and now I will introduce a method called component did mount. And within that, manually I'm going to update the state with the same value. So let's do it. So let's do it component did mount. And within that, I'm going to define windows set interval method. So let call it set interval. And this time over heal, we need to specify a callback function that will set the state over here. So here we need to this dot set state Underwood. He'll, we will assign the same value. There is no changes E. Now the next step, we will pause this as T2, these component. So let's do it. So we will tell that name equal to this dot t dot name. Same is the case with the pure component here. Also, I will pass the same mistakes, and now I will handle this within each of the component, within the regular component, I will tell that for heal. And here we need to specify this dot ops dot name and say My can apply to the pure component. So let's go to the pure component. Let's first save it, and let's go to the pure component. And over he'll also, we will handle with them dot-product, short_name, know C, we know the last step which we need to do. We need to console lock so that we can understand that when the rendering is being called over here, we will specify first, let's write it console dot log. And here we will tell that your component called copy this one. And then we will go to the regular component over here, we will specify the same, but this time we will tell that regular Component, save it, go to the parent component. And over here also we need to specify the parent component to lets us specify it paid-in component. The way we have done with all the changes, there is one changes is remaining. We forget to provide the interval over here. So we will tell that every thousand millisecond, that is 1 second, this gets executed. No, let's look into the output, what output we are getting. So this is the output we got. Let's clean this out and reload it. Then you will find that parent component, Regular component and pure component gets loaded. And after that, the regular component is getting executed with the parent component. But pure component is not gets called as it is doing the shallow comparison. Is there any change within the state? If it is known, then it is not getting called. So this is the difference between a regular component and a pure component. So let us proceed further to know we have understand that what actually the difference between a regular component and the pure component? The first difference, we found that pure component is derived from the pure component class and the regular component is derived from the component class. Another difference is internally, it is performing the cellular comparison within throught component of great lifecycle method to verify that whether there is a changing props and estate. If there is a change, then it gets read ended. And if it is known, then it will not rerender like regular component. So on this note I'm stopping over here. So in the next session, till then, Bovary Take care. 28. React Memo: Hello guys, welcome to another session. In this session we are going to look into react MIMO. So let's jump into the Visual Studio Code to understand this topic. So in the earlier session we have looked into pure component. So in the pure component session we have looked into when there is a difference between cellular comparison of drops and the state, then the component gets re-rendered. But pure component concept is being achieved within the class component. It would be really nice if we are achieving the same kind of functionality within the functional component. So this is what may move comes into the picture with the help of React memo, we can achieve the same functionality Woodward pure component is offering. The components get render only the estate and prompts gets changed to, let's look into the example how we can achieve this. So let's create a component. So I am going to create a folder over here called MIMO component. And within that I'm going to create a JS file memo component.js. And within that, I'm going to generate the functional component, cope with the help of snippet. So I need to write RFC into. So this will give me the functional component and he'll, I will pass the DA structured value as a parameter that is named. And within that, I'm going to print the name, which I'm going to pass from the parent component. And this thing over here, I can console dot log rendering memo components, save it. Let's go to the parent component. So this is my parent component which I have created. Let's come into this code. And over here, let's call our memo component two legs, right? Mimo component. And over here we will pass the name. So we will tell that name as an attribute, name equal to. And we are having the state which we have created in the previous season. And we, here we will pass the name. And if you remember, we are having over here this state, this set interval where we are having a callback function, which is calling after every 1 second. So if you're going way this without applying the memo component, then you will find that it is being called after every 1 second. So let us look into the output. And over here you will find that this memo component is getting called every time even though the exchange value is not getting changed. So what do we have to do? We need to use React.memo to stop the re-rendering. If the value is not getting changed, then it will not re-render. If the state value or the prompts value is not getting changed, then the component will not re-render. So let's do it. So let's jump into the Visual Studio Code and over heal, we need to go to the MIMO component and heal while exporting. We need to tell that react.me and over heal. We need to pass within the parenthesis. Let's save it. Now let's go to the browser to see the output. Then you will find it over here. It is not calling again and again, the memo component. If you go to our programs and you will find that we earlier we will console log it like this. We are console logging it. And earlier it is value was printing. But now if you look into the output, then you will find that it is not being called as we are not changing the state value. So this way we can apply the pure component concept with the help of MIMO component within functional component of React. And this is what I wanted to demonstrate to you in this session. See in the next session till then, take care. 29. Refs: Hello guys, welcome to another session. In this session we are going to look into perhaps. So let's jump into the Visual Studio Code to understand this concept. So, so far we have discussed about React and we all know that React provides us the virtual DOM and we use the ES6 to manipulate the virtual DOM. And behind the scene, the virtual DOM updates the actual DOM. Now in certain scenarios we required two X is the node of the actual DOM, so how we can access that? So here reps concept comes into picture. So reps provides us a mechanism by which we can directly access the DOM notes. So let's do an example to understand that how we can use reps. So as usual, I'm going to create a component. And to create the component, I'm going to create a folder over here, and we will call it as ref demoed. And within that, I'm going to create a file ref demo ab.js. And over here we will use snippet to create the class component that is r, c, e into, through this will give us the boilerplate code for the class component. And within the js X, I'm going to insert a input element. So let me put that and over here, I will provide that it is going to be the text, text. And let's add this component to the app component. So let's do it. Over here. We need to specify the href demo. And once you into it will automatically insert the reference of the component because we are using the auto import. So let's close it. Let's look into the output, what output we are getting. Then you will find that we are getting an input box over here. So now let's create a reference of the DOM node with the help of reps. So let's go to the Visual Studio code. So to make this example more meaningful, what I will do, I will do an exercise where whenever this base gates load, you will get the focus of the cursor over here and it will blink like that. And that we will achieve through the on focus method of the DOM element after getting the reference of this input element directly within the DOM node. Let's do it. So how we can get the reference of this input, that means DOM element reference for this particular element. So to do that, we need to create a constructor. So how we will create the constructed, there is a snippet available. We can use our const. And within that, I'm going to create a reps with the help of Create, React, ref. So let's do it. So we will going to l That this iBooks input box that means, and here I am telling that react dot create rep. So this method we are going to use to create the reference for this particular input box, which we will associate over here with the help of reps keyword. And that will give us the DOM node reference of this particular element. So once it is being created, now the next step, we need to associate this I box ref into this input element. So let's bind this. So how we can find it, we need to tell that this is a result keyword attribute. And over here we need to specify this dot iBooks. Now it is being binded to. Now let's verify that what this object contains. So to verify it, I'm going to use a method called component did mount, which we have already seen. It is a lifecycle method. And within that, we will console log it, console log and we will print this dot iBooks, and we will look into what it is returning and verify that what the thing it contains. So let's look into that. So let's jump into the browser. Now, let's go to the console by pressing up to l. And over here you will find that it has logged in object. And within that, you will find that it is referring to the current input to the. If we look into that, then you will find that DOM node properties which you want to use. So I'm going to use focus method of this input element. So now to put the cursor in this input box, I'm going to perform next step in our program. So let's do it. So this time I'm going to tell that this dot I box input walks dot current. It is returning current object. And I'm going to use the focus method. Now save it, and now let's look into the output. So let's close this one and refresh the page. And you will find that the cursor is blinking. And this is what we wanted to achieve. One thing I wanted to mention over heal, the focus method is part of DOM node. So now let us proceed further and create a button. And when we click on the button, whatever we will right over here and we will click on button. It will alert us the same message. So let's jump into the Visual Studio code as we are getting directly the reference of the DOM node. So what we will do, we will grab that reference and grab the value first. Let's grab the value and we will tell that. So to grab it, what we will do, we will create a method over here, get value. And this is going to be the arrow function. And we are going to tell that get value equal to arrow operator and the body of the function. And here we will write a lot. And within the alert, we will specify this dot Eyebobs dot current as it is a DOM element. So we can directly access the value property. So we will write value over here, and then we will insert a button over here and we will call this method. So we will tell that button and within here we will tell that getValue. Here. We will specify onclick equals two, and we will specify over here this dot getValue. I'll save it. Let's jump into the browser to see the output. So let's write something. Let's learn, react step by step, get value and see that we are getting the values, return whatever the value which we have inputted into the input box, it is alerting us with the same message. Press. Okay, so let's proceed further. So now we have seen that how to get reference of the DOM element using reps, using href. And this is what I wanted to demonstrate you in this session. In the next session till then, Bob, I take care. 30. Error Boundary: Hello guys, welcome to another session. In this session we are going to look into edit boundary. So let us start our discussion. So in one of our live session where I have discussed about lifecycle method of the react component, where I mentioned that whenever we create a class component, then react offers of various lifecycle methods that we have already discussed. Within that lifecycle method, react offers two methods which will be used for error handling. The first method is aesthetic get derived estate from weather. And another one is the component Date GAT. So to design the inner boundary, we are going to use any one of them. But prior to designing the edit boundary, we have told this trend that what is the significance of error boundary or say y, we are going to use error boundary. So what happened whenever we are designing any application in React? Then we have to also design the fallback mechanism. Whenever any application get broke at the runtime, then we need a mechanism that will handle the error and that error, we can display the form of user-friendly message. To understand this concept, let's jump into the Visual Studio Code to design error boundary and look into the usage of error boundary. So we're into the Visual Studio code. For this example, I'm going to create two component. The first component is going to be the functional component where I will pass the fruit name as well as vegetable. And it will check for, is it a fruit or is it a vegetable? If it is a vegetable, then it will throw the error so we can generate the runtime matter. And after that, we will design error boundary that is going to be a class component that we will use it as a fall back component so that whenever any error gets a occurred, then that component will get displayed. So let's start designing the component as is. Well, I'm going to create a folder over here and I will give it a name. Check through. And within that I'm going to create a file, check fruit ab.js. And in that I'm going to create a functional component with the help of snippet RFC into OK. And this will give me the functional component. I'm going to create two properties with the DEA structuring over here. This is going to be the parameter. One is the fruit name, another one is, is it vegetable flag? And this I am going to check if is it vegetable, vegetable, then it will throw the error, throw new error and the message it will print it as a vegetable or fruit. And if it is a fruit, then we will print the message. So let's write the name of the fruit. Now, I'm going to use this check fruit component in app.js. So to use it, let's call it check fruit, the reference God's added with the help of Auto Import extension. And over here I will pause the fruit name. It is going to be the apple and the another flag. This is going to be false. Close this one, let's copy it and paste it. So changed the name a hand over here I will specify oranges, grapes, and this time I will pass potato. And this time I will tell that is vegetable. Save it. Now let us look into the output, what output we are getting. Then we will find that it throws the edit and whenever any editor when thrown, that will break the entire React component tree. So to make it user-friendly, I'm going to design an error boundary. And that is going to be a class component and which will work like fall back components so that if any error gets awkward, that fallback component get displayed the message. So how to do that? Let's look into it. So to design the error boundary, I'm going to create again another component that is going to be a class component. And I'm going to give it a name error boundary. And within that, the file which I'm going to create is the error boundary ab.js. And within that I'm going to create RC, the class component. And this is going to contain a constructor. So let's specify the constructor const, and this will contain no state or it has error, which is initially it is being false. And this time I'm going to use a lifecycle method called static get derived from error. And this is being called whenever the error get. And over here we will return, return with hazard or true. And over he'll, let's remove the entire return statement. And we will check that if this dot, state dot has error, if it contains the error has error, then it will return the H1 tag with some user-friendly message. So we retell that, Oh, something went wrong, save it. So this is what our and boundary, so how we are going to use it, thing which we require is we need to go to the app.js. And here we will wrap the tick fruit component within the editor boundary component. So let's look into that. So here I have inserted it. Then reference got inserted with the Auto Import extension. Then close this one and take this closing pot and put it over here, save it. Now let us look into the output, then we are getting an error. That means we haven't handled it. If the case is normal, that means if there is no error, we are not handling anything. So let's handle that. So let's go to the error boundary. And over here, this is the scenario when editor is there. But in a normal case, we have to also specifying that if there is no error, then we will return as is the React elements, that is prop not children, we should specify over here. Now let's jump into the browser to see the output. So you will find the same message as we are running into the debug mode. But when it went to production, then you will get such kind of a message. So see you. Once we get the Edit, then it through though user-friendly error with the fallback component which we are getting from the error boundary. So let us proceed further. So to prove you the point, it is working as expected, Let's do an exercise. So let's go to the Visual Studio Code. And over here, let's comment out this error boundary, this one as well. Let's save it and let's look into the output. Then we got this message. And if you close this message, then you will find that there is nothing to display. So that means we are not handling anything over heal. But the moment we will enable the edit boundary, we will get the user-defined message which we are handling through error boundary where we are calling the fallback component. So let's revert it back. So let's revert it back, controls it, leave it. Let's go again to the browser. Let's close this one. Then you will see two over here. It printed the user-friendly message. So now let's proceed further. So this mechanism is working perfectly fine. But what I want that the edit is within this component. And apart from that, there is no error in all these component. So I want to display all this, which is root two and there is no error, whichever is visible, there is an edit. So to do that, I'm going to wrap each of the component, check fruit component within the error boundary component so that we can handle individually the fallback condition. So let's do it a specified over here. Let's copy this one, paste it over here, K Street again, over here, we will specify that. Then over here we will specify it. Now save it. Now let's look into the output, then, Camille, close this one. Then we will find that apple and oranges, we have printed grips remains. So let's do that as well. So we haven't handled the grape cut, this one homeo, wasted, and at last, this one, this one based it, save it. Let's jump into the browser to see the outputs we are into the browser. Close this one, then we will find that it has printed Apple, oranges, grapes. And the last one is the visible that the reason it printed the 12 back message, it printed the user-friendly message, which we are handling through fallback component with the help of error boundary. Whoa, let's proceed further now. So now we have seen that how to create inner boundary and how to design all what component. So that whenever any error gets soccer than we can handle through the fallback component with the help of error boundary. So this is what I wanted to demonstrate to you in this session. See in the next session till then Bob, I take care. 31. Higher Order Component: Hello guys, welcome to another session. In this session we are going to discuss about higher order component. So let us start our discussion. Higher-order component is one of the design pattern off react. With the help of this, we can design the reusable component. For example, if you look into this, then you will find that we are having a component one and component two, and both are doing the same thing, but they're trigger point is different. For example, if you are working with the client and they are looking for a button whenever they will click on the button, then it will increment the value on the button. So you need Healy, you design that and later point of time, they want the same functionality, but they won't this time on the hardware. A mouse on an H1 tag. So that means on hover, it will increment the value on the H1 element whenever most get hover in wood, the requirement you form that the increment to task is common irrespective of from where it is get triggered. This is one of the simplistic example which I'm quoting over heel because I wanted to make you understand that what actually higher-order component technique offers us two-to-one distended better. Let's jump into the reasonably Studio code and design the whole scenario within code. So via into the Visual Studio code, the posttest step I'm going to do is I'm going to create a folder called click counter. And within that, I'm going to create a file called click counter ab.js. And this is going to contain a class component. For that, I'm going to write RC. And this will give me, this snippet will give me the boilerplate code. And over here, I will do two things. First, I'm going to introduce a constructor which will contain a count state and let's write it. And this is going to be slays 0. And another, I'm going to introduce a increment method. So del that increment counter. This is going to be an arrow function and this contains the increment logic where I'm going to chain the theta state and I'm going to take the previous state, and then I will manipulate that. And over here, I will specify the block over here, and that will return the count by incrementing it one. So this we will get from the previous state, dot count plus one. Now here I will introduce a button. So let me introduce a button over here, and over here, I will specify button, and that button will contain on flicked on click this we'll call the method which we have created increment counter closer. And over here we will let specified some level, and this will print though this dot eight dot count and times. So whenever this button gets clicked, it will increment the counter. So let's look into the output. So what output we will get, but make sure that you are adding this app over here. So let's add it. And we are going to tell that lake counter and the reference is get incorporated within the file with the help of Porto import extension and over he'll make sure that you are closing it, save it. Let's look into the output now. And over here you will find the button. And if you click on this button, then it will increment it. Those number of time, how many times you will pick this value gets incremented. Now let's proceed further. So now on the same aspect, our client worn a hover counter so that whenever the mouse get hover, the value gets incremented. So let's design that as is. Well, I'm going to create a folder over counter. And this is going to contain a file with the same name hover counter Node.js. And this is also going to be a class component. So with the snippet Darcy, I'm going to generate the boilerplate code. And over here, again, I'm going to introduce constructor. So let's write constructor and this container count 0. And now I'm going to introduce the same. Now this will also contain the increment counter. So let me copy it to save the time to cope with and put it over here. So now we have added the function over heal. So the next step is we will add the H1 tag over here, and this will contain a method on mouseover. And whenever modes get over it, we recall this dot increment counter. And over here we will tell that hover and specify the street value over here, this dot t dot, and this is going to contain times also, save it. Now let's go to app.js to add this component, camille and tell that hover counter and it is get added over here. So now let's jump into the browser to see the output. And over here you will find that we have introduced a hover functionality with increment. Same is the case with this one. Now the common thing is oval here is we are having a increment method or say, increment functionality which is repeated and this will violate the DRY principle. There is something called DRE principal. Don't repeat yourself. Whenever we write some enterprise application, then make sure that you would write the code in a more reusable way. So to make it reusable, what I'm going to do, I'm going to introduce the higher-order component concept. And we will look into how to design how your order components so that we can achieve the reusability. So let's jump into the Visual Studio code. So to design the reusable code with the help of higher-order components. So we need to design the higher order component. So how we will design it, we are going to create a folder called counter functionality. And this is going to contain a reusable code which will contain the logic of counter functionality that is increment. And I will tell that counter functionality ab.js. So now we have to create two an arrow function. I will going to tell that Const, and I will tell that update counter functionality. And this will take put that I will tell that input component and when it will receive the input component. And now within that, I'm going to create a class component. So RC into take this one and put it desktop as it is an important statement. And then we will design the same functionality, what we have designed for our earlier two-component, click counter and the harbor counter to the first step. We need to introduce the constructor with the help of our call snippet. And over here we will keep the counter count value, and now we will have the increment counter. Let's copy that one, so let's copy it. And over here is the functionality and this is going to be input component. I spelled it wrong input component. Grab it. And over here I will put the input component and I will tell that count equal to, and this will contain this dot state dot count. And the functionality I'm going to have over here is the increment counter. Hand. What it will do, it will call the method this dot increment counter and save it. Make sure that you are proposing this one. Now, save it. Now we have added the functionality. One mistake, I did it over here is the name of violet is wrong. It is, it is going to be counter, counter functionality. And over here you should make sure that that should also be corrected. Hopefully, this one over here, who save it? Now we have done with the higher order component. So how am I going to use this one? So now the next step to use it, we need to go into the click counter as well as hovered counter over here. And he'll need to remove all these things. So let's remove it know to use the updated counter functionality. Now, the next step we need to wrap the click counter within the counter functionality to we were using the update counter functionality. So let me write it update counter functionality, and this is being rubbed over here. So current this one and paste it over here. So this is one step, another step, we need to change it this prop, earlier it was this dot increment counter. This time we just need to specify that this dot product dot increment counter. And over here in steady state, we will mention props favorite We have done for a good counter, same we can repeat for Homer counter to copy this one. And over here we will go post, let me delete the constructor and the functionality. And over he'll update functionality and we need to close this one. Now again, over here we need to specify props, dot increment counter. And over he'll draw a dot count. Save it. Now let us look into the output. So now we will find that we got an error. So we got error because of named export. So let me remove that. So make sure that you're not using the named export in the higher-order components. So let's delete this one, save it. Now let's jump into the browser to see the output. And we will see that we got the same kind of output which we, we're achieving through food, different implementation of the same thing that is increment counter, but with the help of higher-order component, we designed the reusable component, which we can use anywhere. So let's proceed for those. So now we understand that how to design higher-order components and how we can use this higher-order component in React. And this is what I wanted to demonstrate to you in this session, in the next session till then, bye, bye, take care.