1
00:00:00,970 --> 00:00:02,230
And everyone and welcome.

2
00:00:02,590 --> 00:00:08,140
So now that we've installed our project and we have set up our reactor environment, let's start coding

3
00:00:08,140 --> 00:00:10,000
and let's build the website.

4
00:00:10,870 --> 00:00:15,050
So I created a components folder here in the produce video.

5
00:00:15,460 --> 00:00:21,430
So this component folder, which will be holding all of the components which we are going to use and

6
00:00:21,430 --> 00:00:24,760
which we are going to reuse actually in the website.

7
00:00:25,280 --> 00:00:29,200
So the first thing we are going to do is now we will create an avatar.

8
00:00:29,710 --> 00:00:32,230
So let me just show you what is on our board first.

9
00:00:34,280 --> 00:00:39,140
So when I come to this website, it's a material website, I'm just taking it for a reference.

10
00:00:39,680 --> 00:00:43,160
So now what is the top thing here at the very top?

11
00:00:43,480 --> 00:00:44,330
Can see this.

12
00:00:44,330 --> 00:00:47,090
This thing here is our body.

13
00:00:47,090 --> 00:00:48,830
Even if I scroll, that thing is not going.

14
00:00:49,220 --> 00:00:51,860
That is the one you might have seen in other websites.

15
00:00:51,860 --> 00:00:53,570
Also that there's nothing new in that.

16
00:00:53,960 --> 00:00:55,670
So we will be the beginning.

17
00:00:56,000 --> 00:00:58,120
We'll be beginning by creating this smartboard.

18
00:00:58,580 --> 00:01:00,950
So the first thing we are going to create is this number.

19
00:01:02,000 --> 00:01:04,460
OK, so let's get into it and let's start.

20
00:01:06,290 --> 00:01:07,130
Creating a snowball.

21
00:01:07,700 --> 00:01:11,930
So the first thing we need to do is create a never component in the components.

22
00:01:12,680 --> 00:01:17,150
So I agree to file which will be nav bought.

23
00:01:17,450 --> 00:01:17,930
Yes.

24
00:01:18,260 --> 00:01:25,190
OK, so one cool trick now I'm going to show you is that we don't need to write the boilerplate code

25
00:01:25,190 --> 00:01:25,820
by yourself.

26
00:01:26,480 --> 00:01:31,020
Remember, we install extension Calleja seven, I assure you, and I told you to install.

27
00:01:31,370 --> 00:01:36,560
So with that in extension, you can just directly input snippet of the boilerplate code.

28
00:01:36,780 --> 00:01:40,310
So for that, you need to just type on EFSI.

29
00:01:40,310 --> 00:01:45,680
If you have installed that extension before me, this autopsy does not work like in one shot.

30
00:01:45,920 --> 00:01:50,210
So I need to just birth control should be and then.

31
00:01:51,660 --> 00:01:56,770
I have to click and click on this snippet search and then I have to I see.

32
00:01:57,120 --> 00:02:01,940
And then, boom, you can see, you can see the boilerplate code has been given to us.

33
00:02:01,950 --> 00:02:07,710
This is the snippet of the starting like starting component, and this is same for all.

34
00:02:08,020 --> 00:02:10,350
This is the general syntax or general structure.

35
00:02:10,350 --> 00:02:11,430
You can see a full component.

36
00:02:11,820 --> 00:02:14,820
So it has an import, which is import from the.

37
00:02:15,390 --> 00:02:18,300
This is very important in every component you don't need to forget.

38
00:02:18,420 --> 00:02:20,490
Don't forget this and you need to write this line.

39
00:02:21,620 --> 00:02:26,870
Next, we have a function, which is the name and the functions name is the name of the component,

40
00:02:27,110 --> 00:02:28,520
and it has a written statement.

41
00:02:28,760 --> 00:02:34,310
So in the written statement, there is something we want to return of.

42
00:02:34,320 --> 00:02:38,180
We want to render on the browser, then we export this component.

43
00:02:38,480 --> 00:02:46,610
So one more important thing I would like to share is that in the written statement, we write GSX Now

44
00:02:46,610 --> 00:02:47,150
what?

45
00:02:47,150 --> 00:02:49,370
What is GSX exactly?

46
00:02:49,790 --> 00:02:54,550
GSX is JavaScript mixture of JavaScript and Eastment.

