Original subtitles

Now, when it comes to sending requests

from inside React apps,

we must not forget that in the end,

we're still writing regular JavaScript code, right?

A React application in the end

is just a JavaScript application.

That is what it's all about.

And since that is the case,

we can, of course, use any send HTTP requests

in JavaScript solution, which we want.

For example, there is a package called axios,

which you could use.

You can visit it on GitHub,

which makes sending HTTP requests

and dealing with responses very, very simple,

no matter which JavaScript library you might be using.

You can even use it without any library.

But nowadays, we also have a built-in mechanism

for sending HTTP requests from inside JavaScript.

Adm that's the Fetch API.

The Fetch API is built into browsers

and it allows us to fetch data

and actually also to send data

even though the name doesn't imply it.

And we can use that to send HTTP requests

and work with responses.

And therefore, it's the Fetch API,

which I wanna use here to get my movies.

Now, we can start simple

and make sure that whenever this button here is clicked,

we do fetch movies

and then we display the movies.

And for that, I will simply remove my dummyMovies here

and instead add a new function here,

which I'll name fetchMovies or fetchMovieHandler.

fetchMoviesHandler is probably a better name, like this.

And in here, we can now use fetch this function

because that's a function the browser makes available to us.

That's this Fetch API being used.

And in its simplest form,

we just need to pass in as a string the URL

to which you wanna sent the request.

So in my case, swapi.dev/api/films.

To be precise, https and then that URL.

We could provide a second argument here,

which allows us to pass in a JavaScript object

where we configure various options,

for example, where we add extra headers

or an extra body or change the HTTP request method,

but here we don't need that

because the default method will be GET,

so by default, a GET request will be sent

and that's all we need here for the moment.

So that will now send such a HTTP request

whenever this function is called.

But, of course, we also wanna handle the response.

And fetch returns a promise,

which allows us to then react to the response

or any potential errors we might be getting.

Now, we're getting a promise here,

which is an object which will eventually yield some data

instead of immediately doing that

because, of course, sending an HTTP request

is an asynchronous task.

It doesn't finish immediately.

It can take a couple of seconds or milliseconds.

It can even fail, of course.

And therefore, we can't just continue

in the next line of code

and use the result immediately.

Instead, the result will be there

at some point in the future

and that's exactly what promises exist for in JavaScript.

So we can add then here

to the final function which will be called

whenever we got a response.

And we could add catch

to handle any potential errors.

But for the moment, let's ignore that

and let's focus on the then case.

Here we get a response

and then here I'll write an arrow function.

We get a response and then in this function body,

we can use the response.

And this response argument here

is now actually an object

with a bunch of data about the response.

For example, we can read the response headers,

we can get the status code.

There also is a utility ok field,

which will be true if everything worked

and false if we got some error.

But here we're now interested in the response body.

And this API sends back data in JSON format.

JSON is simply a data format,

a very popular one for exchanging data

and it looks like this.

It looks like a JavaScript object

but keys are wrapped between double quotes, for example,

and there are a couple of other rules you have to keep

in mind as well.

Also there are no methods, it's just data.

And the advantage of JSON data

is that it's very easy

to translate it to JavaScript objects

but there is a translation step,

which needs to be transformed.

Thankfully, the response object which we get

has a built-in method,

which will automatically translate this JSON response body

to a real JavaScript object,

which we can use in our code.

All we've gotta do for that is call json,

which is a built-in method on that response object.

And this will now do this transformation.

Now, this itself them again returns a promise

and therefore, what we should do here

is return that promise

and then add another then block here,

which will then be fired

once this data transformation is done.

And here we, therefore, then get our transformed data,

which in the case of this URL

will have this structure here.

So it's an object with a count field,

a next field, previous and a results field,

which then in turn holds an array.

And it's this array I'm interested in here.

So we can access data.results

to get access to this array like this

and then store these results in some state,

which we then update in this place here

and which we then use here for MoviesList.

So let's add useState

and initialize extra piece of state here

in this App component.

Let's say initially it's an empty array

and we name it movies and setMovies.

That's our state updating function.

And here, once we've got our movies,

once we've got the parsed and extracted movies,

I will call setMovies

and set my data results,

so this array here,

as my new state, as my new movies state.

And now we've just gotta forward movies here

as a value for the movies prop.

Now, one thing to note here

is that in my application here,

I'm actually extracting title, releaseDate

and openingText from the data I receive.

Now, there will be a title key

but openingText is actually called opening_crawl here

and releaseDate is called release_date here.

So we either adjust the prop names here,

which I expect

or we make sure that we transform the incoming data

from this format here

to the format we expect in our app.

And I'll do the latter.

So in App.js where we are making that HTTP request,

before setting the data, the results as a new state,

I'll actually transform them.

So here I'll have my transformedMovies let's say

and that in the end will be data.results,

which is this array we're getting back, .map

to convert every object in the results array

into a new object.

And it's then the new objects,

the array full of new objects,

which will be stored in transformedMovies.

Now, the logic for mapping here simply

is that I get my movieData

or whatever you wanna call it,

which will have this format here,

so like this object here.

And I'm only interested in the id, the title,

the opening_crawl and the release_date.

So I will return a new object here

and this will be my movie object

in the front end application,

which has an id,

which I get by accessing movieData.episode_id

because there is this episode_id field

in the data we get back.

And I now translate this into just an id field

in the data I'm working with here in my front end.

Now, for the title,

we access movieData.title like this

and for my openingText, which I expect to get,

I simply access movieData.opening_crawl.

So the text stored in this opening_crawl field

will be stored in an openingText field here

in the object I'm creating here.

And then we also need the releaseDate, of course,

and that will be movieData.release_date.

Now this is transformed

and now it's the transformedMovies

which I'll store here with setMovies.

Now, to make sure that everything works,

we now have to connect fetchMoviesHandler,

this function to this button.

And therefore, of course, here we add onClick

and point at fetchMoviesHandler.

If we now save that all,

we can go back to the React application

and initially, we've got no movies

because I removed the dummy data

but if I click Fetch Movies,

you see it takes a short while

but then this movie data shows up

and this is now fetched from this Star Wars API

and therefore from a backend app,

which in turn is talking to a database.

And that in a nutshell is how you do connect to a database

from inside React apps

and since this is the wrong term,

it would be better to say

that this is how you send HTTP requests

from inside React apps to a backend.