1 00:00:00,860 --> 00:00:02,120 Welcome back. 2 00:00:02,450 --> 00:00:11,240 In this video, let's have a look at how to make a HTTP request in React using use effect. 3 00:00:11,780 --> 00:00:17,120 There are different ways to make HTTP request in React. 4 00:00:17,630 --> 00:00:25,790 You can use the fetch API or Axios or you can use a library called React Query. 5 00:00:26,180 --> 00:00:33,980 So in this section we will be exploring how to use fetch and then access to make HTTP requests. 6 00:00:34,250 --> 00:00:36,710 So what is axios and fetch api? 7 00:00:36,740 --> 00:00:39,410 These are http client. 8 00:00:39,500 --> 00:00:47,390 So http client simply means that it's a way of making requests from external server into your browser 9 00:00:47,390 --> 00:00:48,770 or application. 10 00:00:49,250 --> 00:00:58,130 So to get started with making a HTTP request, we are going to use a third party API call JSON placeholder. 11 00:00:58,490 --> 00:01:03,440 So just in place, what is a fake API for testing and prototyping? 12 00:01:03,770 --> 00:01:11,300 So here we can make a request to these resources whether you want to make post, fetch, post, comment 13 00:01:11,300 --> 00:01:13,760 albums, photos to dos or uses. 14 00:01:13,970 --> 00:01:19,790 So assuming if you have your own API that you have created and at this point we have built a couple 15 00:01:19,790 --> 00:01:23,240 of APIs within MongoDB and Node.js. 16 00:01:23,390 --> 00:01:30,410 But to make our life easier, let's use this one to test how to make HTTP requests in React JS. 17 00:01:30,650 --> 00:01:35,600 So this is the resources that are going to mean fetch or make a request. 18 00:01:35,750 --> 00:01:39,190 If it's go down, we have the root or the endpoint. 19 00:01:39,200 --> 00:01:41,700 So for the post, we need the get request. 20 00:01:41,730 --> 00:01:49,320 So if you click on post, you're going to see the endpoint for making requests to fetch or post. 21 00:01:49,340 --> 00:01:53,270 So let's get started with the component. 22 00:01:53,270 --> 00:01:59,510 So as usual, because we are beginning a new concept, let's go ahead and create a folder inside component 23 00:01:59,510 --> 00:02:03,680 and let's call it as a HTTP request. 24 00:02:05,300 --> 00:02:11,360 And now let's go ahead and create a component as a HTTP request, dot JS. 25 00:02:11,750 --> 00:02:17,510 So let's scaffold our AFC and boom, I'm good to go. 26 00:02:17,600 --> 00:02:25,910 So let me have a head tag here, each one and say making a HTTP request. 27 00:02:27,730 --> 00:02:28,600 Using. 28 00:02:31,000 --> 00:02:32,950 Use effect. 29 00:02:35,550 --> 00:02:35,940 Okay. 30 00:02:35,940 --> 00:02:39,480 So let's go ahead and mount this component or render this component. 31 00:02:39,480 --> 00:02:44,280 So inside my app, let's require the HTTP request. 32 00:02:45,420 --> 00:02:49,560 The auto import is working and there we go. 33 00:02:49,860 --> 00:02:55,200 So let me mount or render this component and now have a look. 34 00:02:55,230 --> 00:02:59,460 We have the HTTP request, so it is the endpoint that we are going to hit. 35 00:02:59,460 --> 00:03:02,310 So this is API endpoint. 36 00:03:02,820 --> 00:03:05,820 So the first step is how to make the request. 37 00:03:06,420 --> 00:03:13,650 One, making it HTTP requires involves a lot of steps because as a frontend developer, we need to take 38 00:03:13,650 --> 00:03:17,400 into consideration or have a good user experience. 39 00:03:17,490 --> 00:03:24,970 So let's say that if there are error, we need to display error to the user because making a request 40 00:03:24,970 --> 00:03:27,360 to a certain server it can fail. 41 00:03:27,360 --> 00:03:34,320 So if it fails, we need to keep track of the error and if it's taking time to load because you're making 42 00:03:34,320 --> 00:03:42,810 a mean async calls, we need to handle the loading also and then for the error and loading. 43 00:03:42,840 --> 00:03:47,730 Definitely want the actual data, write the actual data that's coming back from the API. 44 00:03:48,060 --> 00:03:52,740 So you need to handle all these three things inside your application. 45 00:03:53,130 --> 00:04:02,050 So we are going to make use of two important hooks for React Call Use Effect and then you also need 46 00:04:02,050 --> 00:04:10,830 the use state because for the state is purposely for keeping track of all this inside your React application. 47 00:04:11,100 --> 00:04:16,470 So this effect simply means that making some side effects after component has been found. 48 00:04:16,470 --> 00:04:24,600 So in short, use effect is a way of rendering your component after the component has been already been 49 00:04:24,600 --> 00:04:26,520 rendered based on a condition. 50 00:04:26,910 --> 00:04:28,140 So have a look here. 51 00:04:28,230 --> 00:04:33,120 You can see that as it stands right now, this component has been rendered already. 52 00:04:33,510 --> 00:04:33,930 All right. 53 00:04:33,930 --> 00:04:41,610 So unless I save or make some changes or refresh the application before this component can be what can 54 00:04:41,610 --> 00:04:46,830 be render, also, let me go over what is used effects one more time. 55 00:04:46,830 --> 00:04:51,570 It says that use effects is used for side effect. 56 00:04:51,990 --> 00:04:57,180 So what it means is that right now our component has been rendered. 57 00:04:57,180 --> 00:05:04,950 So before we can render this component unless we refresh the application or we make changes to the application 58 00:05:04,950 --> 00:05:08,640 and then we save it before you're going to see it being rendered. 59 00:05:09,030 --> 00:05:12,180 So making a HTTP request takes some time. 60 00:05:12,180 --> 00:05:18,960 So let's say that by the time our component get mounted like this one, the fraction of data has not 61 00:05:18,960 --> 00:05:19,920 yet been ready. 62 00:05:20,130 --> 00:05:23,520 So when it's ready, how can it be shown onto the page? 63 00:05:23,520 --> 00:05:26,640 Because this page has been rendered already. 64 00:05:26,640 --> 00:05:29,100 That is why use effect comes in. 65 00:05:29,280 --> 00:05:34,380 Use effects is that hey component, don't worry, go ahead and render. 66 00:05:34,380 --> 00:05:38,370 But as soon as I get the data I want, I will tell you to render again. 67 00:05:38,400 --> 00:05:40,620 That's the purpose of use effect. 68 00:05:40,830 --> 00:05:48,260 So to make the HTTP request, first of all, we need the API so the API are going to make use of is 69 00:05:48,260 --> 00:05:50,550 adjacent placeholder this API. 70 00:05:50,550 --> 00:05:52,140 So let's copy that. 71 00:05:52,140 --> 00:05:53,220 The endpoint. 72 00:05:54,120 --> 00:05:56,340 Now back to my application here. 73 00:05:56,520 --> 00:06:04,490 We can put the API into its own separate file or you can make it inside or you can keep it inside this 74 00:06:04,500 --> 00:06:05,550 a main component. 75 00:06:05,550 --> 00:06:15,870 So let's create a variable count and say API you are arrow is equal to the you are error from JSON place 76 00:06:15,870 --> 00:06:16,520 order. 77 00:06:16,920 --> 00:06:23,340 So the next step is let me bring this one up here, the steps we need to follow. 78 00:06:23,640 --> 00:06:29,160 The next step is we need to make a way to fetch this, to make a request. 79 00:06:29,160 --> 00:06:37,620 So we need to use effect hook and this use effect hook is equally almost equal as you state. 80 00:06:37,860 --> 00:06:40,260 So use effects as a function. 81 00:06:40,260 --> 00:06:47,700 Then you pass in a callback function as this we can pass in a function or normal function as this. 82 00:06:48,180 --> 00:06:52,200 So the first argument is this callback function or inverse function. 83 00:06:52,200 --> 00:06:57,720 The next argument you pass in here is array of dependencies. 84 00:06:57,720 --> 00:06:59,010 So we talk about it very soon. 85 00:06:59,010 --> 00:07:01,530 For now, let's give it this array. 86 00:07:01,650 --> 00:07:04,110 So what does this array mean? 87 00:07:04,410 --> 00:07:06,000 Argument represent. 88 00:07:06,150 --> 00:07:12,960 So these are the values you pass in here to tell, the component to render again. 89 00:07:13,260 --> 00:07:17,070 So you provide an array with an empty data like this one. 90 00:07:17,070 --> 00:07:22,560 It means that use effect is going to call the component only once. 91 00:07:23,100 --> 00:07:28,230 So it depends on certain situation that you want to render a component again. 92 00:07:28,230 --> 00:07:31,230 For now, let's give it as empty array. 93 00:07:31,450 --> 00:07:34,620 I save it now it just move to. 94 00:07:34,730 --> 00:07:37,700 One nine to the next step is what? 95 00:07:37,730 --> 00:07:39,110 Inside the car. 96 00:07:39,110 --> 00:07:40,130 Back here. 97 00:07:40,460 --> 00:07:47,480 Here we make the actual HTTP request and we are going to use fetch to do that. 98 00:07:47,840 --> 00:07:52,040 So fetch is a built in http client. 99 00:07:52,040 --> 00:08:00,860 So make use of fetch like this one and this fetch it takes in the endpoint that we want to make a request 100 00:08:00,860 --> 00:08:01,220 to it. 101 00:08:01,610 --> 00:08:04,250 So you're going to pass in this API. 102 00:08:04,250 --> 00:08:11,120 You are l like that because you are dealing with asynchronous programming. 103 00:08:11,120 --> 00:08:12,880 Here is close code here. 104 00:08:12,920 --> 00:08:14,540 We need to handle the promise. 105 00:08:14,540 --> 00:08:16,490 So make use of dot then. 106 00:08:17,090 --> 00:08:19,370 So to then text in a callback function. 107 00:08:19,370 --> 00:08:21,260 This video will make use of async. 108 00:08:21,500 --> 00:08:23,930 Don't worry, let's stick to the then for now. 109 00:08:24,410 --> 00:08:28,640 So you pass into them and text in a callback function. 110 00:08:28,730 --> 00:08:32,150 We're going to use a function as that. 111 00:08:32,510 --> 00:08:38,480 But if something goes wrong, we need to catch and then display the error also as a callback here. 112 00:08:38,510 --> 00:08:43,730 Then you also considered log the error if there is one. 113 00:08:44,300 --> 00:08:47,060 So let's pass in the error. 114 00:08:47,240 --> 00:08:50,210 So where coming in data is inside then. 115 00:08:50,210 --> 00:08:53,210 So here is actual data here. 116 00:08:53,690 --> 00:08:56,120 So now inside the body here. 117 00:08:56,300 --> 00:08:59,630 Now I can console.log the data. 118 00:08:59,750 --> 00:09:07,190 But but one caveat thing about fetch is that the data we are supposed to get inside the door, then 119 00:09:07,190 --> 00:09:09,710 here is not the actual data. 120 00:09:09,710 --> 00:09:10,850 So let me show what I mean here. 121 00:09:10,850 --> 00:09:16,550 So let's try to console that, log the data inside my use effect. 122 00:09:16,760 --> 00:09:20,810 So if I save it, let's check our terminal here. 123 00:09:22,080 --> 00:09:23,310 Open the terminal. 124 00:09:23,340 --> 00:09:26,790 And now you see that we get what is called response. 125 00:09:27,300 --> 00:09:35,730 Response is beanbag, but unlucky for us on the body we have this dot dot meaning the data is not being 126 00:09:35,730 --> 00:09:36,450 parsed. 127 00:09:36,780 --> 00:09:43,830 So we need to also await the response and convert this one to using data before it can be displayed. 128 00:09:44,160 --> 00:09:51,570 So now inside here we are going to take the data inside. 129 00:09:51,570 --> 00:09:52,890 So you're going to return. 130 00:09:52,890 --> 00:09:57,150 So return the data dot, Jason. 131 00:09:58,030 --> 00:10:00,780 Like that and this adjacent to. 132 00:10:00,890 --> 00:10:04,420 We can get back the actual data. 133 00:10:04,810 --> 00:10:05,410 All right. 134 00:10:05,410 --> 00:10:09,700 So as a function as that and then. 135 00:10:10,760 --> 00:10:16,430 We need to pass in then too, so we can even simplify this one on one line. 136 00:10:16,430 --> 00:10:19,310 So let me remove the callback here. 137 00:10:19,340 --> 00:10:25,160 The I mean, the carrier bases here, this carrier bases here and that. 138 00:10:25,160 --> 00:10:28,820 Let's remove that, make it more simpler like that. 139 00:10:28,820 --> 00:10:34,010 So I don't need the return here because I'm returning it immediately. 140 00:10:34,010 --> 00:10:37,370 When I save it, this one will move to the next line here. 141 00:10:37,370 --> 00:10:38,980 So let's see. 142 00:10:38,990 --> 00:10:42,350 And indeed we have that. 143 00:10:42,950 --> 00:10:50,540 So we need to also convert A with this one because before you convert it, also take some time, right? 144 00:10:50,540 --> 00:11:00,230 So here we pass in DOT, then inside that as a callback function and we have my actual post here. 145 00:11:00,230 --> 00:11:08,810 So here we can console dot log the actual post inside that. 146 00:11:08,810 --> 00:11:10,010 So let's save it. 147 00:11:10,010 --> 00:11:11,840 And now moment of truth. 148 00:11:12,200 --> 00:11:13,610 Now there we go. 149 00:11:13,610 --> 00:11:19,430 We have the 100 posts from the API, so that is it. 150 00:11:19,580 --> 00:11:21,710 But I could see that for use effects. 151 00:11:21,710 --> 00:11:24,830 We have some couple of steps here we are going to we are following. 152 00:11:24,860 --> 00:11:28,310 We need to pass the data back to Jason before you can get it. 153 00:11:28,460 --> 00:11:34,850 The next video you're going to make is a third party HTTP client called Axios to make our life easier 154 00:11:34,850 --> 00:11:37,310 than using the built in fetch. 155 00:11:37,550 --> 00:11:37,970 All right. 156 00:11:37,970 --> 00:11:45,140 So in this video, let's go ahead and implement a HTTP request using a different HTTP client called 157 00:11:45,170 --> 00:11:45,890 Axios.