All language subtitles for 010 Sending Http Requests_en

So enough about you state for now, let's now send this to a Web server so that we can also dive into

some of our jokes.

For example, jokes that help us replace class lifecycle methods, produce all again, use Firebase

as a dummy back and we'll just create a new product here.

React Hooks, update.

You can name whatever you want.

Create this project here, and I'm just using Firebase here because I don't want to write any complex

server side logic, I just want to have a server we can talk to which automatically has a database attached

to it so that the data as it gets stored there.

So let's wait for it to finish and then dive into this newly created project and in there, go to database

and now make sure to set up a new database there.

And don't use Firestorm, but scroll down a bit and use a real time database, click on create database

and start in test mode, which means that everyone is allowed to read and write because here we'll just

use this as a dummy backend.

Does this to you URL you can now send requests to to store data in that database and to send requests.

We can use access as we did in this course, or we used a built in fetch API which is built right into

JavaScript.

It's totally up to you.

What you want to do to mix things up.

I'll use to fetch API build into JavaScript.

So when we're adding an ingredient besides updating this locally, I also want to send the HTP request

and I do this by calling fetch.

And again, this is a function the browser understands.

It's not a react function, not a react hooke's function.

It's a browser function.

So to say the fetch API, as it's called, is built into modern browsers.

This will send a behind the scenes http request and fetch takes a U are l you want to send the request

to which is a string.

In our case.

That's not just this URL, but let's say we want to store the ingredients in the ingredients node and

firebase then also requires a dot JSON at the end.

That's just a firebase thing.

Nothing to do with react, nothing to do with reactants.

So this is where we want to send our data to you and you got to know that fetch by default will send

a get request.

Firebase.

Once a post request though, if we want to store data, hence we pass a second argument to fetch.

And that's an object that allows us to configure this request.

And on this object, we can set the method property to post a default is getting you never need to set

that, but we want to set this to post.

You then also can add a body property to define what you want to send, and that has to be JSON data,

which means you can use JSON, which is another thing built into the browser.

It's a it's a class and built into browsers, which has a stringy fine method.

This will take a JavaScript object or array and convert it into valid chasten format.

It's a convenience feature built into the browser.

Also has nothing to do with react.

So here I want to pass that ingredient, we're getting basically ingredient like this without an I.D.

because now Firebase will generate an ID for us so we don't have to do that manually.

Now, when everything you always need to set now is headers, this allows us to set our own headers

and that in turns a JavaScript object, a nested JavaScript object, and there you can set headers.

You want to point to this request and they are Firebase expects de content type header and set this

to application jasen with access.

We didn't have to do that because access did it for us.

Fetched doesn't do it for us, just as it doesn't convert data to Jason for us.

So we have to do the data conversion manually.

We have to add this header manually to inform Firebase that we got some incoming Jason data and fetch

will now return a promise.

Which will eventually resolve Wednesday's request successfully was sent or of course, once it fails,

that could be an option to let's say we want to update our data locally.

When this promise is done, then we can use then here and get response inside of this nested function

in India.

I then want to update my ingredients, because as you learn from this course with promises, the thing

is that the function you're passing through then will not execute immediately when this gets executed,

but only when this request is done in this case.

So then I want to update my ingredients.

You could also use async a wait here if you wanted to, of course.

But I will stick to this then approach because I think it makes it really clear that this executes at

a later point of time.

Now, the good thing is here, by the way, this response actually will get some data back from FIREBASE,

which contains that automatically generated in response itself.

However, it's a more complex object.

We're interested in the body of that response and you get that by calling the JSON method there.

This will extract the body and convert it from Jason to normal.

JavaScript code, however, dissolves returns a promise.

So we'll actually return response Jacir and move this code into a Naver, then block a change here which

will be my my body or my response date.

I get this in this function here which I passed the second then block which executes once this body

has been passed and now response data will be an object which has a name property which contains does

automatically generate that idea.

That's just how Firebase works.

So here we can now set it equal to respons data dot name again that we can access that name here has

nothing to do with React or with the Fach API.

That's just firebase.

It returns some data, which in the end is a JavaScript object which has a name property and that name

property will have that unique ID which was generated by Firebase.

If you're using a different API, does will probably not be named, but for Firebase it is.

And now we're creating our ingredient locally.

We're updating it there based on all our previous ingredients with that ingredient we got here and with

our name, with our ID generated by Firebase.

So let's see whether it works, let's save that.

Let's go back to our application, let's add five apples and you see it takes a while until it appears

here, which makes sense because we're sending HTP request and then here we indeed have ingredients.

Adut and Desistance unique ID.

And if I add.

Bananas, 10, again, it takes a while, not that long, because firebases very quick, but a short

while, we also see it here.

So that's working.

As soon as we reload, though, all data is lost.

So the next goal is to fetch our data whenever we reload.

So whenever our app starts or whenever ingredients get gets rendered, so to say.

And for Dad, we normally would have used lifecycle methods, we would have used components mount.

And we can't use that anymore here unless we transform this to a Class-Based component, of course,

which is not the goal.

But react.

Hoke's got us covered.