In the last section we learn that we are going to run into some big issues when using a functional component
with this geolocation API.
The whole big problem with this is that it takes some amount of time for the geolocation service to
return our position.
By the time it finally returns our position we have already rendered our app component onto the screen
and with a functional component we don't have any good way of rendering it automatically or somehow
telling the app component to like pause its rendering process.
So in this section we're going to start to take a look at how we're going to solve this.
So ideally we're going to use the geolocation service.
We're still going to have some app component being a functional component or a class based one.
But then after we finally get that result we want to somehow tell our component to reeve render itself
or essentially update the content on the screen.
With this new information so step 1 in this entire process is to create a class based component instead
of the functional one that we are currently using.
Once you move over to a class based component we'll then be able to use re-access state system.
So essentially we're going to learn these two different things at the same time.
We're going to learn about javascript re-act classes class based components and state in react at the
same time.
But don't worry it won't be that bad.
OK so here's our rules of creating a class based component.
First off we must create a javascript class javascript classes were introduced with yes 2015.
If you're coming from the language of Ruby or Java user not technically classes when we're working with
javascript javascript inheritance works on prototype will inheritance which works a little bit differently
than classic inheritance featured in Java or Ruby or similar object oriented programming languages but
from our perspective it's basically going to be working like a class.
The second requirement is that the class we create must extend worth.
Again if you're coming from the world of Ruby or Java subclass would be the term that we use re-act
doc component.
We'll talk more about exactly what this means in just a moment when we factor the app and then finally
the only big requirement of our class based components is that they must define a render method that
is going to return some GSX.
So with these rails in mind let's flip back over to our editor and we're going to start to Reflektor
this app component.
Now to get started.
I'm going to leave this functional component right here right now so we can easily refer back to it
in just a moment and make some comparisons between the functional and class based implementation of
our app.
I guess I can give myself a couple of lines down here.
And then I'll say.
Class app extends.
Notice how there is an S on here it's not just to extent re-act dot components I'll then open up the
class body with the curly braces and then I'm going to define a render method like so then inside the
render method I'm going to return a div with that text latitude just like we had before and that's it.
That's all we really had to do.
That's pretty much it.
Now obviously we're not calling the geolocation API but this right here is a valid class based component
that we just put together.
Now I am going to pull over at the dislocation API stuff right here.
So I'm going to cut all that stuff and put it down into the render method like so and then I'm going
to go ahead and delete the original functional component.
So now we're left with just the class based one.
All right.
So now I want to tell you a little bit more about this extending re-act component thing right here.
When we make a class we are creating a new class inside javascript that has just one method assigned
to it and that is the render method in order to use a class based component with react.
However re-act expects that our class based component has many other methods attached to it.
Now normally we do not implement these methods by ourselves.
Instead we follow all these other methods from this other class called re-act component.
So essentially the reason that we are extending recomposed right here is that it allows us to pull a
ton of built in functionality from this other class called re-act component into our class.
That's just a fancy way of saying that we are subclassing re-act component.
We're just borrowing functionality into our app class.
All right.
So let's now save this or then flip back on my browser.
And at this point I'm just going to expect to still see latitude to appear on the screen and it definitely
does.
And I can refresh the page.
And yet I still get it like so now just turning that functional component into a class based one is
not going to inherently solve any of the problems that we have around fetching or taking too long to
determine our physical location.
Just using the class space component alone doesn't solve anything but it's step one towards getting
towards a solution.
So let's take a quick pause right here.
When we come back the next section we'll talk about step 2 of our solution which is to use Remax state
system and this is where things are going to get really interesting.
So quick pause and I'll see you in just a minute.