47
00:02:54,560 --> 00:02:58,460
That means inside this render inside this render.

48
00:02:58,460 --> 00:03:02,980
Inside this written statement, you can write the script as well as HTML.

49
00:03:02,990 --> 00:03:07,430
So just stand for that only actually the whole script and its HTML.

50
00:03:09,380 --> 00:03:13,920
Now you can write together, so that is GSX, so you will write here.

51
00:03:14,390 --> 00:03:16,070
You can write here and each one.

52
00:03:17,790 --> 00:03:20,670
Which is maybe that maybe that is.

53
00:03:21,300 --> 00:03:23,640
Hello, world.

54
00:03:24,210 --> 00:03:29,940
And you can also write a down script here, or it can just create this and you can go right.

55
00:03:30,180 --> 00:03:34,140
You can write a fair total function or something like something like that.

56
00:03:34,470 --> 00:03:40,740
So there's nothing there's not a problem in that JavaScript and it's HTML can be written together.

57
00:03:40,890 --> 00:03:42,660
So I will show you how this is done.

58
00:03:42,660 --> 00:03:46,370
And this is just I'm just telling for your friends and we will use it.

59
00:03:46,380 --> 00:03:51,600
And at that time, you will get more clear view of what I'm trying to say.

60
00:03:51,870 --> 00:03:57,330
And if you are already in a beginner or intermediate level offer yet, so then you might be knowing

61
00:03:57,330 --> 00:03:58,200
what I'm trying to say.

62
00:03:59,190 --> 00:04:06,180
So let's just start building on the number, so we created this state, which was given to me and I

63
00:04:06,180 --> 00:04:08,280
will create another day of my own.

64
00:04:08,640 --> 00:04:12,270
So that will be never bar with the class of never.

65
00:04:12,280 --> 00:04:19,320
But OK, now I will create two sections for the number one for the right hand side and what one for

66
00:04:19,320 --> 00:04:20,040
the left hand side.

67
00:04:20,250 --> 00:04:25,230
So first, let me create for the left hand side, so that will be left.

68
00:04:27,680 --> 00:04:28,430
Left side.

69
00:04:29,970 --> 00:04:36,090
You can give any name for the class name and one more thank you for coming from an extremely serious

70
00:04:36,090 --> 00:04:38,460
background and you are new to react to.

71
00:04:38,460 --> 00:04:46,620
The thing you need to understand here is that in DNA, in a reactor, we don't give glass right glass

72
00:04:46,620 --> 00:04:46,980
NIMH.

73
00:04:47,340 --> 00:04:52,340
So whatever you are using in HTML, you are using glass right in the Australian team.

74
00:04:52,350 --> 00:04:54,870
So there are classes for every day or every container.

75
00:04:55,710 --> 00:04:57,930
But here we use glass name.

76
00:04:58,290 --> 00:05:03,960
So because it didn't master class means a different thing and then it it confuses that class.

77
00:05:03,960 --> 00:05:05,670
So that's why we use glass name.

78
00:05:05,880 --> 00:05:12,660
So how we have used glass name and that's what you are going to use or don't use class and just use

79
00:05:12,660 --> 00:05:13,320
class name.

80
00:05:13,710 --> 00:05:15,210
That's very, very important.

81
00:05:15,480 --> 00:05:18,420
So on the left side, left side, let me just try it.

82
00:05:18,510 --> 00:05:23,370
This is the left side and one more day we will create that is for the right side.

83
00:05:24,360 --> 00:05:27,510
So that will be the right side.

84
00:05:30,470 --> 00:05:37,490
And now I will write some text, which I want to display on the right side, maybe right side and just

85
00:05:37,490 --> 00:05:39,760
who say So this is it.

86
00:05:39,770 --> 00:05:46,310
We have just created our network component, although I have not finished it to give just begun.

87
00:05:46,610 --> 00:05:52,070
So let us just render it and just see how this looks so it will go to after this.

88
00:05:52,250 --> 00:06:01,520
Render this and or will import and have what that is, import not far from, and we'll provide the location

89
00:06:01,520 --> 00:06:01,760
here.

90
00:06:02,150 --> 00:06:05,720
So it's in the OK I wrote form.

91
00:06:05,870 --> 00:06:07,170
Why do I do this mistake?

92
00:06:07,200 --> 00:06:08,180
OK from.

