1
00:00:00,910 --> 00:00:03,130
Hello, and welcome back with this new video of the project.

2
00:00:03,760 --> 00:00:08,950
Until now, we have seen of the users lives today is the stone, the reducer functions.

3
00:00:09,310 --> 00:00:13,810
How to set up the project basically now in the studio, we'll get started with the homepage.

4
00:00:14,500 --> 00:00:17,710
So for that, inside the components, you have to create a.

5
00:00:19,670 --> 00:00:20,390
Page called.

6
00:00:21,950 --> 00:00:23,180
Home page dodges.

7
00:00:26,710 --> 00:00:27,040
OK.

8
00:00:27,340 --> 00:00:30,010
So basically, what this is on page is we have.

9
00:00:32,870 --> 00:00:35,600
So I have used RDF snippet.

10
00:00:36,110 --> 00:00:42,190
So what it will do is so you can also have it as a package redux snippets.

11
00:00:43,040 --> 00:00:43,300
Yeah.

12
00:00:43,730 --> 00:00:48,020
So these are simple extension E7 React Redux Craft, you'll react native snippet.

13
00:00:48,440 --> 00:00:53,510
Once you enable this, you can use basically shortcuts so that your code will autofill.

14
00:00:54,200 --> 00:00:56,630
So the shortcut I use, these are FC.

15
00:00:57,880 --> 00:01:01,150
So this is from an automatic outcry either called out of sea.

16
00:01:02,050 --> 00:01:02,350
Yeah.

17
00:01:02,530 --> 00:01:08,170
So this is giving the functional component, but if we type out, if you react at a function component

18
00:01:08,710 --> 00:01:13,360
and anything you it little out of function is the new trend, like many of them will follow arrow function.

19
00:01:13,810 --> 00:01:15,640
So you can use that no problem in that.

20
00:01:16,120 --> 00:01:20,050
So once this is done, I couldn't directly atone for this.

21
00:01:20,680 --> 00:01:22,210
Now what we need to import.

22
00:01:22,540 --> 00:01:25,480
We have to import many things like we have to import the stylesheet.

23
00:01:25,480 --> 00:01:32,290
The features the Google log into dispatch, a new selector from React Redux and also the features from

24
00:01:32,290 --> 00:01:34,600
the users digest everything.

25
00:01:35,020 --> 00:01:36,850
So first, we'll import all of them.

26
00:01:39,380 --> 00:01:40,540
So important we will.

27
00:01:42,760 --> 00:01:45,730
From the Google Google.org, credit is not beaten out of it.

28
00:01:46,270 --> 00:01:46,750
Next.

29
00:01:48,210 --> 00:01:48,570
But.

30
00:01:51,430 --> 00:01:52,360
Usually dispatch.

31
00:01:53,300 --> 00:02:01,010
We'll see how to like help with this huge dispatch, and you select that in other videos or in this

32
00:02:01,010 --> 00:02:01,640
video itself.

33
00:02:02,410 --> 00:02:06,860
Basically be frustrating putting all the necessary things that we want and now we'll import.

34
00:02:08,370 --> 00:02:08,910
Select.

35
00:02:10,350 --> 00:02:11,010
Simon.

36
00:02:13,470 --> 00:02:14,400
Oh, sorry.

37
00:02:16,310 --> 00:02:17,450
Said sounding.

38
00:02:22,930 --> 00:02:23,980
Safety was a data.

39
00:02:26,370 --> 00:02:29,070
So this will import from where we have to import from.

40
00:02:32,800 --> 00:02:34,130
You just use our slice.

41
00:02:38,740 --> 00:02:42,070
And then we have to import the stylesheet.

42
00:02:45,410 --> 00:02:48,740
Inside the styling, there is a folder called Boondocks Versus.

43
00:02:51,350 --> 00:02:55,310
So we our area of concern is not about the styling, the styling part.

44
00:02:55,790 --> 00:03:01,190
You know, you have you will have access to the court files so that you can see how the styling is done.

45
00:03:01,610 --> 00:03:07,070
We'll be not concentrating on the styling, but I will create all the styling, you know.

46
00:03:08,030 --> 00:03:12,350
Bob, inside this hour, no doubt of in the hole that I have in my.

47
00:03:13,590 --> 00:03:19,530
System, so your main area of concentration should be under the act.

48
00:03:19,710 --> 00:03:22,140
What are the features that we are using already?

49
00:03:22,240 --> 00:03:25,790
We are importing how we are using the props, props and stage management.

50
00:03:25,800 --> 00:03:27,940
We'll see when we go deeper into the project.

51
00:03:28,560 --> 00:03:31,620
So you have to not basically have concentration on the sphere.

52
00:03:32,070 --> 00:03:33,140
Styling is impolite.

53
00:03:33,140 --> 00:03:35,430
Like, you know, you can understand by seeing it, you can.

