1
00:00:00,690 --> 00:00:06,300
OK, so now we are going to move further and could hear the components folder and start creating components

2
00:00:06,300 --> 00:00:06,990
inside this.

3
00:00:07,740 --> 00:00:14,490
So the very first thing we need to do is come to this source for little DSG folder and now we will create

4
00:00:14,760 --> 00:00:19,440
a folder like a sub for learning to are this and that will be known as key components.

5
00:00:20,160 --> 00:00:23,220
So this will create a folder that will be name as.

6
00:00:24,710 --> 00:00:32,930
Components and inside this that will be all are components, and we can also give styling like separately

7
00:00:32,930 --> 00:00:34,100
to each of the components.

8
00:00:34,520 --> 00:00:38,900
But as it's not all like very complicated and big projects, so will give.

9
00:00:39,830 --> 00:00:43,340
I like Common File Index, Nazi SS and inside.

10
00:00:43,340 --> 00:00:47,990
This only will be giving all of the files inside the components folder.

11
00:00:47,990 --> 00:00:53,270
The very first component, which will be building is the ordinary bar, whatever you like to call it,

12
00:00:53,270 --> 00:00:57,380
because it is present at the top, so it is called as the header component.

13
00:00:58,010 --> 00:01:02,900
So let me just to go ahead and create a file inside this.

14
00:01:03,380 --> 00:01:04,760
That will be the.

15
00:01:06,230 --> 00:01:07,160
Ed Jess.

16
00:01:08,830 --> 00:01:15,610
No, what we need to do is we'll create a boilerplate code like what is the boilerplate code is the

17
00:01:15,610 --> 00:01:20,950
starting code, which is similar to all of the components of law that I have installed an extension

18
00:01:20,950 --> 00:01:22,660
which I would like to share with you.

19
00:01:22,960 --> 00:01:24,550
So the extension is called.

20
00:01:26,600 --> 00:01:31,510
This one right here is the AA7 React Redux graphic video content, native snippets.

21
00:01:31,700 --> 00:01:35,350
This is the emeritus.

22
00:01:35,390 --> 00:01:35,630
Yeah.

23
00:01:36,050 --> 00:01:43,910
This will show this will give us the boilerplate codes and react and basically jump right through functions

24
00:01:43,910 --> 00:01:45,190
and the import export.

25
00:01:45,200 --> 00:01:47,090
We don't need to write it again and again.

26
00:01:47,090 --> 00:01:50,930
So this will help us and this will make our lives so much easier.

27
00:01:51,590 --> 00:01:55,490
So I would highly recommend you to install this extension.

28
00:01:55,490 --> 00:01:58,550
And once you've done that, I want to install the extension.

29
00:01:59,200 --> 00:02:04,290
You need to come to the file of the component, whichever you are, create for whichever you have just

30
00:02:04,340 --> 00:02:07,910
created and then you can just type out of the.

31
00:02:09,120 --> 00:02:14,730
And for me, for some reason, it doesn't work, so I need to press control, shift B and then this

32
00:02:14,890 --> 00:02:18,980
research and then of the press are FCC.

33
00:02:19,620 --> 00:02:26,070
So this will give us the react functional component within export and inside of this, we can create

34
00:02:26,080 --> 00:02:32,520
our files and whatever the GSX or like, whatever the sex and it's our script or this terminal, what

35
00:02:32,520 --> 00:02:33,210
we need to write.

36
00:02:33,540 --> 00:02:36,870
So JavaScript will be written after this function right here.

37
00:02:36,870 --> 00:02:42,630
And the GSX, which is the mixture of our script as well as its terminal, will be written inside this

38
00:02:42,930 --> 00:02:43,920
written statement.

39
00:02:44,190 --> 00:02:45,150
So that is art.

40
00:02:45,330 --> 00:02:46,950
That is what we will do.

41
00:02:47,400 --> 00:02:54,750
So we have successfully ported the code dubbed boilerplate code, and all we're planning to do is we

42
00:02:54,750 --> 00:03:00,990
need to check if this will do like check it by rendering it into the app drawer just fine.

43
00:03:01,470 --> 00:03:04,350
So let me just give our text here.

44
00:03:04,830 --> 00:03:06,030
See is the.

45
00:03:08,300 --> 00:03:08,990
We'll save it.

46
00:03:11,310 --> 00:03:14,040
And William Portrait here inside the gorgeous.

47
00:03:15,530 --> 00:03:18,890
Import further from.

48
00:03:20,920 --> 00:03:21,640
Components.

49
00:03:22,420 --> 00:03:25,120
Basically, this is the location of the flight.

50
00:03:26,150 --> 00:03:28,820
Save it, and after this lion.

51
00:03:30,200 --> 00:03:32,780
Or maybe we can do this line and.

52
00:03:34,120 --> 00:03:34,870
Instead of.

53
00:03:36,370 --> 00:03:41,980
This will tonight, the component of the to the hurdle component.

54
00:03:42,520 --> 00:03:43,510
We'll see if this.

55
00:03:45,260 --> 00:03:50,060
And inside this hurdle, we already did an administrative component.

