React Hooks with project | Sarfaraz K | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (2h 14m)
    • 1. Lecture 1 Introduction

      1:13
    • 2. Lecture 2 What are react hooks

      1:36
    • 3. Lecture 3 Creating our first project

      6:34
    • 4. Lecture 5 previous state with useState

      2:44
    • 5. Lecture 4 Introduction to useState

      8:57
    • 6. Lecture 6 difference between this

      9:07
    • 7. Lecture 7 create multiple state variable

      4:01
    • 8. Lecture 8 useEffect hook intro

      5:50
    • 9. Lecture 9 more on useEffect

      5:58
    • 10. Lecture 10 effect cleanup

      9:55
    • 11. Lecture 11 fetch data in class component

      4:39
    • 12. Lecture 12 how to fetch data with react hooks

      7:59
    • 13. Lecture 13 creating custom hook

      6:03
    • 14. Lecture 14 project setup

      11:34
    • 15. Lecture 15 weather card component

      12:00
    • 16. Lecture 16 CitySelector component

      8:20
    • 17. Lecture 17 usefetch hook

      11:36
    • 18. Lecture 18 weatherlist component

      7:37
    • 19. Lecture 19 tweaks in application

      8:35

About This Class

React Hooks are the latest features of React. They were introduced in version 16.8. If you want to keep your React knowledge up-to-date then you definitely should learn React Hooks.

But what is a React Hook?

A React Hook is a function which lets you hook into function components and use the React features like lifecycle methods and state. Before React Hooks this was only possible with class components.

Why you should learn it?

Even though the creators of React do not recommend migrating existing codebase to React Hooks but they strongly suggest that you create your new components using React Hooks. So if you want to keep up with React then it's time you learned React Hooks.

Transcripts

