1
00:00:00,960 --> 00:00:02,190
Hello and welcome to the new way.

2
00:00:02,700 --> 00:00:07,050
So until now, we saw how to write the code for home page component.

3
00:00:07,500 --> 00:00:09,900
In this, we will finish the Nasdaq component.

4
00:00:10,620 --> 00:00:15,030
So as I said, the styling is not a part, is not the area of our interest.

5
00:00:15,270 --> 00:00:16,590
So we've completed the styling part.

6
00:00:16,590 --> 00:00:23,310
You can see the home docs here says these are all the basics of styling that you can refer in using

7
00:00:23,310 --> 00:00:27,240
the modern documentation or revelatory documentation.

8
00:00:27,240 --> 00:00:27,630
Anything?

9
00:00:28,410 --> 00:00:31,460
Let's just see how do we use that documentation?

10
00:00:34,870 --> 00:00:35,320
So.

11
00:00:36,440 --> 00:00:38,900
And the Indian, yes.

12
00:00:40,870 --> 00:00:43,870
He opened this so you can see the good documentation of what he had.

13
00:00:45,270 --> 00:00:50,910
You can search, for example, I want to search the styling for, for example, let me see display.

14
00:00:53,000 --> 00:00:54,170
So search for display.

15
00:00:56,280 --> 00:01:00,770
You can see I have different values, so like display, great display, nine flags in my rock.

16
00:01:01,050 --> 00:01:06,870
You can see all the content for that, like how they work, but what does that mean and everything can

17
00:01:06,870 --> 00:01:08,070
be for this documentation?

18
00:01:08,520 --> 00:01:13,830
So basically, these are all have different default public height to display flags up aligned items

19
00:01:13,830 --> 00:01:15,660
for center left margin.

20
00:01:15,660 --> 00:01:16,920
Picture all the basics.

21
00:01:16,920 --> 00:01:19,320
See, it's only basically in the colors and everything.

22
00:01:19,920 --> 00:01:26,280
So similar to home that CSIS have completed the code for now, but the boxes and boxes of cases you

23
00:01:26,280 --> 00:01:32,490
can get to see the score and you can use in your project or else you can also manipulate the code and

24
00:01:32,490 --> 00:01:34,140
also change the styling, according to you.

25
00:01:34,920 --> 00:01:35,280
OK.

26
00:01:35,730 --> 00:01:40,230
So before that, since we have completed the home page access, we'll see how our page looks like.

27
00:01:40,660 --> 00:01:44,580
So this is our page looks like once we complete the home page, docs see it.

28
00:01:44,580 --> 00:01:49,090
But the styling for page there is a book symbol of place here and everything.

29
00:01:49,350 --> 00:01:51,430
Once you click on logging in, log in with the Google.

30
00:01:51,430 --> 00:01:54,780
You will get, you know, a pop up window for that.

31
00:01:56,030 --> 00:02:00,500
Since we have logged in on, we are not rendering anything now, but we're not getting anything, so

32
00:02:00,500 --> 00:02:02,630
I'll refresh, you can come back to the original pitch.

33
00:02:03,380 --> 00:02:06,150
So now we'll see the court for home page.

34
00:02:06,710 --> 00:02:07,940
So the no company.

35
00:02:08,420 --> 00:02:11,570
So I've created a file called now, but I'll just insert components.

36
00:02:12,530 --> 00:02:13,010
Open it.

37
00:02:13,010 --> 00:02:14,510
You can see the whole code for this.

38
00:02:14,870 --> 00:02:16,490
We'll see what this mean.

39
00:02:16,510 --> 00:02:17,360
So line by line.

40
00:02:18,410 --> 00:02:19,130
So first thing.

41
00:02:20,500 --> 00:02:25,660
As we saw in the previous videos, we have come, we have been struggling to material into white coat

42
00:02:25,660 --> 00:02:33,040
package using npm install can see here and demonstrate Axios allows npm installed material to upward.