54
00:03:35,430 --> 00:03:36,630
I feel an not understanding.

55
00:03:36,630 --> 00:03:41,940
You can use the Google documentation, you have the Indian box or many other military schools kind of

56
00:03:41,940 --> 00:03:43,110
websites where you can search.

57
00:03:45,000 --> 00:03:50,250
And styling is basically most of the thing is, try it and we will see some value in some give value

58
00:03:50,250 --> 00:03:54,780
and see how the webpage looks made it on that you will adjust the values so that you want.

59
00:03:55,050 --> 00:03:57,120
We want to see your website based on your preference.

60
00:03:57,600 --> 00:03:58,410
That's not a big deal.

61
00:03:58,410 --> 00:03:59,730
You can do it.

62
00:04:00,750 --> 00:04:02,640
So after importing the styles.

63
00:04:04,150 --> 00:04:09,760
Now we have input on everything, OK, digital will bring some welcome message.

64
00:04:10,880 --> 00:04:13,280
Welcome to Home Beach.

65
00:04:15,360 --> 00:04:19,020
We have expert on the home page, novel importance are dodges.

66
00:04:21,640 --> 00:04:26,860
We will import and not slash compliance slash.

67
00:04:29,210 --> 00:04:30,050
Home page.

68
00:04:32,170 --> 00:04:34,440
Report on page from.

69
00:04:38,640 --> 00:04:43,440
So where we have to use this old homepage, we use this embed instead of this Hello blog website, we

70
00:04:43,440 --> 00:04:45,510
lose this saw on page component.

71
00:04:52,150 --> 00:04:52,870
Homepage.

72
00:04:56,920 --> 00:04:58,690
We'll see whether the changes have occurred or not.

73
00:05:01,750 --> 00:05:07,120
Can see the anxiety or that component, which can't resolve styling or not since this.

74
00:05:11,680 --> 00:05:12,310
Styling.

75
00:05:13,410 --> 00:05:14,330
Talk.

76
00:05:23,770 --> 00:05:26,380
So there is a small little area.

77
00:05:35,680 --> 00:05:41,410
So there is a lot in the military course, so nothing to change, or it's basically have to refresh

78
00:05:41,410 --> 00:05:44,710
it or control shift B and click on Reload.

79
00:05:45,990 --> 00:05:49,440
You can see the window click on individual record.

80
00:05:49,860 --> 00:05:54,690
That's not a problem so often, but if you refresh, you can see the message will come to homepage.

81
00:05:55,170 --> 00:06:01,020
So basically, we have completed this on pages and that we are using this component and said this apologies.

82
00:06:01,410 --> 00:06:06,540
OK, so this one page is rendered and then instead of we, we're having the welcome home page message,

83
00:06:07,590 --> 00:06:07,860
right?

84
00:06:08,310 --> 00:06:12,180
So this is basically the starting of the homepage.

85
00:06:12,480 --> 00:06:19,250
Now we have to use everything like, you know, as you see here, when we logged.

86
00:06:27,560 --> 00:06:29,570
So it is our logging in by default.

87
00:06:29,630 --> 00:06:34,880
So whenever you are refreshing it, you can see a page with, you know, the header, the blog readers

88
00:06:34,880 --> 00:06:36,530
and everything, the book symbol and everything.

89
00:06:36,860 --> 00:06:42,350
So how to build that since I am, I am already logged in with my Google account that is automatically

90
00:06:42,350 --> 00:06:43,070
redirecting it.

91
00:06:43,430 --> 00:06:44,420
That's not a problem.

92
00:06:44,690 --> 00:06:51,560
So can basically delete the cookies, but we want to see the one page that the user gets whenever it

93
00:06:51,560 --> 00:06:52,400
is not logged in.

94
00:06:53,500 --> 00:06:55,030
So for that will start, according.

95
00:06:57,340 --> 00:06:58,780
First thing we have to do is.

96
00:07:04,820 --> 00:07:06,290
Here we have a class name off.

97
00:07:09,250 --> 00:07:09,880
Homepage.

98
00:07:13,000 --> 00:07:20,530
So what I'll do is I'll basically complete off this court, the right, the home should return, and

99
00:07:20,530 --> 00:07:26,440
then we'll explain then what this code does because you know that fighting every plane, of course,

100
00:07:26,440 --> 00:07:27,270
will take some time.

101
00:07:27,280 --> 00:07:33,160
So I'll just copy and paste a snippet of code that would be around 10 lines and then explain that clearly.

102
00:07:38,590 --> 00:07:41,320
So this will be the finish of court for the home based on Jess.

103
00:07:42,190 --> 00:07:47,740
So what we are doing here, as you can see, these are we have somehow to import them exported and also

104
00:07:48,400 --> 00:07:52,060
the home page component with which we will never come to homepage.

