1
00:00:00,830 --> 00:00:05,190
In this video I want to very quickly do a review of everything that we learned inside this application

2
00:00:05,370 --> 00:00:09,180
and then we'll go through a couple of exercises to make sure that all these different topics are going

3
00:00:09,180 --> 00:00:09,830
to stick.

4
00:00:09,990 --> 00:00:11,350
So let's get to it.

5
00:00:11,700 --> 00:00:12,110
All right.

6
00:00:12,100 --> 00:00:17,130
So first things first we first began by talking about the difference between functional components and

7
00:00:17,130 --> 00:00:18,810
class based components.

8
00:00:18,810 --> 00:00:24,300
Remember my claim is that with class based components it's generally easier to organize our code.

9
00:00:24,300 --> 00:00:29,790
Now the reason for that is that if you start to look at this index such as file it becomes pretty easy

10
00:00:29,790 --> 00:00:32,250
to understand what's going on at just a glance.

11
00:00:32,250 --> 00:00:36,210
We can open up this file and then instantly see that we have a class called app.

12
00:00:36,210 --> 00:00:39,190
It has some states it has a component did mount method.

13
00:00:39,330 --> 00:00:44,190
It has some optional method here to decide what content to render and then an actual render method.

14
00:00:44,190 --> 00:00:50,480
At the very bottom but if you open up our season display component understanding what is going inside

15
00:00:50,480 --> 00:00:54,900
on inside of your is way more challenging when you first open up this file.

16
00:00:54,900 --> 00:00:58,950
You see something called seasoned config and I don't know about you but I look at that and I go like

17
00:00:58,950 --> 00:01:01,830
wait what season config What is this thing.

18
00:01:01,850 --> 00:01:07,140
And then after that I see a function I don't know about you but if I saw this right here I might mistakenly

19
00:01:07,140 --> 00:01:11,290
think that that was my reac component when in fact it was just a helper function.

20
00:01:11,490 --> 00:01:16,020
So I had to scroll all the way down to the bottom of the file to finally see the component inside of

21
00:01:16,020 --> 00:01:16,560
here.

22
00:01:16,620 --> 00:01:18,570
In this case the functional component.

23
00:01:18,570 --> 00:01:25,510
Now if we wanted to we could definitely take that component and move it up to the top like so we would

24
00:01:25,510 --> 00:01:31,030
not run into any issues around making use of variables inside there without first declaring anything

25
00:01:31,060 --> 00:01:32,180
that would not be an issue.

26
00:01:32,200 --> 00:01:37,090
So we could put the functional component up at the top but you're going to find that in a lot of standards

27
00:01:37,120 --> 00:01:43,210
around how you put together re-act files almost always you're going to put the config files or the config

28
00:01:43,210 --> 00:01:48,210
objects and helper functions at the top and then the functional component at the bottom.

29
00:01:48,220 --> 00:01:53,020
So even though we could reorganize this thing a lot of community Conventions say to put that component

30
00:01:53,050 --> 00:01:54,630
at the bottom anyways.

31
00:01:54,760 --> 00:02:00,010
So I think that maybe it makes a lot more sense when I say understanding code organization is a little

32
00:02:00,010 --> 00:02:02,140
bit easier with class based components.

33
00:02:02,140 --> 00:02:06,310
Now the next thing we learned about class based components is that they can make use of the state system

34
00:02:06,790 --> 00:02:09,670
which makes it a little bit easier to handle user input.

35
00:02:09,730 --> 00:02:15,410
And in our case respond to data loading events or just load data period.

36
00:02:15,620 --> 00:02:19,700
Then the next thing we learned was that with the class base components we can make use of lifecycle

37
00:02:19,790 --> 00:02:20,290
methods.

38
00:02:20,320 --> 00:02:22,160
We'll talk more about those in just a second.

39
00:02:23,520 --> 00:02:26,580
We then spoke about some big rules of class based components.

40
00:02:26,580 --> 00:02:33,270
Remember that these must be a javascript class that extends the subclass of or the superclass of re-act

41
00:02:33,270 --> 00:02:34,380
component.

42
00:02:34,380 --> 00:02:36,540
Now that's just a lot of fancy terminology.

43
00:02:36,540 --> 00:02:40,740
All it means is that every single time that we ever create a class based component we're going to write

