Now, the first thing we need to do is to actually make a request, try and see if we can make a request
to our API from the React app.
So let me just close the folder over here and then we're going to go inside a React component lifecycle
function, which is called Componentdidmount.
Inside here, this is where we usually want to run API calls that you make.
Let's try and see.
So we're going to look in the console, see what result we get.
We use something called fetch to call the API.
So we say Http and we're just going to look inside of Postman.
To see what we could use.
This is the request we make to our API.
This one.
We know it works.
So copy that.
In here.
And I will say response const, response await.
And we're actually going to copy this into another function.
Async function called fetch products.
Because we're going to use a weight.
So async fetch products.
And then inside Componentdidmount, which is going to be launched every time we reload this page, it's
going to call the fetch products.
Just like that.
And so this await fetch products and it uses the query to our own local API.
And then you need to do const Json and say await.
Response dot Json.
So this is going to convert or only get the Json from the response.
Now we can say console.log Json to see if we're actually getting the result from the API.
And now you can see it's saying access to fetch at our API from origin localhost 3000.
That is the React location react app location has been blocked by the course policy.
No access control allow origin header is present on the request resources.
So this is why we are building a our own backend instead of just using Nordstrom API in our React app
is because our browsers like Chrome have the security feature where they check for the course policy
on resources you're requesting.
Not a way to fix this is pretty easy.
All we do is we go inside the terminal again and then we'll add the course packets C or courses.
Yarn add course.
And once that is done, we go inside the back end.
I have the back end code here, which is inside back end index.js and we add the course packets.
So let's see const course.
Require.
Of course.
And then we just say after we created the app here.
We'll say app dot use and then pass in course.
And that's simply going to enable course or access control, allow origin.
It's going to enable you to request the resource inside the React app, which is a different location.
Um, if you're using this in a production environment, make sure that you specifically enable only
a specific domain so not everyone can request from your API or use it inside their web apps.
Just something to keep in mind.
If you intend to do this for production, you need to set a specific domain instead of just allowing
everyone.
But for this small test sample project we're doing, it is absolutely fine to do it like this.
Now let's see if we get the result now.
And there we go.
We get the Json here from App.js 15.
That is the console.log here.
Now let's let's expand it.
And we can see we have the Json here with the products object, which has an array of free products.
So they have the name, which is the name of the product.
There's some media array which contains path to the images.
The.
Uh, well, the images of the dresses and so on.
So now we all we need to do is to make up some JS to display these results.