105
00:07:52,360 --> 00:07:55,690
But yet you can see we are not rendering simply text.

106
00:07:56,050 --> 00:07:58,570
We are rendering a class with home page plus them.

107
00:07:58,930 --> 00:08:03,280
So this class won't Bedouin style it inside the home that CSIS.

108
00:08:03,910 --> 00:08:06,070
And also it will do some default style for it.

109
00:08:06,430 --> 00:08:14,220
Default style will be display, is signed in, is signed, then will have the value of you self-select

110
00:08:14,250 --> 00:08:14,680
sign them.

111
00:08:15,160 --> 00:08:17,860
This will get from the users lives that we are using.

112
00:08:18,190 --> 00:08:19,030
This will be none.

113
00:08:19,270 --> 00:08:23,350
If this is true, if it is resigning, it would be none or else it will not be anything.

114
00:08:24,260 --> 00:08:29,630
And you can see this edge to edge and of a book similar reader's favorite place, and we have some content

115
00:08:30,530 --> 00:08:33,110
and also this thing is very important.

116
00:08:33,200 --> 00:08:34,000
The Google Log.

117
00:08:34,940 --> 00:08:40,520
So what we are doing, the first thing you have to do before doing this is go to.

118
00:08:42,620 --> 00:08:44,000
This cloud platform.

119
00:08:45,470 --> 00:08:48,880
Counsellor, Google doctor, you know, Dr.

120
00:08:50,110 --> 00:08:55,480
Well, welcome, once you go to this, you'll be getting a dashboard, right?

121
00:08:58,130 --> 00:09:00,620
And you would have to create a project.

122
00:09:02,590 --> 00:09:03,870
Why don't you create the project?

123
00:09:12,570 --> 00:09:12,820
Yeah.

124
00:09:13,270 --> 00:09:16,350
Seemed to work with this controller, Google or Airbus.

125
00:09:17,190 --> 00:09:23,460
When you Google apps and services, if you have a project inside the credentials, you have API keys,

126
00:09:23,820 --> 00:09:28,440
you have been able to point a client ideas when when you are creating the project.

127
00:09:28,830 --> 00:09:32,130
So when you end up with this, you will get the client ready for that project.

128
00:09:32,430 --> 00:09:34,170
So I already had a project name.

129
00:09:34,170 --> 00:09:35,730
The secrets for that.

130
00:09:35,730 --> 00:09:43,530
Had this client side be using this client can copy this what line data and simply can paste it already

131
00:09:43,550 --> 00:09:43,650
at?

132
00:09:46,910 --> 00:09:54,130
OK, so now when you pasted what is happening is Google are getting direct line data so that all you

133
00:09:54,140 --> 00:09:58,700
know to make sure whether the client who is making this website is secure or not.

134
00:09:59,660 --> 00:10:06,110
And then this global log in will have a button component button we are using, and then the button will

135
00:10:06,110 --> 00:10:07,240
be log in with Google.

136
00:10:07,880 --> 00:10:10,610
They are pushing the button and let a few drops.

137
00:10:11,300 --> 00:10:14,600
So water drops, so to discuss about drops.

138
00:10:15,050 --> 00:10:16,280
So we'll take one example.

139
00:10:16,790 --> 00:10:20,690
Take one image tag image that will have you attributes.

140
00:10:21,080 --> 00:10:22,190
So what are those attributes?

141
00:10:22,490 --> 00:10:23,330
It will be source.

142
00:10:23,690 --> 00:10:24,860
It will be alternative.

143
00:10:25,070 --> 00:10:27,400
It will be until afterwards.

144
00:10:27,980 --> 00:10:29,310
For example, if you take a.

145
00:10:30,580 --> 00:10:31,360
Pitch difference.

146
00:10:31,600 --> 00:10:34,570
Then you need to give the link of that reference, make it should do that.

147
00:10:35,170 --> 00:10:37,530
So these are the attributes of the female tax.

148
00:10:38,080 --> 00:10:40,540
Those these are definitely a male tax.

149
00:10:40,780 --> 00:10:42,340
We are calling them as attributes.

150
00:10:42,730 --> 00:10:49,360
But yet this Google log in order of your take on example, such as other companies like Google Pay down

151
00:10:49,360 --> 00:10:53,290
other components of it now bar food, blogs, data and everything.

152
00:10:53,770 --> 00:10:59,560
So those components will have some of those will be will export and use them to these other components

153
00:10:59,560 --> 00:11:00,490
created by us.

154
00:11:01,000 --> 00:11:03,340
Are customizing the companies based on the requirements.

155
00:11:03,730 --> 00:11:07,450
This Google organizer, this is a component that we got from where we are.

156
00:11:07,450 --> 00:11:12,090
Google like this is also a package that is developed by some other programmers like us on it.

