1
00:00:00,480 --> 00:00:06,930
So here we are in the middle school and now we'll start building and actually coating things up to the

2
00:00:06,930 --> 00:00:15,660
very first thing which will be building is the buttons like the buttons of Kmart and brick and long

3
00:00:15,660 --> 00:00:18,480
brake and short break and start and stop.

4
00:00:19,020 --> 00:00:26,490
All of the buttons will be down, and one component basically will be reusing those that particular

5
00:00:26,490 --> 00:00:32,190
component multiple times, like we will create just one button and make it dynamic.

6
00:00:33,680 --> 00:00:39,740
So that other companies can use that particular button and not only just one time, that particular

7
00:00:39,740 --> 00:00:46,130
button will be used a number of times, like whatever the button to which you'll see on screen is actually

8
00:00:46,130 --> 00:00:47,780
not the one.

9
00:00:48,620 --> 00:00:54,650
It's not actually like different different buttons will not write code like multiple times to create

10
00:00:54,650 --> 00:00:55,490
multiple buttons.

11
00:00:55,500 --> 00:00:56,300
Really, just try it.

12
00:00:56,310 --> 00:01:03,740
One time will create one button, and then we will be using that particular button multiple times.

13
00:01:04,050 --> 00:01:05,510
So that is what we are going to do.

14
00:01:05,510 --> 00:01:07,310
So let us just go ahead and do it.

15
00:01:08,580 --> 00:01:12,900
So the very first thing which we need to do is we need to create a folder inside the Assad to on the

16
00:01:12,900 --> 00:01:13,290
source.

17
00:01:14,040 --> 00:01:16,620
Now what is the name of the folder is the components.

18
00:01:17,570 --> 00:01:22,980
So that is the component folder, not components of this component component.

19
00:01:23,040 --> 00:01:23,280
Yeah.

20
00:01:24,490 --> 00:01:30,160
Now inside this component sold out will create all of the components like batons, the time, I don't

21
00:01:30,160 --> 00:01:33,130
know, but the very first thing which are going to create is the button.

22
00:01:34,170 --> 00:01:38,660
Well, here after opening this when I wrote this and it comes down.

23
00:01:40,130 --> 00:01:44,750
You know, what we do is really create that particular component inside this components.

24
00:01:45,950 --> 00:01:51,290
Let us open it up and we'll create a file on that file will be but it's not.

25
00:01:54,790 --> 00:02:01,180
Bartender Jess or bartender GSX, you can write anything you want, but GSX like completely signifies

26
00:02:01,180 --> 00:02:04,270
that this is the out file audience.

27
00:02:05,440 --> 00:02:07,440
Obviously, it's a Jarvis good file.

28
00:02:07,930 --> 00:02:12,660
Anything can be written inside, but reactors are smart enough to know that if you are creating a gas

29
00:02:12,700 --> 00:02:17,130
fire inside the reactor project, that simply means that it is a GSX file.

30
00:02:17,140 --> 00:02:20,370
There's no like argument in that.

31
00:02:20,380 --> 00:02:22,170
OK, so let me turn to.

32
00:02:23,420 --> 00:02:30,200
And now we have got the file, now we want to we won't be like General Court, which is similar to all

33
00:02:30,200 --> 00:02:31,070
of the components.

34
00:02:31,600 --> 00:02:38,470
So to get that code, we will use an extension, we will use, we'll make help, we'll make use of an

35
00:02:39,080 --> 00:02:39,790
extension.

36
00:02:39,800 --> 00:02:41,840
Or so let me just tell you which one is that.

37
00:02:41,840 --> 00:02:48,620
The very first thing is that they need to go to extensions and then you can just install this one,

38
00:02:48,620 --> 00:02:48,920
right?

39
00:02:49,130 --> 00:02:51,370
This is a very handy, helpful application.

40
00:02:51,380 --> 00:02:53,570
This will make your life so much easier.

41
00:02:53,570 --> 00:02:55,520
So this extension is called iOS seven.

