All language subtitles for 016 Single Page Application_en

Welcome back.

In the next video, we're going to start talking about something called Life Cycle Methods and APIs.

Now, in order to prepare for that lesson, I want to go over something that we already saw that is

this component class app extends component.

Now, what does that really mean component, if we look here, is part of the REACT Library and we're

using destruction structuring here, but if I didn't include it like this, I could still use it using

the react dot component because component well, is a property on react that we can use.

And when we do something like class app extends Riak component, what we're doing is saying, hey,

I want whatever functionality that this really component that was already built into the library by

somebody.

I want the functionality and I'm going to add on to it.

So, for example, this render method comes built in with Riak component.

And this rehab component gives us some batteries included options to use in our component so that we

don't have to constantly repeat ourselves, we use something that really says, hey, this is a component

and we just tack on some specific functionality to it.

As you'll see, we'll learn about cycle methods and how these components have some important methods

already on them, such as if I type in system here, you'll see that I have some methods that comes

from the React Daudt component lifecycle.

But we'll get to that shortly.

Another thing I want to talk about is this idea of an API.

Remember how we talked about the birth of the single page application, how initially all we had to

do with a normal Web page was we visited a link and we got the Schimel JavaScript and successful.

When we clicked on another link, we went to a different page.

So we got a whole new HTML JavaScript access file.

However, with single page applications, we now have this idea of communicating with the back end initially

where we get a tiny e-mail page, remember, with our just idea of route where we fill in our component

and then we have this massive JavaScript file, or at least bigger than he usually was with our REACT

library, with our components, with any of our logic.

So now, instead of having to communicate back and forth with the server, if I click on something and

let's say visit a different part of the page, I don't have to go back.

I can just have JavaScript or react, say, hey, just re render the DOM with something else.

So now with a single page application, instead of requesting a page, it's turned more into requesting

for data.

And this is when we have the ability to, let's say, communicate with outside servers, maybe servers

that we don't control.

For example, in our big project, we're going to talk to the Google firebase database, we might talk

to some different API endpoints so that now we can communicate with different APIs back and forth and

using JavaScript, just receive the data.

For example, we saw that this Jason Placeholder website, by entering into this website, all I get

is, well, not an e-mail page, right?

All I get is this data that is formatted in what we call JSON.

So this JSON data can be converted into, let's say, a JavaScript object that we can use.

But all this does is provide us an API, a way for us to access information from, well, this server.

So they are now single page applications instead of just rendering, HTML can use this data to perhaps

display different monsters, different to user information.

And as we'll see, it will allow us to do interesting things like sign in, sign out, add items to

the shopping cart, and we'll explore that idea throughout the course.

And by the way, there's a way for you to actually check this, if we open up our developer tools and

we go to network and I refresh the page here, you'll see that I have this user's.

This users document, if I click on it and if I go to response, we see that this is the response that

we get.

So as you start to build larger and larger applications, what you'll find is that you'll start talking

to APIs and trying to get different data for your application.

And these end points or servers that we speak to can be third party servers like Google servers, or

they can be your own server where you perhaps have your own database.

Now, that's something that we're exploring a little bit more later on.

But the key thing is that the way we build applications now is very dynamic.

Most of the time, we don't have to code all the information into these files.

Instead, when a user opens something, we are always communicating with outside servers.

So we're going to start structuring our app this way.

Let's keep going.