44
00:02:40,740 --> 00:02:42,180
something like that right there.

45
00:02:42,180 --> 00:02:50,330
Class the name of our component extends and then re-act component like so the only other requirement

46
00:02:50,390 --> 00:02:56,000
of a class based component is that we must define a render method that is going to return some GSX.

47
00:02:56,210 --> 00:02:58,280
And in this case we did exactly that.

48
00:02:58,280 --> 00:03:04,750
We've got the render method down here and we returned some GSX no problem whatsoever.

49
00:03:04,760 --> 00:03:07,520
Now after that we started to talk about the rules of state.

50
00:03:07,520 --> 00:03:09,940
This is where things got a little bit challenging.

51
00:03:10,000 --> 00:03:12,980
We have only kind of merely touched on the topic of state.

52
00:03:12,980 --> 00:03:17,810
There's still a lot around it to understand and to be honest with you the idea of state is one of the

53
00:03:18,380 --> 00:03:24,600
gigantic overarching topics in all of react and redux which we're going to talk about later on as well.

54
00:03:24,830 --> 00:03:29,570
So if we're going to get a ton of practice with states I want to very quickly again go to some and go

55
00:03:29,600 --> 00:03:31,010
through some of the rules here.

56
00:03:31,070 --> 00:03:36,260
First off for our understanding right now we can only use state with class based components even though

57
00:03:36,500 --> 00:03:39,180
technically there are some exceptions to that rule.

58
00:03:40,370 --> 00:03:45,230
We then learned that states is going to be a javascript object that's going to contain some amount of

59
00:03:45,230 --> 00:03:48,380
data that is relevant to a very particular component.

60
00:03:48,470 --> 00:03:55,580
In this case we assign some say to our app component because the app component was in charge of determining

61
00:03:56,000 --> 00:04:03,080
the user's current latitude and whether or not there was an error message next up whenever we update

62
00:04:03,110 --> 00:04:08,960
our state it will because the component and any child component contained inside of it to instantly

63
00:04:09,050 --> 00:04:09,980
render.

64
00:04:10,430 --> 00:04:15,860
So back inside our component did mount method after we successfully got our users location.

65
00:04:15,860 --> 00:04:19,750
We then called Set states that call a start up component to re render.

66
00:04:19,820 --> 00:04:22,370
And it also caused every component underneath it.

67
00:04:22,370 --> 00:04:27,680
Whichever one of these we were showing at the time to be rendered as well.

68
00:04:27,690 --> 00:04:31,270
Next up we had to initialize our state when our component was created.

69
00:04:31,290 --> 00:04:33,640
We first did that by using the constructor function.

70
00:04:33,750 --> 00:04:39,490
But then as we saw later on the constructor function wasn't quite necessary for initializing our state.

71
00:04:39,510 --> 00:04:44,600
And we can actually initialize the state as a instance property as you see right here.

72
00:04:44,610 --> 00:04:50,700
We also saw that when we wrote this exact same syntax into that Babel to all the REPL we saw that babbel

73
00:04:50,850 --> 00:04:55,130
takes that state declaration and moves it back into the constructor anyways.

74
00:04:55,290 --> 00:04:59,600
So even though it looks like we're not defining constructor here after babbel gets its hands on it yeah

75
00:04:59,610 --> 00:05:01,560
the constructor is going to exist anyways.

76
00:05:03,530 --> 00:05:08,720
And then finally we learnt and this is a huge important thing don't forget the only way in which we

77
00:05:08,720 --> 00:05:12,530
update our states is by calling the set state function.

78
00:05:12,710 --> 00:05:17,880
And we saw an example of that inside of our Get current position callback right here.

79
00:05:17,950 --> 00:05:23,630
So remember we didn't not do something like this but state Latt equals ninety nine or whatever it might

80
00:05:23,630 --> 00:05:24,580
be.

81
00:05:24,760 --> 00:05:27,900
I only allowed to go that high but you get the idea there.

82
00:05:28,430 --> 00:05:29,940
So we did not write something like that.

83
00:05:29,960 --> 00:05:36,260
That is bad and we never ever want to accidentally assign a property to a state object if we ever decide

84
00:05:36,260 --> 00:05:37,960
to update our state property.