42
00:02:55,880 --> 00:02:57,380
The lyrics will react.

43
00:02:57,380 --> 00:02:59,240
Native snippets what it will do.

44
00:02:59,240 --> 00:03:06,110
It will just give you the basic code, which is similar repetitive code, which is used in multiple

45
00:03:06,110 --> 00:03:10,310
components and multiple times, so you do need to type it out every single time.

46
00:03:10,730 --> 00:03:15,950
You can just make use of this extension and type some keywords, and it will give you that particular

47
00:03:16,190 --> 00:03:18,320
line of code or piece of code of the snippet.

48
00:03:18,470 --> 00:03:26,270
OK, now so once you install this extension, you can go to the component which you would like to like

49
00:03:26,510 --> 00:03:28,100
make use of this extension.

50
00:03:28,410 --> 00:03:29,630
So after coming here?

51
00:03:30,970 --> 00:03:38,230
What we'll do is you will just type Odyssey out, this odyssey means to get functional component with

52
00:03:38,230 --> 00:03:38,740
export.

53
00:03:38,950 --> 00:03:40,770
It means export now.

54
00:03:41,440 --> 00:03:45,210
It will work for you, probably, but it doesn't work for me some.

55
00:03:45,730 --> 00:03:46,750
It doesn't work for me.

56
00:03:47,230 --> 00:03:47,860
For some reason.

57
00:03:47,860 --> 00:03:48,490
I don't know why.

58
00:03:49,270 --> 00:03:52,670
What I do is I press controls ship and I open this this.

59
00:03:53,800 --> 00:03:55,690
This is that is the part of that extension.

60
00:03:55,690 --> 00:03:56,950
Only 79 percent.

61
00:03:57,340 --> 00:04:00,670
I click on that and then I type here the exact same thing.

62
00:04:02,020 --> 00:04:09,940
AFC, you can see it on Courier, sorry out functional component with E7 module system within export.

63
00:04:10,270 --> 00:04:14,800
OK, now when you click on it, you see the snippet.

64
00:04:15,610 --> 00:04:21,670
Now, whatever was there like odd AFC yet functional component, you can see that the function.

65
00:04:22,010 --> 00:04:28,180
So this is a functional component with an export so down you can see it doesn't export.

66
00:04:28,420 --> 00:04:37,020
So all of the odd AFC yet functional component with exports, so don't need to memorize or just understand

67
00:04:37,780 --> 00:04:41,290
like what it stands for, then you don't need to memorize it anymore.

68
00:04:42,260 --> 00:04:50,620
Now, after getting this, all what you will do is you will just don't try to import it inside the app

69
00:04:51,040 --> 00:04:53,200
and see if that's working correctly or not.

70
00:04:53,760 --> 00:04:55,150
So let me just do that first.

71
00:04:55,480 --> 00:05:00,790
Of course, we will not do it like that in the final leg when we reach the final destination.

72
00:05:02,210 --> 00:05:06,110
But let me imported the very first things that we imported to import.

73
00:05:07,960 --> 00:05:10,990
Barton, not this long.

74
00:05:13,570 --> 00:05:14,220
Strong.

75
00:05:18,520 --> 00:05:19,390
Components.

76
00:05:21,390 --> 00:05:21,600
But.

77
00:05:23,020 --> 00:05:23,980
So basically.

78
00:05:30,040 --> 00:05:35,530
Just like that, when I say with this look something like this, but we have not given anything to it

79
00:05:35,530 --> 00:05:36,190
right now.

80
00:05:36,640 --> 00:05:38,020
We will style this button.

81
00:05:39,550 --> 00:05:43,000
But before styling, we will give the basic structure to to the bottom.

82
00:05:44,420 --> 00:05:51,710
Inside this return, actually, we don't know that they've really directly give the button, so that

83
00:05:51,710 --> 00:05:52,610
will be button.

84
00:05:55,760 --> 00:05:56,930
Basically to my bottom.