93
00:06:09,340 --> 00:06:12,790
And we'll go to the I guess it's this.

94
00:06:13,910 --> 00:06:15,080
We'll go to the components.

95
00:06:17,890 --> 00:06:22,270
Then again, you don't need to right and have wide audience, and everybody's fine, perfectly fine.

96
00:06:22,720 --> 00:06:26,780
OK, so now I'm just going to import it over here.

97
00:06:26,800 --> 00:06:29,740
So important component is really, really easy.

98
00:06:29,740 --> 00:06:35,110
You need to just write nav bar and self-closing.

99
00:06:35,620 --> 00:06:37,780
So self-closing is really important, right?

100
00:06:38,020 --> 00:06:43,620
And let me just run the server now so I can just go to the website.

101
00:06:44,230 --> 00:06:45,730
I mean, the product folder.

102
00:06:46,180 --> 00:06:50,170
And let me just try a 10 p.m. start and this would run the server.

103
00:06:50,570 --> 00:06:51,640
So meanwhile, it's running.

104
00:06:51,640 --> 00:06:53,350
Let me just delete this text here.

105
00:06:54,510 --> 00:06:55,680
We don't need it anymore.

106
00:06:56,220 --> 00:06:56,820
And.

107
00:06:59,010 --> 00:07:00,660
Their school, let's save it.

108
00:07:02,020 --> 00:07:06,820
The score to the bar again, and this is what we have done so far.

109
00:07:07,030 --> 00:07:14,410
And one more thing, let me just also import react prouder dorm so that we will be routing towards different

110
00:07:14,410 --> 00:07:19,210
pages so all we can do it after we are finished with the nav bar.

111
00:07:19,660 --> 00:07:21,640
So that will be done and.

112
00:07:22,920 --> 00:07:24,400
And we'll go to the never again.

113
00:07:24,870 --> 00:07:30,270
Now let me just import the logo here for the next bar.

114
00:07:31,570 --> 00:07:37,690
Actually, we can import the logo after checking if this component is being rendered or not.

115
00:07:38,090 --> 00:07:45,400
So let us just as always, is up and running, and let's just go to the browser and let's just check

116
00:07:46,030 --> 00:07:46,930
that refresh.

117
00:07:47,560 --> 00:07:47,950
OK.

118
00:07:48,280 --> 00:07:51,700
So whatever we wrote in the no component has been rendered.

119
00:07:51,910 --> 00:07:57,910
Don't worry about how it looks and just remember that whatever we want it to render is being rendered.

120
00:07:57,910 --> 00:08:01,960
So that's what that's all we need at the beginning that the components to render.

121
00:08:02,140 --> 00:08:08,710
So now we will just go to we escort and now we will look in the left hand side.

122
00:08:08,710 --> 00:08:12,490
We will will try to render our image OK.

123
00:08:12,760 --> 00:08:14,290
Image means the logo image.

124
00:08:14,290 --> 00:08:17,830
OK, so for that, first of all, you need to import the image.

125
00:08:18,070 --> 00:08:22,360
So for images, one more thing I will tell you is that I've created this folder right here, which is

126
00:08:22,360 --> 00:08:23,230
known as assets.

127
00:08:23,530 --> 00:08:29,080
So in that I've import, I've put all images which we are going to use in the project.

128
00:08:29,290 --> 00:08:32,590
So you can also create a folder for the images.

129
00:08:32,590 --> 00:08:33,700
You can call it anything.

130
00:08:33,700 --> 00:08:35,500
It's not a compulsion that you name it.

131
00:08:35,680 --> 00:08:36,810
Certainly, you can create it.

132
00:08:37,420 --> 00:08:40,900
You can call it images or logos or anything you want.

133
00:08:41,740 --> 00:08:45,220
So I called assets and I've put the images.

134
00:08:45,220 --> 00:08:47,080
You can use any image you like.

135
00:08:47,320 --> 00:08:48,630
There's no compulsion at all.

136
00:08:48,640 --> 00:08:49,870
I've used these images.

137
00:08:49,870 --> 00:08:51,130
You can use the different one.

138
00:08:51,340 --> 00:08:52,420
There's no problem with that.

139
00:08:52,630 --> 00:08:53,010
OK.

140
00:08:53,050 --> 00:08:54,830
So let us import our image.

141
00:08:54,910 --> 00:08:56,050
So logo image.