56
00:03:51,620 --> 00:03:53,180
Who, like most cleared?

57
00:03:54,350 --> 00:03:55,850
Component will save it.

58
00:03:56,120 --> 00:04:01,130
We'll see if the service running on it's not running, so will somebody come on will clear this and

59
00:04:01,130 --> 00:04:03,770
seven p.m. start.

60
00:04:05,230 --> 00:04:06,790
Now this will spin up the server.

61
00:04:08,350 --> 00:04:09,010
And.

62
00:04:10,960 --> 00:04:15,400
Yes, sir, what is it up and running at 2000, let me just go to the browser and see.

63
00:04:16,360 --> 00:04:20,890
And you can see how the component is being successfully rendered inside the app component.

64
00:04:21,550 --> 00:04:26,830
So that is what we wanted to do, like we wanted to just check that component is being rendered or not.

65
00:04:27,340 --> 00:04:31,930
And now it's being an Indian, so now we can just go ahead and dial it and give some functionality to

66
00:04:31,930 --> 00:04:32,080
it.

67
00:04:33,790 --> 00:04:35,530
So let us do that right now.

68
00:04:37,010 --> 00:04:37,490
So.

69
00:04:39,010 --> 00:04:43,810
The very first thing we will do is inside this will remove this.

70
00:04:46,120 --> 00:04:47,670
Next, right here.

71
00:04:48,790 --> 00:04:53,960
So it will be containing an H1, which will be seeing reviews corner each one.

72
00:04:54,550 --> 00:04:55,510
And we're seeing.

73
00:04:58,030 --> 00:04:58,780
Two views.

74
00:05:03,580 --> 00:05:07,690
And just like this, let me show you what I'm talking about.

75
00:05:08,050 --> 00:05:13,390
Just like this, this will be the text and here will be having an icon.

76
00:05:14,080 --> 00:05:15,570
And that's it.

77
00:05:16,070 --> 00:05:21,130
So we have returned to this corner here and now will be needing the icon.

78
00:05:21,400 --> 00:05:27,490
So for the icon, we'll be using the material to a library, which is the the library, which is the

79
00:05:27,490 --> 00:05:30,610
most famous the library.

80
00:05:30,610 --> 00:05:35,950
So let me show you how you can like, use material way in your project.

81
00:05:36,310 --> 00:05:45,100
So for that, you need to go to this website that is the material way or the emulate dot com and.

82
00:05:46,780 --> 00:05:49,270
Well, it takes me to load.

83
00:05:50,370 --> 00:05:54,000
And you have to just click on this button, which is to get started.

84
00:05:55,260 --> 00:05:55,480
OK.

85
00:05:56,400 --> 00:06:01,050
After coming to the get started, you need to click on this installation.

86
00:06:02,420 --> 00:06:05,960
And here that is, this is a command.

87
00:06:06,340 --> 00:06:11,690
And so basically what you need to do is to just copy this command and you need to be stored inside your

88
00:06:11,690 --> 00:06:16,730
terminal and then head down to the member inside your project folder, only not anywhere else in the

89
00:06:16,730 --> 00:06:17,150
terminal.

90
00:06:17,570 --> 00:06:18,980
Otherwise, it will not be accessible.

91
00:06:19,520 --> 00:06:23,480
OK, so here it is, installing three packages.

92
00:06:23,990 --> 00:06:30,670
So if you just type this modern installing material, this will install material on your project.

93
00:06:30,680 --> 00:06:37,880
But when you are an important Americans and also that time it will show you some errors so that time

94
00:06:37,880 --> 00:06:39,020
it can show you some errors.

95
00:06:39,020 --> 00:06:44,590
So that is why I would recommend you to just copy the entire code here and then copy.

96
00:06:44,600 --> 00:06:45,830
So let me copy this.

97
00:06:47,460 --> 00:06:48,690
And then I come back here.

98
00:06:50,350 --> 00:06:53,680
So it can be done to me return on that.

99
00:06:55,250 --> 00:07:02,060
You know, so then I go to I remember to go to the Navy Gate, to your project folder and there you

100
00:07:02,060 --> 00:07:06,170
have to paste this on, not anywhere else or inside this review.

101
00:07:06,440 --> 00:07:11,120
And here do you have to paste to come on and install on what was written here?

102
00:07:11,330 --> 00:07:12,580
Then you two hit enter.

103
00:07:12,590 --> 00:07:13,560
So I've already installed.

104
00:07:13,590 --> 00:07:14,720
I will not do that again.

105
00:07:15,050 --> 00:07:22,520
But just hit, enter and take around a few seconds, 40 to 50 seconds, or maybe less than that.

106
00:07:22,940 --> 00:07:26,270
And once you are done, material drive will be installed on your computer.

107
00:07:26,660 --> 00:07:30,470
So the next thing that you do is you need to install icons from Waterloo.

108
00:07:31,070 --> 00:07:35,330
And remember, does this have whatever the command which we typed right now?

109
00:07:35,330 --> 00:07:41,510
So that has not installed icons for the icons you need to type another kind of command?