43
00:02:34,080 --> 00:02:37,560
You can check whether the packages are installed or not are going to package.

44
00:02:38,580 --> 00:02:39,510
Back in Iraq, Jason.

45
00:02:40,750 --> 00:02:47,520
You can see all the experts in starting material to strawberry tax toolkit installed at Google Logging

46
00:02:47,520 --> 00:02:52,590
React Redux, everything is installed, so we have installed everything that is needed for the project,

47
00:02:52,860 --> 00:02:54,750
so no need to use the terminal again.

48
00:02:55,740 --> 00:02:57,360
So busy enough now.

49
00:02:57,490 --> 00:03:00,390
But so this avatar comes from literally like, could you say?

50
00:03:00,420 --> 00:03:01,320
But that is a component.

51
00:03:01,950 --> 00:03:02,770
So what?

52
00:03:03,000 --> 00:03:03,450
What do you mean?

53
00:03:03,450 --> 00:03:03,990
The material you?

54
00:03:04,800 --> 00:03:10,620
This is not like a library where we have a lot of components developed by other users.

55
00:03:10,920 --> 00:03:14,340
For example, here I have completed the Coding for Home Page Company.

56
00:03:15,000 --> 00:03:21,450
I can deploy this component and we have not a package manager repository website for that.

57
00:03:21,810 --> 00:03:27,270
And then anyone in the world can access that by downloading that, they can use it in their dependencies

58
00:03:27,270 --> 00:03:28,710
and they can import a net project.

59
00:03:29,130 --> 00:03:31,350
Similarly, reducing developer community.

60
00:03:31,590 --> 00:03:33,330
What does this avatar component does?

61
00:03:33,750 --> 00:03:34,260
It does.

62
00:03:34,260 --> 00:03:38,100
A classroom like that is that we can do it without a source, an alternative.

63
00:03:38,280 --> 00:03:39,270
What is the source?

64
00:03:39,300 --> 00:03:43,070
The source is the profile picture of the user with the which do you manage logging in?

65
00:03:43,560 --> 00:03:44,160
I wouldn't see that.

66
00:03:45,650 --> 00:03:50,450
Five important discovered that important the remarkable level they should be allowed option, right,

67
00:03:50,960 --> 00:03:56,840
use dispatch, you still have to import like, you know, I imported all the things that are necessary

68
00:03:56,840 --> 00:03:58,280
from the users lives in my novel.

69
00:03:58,290 --> 00:04:03,770
But so now what is basically, as you can see, the can have it here on our bodies.

70
00:04:03,950 --> 00:04:04,700
We have a title.

71
00:04:04,700 --> 00:04:06,440
We have a search badge, we have a button.

72
00:04:06,710 --> 00:04:09,530
We have a profile for our photo.

73
00:04:09,530 --> 00:04:13,790
We can also get the name will have a lot of symbol and then the blocks.

74
00:04:14,000 --> 00:04:17,690
So basically in this area of concentration is this number Alphabet is now.

75
00:04:17,690 --> 00:04:20,890
But this now everybody will be saying that the rule of law.

76
00:04:20,940 --> 00:04:21,700
All right.

77
00:04:22,040 --> 00:04:23,810
So I will have this now.

78
00:04:23,810 --> 00:04:25,250
But what do you?

79
00:04:28,450 --> 00:04:28,990
Now by.

80
00:04:31,000 --> 00:04:33,250
So before having that, we have been boarded.

81
00:04:34,630 --> 00:04:35,170
And both.

82
00:04:36,170 --> 00:04:36,700
I have one.

83
00:04:37,810 --> 00:04:38,100
Some.

84
00:04:39,130 --> 00:04:41,380
But slash company slash.

85
00:04:46,540 --> 00:04:49,930
So we exporting it as now we are importing it inside.

86
00:04:51,400 --> 00:04:52,390
Adaptogens.

