In this video I want to very quickly do a review of everything that we learned inside this application
and then we'll go through a couple of exercises to make sure that all these different topics are going
to stick.
So let's get to it.
All right.
So first things first we first began by talking about the difference between functional components and
class based components.
Remember my claim is that with class based components it's generally easier to organize our code.
Now the reason for that is that if you start to look at this index such as file it becomes pretty easy
to understand what's going on at just a glance.
We can open up this file and then instantly see that we have a class called app.
It has some states it has a component did mount method.
It has some optional method here to decide what content to render and then an actual render method.
At the very bottom but if you open up our season display component understanding what is going inside
on inside of your is way more challenging when you first open up this file.
You see something called seasoned config and I don't know about you but I look at that and I go like
wait what season config What is this thing.
And then after that I see a function I don't know about you but if I saw this right here I might mistakenly
think that that was my reac component when in fact it was just a helper function.
So I had to scroll all the way down to the bottom of the file to finally see the component inside of
here.
In this case the functional component.
Now if we wanted to we could definitely take that component and move it up to the top like so we would
not run into any issues around making use of variables inside there without first declaring anything
that would not be an issue.
So we could put the functional component up at the top but you're going to find that in a lot of standards
around how you put together re-act files almost always you're going to put the config files or the config
objects and helper functions at the top and then the functional component at the bottom.
So even though we could reorganize this thing a lot of community Conventions say to put that component
at the bottom anyways.
So I think that maybe it makes a lot more sense when I say understanding code organization is a little
bit easier with class based components.
Now the next thing we learned about class based components is that they can make use of the state system
which makes it a little bit easier to handle user input.
And in our case respond to data loading events or just load data period.
Then the next thing we learned was that with the class base components we can make use of lifecycle
methods.
We'll talk more about those in just a second.
We then spoke about some big rules of class based components.
Remember that these must be a javascript class that extends the subclass of or the superclass of re-act
component.
Now that's just a lot of fancy terminology.
All it means is that every single time that we ever create a class based component we're going to write
something like that right there.
Class the name of our component extends and then re-act component like so the only other requirement
of a class based component is that we must define a render method that is going to return some GSX.
And in this case we did exactly that.
We've got the render method down here and we returned some GSX no problem whatsoever.
Now after that we started to talk about the rules of state.
This is where things got a little bit challenging.
We have only kind of merely touched on the topic of state.
There's still a lot around it to understand and to be honest with you the idea of state is one of the
gigantic overarching topics in all of react and redux which we're going to talk about later on as well.
So if we're going to get a ton of practice with states I want to very quickly again go to some and go
through some of the rules here.
First off for our understanding right now we can only use state with class based components even though
technically there are some exceptions to that rule.
We then learned that states is going to be a javascript object that's going to contain some amount of
data that is relevant to a very particular component.
In this case we assign some say to our app component because the app component was in charge of determining
the user's current latitude and whether or not there was an error message next up whenever we update
our state it will because the component and any child component contained inside of it to instantly
render.
So back inside our component did mount method after we successfully got our users location.
We then called Set states that call a start up component to re render.
And it also caused every component underneath it.
Whichever one of these we were showing at the time to be rendered as well.
Next up we had to initialize our state when our component was created.
We first did that by using the constructor function.
But then as we saw later on the constructor function wasn't quite necessary for initializing our state.
And we can actually initialize the state as a instance property as you see right here.
We also saw that when we wrote this exact same syntax into that Babel to all the REPL we saw that babbel
takes that state declaration and moves it back into the constructor anyways.
So even though it looks like we're not defining constructor here after babbel gets its hands on it yeah
the constructor is going to exist anyways.
And then finally we learnt and this is a huge important thing don't forget the only way in which we
update our states is by calling the set state function.
And we saw an example of that inside of our Get current position callback right here.
So remember we didn't not do something like this but state Latt equals ninety nine or whatever it might
be.
I only allowed to go that high but you get the idea there.
So we did not write something like that.
That is bad and we never ever want to accidentally assign a property to a state object if we ever decide
to update our state property.
We're going to call set States and remember we also learned that when we call set states it is an additive
or an addition operation.
So what that meant is that if we set our state with just a lap property as you see right here it would
not overwrite our error message the error message would not get overwritten.
It would not get deleted.
It would not get changed by this function call right here only the last property would likewise on the
set state down here inside the callback.
This would only modify the message property and it would not delete not modify not change the property
in any way.
All right.
Then the last thing big topic that we spoke about was the component lifecycle that we had said that
the constructor function is the first function that gets called Inside of a component.
We can use it for data loading or for doing some kind of long running operation like this right here.
But in general communi convention is to stick data loading requests into the component.
Did mount method instead.
Now we spoke about the render method quite a bit.
So then the next life cycle method that gets called automatically is component mount that gets called
exactly one time when our content first shows up on the screen.
Then after that any time that the component gets updated by calling set States the life cycle method
called component did update will be called.
We make use of that lifecycle method anytime that we need to make sure that we re fetch data or redo
something every time that a component gets updated.
And then finally there was the component will on Mt life cycle method that we don't quite have a good
use for right now but essentially is used for doing cleanup.
There's not a lot of uses for it besides that.
Now quick thing on life cycle methods.
Let's see if I can find the diagram here.
There it is right there.
Just a quick reminder here.
There are other lifecycle methods but these are rarely used and we are very purposefully not talking
about these right now because if you learn about these you might start using them for scenarios where
they are not actually required.
So it's much better to get used to the lifecycle methods that we have over here and understand how we
use those really really well.
And then only once we realize that we have to accomplish some task that can not be easily accomplished
with these life cycle methods only at that point are we going to then start looking at these other ones
over here that are rarely asked.
All right so that's it.
That is everything we covered in this section quite a bit.
So to take a pause right here.
Starting in the next video or the next section we're going to start going over a couple of exercises
to make sure we understand exactly what's going on with class components and state and lifecycle methods
and all this good stuff.
So quick pause and I'll see you in just a minute.