All language subtitles for 003 Our Starting App & Backend_en

Now, I prepared

another dummy application for you.

Of course, you find it attached.

It has two dummy movies, which are being rendered here

and this button, which currently doesn't do anything.

Now, the code for this is fairly straightforward.

It's an app component, which renders

a section with this button

and which then renders a MoviesList component.

And, currently, I just have some dummy movie data

which has fed into the MoviesList.

And in the MoviesList, I simply loop through

these movies to output the individual movie components,

which render list items with, well, this content

and that brings this here to the screen.

Now at this point in this application, as I said,

we're just using some dummy data here.

I wanna change just now, I wanna fetch data

from a database which contains some example movies.

And for that, I'll use The Star Wars API.

You can visit swapi.dev for Star Wars API.

And here you have a little dummy API

with some dummy data which you can send requests to,

to play around with it, basically.

Now, I will say right away, this is an API.

It's a backend app, it's not a database

because of what I explained in the last section.

Behind the scenes it, of course, probably uses

some database to store some data about the Star Wars movies

but we interact with this backend app.

And I said API a couple of times.

API stands for application programming interface.

And it's a very broad term not just related

to React and HTTP requests, in the end,

it means that in our code we're dealing

with something which has a clearly defined interface,

clearly defined rules on how we can achieve certain results

and do certain tasks, and when we talk

about APIs in the context of HTTP requests

we typically talk about REST or GraphQL APIs,

which are basically two different standards

for how a server should expose its data.

Now, this is a REST API, and it simply means

that there are a couple of URLs,

like this URL which you see here,

to which you send that request

to get back data in a certain format.

And different URLs to which you send different requests

will give you different chunks of data.

That's what makes it an API.

You got different entry points,

which lead to different results.

If you want to learn more about REST APIs

and what exactly that all is,

you also find a helpful resource

on that attached to this lecture.

So, here, we can basically send the request

to this URL, for example, to get information

about a certain person from the Star Wars movies.

We can also grab this URL here

and send the request to swapi.dev/API/films.

And we will later get back a response

with a bunch of objects describing the different films,

the different Star Wars movies with, for example,

the opening crawl text and the title,

the episode ID, and so on.

Now, this is just a dummy API, which I want to use

for getting started with sending HTTP requests.

That's why I'm having a look at this first.

And this is the API to which we now want to send requests

from inside our React application here

to populate this list of movies here

with some real data instead of our dummy data.

And how does this, now, work in React?