1
00:00:01,110 --> 00:00:11,190
In this section, we are going to dive in and learn the core concepts when it comes to react, and that

2
00:00:11,190 --> 00:00:12,930
is component.

3
00:00:13,700 --> 00:00:18,980
Any time you hear the word react, you hear the word component also.

4
00:00:20,040 --> 00:00:23,220
So React is all about component.

5
00:00:24,030 --> 00:00:29,550
In my own definition, I define react is equal to component.

6
00:00:30,260 --> 00:00:37,790
So as a beginner, the most confusing part when it comes to react is to be able to understand and use

7
00:00:37,790 --> 00:00:38,840
component.

8
00:00:39,140 --> 00:00:47,480
Because of that, we are dedicating a specific section to cover everything about component by moving

9
00:00:47,480 --> 00:00:49,370
step by step.

10
00:00:49,970 --> 00:00:55,460
To better understand our edge, you to take some nodes as we proceed.

11
00:00:56,240 --> 00:00:58,760
Well enough talking grade.

12
00:00:58,760 --> 00:01:08,620
So before we get into the technical term of re act sorry component, we are going to use some object

13
00:01:08,630 --> 00:01:11,660
to explain before we get into that.

14
00:01:11,810 --> 00:01:17,690
And the first object we are going to use to explain component is what you see on the screen.

15
00:01:18,480 --> 00:01:21,270
Even though I'm not a mechanical engineer.

16
00:01:21,270 --> 00:01:25,300
So if I misuse some technical terms concerning this object.

17
00:01:25,320 --> 00:01:26,550
Pardon me for that.

18
00:01:26,730 --> 00:01:27,450
Okay, cool.

19
00:01:27,660 --> 00:01:36,840
So you can see that for this particular object we see here, we have pieces of object on it, and that

20
00:01:36,840 --> 00:01:39,030
is what you call component.

21
00:01:39,060 --> 00:01:45,930
We see that and each of these ones has a specific function that it does.

22
00:01:46,500 --> 00:01:53,700
So these pieces of components we see make up this entire object functional.

23
00:01:54,630 --> 00:01:56,880
That is the nature of a component.

24
00:01:57,240 --> 00:02:04,380
So if you take this one to compare to web application, we can say that this is the Web application.

25
00:02:04,380 --> 00:02:10,300
The entire chip here and the pieces of on it is our logic, entire application.

26
00:02:10,320 --> 00:02:15,750
So that is one object we can use to explain what is called component.

27
00:02:15,900 --> 00:02:20,460
So let's get to next slide and explain more about component.

28
00:02:21,060 --> 00:02:26,640
Well, before we describe this object, cut your eyes around you.

29
00:02:27,270 --> 00:02:34,410
Anything you see around you is made up of component, whether it's natural or artificial.

30
00:02:34,560 --> 00:02:39,430
So let's use this laptop as an example here for this laptop.

31
00:02:39,450 --> 00:02:44,700
You can see that we have a screen or the laptop.

32
00:02:45,060 --> 00:02:48,610
Then we have a keyboard of the laptop.

33
00:02:48,630 --> 00:02:52,740
Then we have a mouse track of the laptop.

34
00:02:53,010 --> 00:02:56,160
So this is what you call component.

35
00:02:56,370 --> 00:02:59,990
And this component makes up this laptop.

36
00:03:00,000 --> 00:03:05,880
So we can describe this laptop as our web application or react application.

37
00:03:06,120 --> 00:03:11,010
And the pieces of the component makes up the entire application.

38
00:03:11,280 --> 00:03:16,410
So this component has a specific function that it does.

39
00:03:16,800 --> 00:03:23,640
Before we get into the actual definition of component, let's use the last slide here and let's use

40
00:03:23,640 --> 00:03:26,340
this handsome guy over here.

41
00:03:26,790 --> 00:03:31,380
You can see that this person has different component.

42
00:03:31,950 --> 00:03:32,700
It has.