142
00:08:56,050 --> 00:09:04,780
So we'll call it import logo from and then we'll go to S6.

143
00:09:04,780 --> 00:09:06,680
And then there will be an image.

144
00:09:06,680 --> 00:09:12,370
Let me just check what's the name of the image that is logo dot BMG.

145
00:09:12,550 --> 00:09:12,880
Yeah.

146
00:09:14,100 --> 00:09:18,660
So you have to put the exact name of the file along with the extension.

147
00:09:18,690 --> 00:09:25,110
I thought being you dog GPD, you don't give any anything, you have to put the entire name.

148
00:09:25,380 --> 00:09:29,810
This is not like importing the component where we don't put dogs here.

149
00:09:29,820 --> 00:09:32,160
You need to provide don't angry.

150
00:09:32,370 --> 00:09:32,730
All right.

151
00:09:33,090 --> 00:09:36,080
So let me just save it and let me just minimize this hold.

152
00:09:36,150 --> 00:09:38,090
OK, so now we have imported the image.

153
00:09:38,100 --> 00:09:43,200
Let us just use it in the left side of the container or in the left side of the tape.

154
00:09:43,560 --> 00:09:50,700
So here we will use an image tag that is I am G and then the South C, and he'll we will use the source

155
00:09:50,700 --> 00:09:51,960
of the file.

156
00:09:52,170 --> 00:09:53,820
So it is just logo.

157
00:09:53,820 --> 00:09:58,460
And again, image tag is also a self-closing tag here in React.

158
00:09:58,460 --> 00:09:59,700
So let me just save it.

159
00:10:00,750 --> 00:10:07,020
And let me just go to the browser and see, OK, we can see this image, almost all of this is very,

160
00:10:07,020 --> 00:10:07,560
very big.

161
00:10:08,760 --> 00:10:13,020
But the best thing is it gets rendered and we can see it.

162
00:10:13,350 --> 00:10:15,360
So as long as we can see it, there's no problem.

163
00:10:15,360 --> 00:10:18,810
We can configure it and we can make it work, according to us.

164
00:10:19,200 --> 00:10:25,950
So let's go to a court and let's just try to make it a little more beautiful.

165
00:10:26,190 --> 00:10:30,330
So next, on the right hand side, we will be providing some links.

166
00:10:30,810 --> 00:10:37,410
So for providing links for us to, we need to use the extra dome in our Abdul G.S. file.

167
00:10:37,440 --> 00:10:39,060
So let me just go ahead and do it.

168
00:10:40,020 --> 00:10:41,830
So you need to import three things.

169
00:10:41,880 --> 00:10:48,240
Keep in mind you need to import and importing is done in inside the calibrator, so you need to import.

170
00:10:51,280 --> 00:10:54,220
Browser out there as.

171
00:10:55,310 --> 00:10:57,470
Rather than import.

172
00:10:59,340 --> 00:11:02,100
Switch, then to import group.

173
00:11:02,460 --> 00:11:04,560
OK, these things you need to import from.

174
00:11:06,490 --> 00:11:09,760
To get out on this thing right here.

175
00:11:09,820 --> 00:11:10,240
All right.

176
00:11:10,720 --> 00:11:15,970
To import this from at home and now what we will do is that we will.

177
00:11:17,410 --> 00:11:22,030
We'll wrap every component inside inside the crowd.

178
00:11:22,450 --> 00:11:23,890
All right, so that means.

179
00:11:25,670 --> 00:11:32,090
Every component will be inside the roundup, so every component when it's wrapped inside the powder,

180
00:11:32,360 --> 00:11:37,410
then only we can navigate and we can rout out to the different pages.

181
00:11:37,430 --> 00:11:37,730
OK.

182
00:11:37,970 --> 00:11:41,150
So since we have imported about to switch and drought.

183
00:11:42,220 --> 00:11:47,920
Next, Will Wrap is wrap this now, but inside the outer OK?

184
00:11:48,670 --> 00:11:49,420
Move closer.

185
00:11:51,670 --> 00:11:52,230
Photo.

186
00:11:55,120 --> 00:11:57,140
We just bring the boss.

187
00:11:59,050 --> 00:11:59,370
OK.

188
00:11:59,530 --> 00:12:00,550
So let me save it.

189
00:12:00,930 --> 00:12:01,170
OK.