1
00:00:00,870 --> 00:00:04,480
In the last section we started talking about the state system in react.

2
00:00:04,620 --> 00:00:08,430
They're just talking about these rules is not super helpful and it probably is not going to make a lot

3
00:00:08,430 --> 00:00:10,340
of sense until we actually write some code.

4
00:00:10,530 --> 00:00:15,380
So in this video we're going to start to Reflektor our app component to make use of state.

5
00:00:15,420 --> 00:00:20,460
The first thing we're going to do is to make sure that we initialize our state when the component is

6
00:00:20,460 --> 00:00:22,350
first created after that.

7
00:00:22,350 --> 00:00:26,340
Well then make sure that we eventually make use of our state inside the render method.

8
00:00:26,340 --> 00:00:31,080
And then at some point in the future we'll also make sure that we update our state with set state.

9
00:00:31,110 --> 00:00:35,460
After we successfully retrieve our location but that's just kind of a quick preview of what's going

10
00:00:35,460 --> 00:00:36,000
to go on.

11
00:00:36,090 --> 00:00:37,140
Let's actually get to it.

12
00:00:37,910 --> 00:00:42,950
All right so I can flip back or it's my code editor now inside of our class component right here.

13
00:00:42,950 --> 00:00:48,650
We already have one method called the render method that render method is required for every single

14
00:00:48,650 --> 00:00:50,020
Riadh component we create.

15
00:00:50,060 --> 00:00:55,520
And one thing that I want to highlight is that that is a requirement of react react says we have to

16
00:00:55,520 --> 00:00:59,370
define render if we don't define this function right here.

17
00:00:59,420 --> 00:01:03,500
Re-act is going to throw an error in this going get angry at us and say hey you don't have a render

18
00:01:03,500 --> 00:01:06,110
method that's returning any GSX.

19
00:01:06,390 --> 00:01:11,010
There's another function that we can define inside of our class based components.

20
00:01:11,060 --> 00:01:14,760
This is another very special function as a very special name.

21
00:01:14,780 --> 00:01:21,350
Just as the render method right here has a special name but this other function is not required by react

22
00:01:21,590 --> 00:01:27,260
and it's more of a function that belongs to the javascript language itself as opposed to some very specific

23
00:01:27,260 --> 00:01:31,110
thing the name of this function is the constructor function.

24
00:01:32,340 --> 00:01:38,280
So this is a specially named function that is particular to the javascript language not specific to

25
00:01:38,280 --> 00:01:44,460
react in a javascript class that JELLETT the constructor function is the very first function that is

26
00:01:44,460 --> 00:01:48,310
going to be called any time an instance of this class is created.

27
00:01:48,450 --> 00:01:53,830
So in other words any time that we create a new instance of the app component and show it on the screen.

28
00:01:54,060 --> 00:02:00,210
This constructor function is going to be automatically and instantly called before anything else.

29
00:02:00,360 --> 00:02:05,940
And so that makes it a very good location for us to initialize our state when our component is first

30
00:02:05,940 --> 00:02:06,770
created.

31
00:02:07,830 --> 00:02:10,110
Now this is not the only way to initialize state.

32
00:02:10,110 --> 00:02:14,190
I'm going to show you another method of initializing state in just a moment but first now we'll just

33
00:02:14,190 --> 00:02:18,420
stick with this way because you're going to see a lot of blog post documentation that shows you how

34
00:02:18,420 --> 00:02:20,530
to initialize state using this method right here.

35
00:02:21,260 --> 00:02:26,250
Now when we define the constructor method it's going to be automatically called with the prop's object.

36
00:02:26,250 --> 00:02:31,910
And yes this is the same prop's object that we saw previously with our functional component before we

37
00:02:31,910 --> 00:02:34,400
do anything else inside this constructor function.

38
00:02:34,400 --> 00:02:39,800
We have to go through one little kind of ceremonial step and I say ceremonial because it's basically

39
00:02:39,800 --> 00:02:45,290
just required of us we have to do this we have to call a function called super and we have to pass in

40
00:02:45,380 --> 00:02:47,860
the props like so.

41
00:02:47,880 --> 00:02:49,240
So what does the super thing.

42
00:02:49,440 --> 00:02:53,550
You'll notice that we don't have any other function inside this file called Super So what is it.

43
00:02:53,830 --> 00:03:00,420
Well remember our app component is extending or borrowing functionality from the re-act component base

44
00:03:00,420 --> 00:03:01,870
class right here.

45
00:03:02,010 --> 00:03:07,980
This base class has a constructor function of its own that goes through some amount of setup or has

46
00:03:07,980 --> 00:03:14,160
some code inside of it to set up our real component for us when we define a constructor function inside

