Welcome back.
In this video, let's have a look at how to make a HTTP request in React using use effect.
There are different ways to make HTTP request in React.
You can use the fetch API or Axios or you can use a library called React Query.
So in this section we will be exploring how to use fetch and then access to make HTTP requests.
So what is axios and fetch api?
These are http client.
So http client simply means that it's a way of making requests from external server into your browser
or application.
So to get started with making a HTTP request, we are going to use a third party API call JSON placeholder.
So just in place, what is a fake API for testing and prototyping?
So here we can make a request to these resources whether you want to make post, fetch, post, comment
albums, photos to dos or uses.
So assuming if you have your own API that you have created and at this point we have built a couple
of APIs within MongoDB and Node.js.
But to make our life easier, let's use this one to test how to make HTTP requests in React JS.
So this is the resources that are going to mean fetch or make a request.
If it's go down, we have the root or the endpoint.
So for the post, we need the get request.
So if you click on post, you're going to see the endpoint for making requests to fetch or post.
So let's get started with the component.
So as usual, because we are beginning a new concept, let's go ahead and create a folder inside component
and let's call it as a HTTP request.
And now let's go ahead and create a component as a HTTP request, dot JS.
So let's scaffold our AFC and boom, I'm good to go.
So let me have a head tag here, each one and say making a HTTP request.
Using.
Use effect.
Okay.
So let's go ahead and mount this component or render this component.
So inside my app, let's require the HTTP request.
The auto import is working and there we go.
So let me mount or render this component and now have a look.
We have the HTTP request, so it is the endpoint that we are going to hit.
So this is API endpoint.
So the first step is how to make the request.
One, making it HTTP requires involves a lot of steps because as a frontend developer, we need to take
into consideration or have a good user experience.
So let's say that if there are error, we need to display error to the user because making a request
to a certain server it can fail.
So if it fails, we need to keep track of the error and if it's taking time to load because you're making
a mean async calls, we need to handle the loading also and then for the error and loading.
Definitely want the actual data, write the actual data that's coming back from the API.
So you need to handle all these three things inside your application.
So we are going to make use of two important hooks for React Call Use Effect and then you also need
the use state because for the state is purposely for keeping track of all this inside your React application.
So this effect simply means that making some side effects after component has been found.
So in short, use effect is a way of rendering your component after the component has been already been
rendered based on a condition.
So have a look here.
You can see that as it stands right now, this component has been rendered already.
All right.
So unless I save or make some changes or refresh the application before this component can be what can
be render, also, let me go over what is used effects one more time.
It says that use effects is used for side effect.
So what it means is that right now our component has been rendered.
So before we can render this component unless we refresh the application or we make changes to the application
and then we save it before you're going to see it being rendered.
So making a HTTP request takes some time.
So let's say that by the time our component get mounted like this one, the fraction of data has not
yet been ready.
So when it's ready, how can it be shown onto the page?
Because this page has been rendered already.
That is why use effect comes in.
Use effects is that hey component, don't worry, go ahead and render.
But as soon as I get the data I want, I will tell you to render again.
That's the purpose of use effect.
So to make the HTTP request, first of all, we need the API so the API are going to make use of is
adjacent placeholder this API.
So let's copy that.
The endpoint.
Now back to my application here.
We can put the API into its own separate file or you can make it inside or you can keep it inside this
a main component.
So let's create a variable count and say API you are arrow is equal to the you are error from JSON place
order.
So the next step is let me bring this one up here, the steps we need to follow.
The next step is we need to make a way to fetch this, to make a request.
So we need to use effect hook and this use effect hook is equally almost equal as you state.
So use effects as a function.
Then you pass in a callback function as this we can pass in a function or normal function as this.
So the first argument is this callback function or inverse function.
The next argument you pass in here is array of dependencies.
So we talk about it very soon.
For now, let's give it this array.
So what does this array mean?
Argument represent.
So these are the values you pass in here to tell, the component to render again.
So you provide an array with an empty data like this one.
It means that use effect is going to call the component only once.
So it depends on certain situation that you want to render a component again.
For now, let's give it as empty array.
I save it now it just move to.
One nine to the next step is what?
Inside the car.
Back here.
Here we make the actual HTTP request and we are going to use fetch to do that.
So fetch is a built in http client.
So make use of fetch like this one and this fetch it takes in the endpoint that we want to make a request
to it.
So you're going to pass in this API.
You are l like that because you are dealing with asynchronous programming.
Here is close code here.
We need to handle the promise.
So make use of dot then.
So to then text in a callback function.
This video will make use of async.
Don't worry, let's stick to the then for now.
So you pass into them and text in a callback function.
We're going to use a function as that.
But if something goes wrong, we need to catch and then display the error also as a callback here.
Then you also considered log the error if there is one.
So let's pass in the error.
So where coming in data is inside then.
So here is actual data here.
So now inside the body here.
Now I can console.log the data.
But but one caveat thing about fetch is that the data we are supposed to get inside the door, then
here is not the actual data.
So let me show what I mean here.
So let's try to console that, log the data inside my use effect.
So if I save it, let's check our terminal here.
Open the terminal.
And now you see that we get what is called response.
Response is beanbag, but unlucky for us on the body we have this dot dot meaning the data is not being
parsed.
So we need to also await the response and convert this one to using data before it can be displayed.
So now inside here we are going to take the data inside.
So you're going to return.
So return the data dot, Jason.
Like that and this adjacent to.
We can get back the actual data.
All right.
So as a function as that and then.
We need to pass in then too, so we can even simplify this one on one line.
So let me remove the callback here.
The I mean, the carrier bases here, this carrier bases here and that.
Let's remove that, make it more simpler like that.
So I don't need the return here because I'm returning it immediately.
When I save it, this one will move to the next line here.
So let's see.
And indeed we have that.
So we need to also convert A with this one because before you convert it, also take some time, right?
So here we pass in DOT, then inside that as a callback function and we have my actual post here.
So here we can console dot log the actual post inside that.
So let's save it.
And now moment of truth.
Now there we go.
We have the 100 posts from the API, so that is it.
But I could see that for use effects.
We have some couple of steps here we are going to we are following.
We need to pass the data back to Jason before you can get it.
The next video you're going to make is a third party HTTP client called Axios to make our life easier
than using the built in fetch.
All right.
So in this video, let's go ahead and implement a HTTP request using a different HTTP client called
Axios.