WEBVTT 00:00.470 --> 00:06.830 Now, the first thing we need to do is to actually make a request, try and see if we can make a request 00:06.860 --> 00:10.310 to our API from the React app. 00:11.390 --> 00:20.930 So let me just close the folder over here and then we're going to go inside a React component lifecycle 00:20.930 --> 00:24.530 function, which is called Componentdidmount. 00:24.950 --> 00:29.990 Inside here, this is where we usually want to run API calls that you make. 00:30.230 --> 00:31.300 Let's try and see. 00:31.310 --> 00:35.540 So we're going to look in the console, see what result we get. 00:36.320 --> 00:39.770 We use something called fetch to call the API. 00:39.800 --> 00:45.500 So we say Http and we're just going to look inside of Postman. 00:47.440 --> 00:49.330 To see what we could use. 00:49.480 --> 00:53.170 This is the request we make to our API. 00:54.450 --> 00:55.290 This one. 00:55.290 --> 00:56.670 We know it works. 00:57.090 --> 00:58.650 So copy that. 01:00.880 --> 01:01.840 In here. 01:04.500 --> 01:09.270 And I will say response const, response await. 01:10.630 --> 01:14.920 And we're actually going to copy this into another function. 01:14.950 --> 01:18.670 Async function called fetch products. 01:20.970 --> 01:23.130 Because we're going to use a weight. 01:24.140 --> 01:26.660 So async fetch products. 01:26.870 --> 01:34.250 And then inside Componentdidmount, which is going to be launched every time we reload this page, it's 01:34.250 --> 01:36.440 going to call the fetch products. 01:39.370 --> 01:40.390 Just like that. 01:40.940 --> 01:48.140 And so this await fetch products and it uses the query to our own local API. 01:49.810 --> 01:54.640 And then you need to do const Json and say await. 01:55.350 --> 01:57.390 Response dot Json. 01:57.390 --> 02:02.850 So this is going to convert or only get the Json from the response. 02:04.030 --> 02:09.460 Now we can say console.log Json to see if we're actually getting the result from the API. 02:09.970 --> 02:18.430 And now you can see it's saying access to fetch at our API from origin localhost 3000. 02:18.430 --> 02:25.840 That is the React location react app location has been blocked by the course policy. 02:26.260 --> 02:31.420 No access control allow origin header is present on the request resources. 02:31.750 --> 02:42.010 So this is why we are building a our own backend instead of just using Nordstrom API in our React app 02:42.280 --> 02:51.310 is because our browsers like Chrome have the security feature where they check for the course policy 02:51.310 --> 02:53.500 on resources you're requesting. 02:55.050 --> 02:59.280 Not a way to fix this is pretty easy. 02:59.580 --> 03:11.820 All we do is we go inside the terminal again and then we'll add the course packets C or courses. 03:12.090 --> 03:14.160 Yarn add course. 03:15.350 --> 03:21.290 And once that is done, we go inside the back end. 03:23.100 --> 03:31.910 I have the back end code here, which is inside back end index.js and we add the course packets. 03:31.920 --> 03:34.230 So let's see const course. 03:35.160 --> 03:35.880 Require. 03:36.960 --> 03:37.760 Of course. 03:38.450 --> 03:43.760 And then we just say after we created the app here. 03:44.610 --> 03:48.870 We'll say app dot use and then pass in course. 03:50.090 --> 03:56.120 And that's simply going to enable course or access control, allow origin. 03:56.480 --> 04:02.690 It's going to enable you to request the resource inside the React app, which is a different location. 04:03.760 --> 04:12.490 Um, if you're using this in a production environment, make sure that you specifically enable only 04:12.490 --> 04:19.390 a specific domain so not everyone can request from your API or use it inside their web apps. 04:19.720 --> 04:21.160 Just something to keep in mind. 04:21.160 --> 04:28.450 If you intend to do this for production, you need to set a specific domain instead of just allowing 04:28.450 --> 04:29.290 everyone. 04:29.770 --> 04:35.440 But for this small test sample project we're doing, it is absolutely fine to do it like this. 04:36.690 --> 04:39.690 Now let's see if we get the result now. 04:40.620 --> 04:42.510 And there we go. 04:42.510 --> 04:46.470 We get the Json here from App.js 15. 04:46.500 --> 04:48.270 That is the console.log here. 04:49.230 --> 04:51.210 Now let's let's expand it. 04:51.210 --> 05:00.030 And we can see we have the Json here with the products object, which has an array of free products. 05:00.360 --> 05:06.090 So they have the name, which is the name of the product. 05:06.120 --> 05:12.270 There's some media array which contains path to the images. 05:12.480 --> 05:13.560 The. 05:14.820 --> 05:17.940 Uh, well, the images of the dresses and so on. 05:18.420 --> 05:25.590 So now we all we need to do is to make up some JS to display these results.