47
00:03:14,160 --> 00:03:15,460
of our app class.

48
00:03:15,470 --> 00:03:21,870
We are essentially overriding or replacing the constructor function that is inside of the reactor component

49
00:03:21,870 --> 00:03:22,720
class.

50
00:03:22,920 --> 00:03:27,660
But we still want to make sure that all the set up code inside of this thing's constructor function

51
00:03:27,810 --> 00:03:29,330
still gets called.

52
00:03:29,340 --> 00:03:35,700
So to make sure that the parents or re-act components constructor function gets called we call super

53
00:03:35,840 --> 00:03:37,190
with props.

54
00:03:37,410 --> 00:03:42,540
Super is a reference to the parent's constructor function and that's all it is.

55
00:03:43,680 --> 00:03:45,890
So like I said this is a little bit of ceremony.

56
00:03:45,900 --> 00:03:51,640
We have to do it every single time that we define our constructor function inside of a class based component.

57
00:03:51,660 --> 00:03:56,380
If we don't we are going to very quickly see an error message that says hey you got to call super.

58
00:03:56,610 --> 00:03:57,600
And as a matter of fact you.

59
00:03:57,690 --> 00:03:58,600
Let's just do it right now.

60
00:03:58,660 --> 00:03:59,560
Delete that.

61
00:03:59,580 --> 00:04:02,880
I'm going to save this file just so you can see this message really quickly.

62
00:04:02,880 --> 00:04:03,120
All right.

63
00:04:03,120 --> 00:04:07,540
And so you'll see right here we get this really nasty messages says super hasn't been cold.

64
00:04:07,830 --> 00:04:12,810
So essentially we just have to put super with props in there and then that error message will very quickly

65
00:04:12,870 --> 00:04:13,560
go away.

66
00:04:16,850 --> 00:04:18,530
All right so now we have to find the constructor.

67
00:04:18,560 --> 00:04:20,460
We can get on to business.

68
00:04:20,780 --> 00:04:26,470
The entire reason we define that constructor function was so that we could initialize our state object.

69
00:04:26,780 --> 00:04:32,450
So in order to initialize our state object underneath that super call Soopers always going to be the

70
00:04:32,450 --> 00:04:39,230
first thing in here so underneath it I'm going to say this that states equals an object like so.

71
00:04:41,220 --> 00:04:42,680
All right so this object right here.

72
00:04:42,720 --> 00:04:44,900
That is state object.

73
00:04:44,970 --> 00:04:49,320
It's going to eventually contain some different pieces of data some different properties that are very

74
00:04:49,320 --> 00:04:52,640
important and relevant to our component that we're putting together.

75
00:04:52,860 --> 00:04:58,190
So like I mentioned previously Right now the most relevant piece of data that we have is our latitude.

76
00:04:58,410 --> 00:05:07,410
So we might want to initialize our state object to include a property called Latitude.

77
00:05:07,410 --> 00:05:13,790
Now we're going to abbreviate latitude as simply lat Salat is short for latitude when we initialize

78
00:05:13,790 --> 00:05:15,490
a property inside the state object.

79
00:05:15,500 --> 00:05:20,380
We're going to usually default it to some reasonable or sensible value.

80
00:05:20,570 --> 00:05:25,760
In this case we know that our latitude is going to eventually be a number like a decimal number whenever

81
00:05:25,760 --> 00:05:31,130
we want to eventually have a number as a property on our state object but we don't have it yet.

82
00:05:31,160 --> 00:05:34,370
Like at this point time right here we don't know what the lead to do is just yet.

83
00:05:34,490 --> 00:05:42,230
We will usually default the value to be no so a value of no means essentially we don't know what the

84
00:05:42,230 --> 00:05:46,120
latitude is it yet we will know eventually but we don't know what it is.

85
00:05:46,160 --> 00:05:48,210
Right now.

86
00:05:48,320 --> 00:05:49,000
All right.

87
00:05:49,190 --> 00:05:53,170
So we're going to take a pause right here after saving this file at this point.

88
00:05:53,180 --> 00:06:00,140
We have defined our constructor method and we have initialized our state object by creating a javascript

89
00:06:00,140 --> 00:06:06,110
object assigning a property or a key value pair to it and then assigning the result to that to this

90
00:06:06,410 --> 00:06:07,880
state.

91
00:06:07,890 --> 00:06:08,970
So let's take a pause right here.

92
00:06:09,000 --> 00:06:12,870
When we come back the next section we're going to continue with the three factor of introducing state

93
00:06:12,900 --> 00:06:14,210
into our app component.

94
00:06:14,250 --> 00:06:16,060
So quick pause and I'll see you in just a minute.