87
00:05:09,430 --> 00:05:12,960
So there is and that we'll see that inner shark dump.

88
00:05:13,390 --> 00:05:18,910
So before that, we'll basically see what does the coating inside the number has.

89
00:05:19,600 --> 00:05:21,580
So these are the users familiar with the homebuilder.

90
00:05:21,580 --> 00:05:27,020
Wilson offer that we are using hooks input values that input valuable.

91
00:05:27,820 --> 00:05:29,590
So this looks what it does is.

92
00:05:31,200 --> 00:05:32,470
For example, we take one example.

93
00:05:33,180 --> 00:05:38,340
In some websites, there will be a clock running like you can see the time changing.

94
00:05:38,520 --> 00:05:41,930
Every time you open some website, you have some.

95
00:05:41,990 --> 00:05:46,680
Sometimes you, for example, if you open a social networking website, you will somebody will post

96
00:05:47,040 --> 00:05:51,540
a photo and there will be time beside it underneath it or something.

97
00:05:51,810 --> 00:05:56,400
Like a few seconds ago, one minute ago, two minutes ago, three minutes ago, four minutes ago, one

98
00:05:56,400 --> 00:05:56,790
hour ago.

99
00:05:57,270 --> 00:05:58,910
Such a change every second.

100
00:05:58,910 --> 00:06:00,210
The time should change every second.

101
00:06:00,750 --> 00:06:06,690
So whenever it's changing, whenever it's changing, it should refresh based on the, you know, like

102
00:06:06,690 --> 00:06:07,950
the basic programming practice.

103
00:06:08,760 --> 00:06:16,710
So when the website or the page gets refreshed every single second, then like the users will not use

104
00:06:16,710 --> 00:06:17,940
that web page for short.

105
00:06:18,540 --> 00:06:23,640
So that is what the basic disadvantage of that, that in a systematic way.

106
00:06:23,640 --> 00:06:24,540
Programming note.

107
00:06:24,630 --> 00:06:31,290
But does it mean that the default web programming for the city yet what it does is it only changes the

108
00:06:31,290 --> 00:06:32,600
component that's necessary.

109
00:06:32,600 --> 00:06:34,170
It not refreshes the whole page.

110
00:06:34,800 --> 00:06:39,840
So that example, we use this you state for this fact, we're using it for the input value.

111
00:06:40,260 --> 00:06:43,320
That means we are using it for this input area.

112
00:06:43,740 --> 00:06:48,360
So whenever we click on, for example, search the news for sports and click on Search.

113
00:06:49,370 --> 00:06:53,270
Then you can see only the blogs data is changing, not the pages refreshing.

114
00:06:53,600 --> 00:06:55,970
If you refresh, you'll get someone of their value, right?

115
00:06:57,110 --> 00:07:01,670
Now you can see the whole pages and it's not about fishing, it's only changing the things that are

116
00:07:01,670 --> 00:07:02,720
needed to be changed.

117
00:07:03,380 --> 00:07:08,840
So that's why what we have to change every time we lose the state looks for that.

118
00:07:09,170 --> 00:07:12,220
There are different types of hooks we'll have used to cook.

119
00:07:12,230 --> 00:07:17,390
We'll have to use a peacock or we can also have a different use history hook and everything.

120
00:07:17,840 --> 00:07:22,880
If you want to know details about them, you can refer to the documentation that is present on the internet.

121
00:07:24,700 --> 00:07:30,150
So, OK, we have understood what this looks does, but how we use that first thing, we are having

122
00:07:30,290 --> 00:07:32,010
input two arguments we are having.

123
00:07:32,800 --> 00:07:34,120
The first thing is input value.

124
00:07:34,450 --> 00:07:39,760
This is a con is a man of a variable or a constraint that is storing some value.

125
00:07:40,630 --> 00:07:41,560
So they change.

126
00:07:41,560 --> 00:07:44,110
This value will be using set input.