85
00:05:58,690 --> 00:06:01,840
And inside of this, we'll type anything like the

86
00:06:04,360 --> 00:06:04,930
heartbreak.

87
00:06:08,040 --> 00:06:08,430
OK.

88
00:06:09,570 --> 00:06:14,610
Obviously, this will not be the final thing, because this is right now this tragic protecting and

89
00:06:14,610 --> 00:06:19,890
we will make things dynamic and we will make use of this component multiple multiple times.

90
00:06:19,890 --> 00:06:24,040
So we will not need a static value because that will not look good.

91
00:06:24,060 --> 00:06:29,520
So let me save it, and I've already imported it inside the gorgeous, I guess.

92
00:06:30,150 --> 00:06:30,530
Yeah.

93
00:06:33,000 --> 00:06:35,120
To Swarbrick is there.

94
00:06:35,720 --> 00:06:41,690
Now let me just see in the browser, let me see if the browser is so resonant here that it is up and

95
00:06:41,690 --> 00:06:47,910
running and I can go to my browser so you can see there's a button with somebody.

96
00:06:49,990 --> 00:06:55,060
Now you can you could have given any name to it, there's no compulsion.

97
00:06:55,210 --> 00:06:57,400
We are just testing it out like that.

98
00:06:57,550 --> 00:06:59,770
There's a bit of news ending inside the abductees.

99
00:06:59,800 --> 00:07:02,740
I'm not, so that is being rendered.

100
00:07:02,920 --> 00:07:04,150
So they're just completely fine.

101
00:07:04,150 --> 00:07:05,140
No problem with that.

102
00:07:05,620 --> 00:07:06,940
And now.

103
00:07:08,830 --> 00:07:15,070
We will give the men like we are done with the will put some meat on the bones now.

104
00:07:15,550 --> 00:07:22,150
So what we do is, first of all, we'll give up last minute and then we'll start styling to the application.

105
00:07:22,540 --> 00:07:24,520
Now before that, let me give some.

106
00:07:26,670 --> 00:07:31,410
Like dynamic things to it, so will create a constant.

107
00:07:34,530 --> 00:07:35,040
And.

108
00:07:36,870 --> 00:07:42,810
The sound of this we had like what other things which are dynamic here, but that will be the title

109
00:07:43,590 --> 00:07:47,400
of this title is the name of the button will have the active clause.

110
00:07:51,190 --> 00:07:57,730
Back to class and we'll have a callback function which will be executed whenever we click that button.

111
00:07:58,730 --> 00:07:59,590
So there's a callback.

112
00:08:03,520 --> 00:08:04,220
Call back.

113
00:08:04,330 --> 00:08:04,600
Yeah.

114
00:08:05,680 --> 00:08:10,570
Now, remember this, all of the functions we are defining here, and we are just passing the props

115
00:08:10,570 --> 00:08:10,800
here.

116
00:08:11,350 --> 00:08:15,640
These functions will be created either in our bodies or indeed we will go next.

117
00:08:15,970 --> 00:08:18,700
We are not going to create these functions here anyhow.

118
00:08:19,840 --> 00:08:23,830
This is just passing the props now inside the button.

119
00:08:25,720 --> 00:08:28,260
We will give this the title.

120
00:08:31,520 --> 00:08:31,700
I.

121
00:08:36,830 --> 00:08:39,620
Title and two this.

122
00:08:41,410 --> 00:08:43,600
Like Burton will give a class name as well.

123
00:08:44,590 --> 00:08:46,450
So this button.

124
00:08:47,710 --> 00:08:50,350
That will be a class name.

125
00:08:52,050 --> 00:08:53,850
And that will be a big last name.

126
00:08:56,100 --> 00:09:02,750
Active glass, physically active glass and next will be giving in on click function.

127
00:09:03,140 --> 00:09:08,500
A function to it now on Click is an event listener, basically.