43
00:03:32,700 --> 00:03:35,880
This person has the arm component.

44
00:03:36,390 --> 00:03:37,050
All right.

45
00:03:37,050 --> 00:03:38,180
I'm component.

46
00:03:38,190 --> 00:03:40,150
It has a head component.

47
00:03:40,170 --> 00:03:41,610
Leg component.

48
00:03:41,610 --> 00:03:43,770
And then shoe component.

49
00:03:43,770 --> 00:03:45,630
And then nodes component.

50
00:03:45,870 --> 00:03:47,970
And the person turns back.

51
00:03:48,330 --> 00:03:51,810
The person has a back component as well.

52
00:03:52,080 --> 00:03:58,520
You can see that this component we see here, they have a special function that it does.

53
00:03:58,530 --> 00:03:59,130
Right.

54
00:03:59,160 --> 00:03:59,850
Great.

55
00:03:59,850 --> 00:04:09,510
So now that you have the pictorial aspect of a component, let's go ahead and then explain with the

56
00:04:09,900 --> 00:04:12,660
definition of a component.

57
00:04:12,690 --> 00:04:13,380
All right.

58
00:04:13,380 --> 00:04:14,580
Let's get going.

59
00:04:14,970 --> 00:04:15,690
Great.

60
00:04:15,840 --> 00:04:24,570
So we add component is a single self-contained unit which may be re-usable across your app.

61
00:04:24,870 --> 00:04:27,230
It is used to create a user interface.

62
00:04:27,240 --> 00:04:31,650
So let's focus on this one over here.

63
00:04:31,680 --> 00:04:40,340
It says that React component is a single self-contained unit, a single self-contained unit.

64
00:04:40,350 --> 00:04:42,420
So it's like a box.

65
00:04:43,100 --> 00:04:45,280
So let's go back to this one.

66
00:04:45,290 --> 00:04:49,340
As we see here, it has a single unit, right?

67
00:04:49,370 --> 00:04:50,120
Have a look.

68
00:04:50,240 --> 00:04:57,380
This one has a single unit, a self-contained unit that perform a special function.

69
00:04:57,560 --> 00:04:59,400
So this unit can be reusable.

70
00:04:59,430 --> 00:05:04,210
It can you can place this unit somewhere here and somewhere here.

71
00:05:04,220 --> 00:05:06,650
And that is what you call reusable.

72
00:05:07,040 --> 00:05:07,730
All right.

73
00:05:07,730 --> 00:05:08,870
So enough talking.

74
00:05:09,560 --> 00:05:10,210
All right.

75
00:05:10,220 --> 00:05:19,670
Now that we have the technical definition of component, let's use this object to explain more.

76
00:05:20,450 --> 00:05:26,540
Let's take it that a box or this box is our component.

77
00:05:27,540 --> 00:05:30,540
And a component has a name.

78
00:05:30,960 --> 00:05:31,260
All right.

79
00:05:31,260 --> 00:05:32,490
We get back into that.

80
00:05:32,730 --> 00:05:43,170
So inside the box or the container, we can save both a HTML, CSS.

81
00:05:44,170 --> 00:05:45,460
JavaScript.

82
00:05:46,590 --> 00:05:52,350
Images, videos, and many more into that box.

83
00:05:53,090 --> 00:05:58,820
So that box, we can take that box and then use it somewhere else.

84
00:05:59,540 --> 00:06:07,550
So now that we have this pictorial aspect of component, let's use this website.

85
00:06:07,550 --> 00:06:10,220
We are going to create a website from scratch.

86
00:06:10,220 --> 00:06:18,860
And then I'm going to explain what is component how component fits together to make the entire Web application.

87
00:06:19,340 --> 00:06:20,210
All right, cool.

88
00:06:20,450 --> 00:06:24,830
So let's take it that this is our Web browser.

89
00:06:25,780 --> 00:06:27,520
And they're on their web browser.

