1
00:00:00,790 --> 00:00:08,020
Hopefully our experts in importing and exporting the six modules so why don't we talk about the class

2
00:00:08,020 --> 00:00:13,990
based components and where because so far we have been covering only the stateless functional components

3
00:00:14,440 --> 00:00:16,770
which have been working out really well for us.

4
00:00:16,810 --> 00:00:23,050
We even finished the project for them or the class based components are gonna be more powerful because

5
00:00:23,050 --> 00:00:26,930
we can do all the same things we were doing with stateless functional components.

6
00:00:27,340 --> 00:00:33,880
However we can also have something called state as well as the life cycle method as you're watching

7
00:00:33,880 --> 00:00:42,250
this tutorial though react just released a react hoax which also give the same functionality to a stateless

8
00:00:42,250 --> 00:00:43,290
Functional Component.

9
00:00:43,650 --> 00:00:50,280
However that doesn't mean the classes are not being used or that reactor hooks are replacing the classes.

10
00:00:50,440 --> 00:00:52,000
You can still use classes.

11
00:00:52,000 --> 00:00:57,530
Classes are very important and quite frankly there is too much code out there for us not to cover the

12
00:00:57,540 --> 00:00:58,150
class.

13
00:00:58,480 --> 00:01:04,150
And again the biggest difference would be that with class based components we can do all the same things

14
00:01:04,150 --> 00:01:06,640
we were doing with stateless functional components.

15
00:01:06,640 --> 00:01:14,150
However we can do to other things extra which would be having a state as well as using the lifecycle

16
00:01:14,160 --> 00:01:14,960
method.

17
00:01:15,050 --> 00:01:21,270
The classes in general NEA 6 are already syntactical sugar and the reason why we're talking about the

18
00:01:21,280 --> 00:01:26,890
class is because in order to create a class based component we all going to have to use the class.

19
00:01:27,280 --> 00:01:29,310
And in short one sentence answer.

20
00:01:29,380 --> 00:01:36,760
The classes would be syntactical sugar for the constructor functions and this allows us to basically

21
00:01:36,760 --> 00:01:42,850
have a simpler syntax because if any of you have been using the constructor of functions you know that

22
00:01:42,940 --> 00:01:46,120
it kind of gets annoying working with the prototypes and all that.

23
00:01:46,510 --> 00:01:52,750
So any S6 we got a syntactical sugar we're under the hood everything still stay the same.

24
00:01:52,750 --> 00:01:59,600
But it's just the implementation is a little bit easier if you need to catch up a little bit with classes.

25
00:01:59,650 --> 00:02:04,570
I would suggest pausing the video and just do a little bit of reading because I'm not going to go into

26
00:02:04,570 --> 00:02:08,850
any more detail since this is not a javascript tutorial horror course.

27
00:02:08,920 --> 00:02:14,680
This is everything that we have to deal with react so that would be my simplest answer that I can give

28
00:02:14,680 --> 00:02:15,880
you in the class.

29
00:02:16,020 --> 00:02:23,040
How in the react this is even more interesting because not only we're gonna be using the six classes.

30
00:02:23,230 --> 00:02:28,420
We're also gonna have to have it as a subclass of a component class.

31
00:02:28,450 --> 00:02:35,050
Now what that would mean is the fact that we all gonna be extending from component class and what that

32
00:02:35,050 --> 00:02:41,950
would mean in real life is we're going to be inheriting the functionality and the component class is

33
00:02:41,950 --> 00:02:48,500
gonna be used to transfer from the basic sixth class to a proper component class.

34
00:02:48,550 --> 00:02:53,830
So why don't we go ahead and do it first and foremost we're going to have to have a different import

35
00:02:54,300 --> 00:02:58,240
or we're gonna have to work with react a little bit differently.

36
00:02:58,300 --> 00:02:59,770
Let me show you how this is gonna work.

37
00:03:00,240 --> 00:03:02,710
So first of all let me come on this out.

38
00:03:02,710 --> 00:03:05,860
Let's say there's gonna be no app and the moment I'm gonna save it.

39
00:03:05,860 --> 00:03:07,500
Obviously my application is gonna break.

40
00:03:07,780 --> 00:03:13,190
However for the class we need to use the class syntax and the keyword would be class.

41
00:03:13,310 --> 00:03:17,710
And that is by the way reason why we need to use energy as sex the class name.

42
00:03:18,100 --> 00:03:22,590
And this is exactly that because we have the keyword for the class.

43
00:03:22,780 --> 00:03:27,370
And then we would need to come up with a name and again I'm just going to call this app and then this

44
00:03:27,370 --> 00:03:28,750
is the interesting part.

45
00:03:28,900 --> 00:03:36,430
In order to just to create a simple class we can just do the curly braces or if we would want to inherit

46
00:03:36,880 --> 00:03:42,620
from the component class then we would need to write extends and then we have two options.

47
00:03:42,760 --> 00:03:48,920
Either you're going to see syntax like this react component so you can do it like this.

48
00:03:48,970 --> 00:03:54,370
So now you have a very powerful class based component or you're gonna see the syntax like this where

49
00:03:54,370 --> 00:03:55,930
we're just extending from component.

50
00:03:56,410 --> 00:04:02,980
However in this case this is important that you also fix your import because in this case here you're

51
00:04:02,980 --> 00:04:07,840
working with the react and everything was working fine but if you're just extending from the component

