1
00:00:00,660 --> 00:00:05,910
In the last section we learn that we are going to run into some big issues when using a functional component

2
00:00:06,060 --> 00:00:07,970
with this geolocation API.

3
00:00:08,190 --> 00:00:13,050
The whole big problem with this is that it takes some amount of time for the geolocation service to

4
00:00:13,050 --> 00:00:14,970
return our position.

5
00:00:14,970 --> 00:00:20,190
By the time it finally returns our position we have already rendered our app component onto the screen

6
00:00:20,610 --> 00:00:26,580
and with a functional component we don't have any good way of rendering it automatically or somehow

7
00:00:26,580 --> 00:00:30,860
telling the app component to like pause its rendering process.

8
00:00:30,870 --> 00:00:35,790
So in this section we're going to start to take a look at how we're going to solve this.

9
00:00:35,820 --> 00:00:39,290
So ideally we're going to use the geolocation service.

10
00:00:39,390 --> 00:00:44,370
We're still going to have some app component being a functional component or a class based one.

11
00:00:44,550 --> 00:00:50,220
But then after we finally get that result we want to somehow tell our component to reeve render itself

12
00:00:50,460 --> 00:00:53,280
or essentially update the content on the screen.

13
00:00:53,370 --> 00:01:00,380
With this new information so step 1 in this entire process is to create a class based component instead

14
00:01:00,370 --> 00:01:03,080
of the functional one that we are currently using.

15
00:01:03,100 --> 00:01:08,280
Once you move over to a class based component we'll then be able to use re-access state system.

16
00:01:08,320 --> 00:01:11,690
So essentially we're going to learn these two different things at the same time.

17
00:01:11,740 --> 00:01:18,160
We're going to learn about javascript re-act classes class based components and state in react at the

18
00:01:18,160 --> 00:01:18,750
same time.

19
00:01:18,820 --> 00:01:20,370
But don't worry it won't be that bad.

20
00:01:20,590 --> 00:01:23,710
OK so here's our rules of creating a class based component.

21
00:01:23,710 --> 00:01:30,910
First off we must create a javascript class javascript classes were introduced with yes 2015.

22
00:01:30,910 --> 00:01:37,300
If you're coming from the language of Ruby or Java user not technically classes when we're working with

23
00:01:37,300 --> 00:01:43,120
javascript javascript inheritance works on prototype will inheritance which works a little bit differently

24
00:01:43,210 --> 00:01:50,050
than classic inheritance featured in Java or Ruby or similar object oriented programming languages but

25
00:01:50,050 --> 00:01:54,810
from our perspective it's basically going to be working like a class.

26
00:01:54,820 --> 00:01:58,550
The second requirement is that the class we create must extend worth.

27
00:01:58,570 --> 00:02:03,370
Again if you're coming from the world of Ruby or Java subclass would be the term that we use re-act

28
00:02:03,400 --> 00:02:04,590
doc component.

29
00:02:04,630 --> 00:02:10,390
We'll talk more about exactly what this means in just a moment when we factor the app and then finally

30
00:02:10,450 --> 00:02:16,570
the only big requirement of our class based components is that they must define a render method that

31
00:02:16,570 --> 00:02:19,990
is going to return some GSX.

32
00:02:20,020 --> 00:02:24,610
So with these rails in mind let's flip back over to our editor and we're going to start to Reflektor

33
00:02:24,700 --> 00:02:26,050
this app component.

34
00:02:26,380 --> 00:02:27,170
Now to get started.

35
00:02:27,190 --> 00:02:32,260
I'm going to leave this functional component right here right now so we can easily refer back to it

36
00:02:32,590 --> 00:02:38,320
in just a moment and make some comparisons between the functional and class based implementation of

37
00:02:38,350 --> 00:02:39,810
our app.

38
00:02:39,820 --> 00:02:42,000
I guess I can give myself a couple of lines down here.

39
00:02:43,300 --> 00:02:43,960
And then I'll say.

40
00:02:43,960 --> 00:02:46,290
Class app extends.

41
00:02:46,310 --> 00:02:54,000
Notice how there is an S on here it's not just to extent re-act dot components I'll then open up the

42
00:02:54,000 --> 00:03:00,750
class body with the curly braces and then I'm going to define a render method like so then inside the

43
00:03:00,750 --> 00:03:10,020
render method I'm going to return a div with that text latitude just like we had before and that's it.

44
00:03:10,020 --> 00:03:10,950
That's all we really had to do.

45
00:03:10,950 --> 00:03:11,550
That's pretty much it.

46
00:03:11,550 --> 00:03:18,060
Now obviously we're not calling the geolocation API but this right here is a valid class based component

47
00:03:18,060 --> 00:03:19,740
that we just put together.

48
00:03:19,740 --> 00:03:23,230
Now I am going to pull over at the dislocation API stuff right here.

49
00:03:23,280 --> 00:03:29,860
So I'm going to cut all that stuff and put it down into the render method like so and then I'm going

50
00:03:29,860 --> 00:03:33,010
to go ahead and delete the original functional component.

51
00:03:33,040 --> 00:03:35,980
So now we're left with just the class based one.

52
00:03:35,980 --> 00:03:36,450
All right.

53
00:03:36,640 --> 00:03:41,890
So now I want to tell you a little bit more about this extending re-act component thing right here.

54
00:03:41,890 --> 00:03:48,100
When we make a class we are creating a new class inside javascript that has just one method assigned

55
00:03:48,100 --> 00:03:52,390
to it and that is the render method in order to use a class based component with react.

56
00:03:52,390 --> 00:03:58,570
However re-act expects that our class based component has many other methods attached to it.

57
00:03:58,570 --> 00:04:01,560
Now normally we do not implement these methods by ourselves.

58
00:04:01,570 --> 00:04:07,900
Instead we follow all these other methods from this other class called re-act component.

59
00:04:07,900 --> 00:04:12,940
So essentially the reason that we are extending recomposed right here is that it allows us to pull a

60
00:04:12,940 --> 00:04:19,390
ton of built in functionality from this other class called re-act component into our class.

61
00:04:19,390 --> 00:04:23,160
That's just a fancy way of saying that we are subclassing re-act component.

62
00:04:23,200 --> 00:04:27,570
We're just borrowing functionality into our app class.

63
00:04:27,580 --> 00:04:27,790
All right.

64
00:04:27,790 --> 00:04:31,060
So let's now save this or then flip back on my browser.

65
00:04:31,150 --> 00:04:36,700
And at this point I'm just going to expect to still see latitude to appear on the screen and it definitely

66
00:04:36,700 --> 00:04:37,470
does.

67
00:04:37,540 --> 00:04:38,670
And I can refresh the page.

68
00:04:38,710 --> 00:04:44,470
And yet I still get it like so now just turning that functional component into a class based one is

69
00:04:44,470 --> 00:04:50,740
not going to inherently solve any of the problems that we have around fetching or taking too long to

70
00:04:50,740 --> 00:04:53,290
determine our physical location.

71
00:04:53,290 --> 00:04:58,180
Just using the class space component alone doesn't solve anything but it's step one towards getting

72
00:04:58,180 --> 00:04:59,340
towards a solution.

73
00:04:59,610 --> 00:05:01,110
So let's take a quick pause right here.

74
00:05:01,150 --> 00:05:06,610
When we come back the next section we'll talk about step 2 of our solution which is to use Remax state

75
00:05:06,610 --> 00:05:09,230
system and this is where things are going to get really interesting.

76
00:05:09,340 --> 00:05:11,480
So quick pause and I'll see you in just a minute.