110
00:07:41,630 --> 00:07:43,330
So you get.

111
00:07:44,230 --> 00:07:51,730
And let me go to the browser again and hear what you need to do is you need to go to the search bar

112
00:07:51,730 --> 00:07:54,960
and you need to click on this material icons.

113
00:07:57,470 --> 00:07:59,600
Who lived on it?

114
00:08:02,430 --> 00:08:05,670
Or decide to slow down and slow or.

115
00:08:05,870 --> 00:08:10,720
Okay, so this is the material icon's page.

116
00:08:10,920 --> 00:08:17,940
Now here you will find a bunch of icons where you can just search for them and then you can use them

117
00:08:17,940 --> 00:08:23,660
in your own website to remember to install metal icons first.

118
00:08:23,940 --> 00:08:25,300
Let me just click on this.

119
00:08:25,710 --> 00:08:30,690
Am I going the material to give you an overview about what I'm talking?

120
00:08:32,430 --> 00:08:38,460
OK, so then you come to this bit and you can see this is the command for installing the material icons.

121
00:08:38,760 --> 00:08:46,350
And remember, this is be impacted and you can see what is the size and what is the likely weekly downloads

122
00:08:46,350 --> 00:08:46,920
and everything.

123
00:08:47,340 --> 00:08:47,820
So.

124
00:08:49,360 --> 00:08:56,740
This is the basically the npm page of this package, wouldn't you just copy this command and then you

125
00:08:56,740 --> 00:08:58,390
need to come to the.

126
00:09:00,060 --> 00:09:02,430
Or Web editor of code editors, Audie.

127
00:09:02,850 --> 00:09:09,060
And here you need to go to that particular project folder and then you need to just paste this commanders

128
00:09:09,060 --> 00:09:13,230
npm install and icons material and then to hit enter.

129
00:09:13,230 --> 00:09:16,170
So 15 and bits, or it will take few seconds.

130
00:09:16,530 --> 00:09:24,270
And once it is done, what icons will be installed on your project and then you can you are ready to

131
00:09:24,270 --> 00:09:25,890
go and you are going to use them?

132
00:09:26,220 --> 00:09:28,440
OK, so I have already done this and do that.

133
00:09:29,700 --> 00:09:33,150
But what you need to do if you need to install or use material icons.

134
00:09:33,150 --> 00:09:34,110
So let me ask you this.

135
00:09:34,560 --> 00:09:36,180
And now after.

136
00:09:37,480 --> 00:09:42,790
After installing and after everything have done, how to implement that in your website, so for that,

137
00:09:42,790 --> 00:09:47,990
you need to, first of all, go to the website and button.

138
00:09:50,710 --> 00:09:56,350
And instead of here, what you need to do is need to search for the icons, whichever you want to use.

139
00:09:57,270 --> 00:10:02,150
So for example, you want to the icon, which is the out here.

140
00:10:02,170 --> 00:10:04,690
So this is called the view, I guess.

141
00:10:05,360 --> 00:10:06,640
So I will search for review.

142
00:10:11,590 --> 00:10:12,660
But we.

143
00:10:14,070 --> 00:10:14,970
So this is this one.

144
00:10:15,300 --> 00:10:19,890
Reviews, so you need to just click on it and just copy this entire thing.

145
00:10:20,220 --> 00:10:22,770
So when you click on it, it is automatically copied.

146
00:10:23,040 --> 00:10:28,500
This is the import basically to once you have copied, then you need to come to the.

147
00:10:29,970 --> 00:10:31,470
Your co-director and energy to.

148
00:10:32,610 --> 00:10:33,810
Would you just be straight ahead?

149
00:10:33,960 --> 00:10:41,520
And once you have started there now, you are ready to use that and it's very easy to use it now in

150
00:10:41,520 --> 00:10:42,120
your project.

151
00:10:42,480 --> 00:10:47,750
So after the reviews, what we'll do is we'll just import this, so we'll start.

152
00:10:51,210 --> 00:10:52,500
Her reviews.

153
00:10:53,820 --> 00:10:55,080
Icon this one.

154
00:10:56,390 --> 00:10:59,830
And we are to close it on self-closing.

155
00:11:00,680 --> 00:11:09,290
It's mandatory for every component and like that we act now is compiling and once it is done, we can

156
00:11:09,290 --> 00:11:12,590
just go ahead and check the changes in certainty, but also.

157
00:11:15,390 --> 00:11:18,390
So let us go and check in the browser how that looks.

158
00:11:20,190 --> 00:11:20,520
Here.

159
00:11:20,640 --> 00:11:27,330
Yeah, you can see reviews corner and you can see our icon is successfully rendered on this screen.

160
00:11:27,930 --> 00:11:29,880
That is what it was.

161
00:11:30,060 --> 00:11:38,220
And next will be implementing the Dark Mode feature, and the Dark Mode feature is that it will change.

162
00:11:38,220 --> 00:11:43,770
Whenever we click on that button, it will toggle the Dark Mode button and it will be changed to Dark

163
00:11:43,770 --> 00:11:47,820
Mode, so we will be creating the Dark Dark mode in the next video.