‫Now, in this video, I want to very quickly do a review of everything that we've learned inside of
‫this application.
‫All right, so let's get to it.
‫We first began by talking about the difference between functional component and class based component.
‫I hope you remember that I said that with class based components is generally easier to organize our
‫code.
‫Now, the reason for that is that if you start to look at this index dot, just while it becomes pretty
‫easy to understand what's going on at first glance so we can open up this file and then instantly see
‫that we have a class called app.
‫It has states, it has a component did mount method, and it has some optional methods here to decide
‫what content to render.
‫But if you open up our hemisphere display component, understanding what's going on inside of here is
‫a little challenging when you first open it up.
‫Am I right?
‫So you see something here called hemisphere config at the top, and I don't know about you, but.
‫I go like, wait, what hemisphere config, what's this thing?
‫But on the other hand, if we would have a couple of helper functions inside this file, it would be
‫a little bit more confusing.
‫First, decide which one is our component.
‫As you can see here, it seems a little challenging to decide what's going on.
‫OK, so I had to scroll all the way down to the bottom of the file to finally see the component inside
‫of here.
‫And if we wanted to, we could definitely take that component out and move it up to the top like so.
‫And we probably not run into any issues.
‫So we could put the functional component at the top, but you're going to find that in a lot of standards,
‫people generally want to put the config objects in, the helper functions at the top and then the functional
‫components at the bottom.
‫It's, you know, kind of a community convention to put the component, the bottom.
‫So right now, I'm going to remove this.
‫And the next thing we learned about class based components is that they can make use of the state system,
‫which makes it easier to handle user input.
‫And the next thing we learned was that with a Class-Based components, we can make use of Life-cycle
‫methods.
‫We then spoke about some big rules of class based components.
‫So we said that we have to define a render method that's going to return some X.
‫And right here, we've got the render method and we return some JSM.
‫And we are going to learn more about state, and right now we can only use the state with class based
‫components, even though technically there are some exceptions to this rule.
‫And then hopefully you learned that state is going to be a JavaScript object that's going to contain
‫some amount of data that is relevant to a very particular component like this.
‫All right, so next up, we had to initialise 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, it wasn't really necessary for initializing
‫our state.
‫And that we can actually initialize this state as an instant property, as you see right here.
‫So even though we're not defining constructor here.
‫Babel gets it and puts it inside the constructor instead of making us do it.
‫It's actually the constructor is going to exist anyway, so why not put it to good use?
‫Then finally, we learned an important thing that the only way to update our states is by calling the
‫set state function.
‫And then we saw an example of that inside of our get current position, Comac back right here.
‫And we also went over the fact that when we call set states, it would not overwrite, delete or change
‫our error message and likewise for the latitude.
‫This would only modify the latitude property and it would not modify or change the error message.
‫And then the last big topic that we spoke about was the component Life-cycle Method's.
‫We said that a constructor function is the first function that gets called inside of a component.
‫We can use it for data loading or for some kind of long running operation, but community convention
‫is to stick data loading requests into the component did mount method.
‫The component did Mount Life-cycle method.
‫Gets called exactly one time when our content first shows up on the screen.
‫And then after that, any time that the component gets updated by calling set state, that component
‫did update Life-cycle method will be called.
‫So we make use of that Life-cycle method any time that we need to fetch data or redo something, every
‫time that a component gets updated.
‫And finally, there was a component will unmount life cycle method.
‫We said that it's essentially used for doing cleanup.
‫There is not a whole lot of other uses for it besides that.
‫So that's a whole lot, but it is everything that we've covered in this section.
‫So, hey, good job you're sticking with it.
‫We got more to get to, so we take a break right here, have some rest even, and I'm going to meet
‫you in the next section.