1. Lecture 1 Introduction: Hello friends, welcome to this course on React books. We are going to learn the reactants by building our project on whether application. So are there any goals, requirements aperiodic beside, to work on this project, you must have the following skillset. You should have basic knowledge of React and you should have basic knowledge of ES6 ports. Objective, participant will be able to implement react books concept in current and future project. What you will learn in this course, we will create a weather application using reactants or other targeted students. Students with no React groups experience, rent ten developers, anyone who wants to learn react books. So by the end of this course, you will have the following skillset. And John, regarding practical and real life scenarios of creating weather application using the act. Ok, so let's see what are we going to begin? So we are going to build this weather application. So if I type Mumbai and if I click contact, whether so it will display fire days, weather report of Mumbai city. So this is the application which we are going to vary. So let's get started. 2. Lecture 2 What are react hooks: Hello friends, welcome back. So what our React hooks, react hopes are a new addition in React 16.8. They let you use date and other React features without writing a class. In React, we have to kind of component's class component and function components. In the past, glass components did the heavy lifting. If we wanted to keep track of certain values by putting them in State, we needed class components. Class components were previously the only kind of components that had stayed in react. The same applied for interacting with an API. Lets say an external API, oughta browser API. We needed to use a lifecycle hook like component did mount to reach out to those API. And those are only available with class components. By comparison, function components, but important for displaying our mockup. And a data stored in state VIP passed state from class component to render in function component through prompts. This function components helped us break our application into more readable analogical componentry. React hooks represent a huge change to react library and how we write React code. Now why is that? The main reason is because we technically no longer need class components anymore. React Hooke's gave to function components all the functionality we previously relied on class component. So this was an introduction on what I react hooks. And I see you in the next lecture. 3. Lecture 3 Creating our first project: Hello friends, welcome back. First, let's create our project. But before we create our project, let's look at the tools which are required for this course. First, we have to install NodeJS. You can do this by visiting NodeJS DOT ORG. As you can see, there are two versions of NodeJS. One of them is LTS withstands for long-term support. Basically, the LTS Virgin is less stable virgin of NodeJS. And I will recommend that you download this word, Jennifer NodeJS. The other Virgin is current Virgin. And this contains all the latest features, but we won't be needing any of the latest features. So I would recommend that you download this LTS virgin. Along with that comes npm. Npm is the node package manager and we will need that tool in order to install creative React app do in order to download, you need to go to downloads. And if you're a Windows user, you need to click here. And if you are a Mac user, you need to click here. So here is the LTS Virgin, and here is the current version. So you need to select this tab, and then you need to click any of these. And the second tool we need is the Code Editor. I am using Visual Studio code. So you can download Visual Studio code from this website for Visual Studio.com. And if you're a Mac user, you need to click on this. And if you are a Windows user, you just need to click on this arrow. And here you can find the installing and it is free to use. And the third tool we need is Create React app. It's an npm package which we can bootstrap our React application without 0 configuration. So let install our first project. I've already installed Visual Studio code, and I have already installed Node.js as well. So let's go to Visual Studio code. So this is the terminal. Let's say if your terminal is not open, then you need to click on control and back to t. So you can see this terminal. Now I need to create the project on the desktop. So I'll go to desktop by writing cd Desktop. And I'll create my project by typing np x Create React app. And I'll name this as you can give any name you want. Now it will take some time to create this project. So we need to wait a while. So it will install all the packages of the egg or the egg dome vx scripts. Now our project has been created and now we need to go inside our project folder. So for that we need to write cd react, hyphen books, the name which we give for this project. Now we need to write npm. So before I write npm, start, first, we need to go to the folder. So let's open the folder which is at their desktop. So React hopes, I'll just open this. Now we need to open a terminal by pressing control and back tick key. Now we can type npm start. So we have successfully created our project, but now we need to remove some files which are not required. Okay, so in source folder, I don't required app.js, so we will remove this file. So let's deleted app.js. We don't require, so let's delete this file as well. Then we don't require index.js. So I'll delete this. I don't required logo dot SVG. So let's remove that. Now we need to go to app.js and we need to remove the files which we have deleted. So your I'll remove the import. And in index.js, we have removed CSS, index.js, ESS. Let's save this. And we have removed the logo as well. So in app.js, let's remove everything. And let's return a simple div with Hello. React. Let's save this. And now let's check in the browser. Now as you can see, we have printed Hello React. Though. This is it for this video. And I'll see you in the next video where we will talk about US State. So I'll see you in the next video. 4. Lecture 5 previous state with useState: Hello friends, welcome back. In the last video, we have created our basic counter with class component as well as function component. So if you look back to our class component example, you will see that within increment function, we are calling set state and we are updating the count value according to the current value that we have in the state for count. So it is important to note dead set state does not update the component immediately. In every case for one reason or another, the update maybe postpone to a later time. So when we want to read from state, right after calling set state, we might get wrong value. So this dot set state can take two nanometers. One barometer is new state variable for state variable, or it can take a function as well. So basically we can pass a function. We can say that previous state. And this updater function can be an arrow function. And that returns an object. So this returns an object where the updates made to town is based on the previous state. Now two x is the previous value of cone. Here we need to write previous state dot-com plus1. And this ensures that we always have the correct value for our counter. Let's save this and let's check it in the browser. So if I click here, our counter works. Now let's do this in our function component. So let's go back to Visual Studio Code, and let's go to our function component. So how do we ensure that we always using the correct value of count? So we didn't every sector function return from US state, we always have access to update their function. So basically we can pass function to set count. So here we can see that previous count. And again we need to right arrow function that will return previous count plus one. So let's save this and let's go back to the browser and check. So if I click here, this counter works. So the value which we see for accounts should always be incremented correctly. That is based on the previous value. So this is important only when the state updates many, many time in short period of time. But in our case, this is not necessary since we only update the state when we click the button and we can click the button so fast that the problem arise. So in our case, this is not required. I will remove this and I keep it as it was before. Okay. And I'll save this. So this was just to show you how we can get previous value by using updater function. So this is it for this video and I'll see you in the next video. 5. Lecture 4 Introduction to useState: Hello friends, welcome back. The first react book, which we are going to take a look at is called US state. As the name suggest, it will allow us to basically use state inside a function component. Previously, if we wanted to use date, we have to go with the class component. But with React books, we can use date in functional component as well. It's the best way to learn react talks and to see the difference, how it differ from class component implementation is to see an implementation of the same component using ES6 classes. And then take a look at the implementation of the same component with Reactome and the functional component. So in this tutorial, we will follow that approach. Let's begin by creating a simple counter where we will have a button which will keep track of the number of times it has been clicked. So let's go to Visual Studio Code. And inside SRC folder, we will create a new folder with the name components. And in components folder we will create a file with the name counter plus dot JS. So as we need a class component, I will write r, c, e, and then presser tab. So I'm using an extension which helps me to write this code, which is E7 reactor ydx graph QL, vague native snippets. So you can install this extension in Visual Studio code. I've already installed it. So your other shortcuts to hide the code. So you can just have a look and go through it. I'm closing this and I'm going back to counter class dot js. So this is a class based component, and inside this div, I will take an H1 tag and URL, right? I was clicked. Times your myvariable will come. So let's keep it empty. And now here I'll take a button which says Click Me. And let's save this. So we will have a state which will have a variable that will show the count. And this button will help to increment the count. So the first thing we need to do is to write a constructor so we can initialize state. So inside this component, we will write a constructor, which will take one argument props. And inside this curly braces we relate super props. And then we need to set state. This state equals two. Now our initial state, we'll set found to be 0. To display this variable. Here we need to write in the curly braces this dot state.com. And we need to close this deliverances. And inside this button tag, we will define a onclick event. And this will have a function, the start increment. And we need to define this function. So up here we will define it. So I'll write remained and then an arrow function. So and inside this curly braces, we will set the count. So this dot set state. And inside this bed entities we will take the holy places and yet we will update the count by writing count, which is equal to this dot state, dot count plus one. And let's save this. And now we need to import this counter class in app.js. So let's go to app.js and year we need to import that component. So import counter plus from dot slash component slash founded glass. And inside here, we need to render it so counter plus. And let's save this. And lets second the browser. If I click this, it will increment. So let's click this. So now it is implementing. So let's have a space in between this soil due to counter class and I will add a space. Let's save this, go back. So now if I click, this counter has been updating. So it's working fine. Now the question is, how do we implement a counter like this enough function component with the help of React hopes. So let's go to Visual Studio Code and you're inside the component folder, we will create a new file with the name counter, hopes counter who dot js. And I need a functional components, so I will write r a FCE and attack P. And inside this div, I will write x you want to tag. And I was clicked. So your variable will come. So let's keep it empty. And after that I'll write button. Click. Mean. Let's save this and let's import this component in app.js. So I rewrite import founder woke from dot slash components slash counter Huike. And here I will render it so counter. And let's save this and let's go to the browser route when extra E. So now if I click nothing happens, it will not work. So let's go to Visual Studio Code. Now if we want to add some state into this component previously we use to convert it into a class-based component. But we instead use a hook which we have to import, which is called new state from React. So your i will write Fama and we will import the hook, which is fun. You state it's a built-in book, okay? When we call US state, we pass our initial value. So if I write new state, we need to pass a initial value for whatever the thing in this state we are trying to store should be. So if we look at our class component, we have account with start at 0. So yeah. So your, we will pass 0. So we're going to initialize some value at 0. But this is a function. It's not defined in this component, and it's going to return an array to us with two different items. And we need to initialize these two items using a variable keywords such as constants. So yeah, we need to write bonds and we need square brackets, and there'll be two items, okay? And you only need to write well to. So the first thing it returned is the piece of state. So we can call that as count, as we did it for plant-based component. And the second one we can call it as sect found. So the first one is the piece of state which has an initial value of 0. And the second thing is the function that will update the piece of state. So to display this count, we need to write I was clicked curly braces. Inside this button tag, we will write onclick event, so on flip equals two, and now we need a function. So your eye right increment. We don't require this darting pyramid. Okay? And then here inside this counter hoop function, we can declare this function or we can define this function. But we need to make sure that we are declaring this function with const or some variable keywords. So I take constant increment equals two, an arrow function. So how do we increment our count value from 0? As we know said, count is the function. So let's just try executing it within increments. So your Albert LB, bear, we can take the current value which is count plus one. Let's save this and let's go to the browser and check. So if I click here, it will increment. So it's working fine. And similarly, if I click here, it will implement. So this was created with the help of class component, and this was created with the help of React hopes. So as you can see, we are able to increment the count and keep track of values and state using US state hope. So this is how we can use view state in React books to keep track of values and state, though this is it for this video, and I'll see you in the next video. 6. Lecture 6 difference between this: Hello friends, welcome back. In this video, we will see the difference between this dot set state and the second function of the state variable returned by the US State differences that this dot set state Mergesort and new state with the previous state. So for example, if we have the property next to count and we only pass that count, basically what it does, it merges the previous state and only the count value will be overwritten and the other values will be same as they were in their previous state. While setCount will not merge the object, it will just override everything. So it is very important difference and it can lead to big problems. If you don't remember this. Let's take a look at this different. So let's go to counter class component. And I will add one more property to the state variable. Let's say we want a light switch. You can turn on and off this light switch. So I will add a state property is on. And let's say at first the switch is turned off. So let's assign false who is on property. Now let's update the new value. But before that, I haven't changed the name of the function to handle click. And I'll copy this and paste it here as well. Because now we're using the same function to increment the count, as well as turning the light on and off. Now we will update the new value if the handle click function is called B12 switch on the light. So basically we will change the value to be true. So we need to write is on. That will be not this dot state, dot is on. So basically we are reversing the value of current is on property. So if it was false, Let's set it to true and vice versa. And down here, I will take one more H1 tag. And here we are going to print the value. So your, We need to take curly braces. And here we need to say this dot state, dot is on. If this value is true, then we need to print on. Otherwise, we need to print of. Let's close the curly braces. And let's say this fine. And we can simply plug the values from the state variable. So here we can see bonds found and is on equals to this dot state. So instead of this dark state, we can write is on. And here I'll remove the real estate and you're also, I'll remove previous state. And we can write only count plus one. Let's save this file. Now let's take it in the browser. So let's go to web browser. And if I click here, let's refresh this fine. But now as you can see, it is first the value is off and we have 0 down. If I click this, now this is on an The counter has been incremented to one. Now it is off and it is incremented to two. So it is working fine. Now let's go back to Visual Studio Code. And we need to implement the same functionality in counter UI components. Before we implement the same functionality as we did encounter class component. I will show you something. Let's go to counter class component. And here also we can restructure this value. So we need to write phones. And in curly braces we will write is on. And second value is found, which is equal to this dot state. Let's save this. And yet we can remove the start state. Similarly, here we can remote there start state. Let's save this and let's go back to the browser and check. So let me refresh this and if I click here, it should work. So now it is working fine. So this makes up both clean and clear. So let's go back to the counter WHO component and let's implement the same functionality which we have done for counter class. But before that I will comment this line, this we will require later on. Now let's call the US state function. So I'll call you state function. And here we need to pass the initial state. Initial state is same as we have in the class component. So let's go to counter class component and copy this initial state. And I'll come back to founder hoop Component and I'll paste it here. Then, as you know, it returns an eddy. So we will return an array. So we can the structure the eddy using ES6 D structuring functionality. So we can say state, any state. And here we need to assign it to a variable keywords. So we'll take ponds and then I will change the function name of increment to handle click. Because now we are using the same function to increment the count as well as turning the light on and off. And I'll copy this function and then paste it here and inside the handle click function, let D structure is on and count the same way we did it in our class component. So I'll write const, and in the early places I write is on. And the second value is count equals two state. Because we are going to D structure is on income from the state variable. So that's why I've written state, not the start state. Ok, now this will be an object, so we need to write curly braces. And here also, we need to end this with the curly braces and you're bound, which will be count plus one. And the second value is, is on. That will be not is on. And this will be set state. So instead off-set count, I read said state. And here we need to take the H1 tag the same way we did it for class component. And I will write, let's copy this line from year. So I'll just copy this and paste it. Let's say this file. So we are getting some error, is on is not defined, okay, year I need to write is on. Let's save this file. You're also we need to restructure the value. So cons is on and count, which is going to equal two state. Let's save this. And now let's go to the browser and check. First it will be off and the counter will be 0. Once I click, you can see it is switching on and off and the counter is incremented. So it is working fine. Let's go back to Visual Studio Code. So as you can see, we can pass an object to the US state function as well. But I wanted to show you that how steady-state and this dot set state differs. So let's go to counter class component, and Let's remove the account update functioning or D from Europe. And let's save this file. And let's go to the browser. And let's refresh the page. So if I click this button, now as you can see, it's still remain 0 because we don't update the count so it won't increment. Now what happens if I remove the accounting increment from our components? So let's go to Visual Studio Code and let's go to Counter component, counter WHO component. And let's remove this update functionality of count. And let's save this. And let's go to the browser. Let me refresh one's. Now let's see what happens. Now if I click this button, the value disappears. So why it disappeared? It disappeared because it won't merge the previous state with this object. It overwrites everything. So basically the new count state variable will be undefined. And this is why you can't see anything yet. But in our ES6 class component, it basically merges the previous state whether count is 0 and override this property, and it will still keep the count property as 0. But how it works in our counter root component, if we call set state, it will override the whole object. And it is very important to remember because as you can see, we are going to lose information because the setup function returned by the US State won't merge, but it will update the whole object. This is very important thing to remember, though. This is the thing which I wanted to show you, and this is it for this video, and I'll see you in the next video. 7. Lecture 7 create multiple state variable: Hello friends, welcome back. In the previous video, we have discussed the difference between this dot set state and thus adder function return by the US State reactor. That is one problem that comes from the fact that the center function does not merge but replaces the state. What if we have ten properties on the state object? That would mean that every time we said does state, we have to pass ten properties. Yeah, otherwise they would just disappeared. We can fortunately create multiple state variable using US state. So basically we can separate different parts of state into its own variable. We can do that by calling new state multiple time. So let's see an example for that. Let's say we want to expect bound and is on who its own state variable. So basically, count will remain the same as it was in the beginning. And we are going to have a new state variable is on, which contain is on. That is why I said in the previous video that we shouldn't remove this because we are going to need this. Let's uncomment this. And let's come in this sport. We're not going to use this code. Let's call US state function that will return an array. And we can destruct this adding with the new state variable. And let's name it as is on. And the setup function will be sect is on. And we need to assign it to a variable keywords. So let's write ponds. And the initial value of his own variable will be false. Now you'll stay at this part ways in our fontanelle component and basically react will create two state variables. And it is very important that this two state variable will be totally independent from each other. If we call set is on, we will set the on state variable, but we want that the down state variable. Now let's update the handle click function as well. So let's remove this entire pool. First we want to toggle is on state variable, so let's call set is on. And we need to set it to not is on. Basically we are reversing the toggle function. If it is false, it will be true. And if it is true it will be false. Now let's call the count function so perfect bound. And we will set the count variable to count plus one. Let's save this file and let's remove this. We don't require this because now we are not using an object in the initial value. So let's remove this. Lets save this and lets take in their browser. And let me refresh ones. And if I click here, it will behave the same. So as you can see, it behaves the same as it was before, but the implementation differs because now there will be two state variable. Let's see that in reactive bool. So right-click and inspect. And we need to click on components. And as you can see, there are two state variables. So if you're not using vg dev tools, you just need to go to Google and search react. They're pools. And you can install it in your Chrome browser. Okay, I've already installed it. So in this way you can see there are two different state and this state are totally independent from each other. Let me close this. So if you want to update one, it won't touch the other one. So basically we have to update them independently. This is why it is very good because they are independent weekend set great concern by creating multiple state variable. So this is it for this video, and I'll see in the next video, will then take care and bye bye. 8. Lecture 8 useEffect hook intro: Hello friends, welcome back. The next react, which we are going to take a look is BAD news effect. Use Effect book lets you perform side effects in function components. So what are side effects? It means that a function or expression changes some state that is outside of its spoke. In React side effects. I like bawling and API logging or subscribing to listeners. If you take a look at our class component, how we did side effect. We do it by writing code in component did mount and component did update. And we clean up this effect in component will unmanned. You should not perform any side effect inside the render function because it leads to inconsistency of UN. There are two kind of side effect in React. There are side effects which required a cleanup. For example, if you've set in time interval that needs to be clean up. If you submit a socket even, then its need to be cleaned up as well. And there are side effects which don't require a cleanup. For example, if you just log something or if you just perform an API call after that, you can basically just forget about this effect. So first we will take a look at the effects that don't require cleanup. We will modify the document title when the 0s on state property gets toggled. So basically, we always want to show that is on value in the document title. So let's go to counter class component. So when react mount, our counter class component will call component did mount. So you are we need to write component did mount. So when this function gets called weekend, say that document dot title, which is equal to this dot state, dot is on. And when we click the button, then react will call the render function, then it will call component did update. And when the function gets called, we can see that document dot title, which is equal to this dot state dot is on. Let's save this and let's take it in the browser. It will refresh this page. As you can see it document dot title has been updated and if I click this button, it changes. So this is how we perform side-effect in class component. We have to use component did mount and component did update. So when react mounts this component component did update won't run. Only component did mount rents. That is why we have to put this code as well. Otherwise, in the first render, we won't be able to see the false value in document title. So the problem is that we are duplicating the code. So we have the same code in different functions in React. If he wanted to perform a side effect after the first render, then we have to use component did mount. Otherwise we can use component did update. So basically we have to use both the functions. Now let's implement the same functionality encounter who components. So let's go to counter WHO component. And here we need to import use Effect book. So use effect. Use effect hope is also a function so we can call it, so let's call it here. Use effect. And US effect hope requires a function which will be executed by react after the dome has been updated. So we have to pass a function to use affect function. So let's pass an arrow function. We can say that document dot title, which is equal to is on. Let's save this. And then we need to go to counter class component and we need to come in. Component did mount and component did update. Let's save this and let's go to the browser. Let me refresh. So if I click here, nothing happens because we have commented component did mount and component did update. But if I click here, you can see the document title has changed. So let see what US effect does using this hope you can tell React component need to do something after every render. So you pass a function to use affect function and react. We'll call this after their dome has been updated. It is guaranteed by it react that the DOM has been updated before calling the US effect function. And as you can see, the user effect function is inside the counter hook component. So we can exist all the variable defined by US state as well. So it is important to know that US effect function runs after every vendor, even after the first render. So to show you, I will just spend so long first vendor. And if I save this, and if I go to the browser and let's inspect, and let's go to console. So here as you can see, this is the first render. If I click this button, this component re-render and use effect will then. So let me click this button. So use effect ran and as you can see, it logged our first render again, once I click again, so it will render the component and we can see the log. So whenever you click the button, our component re-render and use effect will then this means that every time React render, a new anonymous function will be passed to use effect might be totally unnecessary. If you think about it that is on hasn't changed yet, then there is no point in creating a new anonymous function and passing it to use effect. Later on, we're going to take a look at how to avoid this problem because this can lead to a performance issue. So let me remove this. I just wanted to show you that use effect runs on every rerender though. Let me save this, and this is it for this video, and I'll see you in the next video. 9. Lecture 9 more on useEffect: Hello friends, welcome back. In the previous video, I have told you that on each render, a new effect function is created and executed after their dome has been updated. Since our Counter component updates. Only when we click our button. Let's try to move the count increment to the effect function. We can do that because if we update is on-state variable year, then it will regard early they ended, which means that the effect function will get executed after their dome has been updated. So let's move this setCount inside the US affect function. And let's see what we have. Let's save this file. Let's go to the browser. As you can see, it is incrementing continuously, right? As it happens, as we know the equity render the component when the state changes. Since we are updating the state in our US effect function. So basically it's an infinite loop. So what we want now is we want our effect who run only if is on-state variable changes, because that's when we want to run our effect function so that it can update the document title plus the count. So how can we achieve that? The user effect hoped can actually take a second argument as well, which is an array. So it takes not only the function, but it can also take a second parameter. The second parameter will be an eddy. And audio variables, which it should consider when it decides if it should execute dysfunction or not. So how it works basically, it looks at the content of the array and compare the previous Eddie. And if any other value specified in the editor changes compared to the previous value of the array that it execute this effect function. If none of them changes, then it won't execute. So in the end, we want to put it on. Because as you can see, the ES Lin also give us edition react hope use effect contains a call to set count without list of dependency. This can lead an infinite change of update to fix this pass is on bound as a second argument to use Effect book. Let me minimize this. So ES lint gives us edition and it knows that we have to look at is on value. So that why I have added is on value year. And let's save this fine and check it in the browser. Now you'll see that it won't update continuously. So let's see how it works. Now when there is an initial render, the document title is updated and said countless tall. That is why you can see one. So this is an issue which we will resolve later. And when it updates account, it will re-render dot component. So a new function will be passed. The US affect function and an array which contain is on. So it will check the previous is on value which was false. That was the initial value and new ALU which is still false. So it sees that falls and falls is not different. So React won't execute the effect function. But that is one problem. Now, we have this value when why did it happen? Because the effect runs on the first render, as I told you in the previous video. So this effect behaves as a component did mount and component did update together. So it implemented down. The easiest solution to this problem is to have an if condition. So we need to write if found equals to 0. And on is not through means it is honest false, then simply return. So this happens only on the first vendor after that, when we click our button, this set is on will be true. So basically this will never be true, so it will never return. Let's save this file and let's take it in the browser. Now you can see our counter 0. So let's go to the Visual Studio code. And if you can see, so as you can see the complaints that this effect has another dependency of count, but we will not fix this now because we know that count won't get updated by itself because we only increment the count when the set is honest fall. So let's ignore this warning. Now. How can we achieve component did update. So how can we achieve the facility of component did mount only, as I said before, this effect is basically both component did mount and component it update. So what if I want to do something only after the first render, for example, just to call an API. How can we do that? I don't want to call API on each render. So in that case, we can create a new user effect. So you are, I'll create a new use effect function. And inside I will pass an arrow function. And I'll just write console dot log first render. And if we pass an empty array, and let's save this file. So this is how we can achieve the functionality of component did mount, because on the second render, react will compare the previous value of empty array, which is 0 element, basically the new error which is still empty edit. So the axes that none of the elements change, it won't execute this effect function. So this is how we can achieve component did mount and we don't have to put anything inside the second argument. So that's basically component did mount and company did update. In our case, we can pass is on state variable. That will be component did mount and sometime component did update. That is on state variable changes. Now let's save the file and check it in the browser. And let me inspect, and let's go to pencil. So you are, as you can see first render. And if I click this button, the state changes, but the effect does not run. So this is it for this video, and I'll see you in the next video. 10. Lecture 10 effect cleanup: Hello friends, welcome back. In this video, we are going to take a look at the effects which requires that you enough. But before that, I want to rectify this board in US effect this if condition should come after document dot title. Because as you can see in the browser, we can't see false value in document.write, eat because this if condition is at the start, if we remove this and if I paste it here, and if I save it, then if I go to the browser, you can see the false value and the count value is also 0. Now if I click this count value incremented and this becomes true. So this was an error. And we need to remove one more warnings. So here, as you can see, encountered a class bounded assigned a value but never use. So let's go to counter class. And as you remember, we have removed account from here, so we need to add it found, found, which will be countless. When let me save this. Now as you can see, the warning has gone. But we can't remote this warning because in our example, if we add account here, it means that this effect will be created again if the account changes and when the count changes, it triggers a remainder, which means we're going to increment the count again. So it will basically be an infinite loop. So if I save this, the warning will go. But if I go to the browser and if I click this button, so you can see the bound is incrementing than continuously. So this is why we can't add bounty. And as you can see, we have to use effect books. This is the first one and this is the second one. We have one in which we log when the component get mounted. So I am talking about this effect. Here. We have another effect which has to do with his own state variable. If this is on-state variable changes, we do a couple of things in this effect. As you can see, we are separating tons ends, but in our class component, we would need to put document title equals T2 is on and console log first render in the component did mount function, which would mean that basically we are putting unrelated code into the same function, which is not a good pattern. It is important to note that the effects will run in the order they were created for first, this effect and this effect will run. It is very important. Sometimes we write the effect which needs to be cleanup. For example, if we start a timer, we have nuclear the interval or who subscribe to listener, we have to unsubscribe to avoid memory leaks. We did that cleanup part in our class company. Usually in the component will unmount funds and sometimes in the component did mount as well with React hope, it is very easy to do the cleanup. We just have to return a function from our effect function. And that function will be executed by react when a new, if R gets applied or when the component and mounts. So let's see an example. Let's create another effect. So let me give some space. And here we need to create. New effect. And inside we'll take one arrow function. And it is very simple. We just console log effect start. And let's return a function. So let's return a function, which is that we not function. So this function will be executed by a React and this cleanup function, we are going to say console dot log cleanup. Let's save this file and let's go to the browser. And let's inspect. And let's go to the console. So here as you can see, it prints first render because of this effect. And as you can see, first render was printed first and then effects start. It is because react applies effect in order they were created. So first this effect and then this effect will run. Now, if we click on this button, you can see cleanup effect start cleanup effects that why did cleanup appeared to ice? It appeared twice because first, react triggers a rerender because we are setting the 0s on state variable. And then it triggers a rerender again because we are updating the count. That's why you can see cleanup and effects start to rise. As you can see, React cleans up the effect when a new effective applied or when the component get unmounted, which in our case when I close the tab. Now let's go back to visual studio code and let's go back to our second effect. This one. This gets printed when the component mount as we are passing an empty at a year. So this is how we can guarantee that this effect will run only one lender component mounted. So basically this is a QL into component did mount. And how can we achieve the functionality of component will unmount with React books. Well, it is very simple. We just have to return a function. So we will return a function which has a dependency of an empty array. This will equally well into component will unmount. So if we return a cleanup function in this effect, which has an empty edit dependency, then it means that the cleanup will run and the component gets unmounted. So this is how we can achieve component will unmanned facility with our reactor. Let's save this. Now let's see the real-world example for the clean up. Let's say every second I want to print is on state variable value to the console. So let's create a new function. And inside this we will take an arrow function and the dependency of this effect will be his own state variables. So we need to write an empty array insight, the MD&A, we will pass on state variable. So when this is on state variable changes debts when I wanted to create a new effects. So let's create an interval Paul bonds timer, which is equal to set interval. And this interval is quite simple. It just prints the state variable is on the weekend console, log is on. Is on and it runs every second. So we need to pass 100 milliseconds. I will pass 100 milliseconds. Let's save this now we have to clean up after the sins that would cause a memory leak. If we forget to clean up after this, how we can clean up so we can return a function. So we need to write return. And then we need to take an arrow function. So we can return a function which will be powered by a React. And in this function, we just did the interval. So here we need to write clear interval. And then we need to pass the ID timer, which is returned by this setInterval function. Now let's save this and let's go to the browser and check. So here as you can see that he's on, gets printed here. And if I click on this button, you can see that the axon chains and now the new value gets printed. So we will look at why this dependencies so important. If I remove this dependency, two things will happen. First, DS link will show me a warning, react hope use effect has a missing dependency is on. It complains because he went on changes, there will be no new effect applied. So basically the side effect of the old effects are still present. Because we started that timer, Even though is on state variable change, it won't update the effect. So that will mean that old value of his own variable will get printed. So let's save this and let's go back to our browser. Let's refresh this. As you can see, is on value has been printed. And if I click this button, it will still show me the old value, which is false. So this is not really good. Why did it happen? It happened because as I said in the previous video, when we act comes here, it checks this effect has an empty edit dependency. So let's take the element of this array to the previous array and it says, okay, it does not have any element. So basically nothing has changed. So it won't apply this new effect. So it won't apply this new effect. And because of the closure of functionality in JavaScript, that is on, we'll refer to the old value, which is false. So it will refer to this old value which is false. So this is why we are seeing that is on, is still false. Even though this is true. You can see this is through what year it is showing false. So this is very important that we always specify all the dependency. You're, so if I specify is on and save it. Now, let's specify a dependency and save it. And now let's go to the browser. And now you can see is on value is printed as false. And if I click this, now the value is true. So this is very important for if you don't specify older dependency, then it might happen that your side effect refers back to the previous value, which can lead to inconsistency. So this is very, very important. So this is how we have completed by use of a. So this is it for this video and I'll see you in the next video. 11. Lecture 11 fetch data in class component: Hello friends, welcome back. Let's look at how we can fetch data and we act in our example, we will have a user's component that will set some data and so the name of the user in the list. So we will be using JSON placeholder to fetch our data. So if you scroll down here, you can see they have couple of APIs which then be used to fetch some data. We will be fetching the users. So we are going to download this data. So basically it's a JSON array with ten users. We will print the names of users. So let's get started. So let's go to Visual Studio Code. And yeah, we need to create a folder in components folder. So your I'll create a folder fetching. And inside fitting, I'll create a new file with the name user's Glass Door JS. And this is a class component. So I will write r, c, e and press step. And your eye will be what gaps for user glass. Let's copy this. And NP studio as well. Now, we need to add a constructor. To add a constructor, Derrida short board, RC or NST. Okay? And we need to add a property users which is set to null, let's say. And we can extract the user property from state variable. So you only need to write bonds. Uses. It goes to this dark state. Let's save this file and you only need to add a condition. If the user does not exist, then return or simple div with no users. And if the user exist, then written unordered list, which is UL. And inside this, we will map the user saw curly braces and we need to write user's dot map, an entire map. We will take an arrow functions. It will return a list item. And here we need to write the variable name, which is you. You can take any name you want and you are, we need to print a user, so u dot name, and then we need to specify R, t. So as you can see, if we go to the URL, if you go to this decent placeholder website. So this is the name which we are going to print, and this is the ID which we then use as a p. So let's go do deals to be awkward and do Excel ie. We need the ID, we need to write u dot ID. Let's save this and now we need to fetch the API, and now we need to make an API call it. So we usually put the side-effect to component did mount. So your i will write component did mount. And inside this we will use the built-in Fetch API methods. So fetch. So this built-in Fetch API requires a URL. So this is the URL which we required. So let's copy this in single ports. Inside this, we would need to paste it. Then we have to extract the JSON body, which we can do by calling the response JSON function. So you only need to write then. And inside this, we will take an arrow function. And you're going to write J, J dot ds. And this is the function. So this is the adjacent function. And then we want to set the state so we can call then and you earn manipulate users and Addo function though we need to set the stage. So this dot set state and yoginis direct users. Let's save this file and now we need to import this component in app.js. So let's go to app.js. And yet we don't require this. And you're also, we need to remove this and let's import the user component. So you've class users from dart slash components slash, fetching slash users slash, and we need to write users. Let's save this file and let's check it in the browser. So you can see, as you can see, all the ninja when printed. So this is how we can fetch data from API in platform. So this is it for this video, and I'll see in the next video. 12. Lecture 12 how to fetch data with react hooks: Hello friends, welcome back. Let's implement the same component using React popes and functional component. So let's create a new file in tech fetching folder. So I'll create a new file and I'll name it, uses book. Dodge is. And as this is a functional component, so I will write a, F, C, E step. Now we need to import new state from the act. So I need to write news state, let's call use to it. So we need to write US state. And we need to pass an initial value. So we will pass and the cell value as none. And this new state will return an array with two elements. So the first one is the state variables, so we can name it as noodles. And the second variable is the second function. So we can mean as SEC uses. And then we need to assign it to a variable keyword. So we will assign a coupons, let's say this fine. And we need to implement the same functionality as it is here. So we can say if user does not exist, then return a div with non-users. And if the user state variable exist, then we need to return un, an unordered list. And inside this we will map the users. So we will take a map method to add. So the users, so users dot map and inside you need to take an arrow function. And here we need to take the argument, which is you, and to print the name of the universe, user.name. And you don't need really to pass that bead. So p, which will be u dot ID. Let's save this file. Now we need to import this component to app.js. So let's go to app.js. And here we need to write a broad users from components, layers, fetching, slow movers who? And yeah, we need to render it out. So you, those who, let's say this, fine. Let's save this file and let's take it in the browser. Right now you will not see anything because we have not added 30 touching functionality. So let's go to the Visual Studio Code and we need to go to you those mooc dot js. And now let's implement the data fetching functionality. So for that we need to import US effects. So you have manipulate you defect. Let's be it our first effect. So we need to use effect. And inside we need an arrow function. And let's go to uses cloud storage is, and the functionality is same. So you just need to copy this broad. And we need to paste it here. And instead of this dot set state, we need to write set. Uses and manipulate users. Let's save this file. And yeah, we need to pass the dependency as an empty at a and the second argument, so it will be like component big mouth. Now this US effect will run only once on the first end a. Now if I save this file and if I go to the browser, you can see our list has been printed. So this is how we implement the same functionality as we did in our class numbers. Now let's move further and let's add error handling as well. So let's go to Visual Studio Code and let's create another state variable. And we are going to call this as error. And the second function will be set at a which is equal to mu state, and the initial value will be none. So if there is an error, it bows to catch block. And you're inside, we need to pass an arrow function. So when the promise reject, then we can set the error and pasta editor object. Now let's save this file. So we need to remove this, and let's save this. And if I go to the browser, you will not see anything. But if I do a typo entering the URL to let us remove this dot. So basically the editor object is populated. Then we can say that if exist, then simply written our div with. Let's save this and now let's go to the browser and check. So as you can see, this error message has been printed. Now let's say we also wanted to show the users when they're facing is still in progress when the component is noting. So let's create another state variable so we need to write honest. So the variable name will be loading. And the second function will be sect is loading, which is equal to U state. And the initial value will be false. Initially, we will not load anything. So when do we want to set this loading to be true? When we start out fetching, basically before that. So before this Bejing, We will write set is loading, will be through, let's say this. So when we see what responses we can basically say set is loading false to be false. And we need to close the curly braces. Let's say this file because we have not finished downloading our data, that's where we need to put it as false. And when there is an error, we also want to, Paul said is loading will be false. So set is loading. You need to set it to false. And here we need to close a curly business. Let's say this. We have set it to false because we are not downloading any data. So now if there is no user, then basically we can check is loading state variable value. And if this is true, this is true. Then we can return a div saying loading. Otherwise, we just return no user. And let's add a dot because we have removed it. Who sold the error. But now we need to add this dark. Let's save this. And let's go back to the browser, the URL. You can see that data because it loaded very fast. So how we can take, we have very slow opening sent. So let's open. Let's inspect this and let's go to Network tab. And we need to select slow Xunzi. And then we need to refresh the page. So once I refresh the page now you can see, you will able to see that this data has been loading. Ok. And now all the data is here. So we can go back and now we then make the Pentateuch and editors. So this is how you can take their loading. So now we have seen an example how to execute API calls enough functional component with reactants. And we also added some additional state. So this is it for this video. And in the next video we are going to create a very first reactor. Well, I'll see you in the next video. 13. Lecture 13 creating custom hook: Hello friends, welcome back. In the previous video, we have fetch some data in our user's book component. Let's assume that we have another component. In that, another component, B12 fetch or different API. For example, V12 fetch photos. So if you want to fetch the photos in the same component, we also have to define a state for photos stayed for error. And as state four is loading, and we have to call our fetch function again. And we have to call fights function in a different effect. And then we have to define in effect function as well, where we call our API. So what that mean is that we are duplicating most of the code into components. We have the same code into components. This is something we never like in programming because it will be harder to maintain. So how can we resolve this problem? We can resolve the problem by outsourcing that data fetching part of our application, we can create a custom hook which takes a URL and it fetches the data and then return this state variables. So let's see how we can achieve this functionality. Let's create a new file in fetching folder. So I'll create a new file and name it as US fetch Node.js. And here I will type R, f, R a FCE. And in this function we need to pass URL. And then let's go to users who dot js. And let's copy this code. And let's paste it here. Since this use batch component will be a genetic data fetching component. So let's remove this and let's rename it to datas. And yet we need to write this iter function as said, set data. And we can keep the error and is loading as it is. Now let's go back to users woke and let's copy this use affect function. And yeah, we need to paste it. In this US effect. We are keeping the same functionality except we have to replace this URL. Bu Yuan. Users will be data, and we are also users will be data. And said to you those will be set data. And now let's return the state variables. So I will remove this and I'll return variables as data error. And is loading. Let's save this. Now let's go back to users would component. And here we need to import use fetch. So import, use fetch from US fetch. And in use fetch, your, we need to import UI state and use effect. Let's save this file and let's go back to this loop. And we need to simply call US FET. And we need to bolster and we need to pass this URL. So I'll just copy this and paste it here. Since this US Feds takes URL as a parameter. That is the reason we have to pass this to you earlier in this function. Now we can remove this code. We don't require this. And as you know that use fetch function returns data error and is loading. So we can structure, we can destruct here. So bonds user, sorry, data error. And is loading. And in the context of our users MOOC component, data is user. So basically we can, for the name this as users. Let's save this. And as you can see, we don't have to change anything in our render part because everything is basically the same. We just outvoted, though, fitting logic to its own component which is used for it. So this will be our React MOOC. So now we can remove this dependencies which we don't want. This. Lets save this and let's go back to the browser. And as you can see that we see the same thing. So now let's go back to Visual Studio Code and as you can see, we have a warning. React who use effect has a missing dependency URL. So now if the URL changes, then this effect won't run because it is not listed in the dependency. So we can enter dependency as URL, and let's save this file. So now you can see that warning has gone. So let me minimize this. So how does use fetch basically works? So when we mount our users who've component, we will call use Fetch as well. This function gets called and the fetching basically start when we pass the URL here. When the data is ready, the user hooks component update since its state changes. But the fetching won't happen again as we pass an empty edit. But if we pass the URL, the data fetching happens when basically the state variable B set and from that all weekend, read this variables, lead this state variables. If the state variable changes year, then this component will also get rerender since it is using the state variable of use fetch component. So it is very important to know that if we use this use fetch in different component, then that will be totally independent from each other. So if we call US fetch multiple times, you went in different components, it will return different data Arab and is loading variable. So it is very important. So we have successfully implemented our first customer. So this is it for this video, and I'll see you in the next video. 14. Lecture 14 project setup: Hello friends, welcome back. In this video, we are going to start off with our weather application. First, we will create a very clean project for that, let's open a new window. So to open a new window, we need to click on files and then click on new window. And let me close this. So we need to open a terminal. So to open no terminal, we need to press Control and back Dickey activity is about the Tab key. So once we opened our terminal, then we need to write np. Sorry, I need to create a folder on my desktop. So let's go to desktop. And I'm now inside my desktop. Now let's create the project. So np x React app. And the name of my application will be weather app. And I press enter. It will take some time to create the project. So it will install all the packages like react, react, dorm, and dx clipped. So now our project has been created. Now let's go to the folder. So for that we need to open folder, peak on Open Folder. And I've created the project at my desktop. So whether f and let's click open. And now again we need to open a terminal, so control and Bagchi, and I'll write npm start. Okay, so we have started the project. So before we start working on our project, let's open a new tab and we need to go to open whether DOT ORG, sorry, open weather map.org, Open weather map. So we need to go do open weather map dot ORG. And this is the API which we are going to use to fetch the real weather data. Now, we need to click on API. And here we need to select five days forecast. So we need to go to API documentation. So basically with this API, we can get access to next five days whether for specified city. So this is the example if you scroll down. So let me check the examples. Ok, so this is the examples. Let's copy this URL and open a new tab and we need to paste it here. And instead of city name, I will add the city name as Mumbai. I want the data for Mumbai city, okay. And let's remove the app ID and let's hit Enter. So it says that invalid API, even though this weather API is free, but we still need an API key. So, so this is how the request is coming from us. So how to get an EPA key? So we need to sign up. So if I click here, I'm already signed in because I haven't really started. Okay. So if you have not registered, then let me go to Open weather map. Let's copy this URL and I'll open this enough Incognito window, and I'll paste it. So if you click on sign in, so you will end up on this space. Then you need to create an atan. So you need to create gyrotron by filling this form. Once you create an account, let me close this. I've already created this account. So that is the reason it is showing me that you are already signed. Once you create an account, then you will get a message here. Then we need to when cyclic continent. So you will land up on this space. Then you need to click on API keys. So this is the API key which I am going to use. You need to register and you need to get your own API API. Please don't use my API key because I'm going to delete this after the project is. So you need to register and get your own API key and you need to use it. It's totally free. You don't have to pay anything. So now let's copy this API key, and let's go back to the URL. And we need to write an app ID, which is equal to the API key which we have Puppet. And if I hit Enter, now it gives me some JSON data. So this is a JSON data. And now if we go to APA documentation, the first thing that I want to tell you is that the weather data which we are getting is an imperial system. And since I'm from India, I, I'll be using the metric unit system. So I'm just going to specify another query parameter. You're in this URL. So the parameter will be an units equals to metrics. And then I hit enter. So if you are from United States auto country, which uses the imperial unit system, then you don't have to do this. Now let's format this port. So let's copy this board and I'll go to a new tab and your answers for JSON formatter. And this is the first thing which we need. And I need to paste a board and let's click on process. Once you click process, yeah, you will get a formatted JSON data, which look much nicer than this one. We have a lot of information here. Let's check what we have. So as you can see, it shows country, India, city, we have ID, okay. Okay, city, the name of the cities, Mumbai. So we have latitude, longitude, and all this kind of stuff. Now we have one more thing which I wanted to show you. And then we have this main in that we have temperature minimum, temperature maximum, and we have d t. Which is basically the Unix timestamp of the day. Then we have sea level, ground level humidity. There is lot of stuff. There's templates. So you can see that we have whether property where you can see we have icon, so we will be using ICD-10. So what is this icon? As you can see, it says ten b. So what is this? Back to weather API. So let's go back to weather API. And if I click on API, and if I go back to API docs, so if I slow it down. So here you can see a list of weather condition bolts. So let's click on this and Yara all the images. So as you can see, there are a lot of images, but what we saw is that ten d. So if I click on this URL, so this is the image URL ten b two, this is the icon. So we can use this image we saw in our application as well. So how can we use this image? So we can use this image by using this URL. And we don't need any API key. So we're quite lucky for this. So as you can see this picture, this item represent that parent whether in Mumbai. So using this API, we will be able to access phi days weather data. And using this API will be able to access the minimum and maximum temperature of the next five days. And we will have a very beautiful icons here. So we can use in our application to make it a bit nicer. So this is all about open whether API. So this is something we are going to use in our application. We are going to make all through this open whether API now lead back to visual studio code and in, LET open the SRC folder and we will do some clean up. So the files which we don't require is Logo dot SVD. So let's delete this file. Then. Index dot CSS. We don't required index.js S. So let's delete this as well. Let's delete app.js is to, let's delete this as well. Now in app.js is, let's keep this as it is. I will overwrite some CSS. Ok, so let's keep it. Now. Let's go back to index.js. And yet we need to delete this URL, this import file because we have diluted despite. So i'll remove this. Then. Let's save this. And let's go back to app.js, app.js. And here we need to do this logo because we have removed the logo. Then let's remove the entire div. And let's return us imperative that says hello, weather app. Let's save this and let's check it in the browser. So you can see, I look at that app has been printed. And before we close this lecture, let's go back to a good studio poured and I'll create one folder as config. And in this folder, I will create a new file with the name index ab.js. And I'll make two variables. So first will be the father API key, so ponds and the name will be API API, which is equal to. And let's copy the API key from year two. If I go to API, okay, this is the last. Let me go to API. Let's click on sign up, signing. And let's go to API keys. So this is the API key which I want. So let's copy this that still do research report and let's paste it here. And we need to export this so we can import it in other components. And then we need to, Let's save this, and then we need one more variable. So let's export that bonds. And we need a base URL, so base you either. But what is the base URL to? The base URL is, let's go back to the homepage. So the base URL is this open? No, no, not this one. The base URL is this APA dot open whether Math.sqrt. So let's copy this and let's be strict, blurred. And let's save this file. So this is it we have setup our project. This is it for this lecture. And I'll see you in the next figure of philanthropy. Their envelope. 15. Lecture 15 weather card component: Hello friends, welcome back. Now as we have set up our project, let's start and create our first component. So if we come back here and let's look at the data which is written by open whether API, you can see that the minimum and maximum temperatures I'd written the main description of the current weather is also returned, that is an ICANN. And these other data, basically which we are going to show to the user already. First component will be component where we show these weather information. So we are going to show the main, whether about the main, whether we are going to show the Eigen and also the date. Let's minimum and maximum temperatures. We will be using React bootstrap. So if you go to a new tab and right to react bootstrap. So this is the first link which we need. So if I click on get started, so this is how we can install bootstrap. So let's copy this line and let's go to Visual Studio Code. And we need to come to their terminal. To stop the terminal, we need to press control C and your, We need to paste the line. So now react bootstrap has been installed. Now let's go to the Bootstrap website and if I scroll down, because we also have to include this CSS as they stayed here. Destitute is required, but they don't include any CSS. This is why we have to include this CSS manually. So let's copy this CSS and let's go back to visual studio code. And we need to click on public folder. And in, let's go to index.html. And after this manifest, we need to paste that URL which we have copied. Let's save this. So now we are ready to use Bootstrap. Now we can start building our first component. So inside the source folder, let me closes. So integ the source folder, I will create one more folder with the name components. And inside of component, let's create the first component, which is whether God dot js. So this will be a kind of guide which will show the weather data. This is our simple functional component. This component will receive some prompts and just displayed. If you go to bootstrap website and if you click on components, and you need to click on cards. So we can use this guard component because it gives some very nice styling to our card. So we don't have to write much CSS in this project. So now let's copy this code. And let's go back to Visual Studio Code. And as this is a functional component, so I will write r, a FCE. And yeah, we need to pass props. And yeah, I'll paste the code which we have copied. So we don't required God dot txt. So let's remove this and we don't require the button as well. So let's remove this as well. Let's save this and we need to import God from bootstrap, react bootstrap. So import God from the act Bootstrap. And let's say this file. Now let's go to our JSON and see what we have. So we want to show the minimum and maximum temperatures for a day. We also want to show that date. And as you can see that datetime is displayed in unix timestamp. And we also want to show the main weather witches then and that I can, which we have seen in a previous video. So let's go to Visual Studio Code. And so interlope prop, we can extract this properties. So highly MODIS prompts and in curly braces we can write d t, So we can keep the naming as it is in the JSON. So here we can see, we can simply say DT, okay? So if you can see here is that d, d, so we can keep the name same. So which is DateTime. D stands for datetime. And then we can put temp min. So let's copy this and damp Max. Then we have main. Then we have I can save this. So this component will receive these five properties and we're going to display this fiber here. So instead of say, saying God title, we can display them in weather. So this will be the card title. And instead of image, as you can see, the source is this, but we need a different source. So let's go to the weather API. And if you click on API, and if you go to APA dogs, and if we scroll down, and if you click here, so this is the image URL which we want. So let's copy this image URL, and let's go back to Visual Studio Code. And instead of this source, we will remove this and we'll paste the URL, which we have copper. And let's put this in curly braces. And we need to use string interpolation. So let's remove this quotation and let add back Dickey. And here also we need to remove this code and we need to add it back to C0, the VaR using string interpolation because we have to overwrite this part of the URL since ten D is this image, okay, ten days this lineage, but we have to get ICANN, which is written in the JSON. So, so we want to use a probe which is received here. So let's go to Visual Studio Code. And instead of ten d, we can write dollar for lipolysis and icon, which is the name of the problem. Let's save this. Now as you can see, we have the main and we have the Eigen. Now we have to show datetime and minimum and maximum temperature. So let's start with the datetime. So we can simply use a paragraph. Who received a datetime. So this component received a date time in milliseconds. So we have to create a date object, year, okay, so yet we need to create a data object. So let's create it fonts date, which is equal to and we can use the Date class constructor. So we need to write new date and round brackets. We need to write d t. So we have a date object here, and let's show that date here. So we can say date, dot get, pull here. And then we can add a dash. And for the moment we can write date, dot, get month. But the Gutman function actually counts from 0. So for January it will return 0. This is why we want to add one, so plus one. Now let's close this guy liberties and put a dash here, and let's get the date for that veteran date. So let's add a curly braces and then we can use date, dot, get date. And we need to call this function and closer curly braces. So this is how we can get the date. Let's save this file and now let's show the minimum temperature. So yeah, we need to add one more paragraph. And the minimum temperature is contained by temp underscore main properties. So we need to guide min means. It is just a title minimum. And in curly braces we need to write temp underscore min. Let's save this file. Now let's copy this line and we can add the maximum temperatures, so we need to write max. Let's save this. Now as you can see, we have finished displaying all the properties. So we have, we have datetime, minimum temperature, maximum temperature mean and open. So you can see your icon is your mean is year, datetime is maximum minimum temperature, maximum temperature. Now we need to import this component in app.js. So let's go to app.js. And yet we need to import this weather competent editor current component. So important whether Rahm dot slash components slash either card. And you're gonna need to display the weather card company so your eye will render the guard component. So whether guard. And let's close this. Now let's pause the property as you remember the properties. So we need to pass it an app.js, okay, so what we need to, we need to write the properties here. So for datetime, we can write d, d equals two for lipolysis. And let's go to the JSON file and DateTime as this. So let's copy this, and let's go back to Visual Studio Code. And let's base two tier. But this datetime is in Unix seconds and hours clip uses milliseconds. So this is why we have to multiply this datetime into 10000. We need to multiply this time by 10000. Now let's add other properties as well. Let add other properties. So let's go to whether confident, okay, so this is ten min to, let's copy this and let's paste it here. It is equal to what is the temperature. So this is a minimum. So let's copy this and paste it here. Then we have stemmed underscore max, which is equal to maximum temperature is 29.39. Then we have Mane n items. So main equals to begin, let's write when. And I can, which is equal to ten d. Okay? So let's save this. And now we need to run this file to npm start for, as you can see, we have displayed all the properties with the icon. Now, we need this text would be incentive to let go to withdrawals to geocode. And as you can see in app.js, let me close this. In app.js is you have a glass of app which is having text align center. So let's remove everything else. We don't require it, everything else. Neolithic wired this class, so let's copy this class. Let's save this, and let's go to app.js. And yet we need to add that last name, which is equal to m. Let's save this and now let's go back to the browser. Now, as you can see, our text is in the center. So this is our first component, and we will be using this component to show the next five days, whether this is it for this video, and I'll see you in the next video. 16. Lecture 16 CitySelector component: Hello friends, welcome back. In this lecture, we want to enable the user to select the city which whether we are going to. So, so we want to create a component where we will have an input Enter button as well. And when the user clicks the button, we fetched a weather forecast for that city. So if we go to bootstrap documentation, we will be using Bootstrap layout, where we will have container and we will have different rows which will go beneath each other and indifferent roles, we can define columns. So basically using this, we can prevent writing a lot of CSS. Now let's create our next component. So let's go to Visual Studio Code. And inside the component folder, we will create a new file with the name city selected dot js. So as this is a functional component, so I'll write RFC and press Tab. And this component will take only one prop. We just call on Select button. So we will pass a function which will invoke when a button is clicked, this component will contain one state property and that will be the city. So in order to use state in a functional component, we of course have to import US state. So yeah, we will import you stick. Now let's define our state. So you will state and the initial value will be null. And this US state will return an array. We have two elements. So the first one will be the state variable, which we can name as city. And the second one is thus iter function, so we can name it as set sitting. We need to assign it to a variable keyword, so bonds, and instead of do, we can take a React fragment. So we need to remove this div. So this is the react fragment. Now inside this we are going to define a couple of rows. So let's define our first row. And our first row will be simple, it will just contain one column. So let's take one column and this column we are going to store our text, which we'll see the instruction for the user. So let's create an H1 tag. And let's say hello, select your city. Now we need to import the rows and column from the egg bootstrap. So import row, column from React Bootstrap. Let's say this. Now let us define the second row. So let's copy this and paste it here. And the second row will also just contain one column, and this column will contain a form control component. So let's remove this. And we are, we need to write farm controlled. And we need to import this form control from. React Bootstrap. So you are going to write form control. And we can pass a couple of things to this form control, a couple of properties we will pass. The first one is Placeholder, which is enter 60. And let's pass on change and live so on, change equals two. And this will take an arrow function. And what we want to do is we want to call the set to the function and then new CD will be city. So here we will pass an event and we will call tech city, which is going to be event target dot value. Let's save this. Now let's create the last row. So I've pasted this row which I have copied. And so instead of X1 tag, I'll be using button. So we need a button component and we need to import the button component from bootstrap. And inside the button component B will add a text which is check whether. Let's see if this. And inside this button component, we need to pass on click listener. So on Flickr equals two and we need to pass an arrow function. So what happens when the button is clicked? So when the user clicks this button, then we want to invoke dot on Select button click function, which just pass-through props. So let's call this function on Select button, click. And we want to pass up and entity. So sitting as this is a functional component so we can access the state variables CT. And now let's save this file. And now we need to import this component in app.js. So let go to app.js and let's import that component. So import city selected from dot slash components slash city selected. And let's remove this weather.component because we don't required now. And let's render this. It is elected component. And let's remove this as well. And let's remove this weather.com from here also, let's save this file. First we need to write the prop name. So on. Select. What is a prop name we need to see. So this is the problem. We have not distracted it. So let's receptor, I forgot to do it. Let's copy this prop name. And yeah, we need to write the prop name, which is equal to. And we're going to pass a function, so an arrow function. And we need to console dot log city. And here we need to pass city. Let's save this. And now we need to replace this div container. And you are, we need to import the container from the bootstrap. Import container from the act bootstrap. Let's save this and let's go to the browser. So as you can see, this is our CT selector component. So let's do some styling. It does not looking that weight. So let's go to visual studio code. And in app.js, we will write CSS for rho. So rho, and we will write the CSS property texts center, 30 text align center. And then in city selected ab.js, We are going to, for this column, we need to give XS equals to four. Let's save this and let's go to our browser. Let's refresh this. Still it is not incentive to go back to app dot CSS, opiate, not text-align center. It should be justified on ten centered. Let's save this and let's go back to. So as you can see, now, it didn't Center and we need the margin as well. So margin 15, Vx and g, o. And now you can see it is looking much better. But the, what this means is that the betweens that it will take 1 third of the total length. Okay, so if I remove this justified content centered, let me remove this and let's save this. So as you can see, it takes 1 third of the total length of this deep sins dwell is their total still forties DO unfold. Ok? So we can have four columns of food, eat like two l. So we need only 1 third. So I've put x is equal to four. Now let's go back and let's undo this. Let's refresh. Let's say when the fish, and let's come back here again. Now, we need to inspect this and let's go to the console. And then we need to enter the city name. So I will enter the city name Mumbai. And let's click on this button. So once I click on this button, you can see we have been so log Mumbai, so it is working fine and we have done some styling also. So this is it for this video and I'll see you in the next video. 17. Lecture 17 usefetch hook: Hello friends, welcome back. Now when we type the City Year and click check whether the CT will be console log. So this code is right here. We just console log Udacity, which the user has typed, and then click this button. Now will just console log the city which the user type, and then click the check whether button. But what we want to do is actually we want to fetch the weather from the current city, from the API. In order to do that, we are going to use, use fetch MOOC, which we have written previously. But now let's write it again in this project too. So in source folder, let's create one more folder with the name books. And inside hooks folder, we need to create a file with the name, use fetch dot js. And I will write a FCD and press stat. And we need to pass the URL and then we need to import US effect and use date from React. So new state and moves effect. And then we need to create a couple of state variable. So let's create them now. Let's create that data variable. So you state and the initial value will be null, which will return and add a new state will return an array with two elements. The first state variable will be the first one is the state variable, which is data, and second is the second function, which is said data. And we need to assign it to a variable keywords, so funds to, let's create another new state function. So you state and initial value will be null. And again, this will return an array with two elements. So first the state variable will be error. And the second function is set at him. And we need to assign it to a variable so fonts, we need to make available for progress. So I will take US state function and initial value will be false. And this will return an array with two elements. So the first is the state variable which is in progress. And second is, I said that function, so set in Nogales. And we need to assign it to a variable keyword, so bonds. Now let's create a huge effect function. So your calculator use effect function, use effective. And we need to pass an anonymous function inside this. And then we need to call set in progress and set it to two because we are starting the fit. So that is why we want to set the in-progress to be through. Let's say this. So use affects the spelling is incorrect. So use effect. And now let's call the Fetch API. Fetch function takes a URL, we get the URL from the property. So let's pause the URL here and then we can get a response. First, we want to extract the body of his funds. We can do this by calling the JSON method. Then what we want to do is we want to send that data. So we get that data. And so we get the data yet and the body has been extracted. And first we want to set the input list. We fall so sect in progress. And we need to set it to false. Since we have received our data and let that data to data. Let's save this, then let's clear that guy's blog as well. In this we have an added Phil met Godel, this property editor. And let's call set in progress again. So we need to extract set in progress and set it to false. And let's sect, edit, edit. Let's save this. So we need to remove the semicolon, and let's save this. And then now we want to return this state variable so it can be accessed by user. So we need to return, let's remove this. And we need to return this variables. So data. And in progress. Let's save this. Now let's go to app.js and we need to import the US fetch. So your eye right inboard, use fetch from DOD slash books, men slash, use fats. And here we need to extract the variables. So bond. And you have been a good idea. And is progress which is equal to lose fetch. Let's save this file. So the current fetch is same what we did in our previous example when we learn about how to create our personhood. But now this is not the exact behavior we want to do. Because what we did back is we just pass the URL here and that was it. But now what we want is we want to call the API every time this button is clicked. And we want to call the API to get the weather for the new city. But I can't say youth vets and piles that you are an icon to this, since we want to store that data and run in progress as the state of app so I can put it in this scope, otherwise, they will be gone. So what I can do is I have to modify this youth fast function. So let's go back to use fetch function. And how do we modify this? First, we don't want to pause this URL, so we don't want to pass this URL now because now we don't know what the URL will be. The only one to call this news fetch when the button has been clicked. So basically we want to create a state variable for the URL. So first, what I wanted to do is I want you to modify this URL to initial URL, so any cell URL. And now lets read the state variable for this u r. So we are, I'll create bonds. And the state variable will be URL. And the second function will be sect URL, which is equal to U state. And the initial value will be initial URL. And now we need to modify the US effect function, since this will be dependent on the URL of the state. So I need to pass a second argument, which is you are either dependency. Now we need to export the set URL. So it can set from the outside. Because when the URL is set, it will trigger the US effect to be run. And then we can set the API again. So what I can do is I can say set URL, and let's save this file. So now I'm exporting the set URL here, but now let's think how will they use effect work? Because the first-time URL might be null. So let's just put a check at the beginning of this effect. So its URL is null, then does simply return. So I don't want to fetch anything. Now, let's go back to app.js and yard instead of console log city, just remove this and I want to call set URL. And whether you are a game from set URL came from the US fetch. So set URL. And inside this i will pass the URL. So what is the URL? So let's go back Buddha API. And this is the URL which we required. So let's copy this and let's go back to your board. And your, and I'll paste the URL via, But you're, I will add a back tick team because I wanted to do some string interpolation. So as you remember, we have exported the base URL and API key. So let's import this API key and baseURL. So your eye right in both API key and base URL from dot slash on fig. Let's save this. And now instead of this URL, I will write dollar and curly braces base URL. And this API key, we need to remove this and we need to write dollar API. And one more thing we wanted to do is we want to change this city because we don't want every time to fetch known where we want to fetch the weather from the city which the user ESSEC. So we need to remove this and we need to add dollar and in curly braces city. Let's save this and now let's console log data. So let's done. So log data. Let's save this and let's go to the browser and said, so I'm getting some error and use fetch. So let's go to US fit start JS. So this condition should not come here, should come here after the US affect function. And now what is the issue? You will sweat is not defined app.js. The spelling is wrong. So now let's go to the browser and let's inspect. And let's go to pencil. So if I type CP name Mumbai, and if I click. So the beta which we are getting, this is the response from the real API. So let's say if I modify and type it New York, and if I click contact, whether so you can see the data for New York. But why did it print it so many times as you can see, it printed so many times. It printed three times because if I go to use fetch, we always modify many things. So when there is a response, we set in-progress and when this is sector through, just remember it will just figured a state update not only but also the third component, which means that the data will be console log. So this is why you can see multiple until log, even though we just click the check whether one time. So this is it for this video and I'll see you in the next video. 18. Lecture 18 weatherlist component: Hello friends, welcome back. Now that we can see that we can download a data which is contained by the list property. You basically want to create five of the Regards and just populate the data. To do that, we are going to create a different component which will aggregate this phi cards. So let's go to visual studio code and create another component. So in component folder, we will create a new file with the name whether list dot js. And as this is a functionary components, so we will let our FCD and yeah, we need to pass only one property, which is called weathers. And it will return a row. So we need to remote this div and we will return at all, which we need to import from React bootstrap. So import row from React Bootstrap. And inside that all we want to create a couple of columns so we can map the weather edit. So colleague places, where does Dartmouth? And we want to map each element of this, edit. Each element of this, whether at a will contain these properties. You're equally pentane cloud, DT, main, so and so forth. So we want DD, So let's extract their DD. Yeah, so let's go to Visual Studio Code and the or we need to write curly braces and we need to extract DT. Then we also want temperature. So say we have temperature. So we want temp underscore max and temp underscore min, maximum temperature and minimum temperature. So we need to write main. And then we need what we need, we need weather because this contains the item and the description. So let's do so. Let's go result for the bull. And here we will expect weather, which is the density. This is the main and this is whether. So we need to these structures as we restrict main, we need to distract whether also. And then what we want is we want to map each of this element. So we want to map each of this element with that column. So we will add column where we need to add one more parentheses. And yet we need to, we need to close that. So this is how we tend to write an arrow functions inside column, let's say this file. We need to close. Okay? So inside the column, we need to add a component, which is whether card. And as you remember this, whether it got component will take a couple of things. So we have to pass temp underscore min. So how do we know them in? So let's go to browser. Let's go to the browser. So yet it is temp, underscore movement against. So first we need to right main stem. Understood. Min. Then we have max, which is equal to in the curly braces we like Maine. And inside main we have temp and desperate max, so dot temp underscore max. Then we wanted to pass D t, which is equal to date time, which is equal to datetime. And as you remember, this is unix timestamp. So we want to multiply this by 1000 to make it, to make it milliseconds. So there is DD, here is 30. So the t dot, sorry, tt multiplied by 1000. Then we want to pass them in description of Tibet. So we can access this by calling whether property. So we can access this by Pauling whether property. So we can see, so we can get the first item of the list. So let say main impulse to weather. And to access the first item, we need to put the square brackets and 0.me. Let's save this. And also we need the AIP and so iconic also contained by whether property, so I ten, which is equal to weather. And we need to access the first item. So in square brackets 0 and dot icon, lets say this or we need to close the weather component whether.com. Let's see if this flow we have completed this weather list component. Now let's import this, whether this component in app.js. So let's go to app.js and let's import this component. So weather report, whether lists from dot slash components slash, whether religious and after pseudo-selector, we need to write the condition that if data, if data exist, then vendor, whether listed companies to weather this. And we need to pass the prompt, which is whether equals two. So how do we access the weather? Well, we can say that list property contains that. So we can just say data dot list. Let's save this and we need to define the problem. So let's go to weather list component and we need to define that polymer. We need to import the Apollo on prom. We add Bootstrap, whether God is not defined. Let's go to app.js. Once I can let go together list, we need to import Whether dark component, so import where the bar from dot slash weather time, let's say this pipe and let us go to the browser and check. So let's refresh this and we need to write by. So as you can see, we got the cards but they are not looking good. Me close this via getting some extra stuff. So I need to check this. So the count is too much. It is around 40. So we need to make the gown to phi. So we need to write CND equals to five, okay? After the city, we need to write and CMP five. And if you save this file, and if you go back to the browser, and if I type on by, and if I click OK, sake whether you can see we again get five starts and the weather's not okay. So we need to open whether God component and here we need to remove the width. And let's save this and let's go back to the browser and we need to type Mumbai. And let's see if this. So now you can see the eye looking much better and it is looking much nicer. So this is it for this video, and I'll see you in the next video. 19. Lecture 19 tweaks in application: Hello friends, welcome back. Now let's add some tweaks to our application. So first, let's use the in-progress state variable. Since you can see it doesn't say anything. So what we can do is basically we can go back to our application and we need to come to app.js. And yet we need to remove the console log. So let's create a function and let's name it as debt von tank. And this will be an arrow function. So this function will be responsible to return the SDA mill for all the content which is below, say diesel LinkedIn. So what we can do now, so we can say if there is an error, then let's return and ETC2 tag, which is eta. When fetching. And we drink. And we can also put into edit object to that as well. So that's a fine. So you had answered over around brackets, we need curly braces, so let's save this fine. So now we can say that if there is no data and is progress is true, then we can return. And that's to tank, which is loading. So the users know that the fetching is still in progress. Then we can say that if there is no data then written. So basically there is nothing which displays here. Otherwise we can return that list component which is 0. So let's copy this and paste it here and insert off this line of code. We can just call the function which is get content. Let's say it is fine. And now let's go to the browser. And let's type Mumbai. And you will see is loading to VR not able to see the loading because you can see we are not able to see the loading. Loading because you're the spelling mistake. It should it should be in broadness. Okay. I have done a mistake in spelling because the allele frequency in the US fetch it is in purpose. There'll be eight. We have exported this variable, but the name which I wrote here is was, is progress, but to the correct one is in progress. Ok. Now this spelling is also l. So let's see this. Now, if I go back to the browser and if I type one bit, you will see loading first and then the data. So you just saw that loading and then the data exits the data. Now let's see what happened to fight type New York. Okay, so if I take me off, so what happens if I fetch the data from New York? So you won't be able to see the loading your glitzy, okay. If I click. So as you saw that there was no loading text and even they did not disappear. Okay, so why did it happen? So it happened because if we come back to use fetch component, so when you are in state property changes, React will call our effect function. And state in-progress will be sacred to through, but only we want to set the in-progress to be true. But we also want to clear the previous edit and data. So now let's tall set data and set it to null. And even I want to clear the air. So let's call set error and set it to null. Let's see if this application, and let's go to the browser. Now let's check Mumbai. Okay, so let's take the other problem with the fact that you can see loading and then their data has been fetched. And now if I type New York, and if I click on check whether you will see this will disappear. And you saw a loading for a moment as well. Now let's see what happens if I put something, build something which is not related to the city. So we type something which is not related to the SciPy. And let's check whether. So we got an error. So let's inspect. Okay, so we got an error saying that cannot read property map of undefined. So what happened here is basically the God for not for. So when we pass two, when we pause whether through this component, so Ben, we call whether List and bus data doubtless basically data won't have a list property. So what I want to do now is I have to come back to use fetch bumper and, and, and this API, when it finds invalid CP, it will return four, not four, which does not go to the catch block, but it's telecom tilda ten block. So what I want to do here is it's the data dot COD is greater than or equal to four, not four, sorry, 400. And then I want to set up, then I can do data.me. Then I can get done. But before returning, I have to move certain progress in front of this. So the progress will disappear. Now let's save this and let's come back to the browser and let me close this, let me refresh it. And let's check again if I type membrane and if I click on weather, check whether we can see the data has been loaded. Now if I put some weird city and if I click on check whether we can see we got an error simply not found. And if I type Mumbai, again, you can see the data of Mumbai and there are a couple of more issues. The spelling is incorrect of max and we can't see the value because the name of the property is incorrect. So let's go to Visual Studio support. And these other name of props min and max, which we need to pass in whether God competent. So your, I need to pass min and max. So the name was incorrect to visit and now I need to type max because the spending or think that, let's say this. And yet also we need to write min and yet I need to write max because the props NEMA max. Let's save this and let's go to the browser and let me replace this. Now let's type the city name Mumbai. Let's check whether. Now you can see, you can see the value of minimum temperature, maximum temperature. And there is one more issue. Let me inspect it and let's go to control the URL. You can see that each side in the literature, however, you knew people. But let's go to withhold Studio code, and let's go to the list. And we need to pass a key. So we'll pass index as FV. So let's pass e, which is equal to index. Let's save this and let's go to the Czech. So now you can see we, we're getting a one of the key prop. So now it is gone. So this is it. We have finished building our application. As you can see, we have not written any ES6 class component. We use only custom react loop. We just use only functional component. And this was an example how to build a weather application using functional component with React books. So this is the end of this course. I hope you learn a lot and found it useful. If you want to learn more about React books. I would recommend checking out our official website where W tin hoops are also listed. So you can find, and you can find this whole school of this project in project step. So this is it. And I'll see you in some other lecture. I'm some other posting. Dare take that robot.