157
00:11:12,740 --> 00:11:19,540
But these are the, you know, the companies that we are creating and the attributes that these components

158
00:11:19,540 --> 00:11:21,100
possess are called as props.

159
00:11:21,520 --> 00:11:26,800
So blind, it is an attribute we have to give it a value, but that is a natural render means what we

160
00:11:26,800 --> 00:11:27,340
have to render.

161
00:11:27,620 --> 00:11:31,090
And that will take the argument cardiac random props.

162
00:11:31,270 --> 00:11:36,370
And it will render a button so that whenever a button on click, that means whenever someone is clicking

163
00:11:36,370 --> 00:11:42,490
on that button, it will block all the functions and props not on click OK.

164
00:11:43,420 --> 00:11:45,700
So this render props will can see one.

165
00:11:45,710 --> 00:11:48,400
So we build that on everything.

166
00:11:49,180 --> 00:11:50,470
So the class name will be logging.

167
00:11:50,480 --> 00:11:52,780
But as I said, this class, there will be numerous cases.

168
00:11:53,290 --> 00:12:00,580
You can check through the code whenever it's in or when you can get the code fed and then on success

169
00:12:00,580 --> 00:12:05,550
logging on failure logging is Sinestro Cookie Policy Single Horse Start again.

170
00:12:05,980 --> 00:12:10,330
So these are basically available in the documentation of what does this mean like on success.

171
00:12:10,340 --> 00:12:12,460
So we have to use the log in function and everything.

172
00:12:12,880 --> 00:12:17,830
So that log in function will take a responsible control of the response and it will dispatch, said

173
00:12:17,840 --> 00:12:22,420
Simon to dispatch said give the data that's part of the profile object.

174
00:12:22,780 --> 00:12:24,160
So we'll I'll show you one thing.

175
00:12:24,520 --> 00:12:30,560
This is the the blog applet that we have completed, so you can install the extension, react there

176
00:12:30,640 --> 00:12:31,450
to this extension.

177
00:12:32,320 --> 00:12:32,710
Right.

178
00:12:35,130 --> 00:12:38,370
Here you can see the state state of the U.S.

179
00:12:38,490 --> 00:12:44,790
You can see the East, I need to search this blog that does not disturb, that is action.

180
00:12:44,790 --> 00:12:46,230
There is stress that is best.

181
00:12:46,770 --> 00:12:50,300
You can see everything using this reactor developer tools.

182
00:12:53,010 --> 00:12:57,360
So this is what we are doing, we are concerned about the response of what this log in is giving.

183
00:12:57,380 --> 00:13:02,420
This will give the data of the user like the Gmail, what is using all the data of the packets and the

184
00:13:02,420 --> 00:13:03,740
network that he's working on.

185
00:13:04,700 --> 00:13:07,400
Dispatch user data, so dispatch.

186
00:13:08,610 --> 00:13:10,620
We are getting from React Redux, right?

187
00:13:11,010 --> 00:13:14,160
So basically, we are dispatching this inside to use dispatch.

188
00:13:14,160 --> 00:13:19,740
We are dispatching this so that we can use this, all the six assignments activated and everything.

189
00:13:20,430 --> 00:13:25,770
We are calling this at CNN to prove whenever the user clicks on login and setting the transponder profile

190
00:13:25,770 --> 00:13:28,320
object profile object is basically the.

191
00:13:28,830 --> 00:13:35,070
It contains the image of the user with which email is signing in since the attack should be followed

192
00:13:35,070 --> 00:13:37,470
and not having any in a profile picture.

193
00:13:37,480 --> 00:13:40,950
But if you are using your thing, you can have your profile picture.

194
00:13:42,610 --> 00:13:45,250
On suction, on failure, resistance island cookie policy.

195
00:13:46,000 --> 00:13:51,610
So these these should be rendered when the user is not signed in, right?

196
00:13:52,180 --> 00:13:58,360
So the when the user is not signed and then he approved this, everything like log in with Google button

197
00:13:58,360 --> 00:13:58,930
and everything.

198
00:13:59,470 --> 00:14:05,500
Once the user is signed and then what we have after render we the end of the blocks.

199
00:14:05,980 --> 00:14:10,660
So we have turned of the head that there is as usual, but nobody's in action in the upper end of the

200
00:14:10,660 --> 00:14:11,110
blocks.

201
00:14:11,560 --> 00:14:12,640
So how would enter blocks?

202
00:14:13,020 --> 00:14:15,670
So I guess we have to change the policy.

203
00:14:16,690 --> 00:14:17,290
So here.

204
00:14:21,000 --> 00:14:25,830
It should be now, but so basically will create the now war component in the next video so we can see

205
00:14:25,830 --> 00:14:30,860
how to create the network component and then help it enter the blogs based on the signing and not print

206
00:14:30,870 --> 00:14:31,740
it out in the next few.