So how can we send requests
from inside our React application to a backend?
Well, let's start with creating new posts.
For that we got this new post component and there
at the moment I have this submit handler where I
have the end call on add post and pass the collected
post data to the parent component of new post.
In this case, that's the post list component.
There, I'm using the new post component
and on add post we're executing this add post handler
where at the moment we're updating this local post state.
Well, we definitely still want that local post state
because we still want to render some posts
but we also wanna send that data to the backend.
And in that backend code, just as a side note,
this API route should be hit,
a post request should be sent to this path on the backend,
and there this post will be stored
in a file in this post JSON file
enriched with an extra pseudo unique ID.
But that's just a side note.
So that's the path to which a request should be sent.
And to do that, we can use the fetch API.
The fetch function is available in browsers out of the box.
It's not a React feature.
And fetch can be used to send HTTP requests.
And unlike the name suggests you cannot just use it
to fetch data, but also to send data.
It's a bit confusing but that's what you
can do with that fetch function.
Now fetch takes the url to which you wanna send the request
and in my case that's local host 8080, local host
because this backend runs locally on our machine
and 8080 as mentioned is the port
on which we listed on this backend server.
So we send a request to this URL or to this domain.
And then there specifically, we wanna target the slash
posts path here because as I just mentioned
it's this slash posts path here where we expect a post
request if we wanna store a new post in this file.
Therefore, we also have to configure this request because
by default fetch sends a get request and we can now
pass an object as a second argument to fetch
to set the method to post, to turn this into a
post request and to then also add a body, so
the data that should be attached to this outgoing request.
And here the data I do wanna send is my post data
of course, the data we're getting here,
but we have to convert this to JSON.
So to the JSON format, which we can do with the
built in JSON object and the stringify method.
With that, we turn that data into JSON, as we must do.
And then last, but not least we should add
some headers to this outgoing request by setting
an object on this header's property.
And here I want to add the content type header
and set this to application JSON.
And that's how we could send such a post request
with our post data to the right path on this dummy backend.
Now fetch will then send this request,
hit this API route here, this API resource
and then ultimately it will return a response.
Now for the moment, I'm not really interested
in the response here, and therefore we can just save this.
And if we do so and I add a new post test max
it still appears locally because
I still update my posts as I did before.
But if we switch to the backend here
we should see that in posts JSON
we also got the post here.
So it was indeed received on the backend and stored there.
And that's generally how we can send the request
from our front end to the backend.
Nothing special about that here.
It's the standard fetch function
and it does what we would expect.
But of course we now also wanna fetch data.
We wanna make sure that if we reload this page
or if we visit it for the first time
we fetch the available posts from the back end.
And here things become a bit more tricky.