127
00:07:45,040 --> 00:07:48,190
So initially, it should have a value that values pick.

128
00:07:48,760 --> 00:07:51,190
We can change this guy leading this set input value.

129
00:07:53,350 --> 00:07:53,620
OK.

130
00:07:53,830 --> 00:07:55,570
So as you can see, we're never on change.

131
00:07:55,870 --> 00:07:57,430
We are taking nine eight.

132
00:07:57,700 --> 00:08:00,760
That will be the input that the user is giving.

133
00:08:01,030 --> 00:08:04,650
And we are changing that input value, but you don't get that value for that value.

134
00:08:04,960 --> 00:08:07,210
Value will be the input value that the user is giving.

135
00:08:08,450 --> 00:08:15,560
OK, so now we have some water use status, we have we have, you know, define the selectors, we have

136
00:08:15,560 --> 00:08:17,270
defined the method dispatch method.

137
00:08:18,140 --> 00:08:24,140
We are logging so similarly to log in when we used a home similar to log in function.

138
00:08:24,290 --> 00:08:29,720
Whenever the user clicked on the log, it will dispatch the reducer function from the user slice and

139
00:08:29,720 --> 00:08:33,410
then it will set the sign in default and the user did not do this.

140
00:08:33,410 --> 00:08:37,670
So you can see this dispatch and everything we are getting from React Redux is out of everything the

141
00:08:37,670 --> 00:08:39,050
package that we are simply using.

142
00:08:39,230 --> 00:08:41,720
So these will be ready for coding that you have to remember.

143
00:08:41,730 --> 00:08:45,890
It will be back is going to be you can remember them through practice.

144
00:08:47,210 --> 00:08:53,870
So these are basically the things that we saw until the next thing is how we will see that in a way.

145
00:08:54,390 --> 00:08:59,090
The first thing they're doing, we are having some division with each one had a blocked menu, so they

146
00:08:59,100 --> 00:08:59,930
usually sign them.

147
00:09:00,470 --> 00:09:04,610
If the incitement is true, then only this block of food will get executed.

148
00:09:05,060 --> 00:09:06,050
So what is this block of?

149
00:09:06,710 --> 00:09:11,560
It would have some division called block search that will take some input they input as a place, or

150
00:09:12,080 --> 00:09:17,450
it will have a value of the input that the user is giving the input value and then it unchanged whenever

151
00:09:17,450 --> 00:09:21,020
it's genuinely upsetting this input value to that change.

152
00:09:21,320 --> 00:09:25,610
So, for example, if the user is clicking OK, we can see one example.

153
00:09:26,000 --> 00:09:26,510
So.

154
00:09:28,190 --> 00:09:30,410
Well, basically, you know.

155
00:09:31,470 --> 00:09:32,770
Consultant Long.

156
00:09:36,150 --> 00:09:37,170
You can a lot.

157
00:09:38,900 --> 00:09:39,620
Input value.

158
00:09:43,530 --> 00:09:44,680
So we'll see what's happening.

159
00:09:44,880 --> 00:09:47,090
So we will get an idea of that open now.

160
00:09:48,500 --> 00:09:50,510
Developer tools to control.

161
00:09:51,890 --> 00:09:53,480
So you're inside the search.

162
00:09:55,360 --> 00:09:56,140
When I'm typing.

163
00:10:01,920 --> 00:10:02,970
So there's an element.

164
00:10:18,110 --> 00:10:20,420
Well, we're getting out of control not long.

165
00:10:24,520 --> 00:10:25,450
So you will see that.

166
00:10:26,290 --> 00:10:29,830
So what will happen is, for example, I imagine the takeover here.

167
00:10:31,020 --> 00:10:33,770
So now, instead of that, I'm adding seat.

168
00:10:34,290 --> 00:10:35,760
So first, the value of the.

169
00:10:37,150 --> 00:10:43,720
Impact will be seen now when I get a letter, for example, and then it will automatically change the

