1 00:00:02,190 --> 00:00:04,300 Now, when it comes to sending requests 2 00:00:04,300 --> 00:00:05,880 from inside React apps, 3 00:00:05,880 --> 00:00:08,140 we must not forget that in the end, 4 00:00:08,140 --> 00:00:12,300 we're still writing regular JavaScript code, right? 5 00:00:12,300 --> 00:00:14,080 A React application in the end 6 00:00:14,080 --> 00:00:16,840 is just a JavaScript application. 7 00:00:16,840 --> 00:00:18,860 That is what it's all about. 8 00:00:18,860 --> 00:00:20,220 And since that is the case, 9 00:00:20,220 --> 00:00:23,610 we can, of course, use any send HTTP requests 10 00:00:23,610 --> 00:00:26,280 in JavaScript solution, which we want. 11 00:00:26,280 --> 00:00:29,320 For example, there is a package called axios, 12 00:00:29,320 --> 00:00:30,630 which you could use. 13 00:00:30,630 --> 00:00:32,650 You can visit it on GitHub, 14 00:00:32,650 --> 00:00:35,080 which makes sending HTTP requests 15 00:00:35,080 --> 00:00:38,020 and dealing with responses very, very simple, 16 00:00:38,020 --> 00:00:41,890 no matter which JavaScript library you might be using. 17 00:00:41,890 --> 00:00:44,730 You can even use it without any library. 18 00:00:44,730 --> 00:00:48,170 But nowadays, we also have a built-in mechanism 19 00:00:48,170 --> 00:00:52,037 for sending HTTP requests from inside JavaScript. 20 00:00:52,037 --> 00:00:55,160 Adm that's the Fetch API. 21 00:00:55,160 --> 00:00:59,230 The Fetch API is built into browsers 22 00:00:59,230 --> 00:01:02,040 and it allows us to fetch data 23 00:01:02,040 --> 00:01:03,840 and actually also to send data 24 00:01:03,840 --> 00:01:06,050 even though the name doesn't imply it. 25 00:01:06,050 --> 00:01:09,100 And we can use that to send HTTP requests 26 00:01:09,100 --> 00:01:11,350 and work with responses. 27 00:01:11,350 --> 00:01:12,980 And therefore, it's the Fetch API, 28 00:01:12,980 --> 00:01:16,083 which I wanna use here to get my movies. 29 00:01:17,070 --> 00:01:18,940 Now, we can start simple 30 00:01:18,940 --> 00:01:21,750 and make sure that whenever this button here is clicked, 31 00:01:21,750 --> 00:01:23,330 we do fetch movies 32 00:01:23,330 --> 00:01:25,720 and then we display the movies. 33 00:01:25,720 --> 00:01:30,210 And for that, I will simply remove my dummyMovies here 34 00:01:31,460 --> 00:01:33,700 and instead add a new function here, 35 00:01:33,700 --> 00:01:35,783 which I'll name fetchMovies or fetchMovieHandler. 36 00:01:38,970 --> 00:01:39,803 fetchMoviesHandler is probably a better name, like this. 37 00:01:45,260 --> 00:01:49,010 And in here, we can now use fetch this function 38 00:01:49,010 --> 00:01:52,440 because that's a function the browser makes available to us. 39 00:01:52,440 --> 00:01:55,470 That's this Fetch API being used. 40 00:01:55,470 --> 00:01:57,900 And in its simplest form, 41 00:01:57,900 --> 00:02:02,100 we just need to pass in as a string the URL 42 00:02:02,100 --> 00:02:04,270 to which you wanna sent the request. 43 00:02:04,270 --> 00:02:09,270 So in my case, swapi.dev/api/films. 44 00:02:10,100 --> 00:02:14,753 To be precise, https and then that URL. 45 00:02:15,670 --> 00:02:18,440 We could provide a second argument here, 46 00:02:18,440 --> 00:02:21,520 which allows us to pass in a JavaScript object 47 00:02:21,520 --> 00:02:24,130 where we configure various options, 48 00:02:24,130 --> 00:02:26,860 for example, where we add extra headers 49 00:02:26,860 --> 00:02:31,860 or an extra body or change the HTTP request method, 50 00:02:32,430 --> 00:02:34,390 but here we don't need that 51 00:02:34,390 --> 00:02:37,080 because the default method will be GET, 52 00:02:37,080 --> 00:02:39,800 so by default, a GET request will be sent 53 00:02:39,800 --> 00:02:42,403 and that's all we need here for the moment. 54 00:02:43,320 --> 00:02:46,430 So that will now send such a HTTP request 55 00:02:46,430 --> 00:02:49,010 whenever this function is called. 56 00:02:49,010 --> 00:02:52,550 But, of course, we also wanna handle the response. 57 00:02:52,550 --> 00:02:55,830 And fetch returns a promise, 58 00:02:55,830 --> 00:02:58,650 which allows us to then react to the response 59 00:02:58,650 --> 00:03:02,270 or any potential errors we might be getting. 60 00:03:02,270 --> 00:03:04,480 Now, we're getting a promise here, 61 00:03:04,480 --> 00:03:08,260 which is an object which will eventually yield some data 62 00:03:08,260 --> 00:03:10,380 instead of immediately doing that 63 00:03:10,380 --> 00:03:13,310 because, of course, sending an HTTP request 64 00:03:13,310 --> 00:03:15,560 is an asynchronous task. 65 00:03:15,560 --> 00:03:17,330 It doesn't finish immediately. 66 00:03:17,330 --> 00:03:20,140 It can take a couple of seconds or milliseconds. 67 00:03:20,140 --> 00:03:22,070 It can even fail, of course. 68 00:03:22,070 --> 00:03:24,380 And therefore, we can't just continue 69 00:03:24,380 --> 00:03:26,220 in the next line of code 70 00:03:26,220 --> 00:03:28,760 and use the result immediately. 71 00:03:28,760 --> 00:03:30,450 Instead, the result will be there 72 00:03:30,450 --> 00:03:32,350 at some point in the future 73 00:03:32,350 --> 00:03:36,860 and that's exactly what promises exist for in JavaScript. 74 00:03:36,860 --> 00:03:38,640 So we can add then here 75 00:03:38,640 --> 00:03:41,250 to the final function which will be called 76 00:03:41,250 --> 00:03:43,350 whenever we got a response. 77 00:03:43,350 --> 00:03:45,000 And we could add catch 78 00:03:45,000 --> 00:03:47,320 to handle any potential errors. 79 00:03:47,320 --> 00:03:48,690 But for the moment, let's ignore that 80 00:03:48,690 --> 00:03:51,130 and let's focus on the then case. 81 00:03:51,130 --> 00:03:53,760 Here we get a response 82 00:03:53,760 --> 00:03:56,140 and then here I'll write an arrow function. 83 00:03:56,140 --> 00:03:58,630 We get a response and then in this function body, 84 00:03:58,630 --> 00:04:00,520 we can use the response. 85 00:04:00,520 --> 00:04:03,000 And this response argument here 86 00:04:03,000 --> 00:04:05,010 is now actually an object 87 00:04:05,010 --> 00:04:08,140 with a bunch of data about the response. 88 00:04:08,140 --> 00:04:10,780 For example, we can read the response headers, 89 00:04:10,780 --> 00:04:12,710 we can get the status code. 90 00:04:12,710 --> 00:04:15,820 There also is a utility ok field, 91 00:04:15,820 --> 00:04:18,360 which will be true if everything worked 92 00:04:18,360 --> 00:04:21,160 and false if we got some error. 93 00:04:21,160 --> 00:04:24,920 But here we're now interested in the response body. 94 00:04:24,920 --> 00:04:29,920 And this API sends back data in JSON format. 95 00:04:30,330 --> 00:04:32,720 JSON is simply a data format, 96 00:04:32,720 --> 00:04:36,130 a very popular one for exchanging data 97 00:04:36,130 --> 00:04:37,360 and it looks like this. 98 00:04:37,360 --> 00:04:39,340 It looks like a JavaScript object 99 00:04:39,340 --> 00:04:43,340 but keys are wrapped between double quotes, for example, 100 00:04:43,340 --> 00:04:45,990 and there are a couple of other rules you have to keep 101 00:04:45,990 --> 00:04:47,270 in mind as well. 102 00:04:47,270 --> 00:04:51,020 Also there are no methods, it's just data. 103 00:04:51,020 --> 00:04:53,250 And the advantage of JSON data 104 00:04:53,250 --> 00:04:54,540 is that it's very easy 105 00:04:54,540 --> 00:04:57,630 to translate it to JavaScript objects 106 00:04:57,630 --> 00:04:59,330 but there is a translation step, 107 00:04:59,330 --> 00:05:01,480 which needs to be transformed. 108 00:05:01,480 --> 00:05:04,250 Thankfully, the response object which we get 109 00:05:04,250 --> 00:05:05,610 has a built-in method, 110 00:05:05,610 --> 00:05:10,330 which will automatically translate this JSON response body 111 00:05:10,330 --> 00:05:12,580 to a real JavaScript object, 112 00:05:12,580 --> 00:05:14,630 which we can use in our code. 113 00:05:14,630 --> 00:05:17,890 All we've gotta do for that is call json, 114 00:05:17,890 --> 00:05:21,160 which is a built-in method on that response object. 115 00:05:21,160 --> 00:05:23,840 And this will now do this transformation. 116 00:05:23,840 --> 00:05:27,230 Now, this itself them again returns a promise 117 00:05:27,230 --> 00:05:29,050 and therefore, what we should do here 118 00:05:29,050 --> 00:05:31,690 is return that promise 119 00:05:31,690 --> 00:05:34,370 and then add another then block here, 120 00:05:34,370 --> 00:05:35,700 which will then be fired 121 00:05:35,700 --> 00:05:38,500 once this data transformation is done. 122 00:05:38,500 --> 00:05:41,930 And here we, therefore, then get our transformed data, 123 00:05:41,930 --> 00:05:44,390 which in the case of this URL 124 00:05:44,390 --> 00:05:46,950 will have this structure here. 125 00:05:46,950 --> 00:05:49,140 So it's an object with a count field, 126 00:05:49,140 --> 00:05:51,850 a next field, previous and a results field, 127 00:05:51,850 --> 00:05:53,683 which then in turn holds an array. 128 00:05:54,620 --> 00:05:56,891 And it's this array I'm interested in here. 129 00:05:56,891 --> 00:06:01,230 So we can access data.results 130 00:06:01,230 --> 00:06:04,750 to get access to this array like this 131 00:06:04,750 --> 00:06:08,420 and then store these results in some state, 132 00:06:08,420 --> 00:06:11,230 which we then update in this place here 133 00:06:11,230 --> 00:06:14,100 and which we then use here for MoviesList. 134 00:06:14,100 --> 00:06:16,190 So let's add useState 135 00:06:18,360 --> 00:06:22,590 and initialize extra piece of state here 136 00:06:22,590 --> 00:06:24,560 in this App component. 137 00:06:24,560 --> 00:06:27,810 Let's say initially it's an empty array 138 00:06:27,810 --> 00:06:31,710 and we name it movies and setMovies. 139 00:06:31,710 --> 00:06:33,673 That's our state updating function. 140 00:06:34,680 --> 00:06:37,190 And here, once we've got our movies, 141 00:06:37,190 --> 00:06:40,380 once we've got the parsed and extracted movies, 142 00:06:40,380 --> 00:06:42,870 I will call setMovies 143 00:06:42,870 --> 00:06:44,983 and set my data results, 144 00:06:44,983 --> 00:06:48,195 so this array here, 145 00:06:48,195 --> 00:06:52,860 as my new state, as my new movies state. 146 00:06:52,860 --> 00:06:55,940 And now we've just gotta forward movies here 147 00:06:55,940 --> 00:06:58,900 as a value for the movies prop. 148 00:06:58,900 --> 00:07:00,820 Now, one thing to note here 149 00:07:00,820 --> 00:07:03,140 is that in my application here, 150 00:07:03,140 --> 00:07:05,950 I'm actually extracting title, releaseDate 151 00:07:05,950 --> 00:07:09,590 and openingText from the data I receive. 152 00:07:09,590 --> 00:07:11,743 Now, there will be a title key 153 00:07:11,743 --> 00:07:14,630 but openingText is actually called opening_crawl here 154 00:07:17,079 --> 00:07:20,010 and releaseDate is called release_date here. 155 00:07:20,970 --> 00:07:23,910 So we either adjust the prop names here, 156 00:07:23,910 --> 00:07:25,021 which I expect 157 00:07:25,021 --> 00:07:28,560 or we make sure that we transform the incoming data 158 00:07:28,560 --> 00:07:30,240 from this format here 159 00:07:30,240 --> 00:07:32,540 to the format we expect in our app. 160 00:07:32,540 --> 00:07:34,080 And I'll do the latter. 161 00:07:34,080 --> 00:07:37,920 So in App.js where we are making that HTTP request, 162 00:07:37,920 --> 00:07:42,230 before setting the data, the results as a new state, 163 00:07:42,230 --> 00:07:43,863 I'll actually transform them. 164 00:07:44,780 --> 00:07:49,320 So here I'll have my transformedMovies let's say 165 00:07:50,490 --> 00:07:53,410 and that in the end will be data.results, 166 00:07:53,410 --> 00:07:56,580 which is this array we're getting back, .map 167 00:07:56,580 --> 00:08:00,350 to convert every object in the results array 168 00:08:00,350 --> 00:08:02,110 into a new object. 169 00:08:02,110 --> 00:08:03,830 And it's then the new objects, 170 00:08:03,830 --> 00:08:06,120 the array full of new objects, 171 00:08:06,120 --> 00:08:08,220 which will be stored in transformedMovies. 172 00:08:09,190 --> 00:08:11,610 Now, the logic for mapping here simply 173 00:08:11,610 --> 00:08:14,320 is that I get my movieData 174 00:08:14,320 --> 00:08:16,320 or whatever you wanna call it, 175 00:08:16,320 --> 00:08:18,870 which will have this format here, 176 00:08:18,870 --> 00:08:20,830 so like this object here. 177 00:08:20,830 --> 00:08:23,370 And I'm only interested in the id, the title, 178 00:08:23,370 --> 00:08:26,530 the opening_crawl and the release_date. 179 00:08:26,530 --> 00:08:28,900 So I will return a new object here 180 00:08:28,900 --> 00:08:31,240 and this will be my movie object 181 00:08:31,240 --> 00:08:33,010 in the front end application, 182 00:08:33,010 --> 00:08:34,490 which has an id, 183 00:08:34,490 --> 00:08:37,580 which I get by accessing movieData.episode_id 184 00:08:41,000 --> 00:08:44,070 because there is this episode_id field 185 00:08:44,070 --> 00:08:45,500 in the data we get back. 186 00:08:45,500 --> 00:08:48,670 And I now translate this into just an id field 187 00:08:48,670 --> 00:08:51,513 in the data I'm working with here in my front end. 188 00:08:53,510 --> 00:08:54,480 Now, for the title, 189 00:08:54,480 --> 00:08:59,480 we access movieData.title like this 190 00:09:01,097 --> 00:09:05,600 and for my openingText, which I expect to get, 191 00:09:06,780 --> 00:09:11,690 I simply access movieData.opening_crawl. 192 00:09:13,070 --> 00:09:16,320 So the text stored in this opening_crawl field 193 00:09:16,320 --> 00:09:19,030 will be stored in an openingText field here 194 00:09:19,030 --> 00:09:20,883 in the object I'm creating here. 195 00:09:22,120 --> 00:09:25,910 And then we also need the releaseDate, of course, 196 00:09:25,910 --> 00:09:28,880 and that will be movieData.release_date. 197 00:09:33,380 --> 00:09:34,680 Now this is transformed 198 00:09:34,680 --> 00:09:36,440 and now it's the transformedMovies 199 00:09:36,440 --> 00:09:38,290 which I'll store here with setMovies. 200 00:09:40,020 --> 00:09:42,080 Now, to make sure that everything works, 201 00:09:42,080 --> 00:09:44,860 we now have to connect fetchMoviesHandler, 202 00:09:44,860 --> 00:09:47,400 this function to this button. 203 00:09:47,400 --> 00:09:49,920 And therefore, of course, here we add onClick 204 00:09:49,920 --> 00:09:52,923 and point at fetchMoviesHandler. 205 00:09:54,340 --> 00:09:56,210 If we now save that all, 206 00:09:56,210 --> 00:09:58,900 we can go back to the React application 207 00:09:58,900 --> 00:10:00,730 and initially, we've got no movies 208 00:10:00,730 --> 00:10:03,350 because I removed the dummy data 209 00:10:03,350 --> 00:10:05,320 but if I click Fetch Movies, 210 00:10:05,320 --> 00:10:07,390 you see it takes a short while 211 00:10:07,390 --> 00:10:10,310 but then this movie data shows up 212 00:10:10,310 --> 00:10:13,800 and this is now fetched from this Star Wars API 213 00:10:13,800 --> 00:10:15,670 and therefore from a backend app, 214 00:10:15,670 --> 00:10:18,530 which in turn is talking to a database. 215 00:10:18,530 --> 00:10:23,210 And that in a nutshell is how you do connect to a database 216 00:10:23,210 --> 00:10:24,970 from inside React apps 217 00:10:24,970 --> 00:10:26,500 and since this is the wrong term, 218 00:10:26,500 --> 00:10:27,683 it would be better to say 219 00:10:27,683 --> 00:10:31,100 that this is how you send HTTP requests 220 00:10:31,100 --> 00:10:33,563 from inside React apps to a backend.