Okay.
So now that we can reach our back end and we can fetch our products, we can also fetch single products.
I want to fetch them from our React application because right now we're just bringing in the JavaScript
file directly into the front end.
And then after that we'll start to work on our database.
So I have NPM run dev running, so both the back end and front end, but we're going to jump into the
front end and I'm going to be using Axios to fetch data.
If you want to stick with the fetch API, you can do that.
I just prefer Axios.
I think it's easier.
I think it's more full featured.
So what I'm going to do is just I guess I'll just stop the server for a second and then CD Well you
know what?
I have front end open in another terminal.
Just make sure that you're in your front end because now we're installing a front end dependency.
So NPM install Axios.
Again, make sure you're in your front end.
So if you go to front end and then Package.json, you should see Axios along with all the other front
end stuff.
Actually, I want to go back into that front end package.json and we're going to add a proxy so you
guys don't have to type this out.
I'm just going to I just want to explain this.
So let's say we're using fetch, we're using Axios.
But for this example, I'll say fetch.
We don't want to have to do Http and then localhost.
Localhost port, 5000 slash products.
We don't have to we don't want to have to do that when we make a request from actually it would be slash
API products.
But what we would what we want to be able to do is simply do slash API products.
So this, this fixes a few issues, adding a proxy for one, we don't have to type as much.
We don't, you know, we don't have to type it.
We don't have to change it.
When we deploy to something else, we don't have to have a conditional saying, Well, you know, if
we're on if we're on development, then use localhost 5000.
If we're in production, use whatever the domain is.
So what we can do is add a proxy so that when we hit anything within
API, whatever, that's going to look at localhost 5000 instead of 3000, which is where our front end
runs.
So let's do that.
And that's very simple.
All we have to do is in the package.json I'm going to put this, I'll just put it right here.
We just want to add proxy.
And we just want to set a value of that to Http and then our back end, which is going to be localhost
port 5000 and just put a comma at the end and that's it.
So now when we do slash API slash products or orders or whatever, it's going to look at this domain.
Okay?
In development, when we, when we're in production, we're not even using this file or anything like
that.
We're not using the dev server.
So now let's go ahead and go back into the root and run npm run dev, which will run both.
Okay.
And now what I'd like to do is this home screen here.
Instead of bringing in the products file, I want to fetch the products from the back end.
So let's go to source and let's see.
We have our home screen and we're making the requests from.
We're not making a request.
We're just bringing in products here and then we're using it, mapping through and showing the each
product.
But I want to get rid of this because I want to now fetch them from the back end.
So since this is a React component, it's a client side component, obviously we're not dealing with
Next.js or anything like that, so we're using the Useeffect hook to fetch our data.
So let's import, let's say import use effect from React.
Okay.
And then we'll also we'll also bring in use state because the products are going to be part of our state
for now.
Later on we're going to be using Redux.
So we'll fetch everything from Redux and pass it down into the components that need it.
But just for now, we're fetching it from this particular component.
So for our state, let's go right in here and let's say Const Products is going to be the name of that
piece of state.
And then set products will be used to update that piece of state.
And that's going to be an empty array by default.
Then use effect is going to be ran.
Let's just close this up.
So go like that.
And we need our dependency array.
So basically, this isn't like an intro to React.
I'm hoping you guys know most of this, but this is an array of dependencies where if you put something
in here and that value changes, this use effect is going to run okay, but we only want it to run once
when the page loads.
So we're just going to leave this as an empty array.
Now in the use effect, since I want to use async await, actually this gives me pretty much exactly
what I want.
So we're fetching the products.
We have an async function.
We're awaiting on Axios to get the products from slash API products.
And since we added that proxy, we don't have to add localhost 5000 and we're just getting that data.
So we're Destructuring Destructuring the data and then we're calling set products to add it to that
piece of state to products.
And down here we shouldn't have to change anything because we're still looking at a variable called
products, which now pertains to that piece of state.
So if I save this.
Let's see.
Axios is not defined.
Of course we need to bring that in.
So let's import Axios.
And now you'll see that it shows the products, but now it's coming from the back end.
In fact, we can open up.
Let's open up our network tab here.
And let's reload.
And you can see right here, if we look at products, we're getting a response with that array of products
from here.
Now it says localhost 3000.
But remember, we added that proxy.
So it's really getting it from 5000.
Okay, now I want to do the same thing with the inner page because the inner page we can close home
screen up if we go to the product screen where we're doing the same thing we did before.
Just bringing in the file, however, I want to fetch, you know, fetch that from the back end as well
so we can get rid of that.
And let's import Axios.
So import Axios from Axios and then we also want use effect and use state.
So let's say use state use effect.
And let's see, we're going to add our state.
Let's put that right here at the top.
So it's going to be just product singular.
And then.
Down here.
Let's see.
We want the ID.
We don't.
Want to do this here.
But what?
Yeah, well, we don't want to do that at all because we're fetching the data, so let's put our use
effect.
And we just end this.
Uh, oops, that should be curly brace.
And then we want just an empty.
Actually, we don't want this to be empty.
Now, if the product ID changes, we want this to run, right?
So we're going to add product ID as a dependency and then let's create a function here.
So fetch product, we're going to get the single product, call the function, and we're basically doing
the same thing we did in the home screen, except we're getting the single product with that ID, getting
it, getting getting the data, setting the product state.
And then down here we're using that product.
So let's save that.
And let's see.
Uh, export use state, import it as use state was not found.
Did I bring that in?
I did.
I brought it in from React router dom.
So these two need to bring in need to be brought in from.
React not react.
Router dom.
Okay.
And let's see.
There we go.
Reload.
And now that works.
And just to double check, if we go to our network tab and we reload, you'll see that it's getting
the ID, So API product slash three and that's the response.
All right, cool.
So we do have, you know, our front end where we're fetching data from our back end.
But right now the data is just the file on the back end.
Obviously, we want that to come from a database.
So we're going to start to work on that.
Now you can delete in the front end folder, you can delete the products.
Let's see, where do we put that right here.
Products.
JS You can delete that because we're no longer using that.
We're using the products file in the back end in the data folder for now so that everything should still
work.
Okay.
So like I said, in the next video, we'll start to get into creating our database so that we can have
our products come from there.