52
00:04:08,230 --> 00:04:13,010
make sure that you also specifically importing a component and as a side note.

53
00:04:13,030 --> 00:04:14,530
Notice what we're doing here.

54
00:04:14,530 --> 00:04:17,050
We already cover the imports and exports right.

55
00:04:17,080 --> 00:04:19,060
So now we're doing the default export.

56
00:04:19,060 --> 00:04:24,040
We already know that this would be the default export from react which the difference would be that

57
00:04:24,400 --> 00:04:30,880
in this case we were doing some kind of import from our own components or files or modules but in this

58
00:04:30,880 --> 00:04:32,670
case this would be dependent.

59
00:04:32,710 --> 00:04:36,360
So we were already doing in charge of importing and exporting.

60
00:04:36,370 --> 00:04:39,180
However we just didn't notice that because we didn't cover it.

61
00:04:39,570 --> 00:04:44,470
And when I say exporting with technically didn't do the exporting but we for sure did a lot of importing

62
00:04:44,860 --> 00:04:49,050
since we already wrote many times we are now in this case this wouldn't be the default one.

63
00:04:49,180 --> 00:04:50,710
And here we were looking for a name.

64
00:04:51,100 --> 00:04:52,750
So now we specifically need a couple.

65
00:04:53,290 --> 00:04:53,980
Awesome.

66
00:04:53,980 --> 00:04:55,870
So we have our powerful component.

67
00:04:55,900 --> 00:04:57,310
So what's next.

68
00:04:57,310 --> 00:05:00,500
Why don't we look at the method that you're going to is it a lot.

69
00:05:00,960 --> 00:05:01,740
I'm not going to say that.

70
00:05:01,740 --> 00:05:05,910
Maybe this is gonna be the most important method but that's gonna be something that you're going to

71
00:05:05,910 --> 00:05:08,420
use a lot in your class based components.

72
00:05:08,460 --> 00:05:14,250
And that would be the render method because the same way how well we are working with functional components

73
00:05:14,470 --> 00:05:20,650
these stateless ones as we're rendering something we also want to render something with a wrap.

74
00:05:20,760 --> 00:05:24,980
Otherwise it's not going to make sense or any class based component for that matter.

75
00:05:25,020 --> 00:05:25,830
And how do we do that.

76
00:05:26,760 --> 00:05:28,580
Well here we have a specific method.

77
00:05:28,920 --> 00:05:34,710
So the naming here is important so don't follow my example where I always tell you all this doesn't

78
00:05:34,710 --> 00:05:36,080
matter or that doesn't matter.

79
00:05:36,210 --> 00:05:41,940
In this case it does matter it does matter that we call this render and then within the render method

80
00:05:42,420 --> 00:05:44,200
we have our return.

81
00:05:44,370 --> 00:05:47,730
And then within the return this is where we returning it.

82
00:05:48,330 --> 00:05:55,380
So let's say if we're returning the section and we are using not the implicit return that we had already

83
00:05:55,380 --> 00:06:00,300
here we need to use the explosive return and then let's say we're going to set up our present to seize

84
00:06:00,780 --> 00:06:05,850
and we're going to say whatever we would like in the parentheses first so maybe let me come on this

85
00:06:05,850 --> 00:06:06,720
out.

86
00:06:06,720 --> 00:06:12,480
I'm gonna copy and paste it once this is copy and paste it again I'm gonna comment it back out so we're

87
00:06:12,480 --> 00:06:17,110
gonna say something like this and again we have everything working we have our app.

88
00:06:17,380 --> 00:06:21,960
And by the way let me show you something very powerful again with exports and imports.

89
00:06:22,180 --> 00:06:27,240
Where if I'm going to rename this and I'm going to say I've won and I'm going to say that I would like

90
00:06:27,240 --> 00:06:33,420
to export default one even though we are exporting this is has a happy one.

91
00:06:33,420 --> 00:06:35,670
Now our index does not change.

92
00:06:35,670 --> 00:06:39,900
So our application does embrace simple reasons that we are doing the default export.

93
00:06:39,900 --> 00:06:44,580
And in this case we can name this whatever we would like and just use that variable and that would be

94
00:06:44,580 --> 00:06:45,650
just a side note.

95
00:06:45,870 --> 00:06:50,400
And yeah we successfully created our first class based component.

96
00:06:50,520 --> 00:06:56,010
We looked at the render method where we're going to have the returns so all our returns are going to

97
00:06:56,010 --> 00:06:57,060
happen here.

98
00:06:57,060 --> 00:07:03,510
And as a side note all our functionality is basically going to happen here above this render or some

99
00:07:03,510 --> 00:07:06,950
cases we're also gonna look at here above the return.

100
00:07:06,960 --> 00:07:09,890
This is really going to differ depending on the situation.

101
00:07:09,990 --> 00:07:12,070
But again the rules would be exactly the same.

102
00:07:12,450 --> 00:07:16,920
If you're gonna do something that is not allowed within the jail sucks you're gonna get an error.

103
00:07:16,980 --> 00:07:19,490
That's not gonna be a any different.

104
00:07:19,510 --> 00:07:24,420
However now we're using the class based component which we're all gonna give us those two powerful things

105
00:07:24,750 --> 00:07:31,740
state as well as using the lifecycle methods which we wouldn't be able to do it with stateless functional

106
00:07:31,740 --> 00:07:32,360
components.