128
00:09:09,430 --> 00:09:15,280
So whenever you click on this particular button, so there will be a triggering function with the unclear

129
00:09:15,280 --> 00:09:18,340
function and it will trigger up and whatever it is that inside of that.

130
00:09:18,670 --> 00:09:20,990
Basically, it also expects a function inside it.

131
00:09:21,310 --> 00:09:28,120
Now on inside of that, whatever the function is there, so that will be executed as soon as the user

132
00:09:28,120 --> 00:09:28,990
clicks this button.

133
00:09:30,600 --> 00:09:32,040
That is what it does.

134
00:09:32,770 --> 00:09:33,320
So now.

135
00:09:35,060 --> 00:09:37,010
Let me add an look.

136
00:09:39,320 --> 00:09:40,520
Oh, OK.

137
00:09:42,450 --> 00:09:48,050
One-Click Sato, this will add the function, which we just passed as a prop here.

138
00:09:48,130 --> 00:09:49,650
They call that function.

139
00:09:51,600 --> 00:09:54,270
But will they call back?

140
00:09:55,760 --> 00:09:57,020
And we say it.

141
00:10:00,260 --> 00:10:00,980
And.

142
00:10:04,010 --> 00:10:06,140
Exactly, we'll get it over because.

143
00:10:08,370 --> 00:10:09,630
Right now, we are just.

144
00:10:10,990 --> 00:10:17,440
They don't we've collected this cornerstone, but we've not parsed inside this as a prop.

145
00:10:17,890 --> 00:10:21,910
Well, what can we do is either we can just write this button here.

146
00:10:22,570 --> 00:10:23,860
I hope that works.

147
00:10:27,260 --> 00:10:27,860
And.

148
00:10:30,860 --> 00:10:31,300
It doesn't.

149
00:10:31,790 --> 00:10:32,510
OK, I'm sorry.

150
00:10:33,450 --> 00:10:33,800
No.

151
00:10:35,020 --> 00:10:36,220
We'll copy all of this.

152
00:10:38,880 --> 00:10:45,470
Basically, not copy will cut and paste it in here and will destroy this constant button.

153
00:10:45,510 --> 00:10:47,880
We don't need it anymore.

154
00:10:49,880 --> 00:10:50,600
Now we tabled.

155
00:10:51,990 --> 00:10:52,990
Now I should welcome.

156
00:10:55,650 --> 00:11:00,690
What we did is we just created our variable, but right now we can just pass it as a prop inside as

157
00:11:00,690 --> 00:11:01,140
a whole.

158
00:11:01,500 --> 00:11:05,190
And it's not so much that we create another variable and then positive separately.

159
00:11:05,730 --> 00:11:08,020
But basically, props are bars like this only.

160
00:11:08,040 --> 00:11:11,620
I think that was the wrong way, which I in.

161
00:11:11,910 --> 00:11:13,200
So there's no problem there.

162
00:11:14,330 --> 00:11:21,050
Now, let me see on the browser if that is something, obviously there isn't much than just this simple

163
00:11:21,050 --> 00:11:22,640
button and nothing else.

164
00:11:23,150 --> 00:11:24,980
So no problem with that.

165
00:11:25,010 --> 00:11:30,680
Next, what will you be doing is will be providing the styling to the CIUSSS, which we just don't.

166
00:11:32,150 --> 00:11:38,660
And the glass names, one of the class names we get like that to class and on, so we'll give you we'll

167
00:11:38,660 --> 00:11:41,990
be giving the starting to it inside the index door to use this file.

168
00:11:42,780 --> 00:11:45,290
So that is what we are going to do in the next video.

169
00:11:45,590 --> 00:11:53,270
And those see that gets us finally putting aside the probably in the broadest and because they are the

170
00:11:53,270 --> 00:11:59,360
root component to from there, the thesis will be rendered and the styling will be provided to this

171
00:11:59,360 --> 00:12:00,650
particular button component.

172
00:12:01,010 --> 00:12:02,090
So we'll see in the next video.