Welcome back.
In this video we're going to talk a bit about something advanced and we haven't covered it much in this
course and we definitely will in the next section but I want to get started with it so that even though
it might be new and confusing at first by the time we get into the next section we'll come back and
review exactly what we're doing.
I want to make this app more realistic in a real life app.
We wouldn't necessarily have these robots written here like I have in robots.js.
I've just created this file,
but in real life, well we're not manually entering users.
We would use something like an API.
And what that means.
Well, we want, when this Web site gets loaded, to make a request somewhere out there, in the world of the
internet and grab these robots from a server. Well we can actually do that. We have over here something
called "JSONPlaceholder" and you don't need to worry too much about it but they actually have a really
nice URL that we can use, and they return what we need: a name, an ID and a user name.
The rest of the information well we don't really need it.
But as you can see just by typing in this URL I get this.
So using this we're going to make our app a little bit more realistic.
Let's get started.
If I close my CSS files since we don't need them anymore.
And let's close the rest of the tabs as well.
Looking at this app component we see that it is what we call a smart component unlike the search box or
cardlist, that are just pure functions as you can see here.
App.js actually has state, a piece of data that describes our app, and because they have state we call them
smart components.
And smart components tend to have this class syntax.
Now in real life when we start up this app this robots would actually be an empty array because there's
nothing there.
We haven't grabbed the users.
So most likely if I save this, robots wouldn't display until I load the Web site, and then as soon as
the Web site gets loaded I ask for the users from somewhere over the internet
somewhere hopefully here.
So let's do that.
React comes with a few other things inside of components that we can use and they're called lifecycle
methods.
And it looks something like this.
Don't get too overwhelmed.
These are just methods that we can use in here that comes with react and they're called lifecycle hooks
because what they do is, if we run these, it will automatically trigger when this app gets loaded on the
Web site.
Let me explain.
We see that we have three sections.
We have mounting, updating and unmounting. The way react works is we do something called mounting.
When I click refresh here the app component - this component right here - gets mounted into the document
with the id of 'route'.
If we go back to our index.html file, well our Web page is nothing but a div with an id of root.
When we say we mount a component, we're replacing this and adding our entire app - that's mounting. So mounting
is the start of the app. Now when mounting, these are the lifecycle hooks that get hit, and they are in order.
So the first thing is it checks Hey does this component have a constructor? Will this App have a constructor?
Yes.
OK then run this piece of code. does it have componentWillMount()?
No, it doesn't. Then ignore it.
Does it have render()? Yes it has render - run this.
Does it have componentDidMount()?
No, it doesn't have componentDidMount() - ignore it. And it just runs through this every time.
It also has something called updating and that is, whenever a component changes.
For example, when we had the list well every time I type something, the card list component gets
re-rendered because we have new information, the function receives new inputs.
Same with the input component.
So again, within those components, if we wanted to, we can add componentWillReceiveProps(), shouldComponentUpdate(),
and so on and so forth.
And finally, with unmounting is when a component is removed from a page, for example if we change to a
different page here, the component will unmount, the app component will get deleted from the page.
These are called lifecycle hooks because they get run every time a component does something and it comes
with react.
So you can just put them in into your class component and they'll automatically get triggered.
You don't have to worry about calling them. Let me demonstrate this.
We want to use componentDidMount which gets called after render. This says that yes,
the app component is mounted on the web page, and it is rendered, that is it's displaying something.
Well, we can do that by saying componentDidMount and, because this is part of react,
Notice that I'm not using arrow functions here.
Now within componentDidMount.
I can say console.log('check')
If I refresh this, and open up the console, you'll see that I have check if I refresh.
There you go.
That was really quick.
But you see that that gets called automatically even though I haven't said anything.
Using this we can do something interesting.
Now when componentDoesMount I can say this.setState to now have robots to the robots that we
get from the javascript file.
If I do this and save let's refresh and see what happens.
It's really really fast but you see that we're getting our robots.
I am saying run the constructor with an empty array just to show you the order of execution here.
If I add a console log and we'll just say one here
we'll say two here, and we'll just say three.
If I save this and open up the console I have 1 3 2 3. Let's just check that. We have one - that runs first
then three, which is render. Then two, which is componentDidMount and then three runs again.
Actually let's change this to actual words so that you see better what is actually happening.
If we save and refresh look at that: we have a constructor that runs first then render then componentDidMount
just like this order.
But we now also have render.
Why did render run again.
If you remember we created the constructor, we ran render and then we updated the state and componentDidMount.
So because we updated the state, every time the state changes - Remember we go through the lifecycle - it's updating
it runs render again.
So because it goes from an empty array to a robot's list, render gets re-run, and the virtual Dom
notices that there's a difference, and repaints our Web browser to include the robots. Very cool. Knowing
what we just did,
we can remove this and finally make this more realistic.
Instead of using the robot's file I'm actually going to remove this and in here I'm going to show you
a cool way to grab this list from here.
I'm going to copy the link and I'm going to say fetch which we'll learn about in the next section.
We're just saying make this HTTP request, and fetch receives this.
Again we're just saying go to here, then.
This is going to receive a response
and this response is... Well, this part is a little tricky.
You just have to get used to it.
response.json - we just have to convert the response into, again something that we'll talk about in the next session.
For now just, you can copy and paste this follow along.
We'll come back to this and explain what's happening.
And from here, let's add this on a new line so we know exactly what's happening.
We'll say .then robots or we can say users because in this case we're getting users, and in here we can
say
this.setState robots to equal users, and we have to make sure that we return this. Save.
Let's see if that works.
Look at that.
Let's refresh and you see that little lag, it is now working.
So in here we can actually make this smaller and reduce it to one line.
We should remember how to do that.
And we see that we're simply
updating state
after we fetch.
So we fetch whatever the users are.
We're getting a response.
We're doing some magic here with Json which we'll talk about later.
And then we're getting the users and updating the users with setState. So if I refresh
again.
If I don't do this, let's say I just, here don't do anything, and return an empty object.
You see that I don't receive the robots, I only receive the robots after I update with these users.
How cool is that.
All right.
That was a lot.
And this probably looks pretty scary. To make you feel a little bit more comfortable, because I'm using
fetch and there is nothing attached to it,
Does this mean that it's part of the window object?
Let's check: if I open up the console and I do window.fetch.
Yeah look at that.
Fetch is a method on the window object.
It comes with all browsers now.
It is a tool for us to make requests.
To servers, and as you can see this is a server that returns for us when we do slash users a list of
users that we can use which is perfect for our app.
And finally you're wondering, what if this was really slow or whatever this took I don't know five seconds
and we had a whole ton of users.
Well, in that case you can do something like an IF statement: if robots.lenth is zero.
In that case we can return an 'h1' that says loading
else we can just say return
this. Again it's just javascript.
That's a beauty in react.
And you see how we get robots is not defined because it's this.state.robots.
Again we're referring to the state of the app.
And here if I refresh, let's just say that we're not updating the state and I'm going to just return
an empty object
while in that case I just get loading.
Very cool.
And this is how you build real apps with react, you have a loading bar, they can just add here, make requests
on componentDidMount and interact with components.
Very cool.
You know what, we have ourselves our app. There's one last thing I'm going to show you with react and
you've learned the basics and react.
You can take this now to build any app that you want.
So one more thing to go.
One more little piece to get our react knowledge completed.
I'll see you in the next one.
Bye-bye