85
00:05:37,970 --> 00:05:43,940
We're going to call set States and remember we also learned that when we call set states it is an additive

86
00:05:43,970 --> 00:05:46,240
or an addition operation.

87
00:05:46,250 --> 00:05:51,260
So what that meant is that if we set our state with just a lap property as you see right here it would

88
00:05:51,260 --> 00:05:55,100
not overwrite our error message the error message would not get overwritten.

89
00:05:55,100 --> 00:05:56,080
It would not get deleted.

90
00:05:56,090 --> 00:06:02,840
It would not get changed by this function call right here only the last property would likewise on the

91
00:06:02,840 --> 00:06:05,160
set state down here inside the callback.

92
00:06:05,180 --> 00:06:11,180
This would only modify the message property and it would not delete not modify not change the property

93
00:06:11,180 --> 00:06:11,950
in any way.

94
00:06:13,770 --> 00:06:14,140
All right.

95
00:06:14,160 --> 00:06:19,430
Then the last thing big topic that we spoke about was the component lifecycle that we had said that

96
00:06:19,430 --> 00:06:23,560
the constructor function is the first function that gets called Inside of a component.

97
00:06:23,630 --> 00:06:29,290
We can use it for data loading or for doing some kind of long running operation like this right here.

98
00:06:29,510 --> 00:06:35,260
But in general communi convention is to stick data loading requests into the component.

99
00:06:35,260 --> 00:06:36,800
Did mount method instead.

100
00:06:37,720 --> 00:06:39,750
Now we spoke about the render method quite a bit.

101
00:06:39,790 --> 00:06:44,980
So then the next life cycle method that gets called automatically is component mount that gets called

102
00:06:45,040 --> 00:06:49,030
exactly one time when our content first shows up on the screen.

103
00:06:50,480 --> 00:06:55,790
Then after that any time that the component gets updated by calling set States the life cycle method

104
00:06:55,790 --> 00:06:58,270
called component did update will be called.

105
00:06:58,410 --> 00:07:03,950
We make use of that lifecycle method anytime that we need to make sure that we re fetch data or redo

106
00:07:03,950 --> 00:07:06,740
something every time that a component gets updated.

107
00:07:06,920 --> 00:07:11,600
And then finally there was the component will on Mt life cycle method that we don't quite have a good

108
00:07:11,600 --> 00:07:14,600
use for right now but essentially is used for doing cleanup.

109
00:07:14,600 --> 00:07:17,680
There's not a lot of uses for it besides that.

110
00:07:17,840 --> 00:07:19,760
Now quick thing on life cycle methods.

111
00:07:19,790 --> 00:07:22,430
Let's see if I can find the diagram here.

112
00:07:22,430 --> 00:07:23,280
There it is right there.

113
00:07:23,330 --> 00:07:24,480
Just a quick reminder here.

114
00:07:24,500 --> 00:07:30,200
There are other lifecycle methods but these are rarely used and we are very purposefully not talking

115
00:07:30,200 --> 00:07:34,910
about these right now because if you learn about these you might start using them for scenarios where

116
00:07:34,910 --> 00:07:36,620
they are not actually required.

117
00:07:36,770 --> 00:07:41,720
So it's much better to get used to the lifecycle methods that we have over here and understand how we

118
00:07:41,720 --> 00:07:43,550
use those really really well.

119
00:07:43,610 --> 00:07:48,650
And then only once we realize that we have to accomplish some task that can not be easily accomplished

120
00:07:48,650 --> 00:07:53,600
with these life cycle methods only at that point are we going to then start looking at these other ones

121
00:07:53,630 --> 00:07:55,870
over here that are rarely asked.

122
00:07:55,970 --> 00:07:56,750
All right so that's it.

123
00:07:56,750 --> 00:07:59,670
That is everything we covered in this section quite a bit.

124
00:07:59,990 --> 00:08:01,460
So to take a pause right here.

125
00:08:01,460 --> 00:08:06,290
Starting in the next video or the next section we're going to start going over a couple of exercises

126
00:08:06,500 --> 00:08:11,270
to make sure we understand exactly what's going on with class components and state and lifecycle methods

127
00:08:11,270 --> 00:08:12,740
and all this good stuff.

128
00:08:12,770 --> 00:08:16,150
So quick pause and I'll see you in just a minute.