170
00:10:43,720 --> 00:10:49,240
input value so that whenever on change on genuine, even a single letter which will trigger that function.

171
00:10:49,660 --> 00:10:57,250
So it will trigger the input setting this on change and then on, General said take the second put value

172
00:10:57,250 --> 00:10:57,730
function.

173
00:10:57,730 --> 00:11:01,080
It will call this function and change the value to target value.

174
00:11:01,390 --> 00:11:02,930
It will be the function that is triggering.

175
00:11:03,190 --> 00:11:05,080
Target will be the target of that function.

176
00:11:05,080 --> 00:11:08,380
The value will be the what is the value of that target, the function of triggering.

177
00:11:09,700 --> 00:11:11,260
So this is what it does.

178
00:11:12,390 --> 00:11:18,450
So long as this is not in our modern culture, such when the user clicks on search, we'll call a function

179
00:11:18,450 --> 00:11:20,120
call and you click on Click.

180
00:11:21,160 --> 00:11:26,860
So Anglican will is hanging on hand and will be so basically the, you know.

181
00:11:28,230 --> 00:11:34,290
Let me pass this basic feature, like whenever we are submitting a button, then the page will reload

182
00:11:34,290 --> 00:11:34,970
automatically.

183
00:11:34,980 --> 00:11:35,700
It will refresh.

184
00:11:35,970 --> 00:11:36,930
So why do that?

185
00:11:37,560 --> 00:11:38,760
What is the purpose of react?

186
00:11:38,890 --> 00:11:41,250
It's going to do I won't be fishing everything like that.

187
00:11:41,250 --> 00:11:43,290
Will you just eat or prevent a default?

188
00:11:43,290 --> 00:11:46,350
Is the event that is triggering this high click function.

189
00:11:46,380 --> 00:11:52,080
We'll take that as the parameter for this function eight or 24 and then dispatch that input the input

190
00:11:52,080 --> 00:11:52,410
value.

191
00:11:52,740 --> 00:11:54,990
So he had the input set.

192
00:11:55,050 --> 00:11:57,900
Such input will be the input value that we are dispatching.

193
00:11:58,360 --> 00:11:58,560
Yeah.

194
00:12:00,230 --> 00:12:07,160
So this is what they saw and the signing the search feature is doing now, when the user is signed and

195
00:12:07,910 --> 00:12:15,600
then what we have to render, we have to render the photo of the avatar of that particular, you know,

196
00:12:15,650 --> 00:12:18,590
the user, the profile picture of that user's Gmail.

197
00:12:19,010 --> 00:12:21,860
And also, I need to give it a name for that user.

198
00:12:21,860 --> 00:12:24,170
What is the user name and also the Google?

199
00:12:24,170 --> 00:12:26,210
Or what would the lourde button right?

200
00:12:26,690 --> 00:12:32,210
And on level success, you have to call the log what function if the user is not present, that that

201
00:12:32,210 --> 00:12:36,140
means the log Innisfail, then we have to give the title user not available.

202
00:12:36,170 --> 00:12:42,530
That means if they is signing this false, then it will end up this, combined with an individual can't

203
00:12:42,530 --> 00:12:43,490
use are not available.

204
00:12:44,060 --> 00:12:46,370
So for everything, we have done the styling part here.

205
00:12:46,910 --> 00:12:48,020
So no need to worry.

206
00:12:48,020 --> 00:12:49,190
You will get the court files.

207
00:12:49,190 --> 00:12:50,090
You can refer them.

208
00:12:50,360 --> 00:12:52,700
If you have any doubts, you can use the documentation.

209
00:12:53,720 --> 00:13:01,100
So now we will discuss about this now, but like what is happening here in the Avatar and Google will

210
00:13:01,310 --> 00:13:02,430
see that in the next video.

211
00:13:02,510 --> 00:13:02,840
Thank.