90
00:06:27,550 --> 00:06:32,830
First of all, let's say that is our let me see our text editor that we are going to I mean, design

91
00:06:32,830 --> 00:06:34,240
our website.

92
00:06:34,720 --> 00:06:39,250
So the first one is we have said we want to have a header image.

93
00:06:39,310 --> 00:06:41,660
The header image will be laid down here.

94
00:06:42,690 --> 00:06:43,770
And then let's say that.

95
00:06:43,770 --> 00:06:49,130
Well, I also want to have three images beneath the website.

96
00:06:49,140 --> 00:06:52,170
So one image would be the site.

97
00:06:52,830 --> 00:06:54,780
One would be the this side.

98
00:06:54,780 --> 00:06:58,110
And then one would be the other side as well.

99
00:06:58,620 --> 00:07:05,340
So you could see that this entire application is made up of four components.

100
00:07:05,620 --> 00:07:13,800
Well, so let's go ahead and then use real website to explain more about component.

101
00:07:15,060 --> 00:07:22,800
So let's use the application I just released, which is a voting application to explain more about what

102
00:07:22,800 --> 00:07:23,910
is component.

103
00:07:25,380 --> 00:07:30,950
As soon as you see this website, you can see that we have pieces of components that we have.

104
00:07:30,960 --> 00:07:36,240
I mean, specific logic or designing that are related together.

105
00:07:36,300 --> 00:07:37,680
So let's take this now.

106
00:07:37,920 --> 00:07:39,930
For example, here, this.

107
00:07:39,940 --> 00:07:46,440
Now back over here, we have a button called log in and we have a button called what?

108
00:07:46,440 --> 00:07:48,930
I mean the host award here.

109
00:07:49,530 --> 00:07:51,330
And this one component.

110
00:07:51,330 --> 00:07:58,740
And one component and this one component and this one component and this buttons are all component.

111
00:07:58,830 --> 00:08:03,860
So you can see that something that are related are called component.

112
00:08:03,870 --> 00:08:08,730
So let's scroll down here and let's explain more about component.

113
00:08:08,880 --> 00:08:12,420
Let's take this image, for example, if we see that.

114
00:08:13,300 --> 00:08:19,990
These card over here are components because you can see that they perform a specific function.

115
00:08:19,990 --> 00:08:20,600
Right.

116
00:08:20,620 --> 00:08:23,590
You could have one card over here.

117
00:08:24,760 --> 00:08:26,740
And one card over here, you see that?

118
00:08:26,740 --> 00:08:28,840
They share the same logic.

119
00:08:29,170 --> 00:08:30,680
Why don't you have an image here?

120
00:08:30,700 --> 00:08:31,270
Image here.

121
00:08:31,300 --> 00:08:32,440
Text the text here.

122
00:08:32,470 --> 00:08:36,940
So we have coupled these components into one.

123
00:08:37,590 --> 00:08:39,210
So that's what I'm going to do.

124
00:08:39,240 --> 00:08:46,470
So the component can contain it can be used for presentational or I mean, the or the actual logic.

125
00:08:46,500 --> 00:08:47,280
All right.

126
00:08:47,280 --> 00:08:53,940
And one more time to see that we have a button here and this button can you also describe as a component,

127
00:08:53,940 --> 00:08:55,530
component, component.

128
00:08:55,530 --> 00:08:59,220
And then if you scroll down here to this image is a component.

129
00:08:59,220 --> 00:09:00,780
This is the component.

130
00:09:00,780 --> 00:09:07,050
And this component and this component, if I click on each of the our category here and we are going

131
00:09:07,050 --> 00:09:09,780
to have a sub component also.

132
00:09:09,780 --> 00:09:12,990
So that is all about a main component.

133
00:09:13,110 --> 00:09:13,650
All right.

134
00:09:13,650 --> 00:09:21,450
So now we have the the read definition of component in the next video.

135
00:09:21,480 --> 00:09:28,680
Let's go ahead and talk about types of component and how we can create a component with code.