Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,000 --> 00:00:05,560
In this REACT course, you'll not only learn the nuances of REACT and its internal workings,
2
00:00:05,560 --> 00:00:10,940
but also immerse yourself in building a variety of projects to understand the practical applications
3
00:00:10,940 --> 00:00:12,480
of REACT features.
4
00:00:12,480 --> 00:00:20,120
This course uniquely balances a project-focused approach with comprehensive theoretical knowledge,
5
00:00:20,120 --> 00:00:22,960
ensuring a thorough understanding of each concept.
6
00:00:22,960 --> 00:00:24,960
Pitesh Choudhary created this course.
7
00:00:24,960 --> 00:00:29,880
He's a popular instructor with 850,000 subscribers on his YouTube channel.
8
00:00:29,880 --> 00:00:34,360
By the end of the course, you'll not only have a bunch of projects for your portfolio,
9
00:00:34,360 --> 00:00:39,880
but you'll also gain hands-on experience in creating a full-stack application using
10
00:00:39,880 --> 00:00:47,000
AppRite, integrating advanced tools like Redex Toolkit and Tailwind to craft production-grade
11
00:00:47,000 --> 00:00:48,000
applications.
12
00:00:48,000 --> 00:00:53,560
Hey there everyone, Hitesh here, back again with another video, and welcome to this brand
13
00:00:53,560 --> 00:00:54,960
new series.
14
00:00:54,960 --> 00:00:59,320
So I was trying to record a series on REACT on the other channel, that's when I realized,
15
00:00:59,320 --> 00:01:03,600
hey, why can't I record this on this main channel as well, the English channel.
16
00:01:03,600 --> 00:01:06,540
So welcome to this brand new series on REACT.
17
00:01:06,540 --> 00:01:11,960
This is a very focused series on focusing on absolute beginners who want to just get
18
00:01:11,960 --> 00:01:13,640
started with the REACT.
19
00:01:13,640 --> 00:01:18,920
And there are lots of tutorials on REACT, but all of them are little bit some things
20
00:01:18,920 --> 00:01:23,400
which carry the baggage of, you should know this, you should know that, not this one.
21
00:01:23,400 --> 00:01:27,440
This one is purely entirely beginner-friendly if somebody wants to get started to learn
22
00:01:27,440 --> 00:01:29,320
REACT in 2023.
23
00:01:29,320 --> 00:01:30,920
What are the options available?
24
00:01:30,920 --> 00:01:32,560
How to read the documentation?
25
00:01:32,560 --> 00:01:36,200
What is the process of getting started with the REACT along with projects?
26
00:01:36,200 --> 00:01:37,520
And what should be the approach?
27
00:01:37,520 --> 00:01:41,800
This is going to be whole about it, we're going to absolutely love the series, and let's
28
00:01:41,800 --> 00:01:42,800
get started.
29
00:01:42,800 --> 00:01:46,040
So we're going to get started this video with a roadmap.
30
00:01:46,040 --> 00:01:47,800
How one should be learning REACT?
31
00:01:47,800 --> 00:01:51,000
When should be learning the common questions that should be answered?
32
00:01:51,000 --> 00:01:53,320
What should be the prerequisites of learning that?
33
00:01:53,320 --> 00:01:56,560
So we'll be answering all of that in this very first video.
34
00:01:56,560 --> 00:02:00,000
I prepared a few notes for you, and we're going to get started with that.
35
00:02:00,000 --> 00:02:03,400
So first, let me go ahead and share my screen video.
36
00:02:03,400 --> 00:02:07,360
So this is my iPad where we'll be walking through with the REACT roadmap, and this is
37
00:02:07,360 --> 00:02:09,680
where we're going to get started.
38
00:02:09,680 --> 00:02:14,000
First and foremost, let's not jump directly into how should I learn REACT.
39
00:02:14,000 --> 00:02:15,920
Let's first answer a couple of questions.
40
00:02:15,920 --> 00:02:18,340
First, why to learn REACT?
41
00:02:18,340 --> 00:02:23,080
Most important question, if you really ask yourself that why am I learning REACT or why
42
00:02:23,080 --> 00:02:29,040
I need REACT on the first place, then you'll be a better engineer in designing REACT application
43
00:02:29,040 --> 00:02:33,240
just because you want to learn because there is a hype around it, there's a lot of jobs
44
00:02:33,240 --> 00:02:37,560
available for it, or it's in the trend, probably not right.
45
00:02:37,560 --> 00:02:42,240
Because most of the cases of the REACT can be handled by just the JavaScript or just
46
00:02:42,240 --> 00:02:44,520
the JavaScript DOM manipulation.
47
00:02:44,520 --> 00:02:48,080
Please don't learn REACT if you're just in the hype, or you just think that, hey, there
48
00:02:48,080 --> 00:02:50,720
is plenty of jobs and I can be a REACT developer.
49
00:02:50,720 --> 00:02:55,020
Yes, that case is somewhat true, but I think that's not a great reason to learn.
50
00:02:55,020 --> 00:02:56,020
It is trendy.
51
00:02:56,020 --> 00:02:58,700
Yes, a lot of people are talking all the time about REACT.
52
00:02:58,700 --> 00:03:03,120
And if you think I want to just build UI with the REACT, then of course you are not correct,
53
00:03:03,120 --> 00:03:08,520
my friend, because building UI is not something which is a core superpower of REACT.
54
00:03:08,520 --> 00:03:12,720
Those UIs were getting built in the PHP as well, in the era of jQuery as well.
55
00:03:12,720 --> 00:03:18,120
So there is nothing which is super important that is being offered by the REACT itself.
56
00:03:18,120 --> 00:03:23,720
You should be learning really REACT because it makes easy to manage and build complex
57
00:03:23,720 --> 00:03:25,420
frontends.
58
00:03:25,420 --> 00:03:29,640
There are applications in which you just click one button and things gets updated on five
59
00:03:29,640 --> 00:03:33,960
different places, 10 different places, or 20 different places.
60
00:03:33,960 --> 00:03:39,240
These places are really difficult to manipulate while your ordinary DOM, which you manipulate
61
00:03:39,240 --> 00:03:40,740
by the JavaScript.
62
00:03:40,740 --> 00:03:44,760
So if your application is pretty complex, like an e-commerce app or something like Facebook
63
00:03:44,760 --> 00:03:50,040
or something, at that places it really makes sense to have a REACT application.
64
00:03:50,040 --> 00:03:53,680
The better you become in understanding the REACT need, the better REACT engineer you
65
00:03:53,680 --> 00:03:54,680
will become.
66
00:03:54,680 --> 00:03:57,600
Then the second thing, when should I learn it?
67
00:03:57,600 --> 00:04:01,120
Because now that you know that, okay, I can build complex app, but when you should really
68
00:04:01,120 --> 00:04:07,080
learn REACT, I always say don't jump into the frameworks of JavaScript just because
69
00:04:07,080 --> 00:04:09,640
you enjoy them or you watch a lot of YouTube videos.
70
00:04:09,640 --> 00:04:11,440
No, that's not a good idea.
71
00:04:11,440 --> 00:04:15,040
Don't react only after mastering the JavaScript.
72
00:04:15,040 --> 00:04:19,680
JavaScript is something which is core to the REACT and there are a lot of problems in debugging
73
00:04:19,680 --> 00:04:23,640
issues which are actually JavaScript issues and not the REACT issues.
74
00:04:23,640 --> 00:04:27,540
If you understand JavaScript, if you understand how the single thread works, if you understand
75
00:04:27,540 --> 00:04:32,360
how the execution environment comes into the picture, how the global execution context,
76
00:04:32,360 --> 00:04:37,360
the function execution context work, how JavaScript is able to manipulate the DOM, then is the
77
00:04:37,360 --> 00:04:41,280
right time to jump into the REACT, otherwise, no, you are making it in a hurry, not a good
78
00:04:41,280 --> 00:04:44,720
idea, you should stick to the JavaScript still.
79
00:04:44,720 --> 00:04:50,400
Okay, assuming that you know your JavaScript, then also please understand that most of the
80
00:04:50,400 --> 00:04:51,720
projects don't need REACT.
81
00:04:51,720 --> 00:04:55,360
It seems like this is a video where I'm actually pushing you away from the REACT, but that's
82
00:04:55,360 --> 00:04:56,360
not the case.
83
00:04:56,360 --> 00:04:59,560
I'm just putting up an honest picture that do you really need REACT?
84
00:04:59,560 --> 00:05:04,200
Once you truly are satisfied that I really need REACT, then you'll be becoming a good
85
00:05:04,200 --> 00:05:05,540
engineer of the REACT.
86
00:05:05,540 --> 00:05:08,760
So most projects honestly don't need REACT in the initial phase.
87
00:05:08,760 --> 00:05:14,040
As the app gets complex, as the pages are increased, as there is more and more functionality
88
00:05:14,040 --> 00:05:18,480
which is on the front end part, then injecting the REACT or having an application totally
89
00:05:18,480 --> 00:05:19,640
on the REACT makes sense.
90
00:05:19,640 --> 00:05:24,680
If your application is just one page which is having a contact form and is just displaying
91
00:05:24,680 --> 00:05:30,240
some pictures, just one or two page, I think you'll do far better in just HTML, CSS and
92
00:05:30,240 --> 00:05:31,240
core JavaScript.
93
00:05:31,240 --> 00:05:34,000
So assume that, hey, there is a case.
94
00:05:34,000 --> 00:05:38,740
Now that you are convinced that, okay, no matter what, I really want to learn a REACT.
95
00:05:38,740 --> 00:05:43,380
So in that case, why REACT was created on its own in the first place, there is a great
96
00:05:43,380 --> 00:05:44,380
story behind it.
97
00:05:44,380 --> 00:05:45,860
I would love to share that.
98
00:05:45,860 --> 00:05:50,340
So this green box, yes, I tried to mimic Facebook with this one.
99
00:05:50,340 --> 00:05:54,780
So in this Facebook, if you remember the old time, there used to be a problem of the ghost
100
00:05:54,780 --> 00:05:56,540
message problem.
101
00:05:56,540 --> 00:06:00,860
In some of the internal documentation of Facebook and some of the conferences, you'll find this
102
00:06:00,860 --> 00:06:02,780
as a phantom problem.
103
00:06:02,780 --> 00:06:06,180
I called it as ghost for no reason, but there was a problem.
104
00:06:06,180 --> 00:06:07,740
So here was the chat icon.
105
00:06:07,740 --> 00:06:10,660
Here was a chat that was written like this.
106
00:06:10,660 --> 00:06:11,780
And there are a couple of ways.
107
00:06:11,780 --> 00:06:16,940
If you click on the notification itself, then it opens up a pop up box here at the bottom.
108
00:06:16,940 --> 00:06:20,180
If you click on the chat, it opens up the entire box here.
109
00:06:20,180 --> 00:06:24,860
But if you have opened this from the notification, sometimes what happened is not all the times,
110
00:06:24,860 --> 00:06:29,500
sometimes this icon here which says one or maybe that says three because there are three
111
00:06:29,500 --> 00:06:30,500
messages.
112
00:06:30,500 --> 00:06:31,500
This doesn't get go away.
113
00:06:31,500 --> 00:06:33,020
I have read the message here.
114
00:06:33,020 --> 00:06:34,020
So this should go away.
115
00:06:34,020 --> 00:06:37,220
There should not be any notification symbol here.
116
00:06:37,220 --> 00:06:42,140
If I've directly read it in the chat, sometimes it just appears here and it doesn't go away.
117
00:06:42,140 --> 00:06:43,140
That was the problem.
118
00:06:43,140 --> 00:06:44,940
There was no consistency in the UI.
119
00:06:44,940 --> 00:06:48,540
And this was a common problem which was getting a feedback, feedback again and again in the
120
00:06:48,540 --> 00:06:51,380
Facebook that why this message is being shown here.
121
00:06:51,380 --> 00:06:52,580
I have read the message.
122
00:06:52,580 --> 00:06:53,820
I'm aware of it.
123
00:06:53,820 --> 00:06:55,340
It's still not gone.
124
00:06:55,340 --> 00:06:58,100
So this is the common problem that Facebook was facing.
125
00:06:58,100 --> 00:07:02,900
And in order to solve that problem, a team was engaged, especially Dan, that I really
126
00:07:02,900 --> 00:07:04,180
want to solve this problem.
127
00:07:04,180 --> 00:07:06,260
And that is how the React was born.
128
00:07:06,260 --> 00:07:09,780
And the first time the React was not taken well by the community.
129
00:07:09,780 --> 00:07:14,540
But eventually, eventually people adopted React and even started to loving it instead
130
00:07:14,540 --> 00:07:15,540
of hating it.
131
00:07:15,540 --> 00:07:19,900
Now, the problem that we are facing here is actually a two coupled problem.
132
00:07:19,900 --> 00:07:21,280
The first is the state.
133
00:07:21,280 --> 00:07:25,260
By the term state, I mean all the variables in JavaScript.
134
00:07:25,260 --> 00:07:29,220
All these variables like should I show the notification or not or should the number should
135
00:07:29,220 --> 00:07:31,780
say one or the number should say five.
136
00:07:31,780 --> 00:07:36,220
All these things are actually maintained in the JavaScript world.
137
00:07:36,220 --> 00:07:40,060
And all the updation of the UI is actually handled by DOM.
138
00:07:40,060 --> 00:07:44,780
So UI is updated via the DOM while all of your variables are actually in the state in
139
00:07:44,780 --> 00:07:46,180
the JavaScript.
140
00:07:46,180 --> 00:07:50,660
So the problem that it was there was actually the problem of syncing.
141
00:07:50,660 --> 00:07:54,100
There was no sync between JavaScript and the DOM.
142
00:07:54,100 --> 00:08:01,220
So React came into the picture which actually gave a consistent way of updating your DOM
143
00:08:01,740 --> 00:08:04,180
and that is the only superpower of React.
144
00:08:04,180 --> 00:08:06,740
It gives you consistency in the UI.
145
00:08:06,740 --> 00:08:08,500
And that is why people loved React.
146
00:08:08,500 --> 00:08:14,540
When the React came in, the first early adopter outside of the Facebook was Khan Academy,
147
00:08:14,540 --> 00:08:15,540
a very well-known name.
148
00:08:15,540 --> 00:08:18,420
If you are in the education domain, it's a very well-known name.
149
00:08:18,420 --> 00:08:22,340
So they adopted it and a couple of talks were there.
150
00:08:22,340 --> 00:08:27,220
And in that Khan Academy tech team said that, hey, React is not an amazing library, which
151
00:08:27,220 --> 00:08:29,100
it was not at that time.
152
00:08:29,100 --> 00:08:34,419
But hey, it gives so much amazing consistency in building the application that we kind of
153
00:08:34,419 --> 00:08:35,619
love it.
154
00:08:35,620 --> 00:08:40,659
And that's when after this Unsplash picked it up, a couple of other big corporate giants
155
00:08:40,659 --> 00:08:43,819
picked up the library and says it's fun to actually work in the React.
156
00:08:43,820 --> 00:08:46,540
And of course, React was not perfect at that time.
157
00:08:46,540 --> 00:08:48,500
There was a lot of class-based component.
158
00:08:48,500 --> 00:08:49,500
Eventually it got updated.
159
00:08:49,500 --> 00:08:51,660
A lot of things happened, which we are going to see.
160
00:08:51,660 --> 00:08:52,660
But this is how it learned.
161
00:08:52,660 --> 00:08:57,100
Again, one more time, I would say do not learn React if you don't know how the JavaScript
162
00:08:57,100 --> 00:08:59,140
works, all those basics.
163
00:08:59,140 --> 00:09:02,980
And again, also don't learn it if you don't know how the DOM works or the document object
164
00:09:02,980 --> 00:09:03,980
model.
165
00:09:03,980 --> 00:09:07,980
By the way, I do have a video on my YouTube channel about how the browser inner working
166
00:09:07,980 --> 00:09:08,980
works.
167
00:09:08,980 --> 00:09:12,740
I do have a playlist of inner working, which will help you to understand how the browser
168
00:09:12,740 --> 00:09:17,380
actually works, how the DOM is being painted, HTML, CSS, JavaScript, and whatnot.
169
00:09:17,380 --> 00:09:18,660
At least watch that video.
170
00:09:18,660 --> 00:09:20,220
It will be very fruitful for you.
171
00:09:20,220 --> 00:09:24,580
So moving that, assuming now that you know about how to learn React and you're confident
172
00:09:24,580 --> 00:09:25,580
about it.
173
00:09:25,660 --> 00:09:27,620
There are a couple of ways of how you can learn the React.
174
00:09:27,620 --> 00:09:31,340
There are two processes of learning that, in fact, this pedagogy applies for almost
175
00:09:31,340 --> 00:09:32,340
everything that I teach.
176
00:09:32,340 --> 00:09:37,360
There are two ways you can go directly in depth or you can just start building the projects.
177
00:09:37,360 --> 00:09:39,220
You might be thinking, I need both.
178
00:09:39,220 --> 00:09:40,260
I want to go in depth.
179
00:09:40,260 --> 00:09:42,140
I want to see the project as well.
180
00:09:42,140 --> 00:09:45,700
Yes, you do both, but actually you need to start somewhere.
181
00:09:45,700 --> 00:09:50,220
And you can start either by directly going in depth or by directly making the projects.
182
00:09:50,220 --> 00:09:55,020
So when you go directly in depth, you come to the words like babble or you come to the
183
00:09:55,020 --> 00:10:01,500
words like React, fiber, virtual DOM, diffing algorithm, hydration, tree shaking, all these
184
00:10:01,500 --> 00:10:02,540
concepts.
185
00:10:02,540 --> 00:10:08,200
And you first understand the concept and then you try to make projects like to-dos and calculators
186
00:10:08,200 --> 00:10:10,380
and background changers and whatnot.
187
00:10:10,380 --> 00:10:11,980
And you apply these concepts.
188
00:10:11,980 --> 00:10:14,780
Another approach is let's just directly build the projects.
189
00:10:14,780 --> 00:10:17,900
Let's just say we build a background changer or a calculator.
190
00:10:17,900 --> 00:10:19,540
And via this, we learn each topic.
191
00:10:19,540 --> 00:10:23,820
For example, in to-do, we learned about the virtual DOM maybe or calculator, maybe the
192
00:10:23,820 --> 00:10:25,080
diffing algorithm.
193
00:10:25,080 --> 00:10:30,660
So each project teaches you one or the other concept and then the same thing happens.
194
00:10:30,660 --> 00:10:34,900
The project, the approach that I'm taking in this entire series is actually by making
195
00:10:34,900 --> 00:10:36,620
directly the project.
196
00:10:36,620 --> 00:10:40,140
First I'll make the project and then I'll take you into the behind the scene.
197
00:10:40,140 --> 00:10:41,140
Hey, what just happened?
198
00:10:41,140 --> 00:10:42,140
How we did that?
199
00:10:42,140 --> 00:10:43,140
How we didn't do that?
200
00:10:43,140 --> 00:10:44,140
How it worked?
201
00:10:44,140 --> 00:10:45,140
How it didn't work?
202
00:10:45,140 --> 00:10:46,140
And all of that.
203
00:10:46,140 --> 00:10:50,980
I think that's a much more fun project based approach, a much more fun approach, because
204
00:10:50,980 --> 00:10:54,220
it actually keeps you engaged and then says, yeah, that hey, we are building something
205
00:10:54,220 --> 00:10:55,820
and something is working on the screen.
206
00:10:55,820 --> 00:10:58,140
And now let's see that how it actually worked.
207
00:10:58,140 --> 00:11:01,900
So I'll be using this approach, but again, there is no right and wrong here.
208
00:11:01,900 --> 00:11:04,940
If you're learning somebody who's teaching you directly in depth, that's also good.
209
00:11:04,940 --> 00:11:06,300
No problem in there.
210
00:11:06,300 --> 00:11:10,300
One thing that you're going to commonly see is React as a library.
211
00:11:10,300 --> 00:11:12,700
So I do have a common words for them.
212
00:11:12,700 --> 00:11:16,300
You'll also hear that some things are frameworks, some things are library.
213
00:11:16,300 --> 00:11:20,740
I call framework as something which is military.
214
00:11:20,740 --> 00:11:25,180
And library as something like who is somebody, a cool dude.
215
00:11:25,180 --> 00:11:27,020
What do I mean by that?
216
00:11:27,020 --> 00:11:31,460
By the term framework and by the term military, it means the rules are very strict.
217
00:11:31,460 --> 00:11:33,220
In the framework, rules are very strict.
218
00:11:33,220 --> 00:11:37,380
The naming convention, the way how the file name should be, the way the file should be
219
00:11:37,380 --> 00:11:42,260
placed in a particular folder, the way how the data is going to coming in and going out.
220
00:11:42,260 --> 00:11:45,600
All of this are very, very strict in the framework.
221
00:11:45,600 --> 00:11:48,280
In the library, it's like cool dude.
222
00:11:48,280 --> 00:11:50,560
You wear the cap front side, it's good.
223
00:11:50,560 --> 00:11:53,400
You wear the cap behind the side.
224
00:11:53,400 --> 00:11:54,400
It's all good.
225
00:11:54,400 --> 00:11:55,400
So the cool dude.
226
00:11:55,400 --> 00:11:56,840
But again, it's not like they don't have any rules.
227
00:11:56,840 --> 00:12:00,440
Library also do have certain rules, but they're not that strict of a framework.
228
00:12:00,440 --> 00:12:04,440
So yes, React is a library, and that makes it really easy because it's not really that
229
00:12:04,440 --> 00:12:05,440
much difficult.
230
00:12:05,440 --> 00:12:06,680
It's not a big library.
231
00:12:06,680 --> 00:12:11,040
You can finish it up pretty quickly and easily once you understand the basic core concept.
232
00:12:11,040 --> 00:12:15,200
The topics that you're going to learn in the React first are core of React.
233
00:12:15,200 --> 00:12:19,320
You really want to understand how the React works, how the file structure works, the core
234
00:12:19,320 --> 00:12:24,640
concept behind it, how the state or the UI manipulation works in this.
235
00:12:24,640 --> 00:12:26,480
What is JSX in the first place?
236
00:12:26,480 --> 00:12:28,360
What does it mean by that?
237
00:12:28,360 --> 00:12:31,960
What does it do beneficial for us and all of these concepts?
238
00:12:31,960 --> 00:12:35,280
Once you've done this, then you jump into the component reusability concept.
239
00:12:35,280 --> 00:12:39,600
And again, it's not a proprietary concept of the React itself.
240
00:12:39,600 --> 00:12:42,960
Component reusability was there in the early days of PHP as well.
241
00:12:42,960 --> 00:12:45,080
It still is in other places as well.
242
00:12:45,080 --> 00:12:46,760
But React makes it easy.
243
00:12:46,760 --> 00:12:50,760
And once you understand the component reusability concept, you automatically are introduced
244
00:12:50,760 --> 00:12:54,560
to the props, which is a short for properties.
245
00:12:54,560 --> 00:13:00,240
The same JavaScript object, the same key value, those exactly same.
246
00:13:00,240 --> 00:13:02,040
So we understand about those props.
247
00:13:02,040 --> 00:13:04,400
Also we learn how the changes are propagated.
248
00:13:04,400 --> 00:13:10,720
So in the React, what we want to do is we don't want to use the classic JavaScript like
249
00:13:10,720 --> 00:13:13,520
get element by ID, query selector and whatnot.
250
00:13:13,520 --> 00:13:18,280
We just want to manipulate the variable automatically react will think on its own and will update
251
00:13:18,280 --> 00:13:20,440
my UI on the web page.
252
00:13:20,440 --> 00:13:25,720
For this, you learn about the hooks that how these hooks are responsible for updating my
253
00:13:25,720 --> 00:13:29,280
UI or my DOM on the web page, I'll just update the variables.
254
00:13:29,280 --> 00:13:31,760
I don't care about how the UI is being updated.
255
00:13:31,760 --> 00:13:34,120
That's where you are actually introduced to the hooks.
256
00:13:34,120 --> 00:13:36,640
That's the basics of it, at least.
257
00:13:36,640 --> 00:13:37,640
This is it.
258
00:13:37,640 --> 00:13:38,640
This is it.
259
00:13:38,640 --> 00:13:39,640
This is your react.
260
00:13:40,240 --> 00:13:46,080
But hey, we haven't talked about the URLs, we haven't talked about the routers, we haven't
261
00:13:46,080 --> 00:13:47,920
talked about the state management.
262
00:13:47,920 --> 00:13:51,880
The truth is you shouldn't be you shouldn't be all that we are covering that in the series,
263
00:13:51,880 --> 00:13:57,620
but you shouldn't be because till this part, this is only your react, nothing else.
264
00:13:57,620 --> 00:14:01,200
If you really want to have additional feature, then comes other libraries.
265
00:14:01,200 --> 00:14:03,540
For example, React has no built in router.
266
00:14:03,540 --> 00:14:09,740
But if you really want to use router, you have to use something known as react router
267
00:14:09,740 --> 00:14:10,740
DOM.
268
00:14:10,740 --> 00:14:16,060
So yes, we install another package, since you're learning about another package, that
269
00:14:16,060 --> 00:14:21,140
cannot be called as core react knowledge, you are going a little outside of your realm.
270
00:14:21,140 --> 00:14:26,820
And thus, I call it as additional add on to reacts very close to the react.
271
00:14:26,820 --> 00:14:27,820
But they are add ons.
272
00:14:27,820 --> 00:14:28,820
They're not react.
273
00:14:28,820 --> 00:14:33,420
Similarly, we do have a state management thing react didn't used to have any state management
274
00:14:33,440 --> 00:14:34,420
in the earlier days.
275
00:14:34,420 --> 00:14:35,860
Yes, it was introduced later on.
276
00:14:35,860 --> 00:14:41,300
But in the early days, we just had the Redux, Redux, again, separate package, separate
277
00:14:41,300 --> 00:14:47,040
library, Redux can be used with react, Redux can be used with view can be used with swelt.
278
00:14:47,040 --> 00:14:48,760
So it's a standalone library.
279
00:14:48,760 --> 00:14:51,500
But yes, we still focus and learn a lot about Redux.
280
00:14:51,500 --> 00:14:55,500
And these days, we learn about the another abstraction of the Redux, which is known as
281
00:14:55,500 --> 00:14:57,740
Redux toolkit, which is cool.
282
00:14:57,740 --> 00:14:59,720
So yes, we'll be going through with that.
283
00:14:59,720 --> 00:15:03,760
Another such similar state management library is a stand quite popular, I do have a series
284
00:15:03,760 --> 00:15:06,040
on my channel on the stand as well.
285
00:15:06,040 --> 00:15:07,040
So quite amazing.
286
00:15:07,040 --> 00:15:11,760
So you can learn that but eventually react realize, of course, they realized it before
287
00:15:11,760 --> 00:15:15,520
the stand actually, that hey, we need to do something about the state management, it's
288
00:15:15,520 --> 00:15:16,520
getting out of the hands.
289
00:15:16,520 --> 00:15:20,960
So they introduce something known as context API, which is again, kind of a hooks, when
290
00:15:20,960 --> 00:15:24,600
we learn about the hooks, you'll automatically get and understand that part.
291
00:15:24,600 --> 00:15:29,040
So you'll get to know that so only context API is something that is not additional, but
292
00:15:29,040 --> 00:15:30,520
it was introduced later.
293
00:15:30,520 --> 00:15:34,960
Again, some people also tends to learn about the class based approach, when the react was
294
00:15:34,960 --> 00:15:39,480
introduced in the very early days, everything was class based.
295
00:15:39,480 --> 00:15:44,740
They got inspired a lot by the swift, not swift, I would say purely by iOS development.
296
00:15:44,740 --> 00:15:49,040
So they used a lot of things like component did mount component unmount component about
297
00:15:49,040 --> 00:15:53,400
to mount component will mount, I don't think so there was about my component will mount,
298
00:15:53,400 --> 00:15:54,480
you get the idea.
299
00:15:54,480 --> 00:15:56,000
So a lot of things were there.
300
00:15:56,000 --> 00:15:57,800
And this is known as legacy code.
301
00:15:57,800 --> 00:16:01,880
So if some company is still using it, hey, why are you using class based component these
302
00:16:01,880 --> 00:16:04,640
days, it's been so gone, so long gone.
303
00:16:04,640 --> 00:16:07,040
But I'll still give you some brief idea about that.
304
00:16:07,040 --> 00:16:08,040
Not really that important.
305
00:16:08,040 --> 00:16:11,320
But if you wish you can spend some time in learning about that.
306
00:16:11,320 --> 00:16:13,360
These days, everything is functional and react.
307
00:16:13,360 --> 00:16:17,280
The documentation says that, hey, just drop the class based approach, use the functional
308
00:16:17,280 --> 00:16:18,280
approach.
309
00:16:18,280 --> 00:16:19,280
That's how we are going.
310
00:16:19,280 --> 00:16:23,720
And it's not like they started just a couple of years ago, it's long gone, it's long gone.
311
00:16:23,720 --> 00:16:27,520
And on top of that, one more additional part of it is bass apps.
312
00:16:27,840 --> 00:16:34,480
Like back end as a service, one prominent name, which I'm a big fan these days is actually
313
00:16:34,480 --> 00:16:35,480
app right.
314
00:16:35,480 --> 00:16:40,320
Are there a couple of others as well, but being app right being open source amazing,
315
00:16:40,320 --> 00:16:41,480
it provides you entire back end.
316
00:16:41,480 --> 00:16:46,800
So you can build your social media apps, ecommerce apps, Twitter, Twitter, clone threads, clone,
317
00:16:46,800 --> 00:16:48,280
whatever you wish in just react.
318
00:16:48,280 --> 00:16:52,920
But technically, it's not pure just react react to just handling the API calls and sending
319
00:16:52,920 --> 00:16:54,400
data receiving data.
320
00:16:54,400 --> 00:16:58,080
The majority of the heavy lifting is done by these bass back end as a service, you might
321
00:16:58,080 --> 00:16:59,360
have heard of those names as well.
322
00:16:59,360 --> 00:17:01,920
So let me know if you know some of these names.
323
00:17:01,920 --> 00:17:06,760
So again, once you're done with the react, then what about after react, see, if you think
324
00:17:06,760 --> 00:17:11,119
that hey, react is not for me, I'm not enjoying the front end part or the front end engineering,
325
00:17:11,119 --> 00:17:14,199
you could have directly jumped from the JavaScript to the back end part.
326
00:17:14,200 --> 00:17:18,599
But since you're already here, I assume that you might be interested in learning the react
327
00:17:18,599 --> 00:17:19,599
as well.
328
00:17:19,599 --> 00:17:23,879
So what should I learn after mastering the react, I have handled a good amount of APIs.
329
00:17:23,880 --> 00:17:26,520
And now I want to build some complex apps and whatnot.
330
00:17:26,520 --> 00:17:31,040
So in that case, you can also go ahead and try one of my open source project, which is
331
00:17:31,040 --> 00:17:35,080
known as free API dot app.
332
00:17:35,080 --> 00:17:40,360
It's a fantastic library, if you want to push yourself to handle some of the complex react
333
00:17:40,360 --> 00:17:45,680
changes, or complex react full blown application, what we did is we wrote the entire back end
334
00:17:45,680 --> 00:17:51,360
for these applications, complex ecommerce, complex social media, complex chat app handle
335
00:17:51,360 --> 00:17:53,640
just the react part of it just the front end part of it.
336
00:17:53,640 --> 00:17:56,360
So check out the free API dot app in there.
337
00:17:56,360 --> 00:17:58,800
But again, react has some of the drawbacks.
338
00:17:58,800 --> 00:18:03,440
That's why people actually switched from react as a library to a full blown framework.
339
00:18:03,440 --> 00:18:05,040
What are these problems?
340
00:18:05,040 --> 00:18:06,040
React don't have SEOs.
341
00:18:06,040 --> 00:18:09,800
I'll walk you through that why the SEOs are problematic and react.
342
00:18:09,800 --> 00:18:15,480
It also allows browser to do a lot of rendering browser does so much of lifting.
343
00:18:15,480 --> 00:18:18,160
React ships the entire JavaScript to your browser.
344
00:18:18,160 --> 00:18:22,760
Now it executes in the browser, then it paints the entire picture of HTML CSS.
345
00:18:22,760 --> 00:18:26,600
So there's a lot of work with the JavaScript and your browser does so obviously, in some
346
00:18:26,600 --> 00:18:28,880
cases, it's not really ideal.
347
00:18:28,880 --> 00:18:30,120
That's one of the drawbacks.
348
00:18:30,120 --> 00:18:35,880
What we want is some things which actually renders react on the server itself, and sends
349
00:18:35,880 --> 00:18:38,560
the browser only HTML CSS part of it.
350
00:18:38,560 --> 00:18:42,360
And that's what a lot of things even this is coming to the core react of it, the server
351
00:18:42,360 --> 00:18:45,000
side rendering, but we'll talk about it later on.
352
00:18:45,000 --> 00:18:46,480
Also there is no routing in the reactor.
353
00:18:46,480 --> 00:18:51,720
So we can either use react router DOM, or other option is use a full blown framework.
354
00:18:51,720 --> 00:18:53,600
There's no shortage of these framework.
355
00:18:53,600 --> 00:18:58,760
In fact, I would not hesitate to say a new framework in the JavaScript drops every week.
356
00:18:58,760 --> 00:19:03,600
Some people would say every day, but I'll still be saying every week.
357
00:19:03,600 --> 00:19:04,600
So there is Next.js.
358
00:19:04,600 --> 00:19:09,240
I do have a lot of content on my channel on free code camp on the Next.js.
359
00:19:09,240 --> 00:19:10,240
I created them.
360
00:19:10,240 --> 00:19:11,240
I loved it.
361
00:19:11,240 --> 00:19:13,040
But that's not like Next.js.
362
00:19:13,040 --> 00:19:15,120
There's other options like Gatsby, Remix.
363
00:19:15,120 --> 00:19:16,320
A lot of options are there.
364
00:19:16,320 --> 00:19:17,720
So this is basic.
365
00:19:17,720 --> 00:19:21,960
So this is your entire roadmap of how you should be learning React, or how you should
366
00:19:21,960 --> 00:19:22,960
be introduced to it.
367
00:19:22,960 --> 00:19:27,300
Or at least you now know the basics of, OK, am I ready for this react, or should I focus
368
00:19:27,300 --> 00:19:31,000
more on JavaScript, or can I go just back into this one.
369
00:19:31,000 --> 00:19:34,680
After this, we'll be directly jumping into the code part, and we'll be starting our React
370
00:19:34,680 --> 00:19:35,680
journey.
371
00:19:35,680 --> 00:19:37,000
So this is pretty amazing.
372
00:19:37,000 --> 00:19:39,760
And I think you'll be enjoying this series quite a lot.
373
00:19:39,760 --> 00:19:43,480
I'm definitely going to enjoy teaching this entire React to you.
374
00:19:43,480 --> 00:19:44,680
So get ready, buckle up.
375
00:19:44,680 --> 00:19:46,200
A lot of projects are about to come.
376
00:19:46,200 --> 00:19:49,800
We'll be going dive into the lot of React fun stuff.
377
00:19:49,800 --> 00:19:50,800
And hit that subscribe.
378
00:19:50,800 --> 00:19:54,480
And in case you are enjoying this series, please, please, please do share it on the
379
00:19:54,480 --> 00:19:55,480
LinkedIn.
380
00:19:55,480 --> 00:19:56,480
Tag me.
381
00:19:56,480 --> 00:19:58,480
That's one of the only motivation that I need right now.
382
00:19:58,480 --> 00:20:00,320
I would be really, really happy with that.
383
00:20:00,320 --> 00:20:02,000
So that's it for this video.
384
00:20:02,000 --> 00:20:06,400
Let's catch up in the next one.
385
00:20:06,400 --> 00:20:07,400
Hey there, everyone.
386
00:20:07,400 --> 00:20:09,960
Hitesh here, back again with another video.
387
00:20:09,960 --> 00:20:12,480
And welcome to this React series.
388
00:20:12,480 --> 00:20:16,720
This probably would be your second or maybe third video in the React itself.
389
00:20:16,720 --> 00:20:19,160
And this video is much more crucial than the last one.
390
00:20:19,160 --> 00:20:24,280
In the last one, we saw that how we can have a basic roadmap to understand and learn React.
391
00:20:24,280 --> 00:20:26,800
In this one, we'll be actually getting some hands down.
392
00:20:26,800 --> 00:20:28,320
Yes, I walked you through that.
393
00:20:28,320 --> 00:20:30,640
We'll be walking through with the project approach.
394
00:20:30,640 --> 00:20:33,000
But it's not going to be just the project approach.
395
00:20:33,000 --> 00:20:38,040
I'll be walking you through with time to time in depth how React works so that you can develop
396
00:20:38,040 --> 00:20:41,280
a mindset of how to work with the React ecosystem.
397
00:20:41,280 --> 00:20:43,240
That's really the crucial part of it.
398
00:20:43,240 --> 00:20:46,800
In this video, I will walk you through with all the tools that are required, how you can
399
00:20:46,800 --> 00:20:50,160
create a React project, how does a React project looks like.
400
00:20:50,160 --> 00:20:52,640
Because by default, a React project is a little bit clumsy.
401
00:20:52,640 --> 00:20:54,880
There is too many files involved in it.
402
00:20:54,880 --> 00:21:00,400
Once we understand that what files does basically what job, it will be much, much easier for
403
00:21:00,400 --> 00:21:01,400
us.
404
00:21:01,400 --> 00:21:05,600
So this is going to be your official first start journey and all the tools, all the sets
405
00:21:05,600 --> 00:21:07,960
that we require to work with the React.
406
00:21:07,960 --> 00:21:08,960
Don't worry.
407
00:21:08,960 --> 00:21:10,160
It's going to be a hands on journey.
408
00:21:10,160 --> 00:21:12,160
It's going to be a hand holding journey.
409
00:21:12,160 --> 00:21:14,240
You're going to be enjoying this for sure.
410
00:21:14,240 --> 00:21:15,440
That's my promise.
411
00:21:15,440 --> 00:21:18,600
So the first thing that we're going to do is share my screen.
412
00:21:18,600 --> 00:21:22,640
So let me go ahead and share my screen so that I can walk you through with the stuff.
413
00:21:22,640 --> 00:21:25,200
We'll come back onto the GitHub a little bit later.
414
00:21:25,200 --> 00:21:28,620
First of all, let's just explore all the things that we're going to require.
415
00:21:28,620 --> 00:21:30,160
The first one being Node.js.
416
00:21:30,160 --> 00:21:34,480
We are not going to move anywhere forward without the Node.js.
417
00:21:34,480 --> 00:21:38,920
It's a little surprising that even the front end doesn't move without the Node.js these
418
00:21:38,920 --> 00:21:39,920
days.
419
00:21:39,920 --> 00:21:44,040
If you have any version, version 18 or version 20, that's totally fine.
420
00:21:44,040 --> 00:21:45,720
It's not really a difficult process.
421
00:21:45,720 --> 00:21:47,640
Get it for Windows, Mac, Linux.
422
00:21:47,640 --> 00:21:48,640
Doesn't really matter.
423
00:21:48,640 --> 00:21:50,240
You just need to install it.
424
00:21:50,240 --> 00:21:53,160
The specific version also is not that much important.
425
00:21:53,160 --> 00:21:58,040
You can have the LTS version, long term support for the version 18, or you can have the latest
426
00:21:58,040 --> 00:22:00,200
and the bleeding edge version, which is 20.
427
00:22:00,200 --> 00:22:01,640
That is also fine.
428
00:22:01,640 --> 00:22:06,080
In my case, if I open up my console and I show you that I do have, once you actually
429
00:22:06,080 --> 00:22:12,120
install it, you'll be having a Node-V as an option to find out what version of Node
430
00:22:12,120 --> 00:22:13,880
is installed in your system.
431
00:22:13,880 --> 00:22:18,720
Mine happens to be in between of 18 and 20, but I'll update it very soon.
432
00:22:18,720 --> 00:22:20,640
As I told you, it really doesn't matter.
433
00:22:20,640 --> 00:22:25,800
As long as something above 18 is there, even 17 is above there, it's totally fine.
434
00:22:25,800 --> 00:22:26,800
It's not going to bother you.
435
00:22:26,800 --> 00:22:30,800
It's not a course on Node.js, but it is required to actually learn React.
436
00:22:30,800 --> 00:22:32,880
So that's the first piece of the puzzle.
437
00:22:32,880 --> 00:22:35,760
The second piece of the puzzle is any code editor.
438
00:22:36,640 --> 00:22:41,480
Everybody seems to be on the VS code, but if you happen to have any other choice of
439
00:22:41,480 --> 00:22:43,440
the code editor, that's also totally fine.
440
00:22:43,440 --> 00:22:44,600
Maybe you are a VIM fan.
441
00:22:44,600 --> 00:22:45,640
That's totally OK.
442
00:22:45,640 --> 00:22:48,200
Maybe still you are rocking the sublime text.
443
00:22:48,200 --> 00:22:51,360
That's also fine, but I'll be using the VS code.
444
00:22:51,360 --> 00:22:54,680
I use it with my own custom theme with the purchased font.
445
00:22:54,680 --> 00:22:55,800
You don't need to do all of this.
446
00:22:55,800 --> 00:22:57,560
That's just a fancy shenanigans.
447
00:22:57,560 --> 00:22:59,560
You don't need to worry about that.
448
00:22:59,560 --> 00:23:01,960
But this is something basic what we have.
449
00:23:01,960 --> 00:23:06,040
Another crucial thing that we need for this is actually React.dev.
450
00:23:06,040 --> 00:23:07,760
You don't need to download anything from it.
451
00:23:07,760 --> 00:23:11,840
It's just a reference point from where we'll be consulting the documentation to
452
00:23:11,840 --> 00:23:13,760
understand the parts of it.
453
00:23:13,760 --> 00:23:15,080
There is another portion of it.
454
00:23:15,080 --> 00:23:16,000
I'll walk you through with that.
455
00:23:16,000 --> 00:23:19,800
But first, let's set up the thing so that you can actually grab all the stuff and
456
00:23:19,800 --> 00:23:20,920
things like that.
457
00:23:20,920 --> 00:23:25,480
So what I'll be doing is let's first go on to this.
458
00:23:25,480 --> 00:23:27,560
So I do have a folder here.
459
00:23:27,560 --> 00:23:30,880
I'm actually going to create this one is for my English channel.
460
00:23:30,960 --> 00:23:36,440
So I'll be saying that, hey, this is going to be a React course for 2023.
461
00:23:36,440 --> 00:23:39,280
So I'll be saying React 2023.
462
00:23:39,280 --> 00:23:42,400
Basically, I'll probably React course.
463
00:23:42,400 --> 00:23:43,800
React course.
464
00:23:43,800 --> 00:23:45,200
Yeah, that's a React course.
465
00:23:45,200 --> 00:23:49,320
I'll be giving you the entire description where you can download on the code files
466
00:23:49,320 --> 00:23:50,680
and everything that you are having.
467
00:23:50,680 --> 00:23:52,480
So no worries on that part.
468
00:23:52,480 --> 00:23:56,560
And the next thing that we'll be having is just open this up into any code editor.
469
00:23:56,560 --> 00:24:00,280
So I happen to have a code editor with me, which is VS code.
470
00:24:00,280 --> 00:24:02,720
This is how it looks like when you install this.
471
00:24:02,720 --> 00:24:05,360
All you have to do is drag and drop this react up here.
472
00:24:05,360 --> 00:24:06,160
That's it.
473
00:24:06,160 --> 00:24:07,760
That's the step one.
474
00:24:07,760 --> 00:24:11,880
Once we have this, let's go ahead and keep it up there.
475
00:24:11,880 --> 00:24:13,760
We'll be creating a new folder into this one.
476
00:24:13,760 --> 00:24:16,240
Let's just call this one as readme.md.
477
00:24:16,240 --> 00:24:19,200
MD is a markdown syntax, which has a special way.
478
00:24:19,200 --> 00:24:23,000
If you just create a .txt file, that's totally OK as well.
479
00:24:23,000 --> 00:24:25,320
No need to worry at all in this case.
480
00:24:25,320 --> 00:24:28,000
Now, I'll be just putting up a simple hash.
481
00:24:28,000 --> 00:24:29,360
That means a heading.
482
00:24:29,360 --> 00:24:36,240
And I'll be saying simply start of React.js on main channel.
483
00:24:36,240 --> 00:24:37,560
I do have a couple of other channels.
484
00:24:37,560 --> 00:24:40,600
Not couple, but one other channel, which is in the local language.
485
00:24:40,600 --> 00:24:41,840
So I'll be just saving this.
486
00:24:41,840 --> 00:24:45,200
And I can just click on this button, which gives me a preview that this
487
00:24:45,200 --> 00:24:46,080
is how it looks like.
488
00:24:46,080 --> 00:24:47,600
So as I told you, it's nothing.
489
00:24:47,600 --> 00:24:49,000
It's just a text file.
490
00:24:49,000 --> 00:24:50,480
Nothing more than that.
491
00:24:50,480 --> 00:24:53,440
Why we are creating this is because I want to push all of the code
492
00:24:53,440 --> 00:24:55,480
onto the GitHub as well.
493
00:24:55,480 --> 00:24:57,600
So I'll be just going up here on the GitHub.
494
00:24:57,600 --> 00:24:58,880
In case you know GitHub, that's great.
495
00:24:58,880 --> 00:25:01,920
If you don't know, this is where you need to download all the code files
496
00:25:01,920 --> 00:25:03,520
that I'm creating along with you.
497
00:25:03,520 --> 00:25:06,440
You can download all of them and check out how the course progressed
498
00:25:06,440 --> 00:25:08,600
and everything from here.
499
00:25:08,600 --> 00:25:09,560
Just click on this.
500
00:25:09,560 --> 00:25:12,200
I want to create a new repository.
501
00:25:12,200 --> 00:25:17,840
And I'll be calling this one as React dash English.
502
00:25:17,840 --> 00:25:23,200
And it's really, really funny to see that we have a React and dash English
503
00:25:23,200 --> 00:25:27,160
after this because that's how it is.
504
00:25:27,160 --> 00:25:28,800
I have a couple of other channels.
505
00:25:28,800 --> 00:25:30,000
I'll be calling this as public.
506
00:25:30,000 --> 00:25:30,680
That's fine.
507
00:25:30,680 --> 00:25:42,760
And we'll be calling this one as a fun React series in future.
508
00:25:42,760 --> 00:25:44,560
Maybe I don't know why we kept it.
509
00:25:44,560 --> 00:25:46,280
I don't want to add any read me or something.
510
00:25:46,280 --> 00:25:48,840
Just keep it as public or you can keep it as private as well.
511
00:25:48,840 --> 00:25:51,440
I need to keep it public so that I can give it to you.
512
00:25:51,440 --> 00:25:52,840
Create the repository.
513
00:25:52,840 --> 00:25:57,400
And then the repository will allow you to actually a few set of commands
514
00:25:57,400 --> 00:25:58,880
that you can initialize the gate.
515
00:25:58,880 --> 00:26:00,240
You can add the read me.
516
00:26:00,240 --> 00:26:02,600
You can make a commit, change the branch.
517
00:26:02,600 --> 00:26:05,920
And basically, you have to add a remote origin and push it
518
00:26:05,920 --> 00:26:08,520
so that all the code can get onto the GitHub.
519
00:26:08,520 --> 00:26:10,680
And later on, anybody can see that.
520
00:26:10,680 --> 00:26:12,120
Let's run all these commands.
521
00:26:12,120 --> 00:26:14,640
So I can just open up my inbuilt terminal.
522
00:26:14,640 --> 00:26:16,920
By the way, I can just click on the terminal, new terminal,
523
00:26:16,920 --> 00:26:18,320
or I can just click on View.
524
00:26:18,320 --> 00:26:21,520
And somewhere here, the terminal is, I don't know where.
525
00:26:21,520 --> 00:26:22,680
Yeah, here it is, terminal.
526
00:26:22,680 --> 00:26:24,880
Or you can use the shortcut.
527
00:26:24,880 --> 00:26:26,840
Control, tilde, whatever is your shortcut.
528
00:26:26,840 --> 00:26:29,040
That's the one you can use.
529
00:26:29,040 --> 00:26:31,200
I'll just go ahead and say git init.
530
00:26:31,200 --> 00:26:33,240
That initializes a git repository.
531
00:26:33,240 --> 00:26:36,760
And then I'll just go ahead and say git add.
532
00:26:36,760 --> 00:26:37,960
I want to add everything.
533
00:26:37,960 --> 00:26:38,840
There's just one file.
534
00:26:38,840 --> 00:26:40,920
Or I can name the file as read me.
535
00:26:40,920 --> 00:26:42,080
I'll just add this one.
536
00:26:42,080 --> 00:26:45,200
After that, you can again consult to the documentation
537
00:26:45,200 --> 00:26:47,800
because all the commands are here.
538
00:26:47,800 --> 00:26:49,440
Then the next step is git commit.
539
00:26:49,440 --> 00:26:52,360
So I'll just commit with a message that
540
00:26:52,360 --> 00:26:58,000
says start of React series so that later on I
541
00:26:58,000 --> 00:27:00,480
can push all the code up there.
542
00:27:00,480 --> 00:27:02,640
Also, I would love to change the branch.
543
00:27:02,640 --> 00:27:03,680
Also, there is a mention.
544
00:27:03,680 --> 00:27:05,320
There is a big, big GitHub thread
545
00:27:05,320 --> 00:27:07,200
about why we should call it as main, not
546
00:27:07,200 --> 00:27:09,000
as a master and slave.
547
00:27:09,000 --> 00:27:10,400
But again, we are not going to go
548
00:27:10,400 --> 00:27:11,720
into that much of the story.
549
00:27:11,720 --> 00:27:17,360
But I'll just say git branch dash capital M.
550
00:27:17,360 --> 00:27:19,880
I'll call this one as main so the branch has changed.
551
00:27:19,880 --> 00:27:21,960
Then I don't remember this, so I'll just
552
00:27:21,960 --> 00:27:22,840
copy and paste this.
553
00:27:22,840 --> 00:27:25,320
This is basically a link to repository.
554
00:27:25,320 --> 00:27:28,320
Since my GitHub is already configured with my account
555
00:27:28,320 --> 00:27:31,200
and all the SSH keys that are required to talk to GitHub,
556
00:27:31,200 --> 00:27:32,880
that's why this command will run.
557
00:27:32,880 --> 00:27:34,880
Otherwise, this will not run for you.
558
00:27:34,880 --> 00:27:37,400
So the remote origin is being added.
559
00:27:37,400 --> 00:27:39,880
All I have to do is now push all of my code here.
560
00:27:39,880 --> 00:27:42,240
So as I'll be creating the content,
561
00:27:42,240 --> 00:27:44,120
I'll be pushing it on to this one.
562
00:27:44,120 --> 00:27:46,360
So now everything is gone up there.
563
00:27:46,360 --> 00:27:48,960
Now, if I come back and refresh onto this link, which
564
00:27:48,960 --> 00:27:50,760
I'll be giving you in the description,
565
00:27:50,760 --> 00:27:52,480
as you can see, all the code actually
566
00:27:52,480 --> 00:27:53,720
get pushed to the GitHub.
567
00:27:53,720 --> 00:27:56,480
That's really important for us so that I can share all
568
00:27:56,480 --> 00:27:58,000
the code files with you.
569
00:27:58,000 --> 00:27:59,920
Also, you can check out the commits as well
570
00:27:59,920 --> 00:28:02,520
so that you can find out, OK, this section of the code
571
00:28:02,520 --> 00:28:04,000
was added at that time.
572
00:28:04,000 --> 00:28:06,880
And this was first, this was second, just like that.
573
00:28:06,880 --> 00:28:08,680
OK, so this is basics.
574
00:28:08,680 --> 00:28:10,280
But now we need to go back and see
575
00:28:10,280 --> 00:28:12,840
that how we can actually create a React project.
576
00:28:12,840 --> 00:28:14,240
That's the crucial information.
577
00:28:14,240 --> 00:28:17,640
And all the crucial information comes from the documentation.
578
00:28:17,640 --> 00:28:19,680
I want to learn it, obviously.
579
00:28:19,680 --> 00:28:22,400
So there is a quick start and there is an installation guide.
580
00:28:22,400 --> 00:28:24,120
How can I quick start before installation?
581
00:28:24,120 --> 00:28:26,240
So I'll just click on the installation and see that.
582
00:28:26,240 --> 00:28:28,600
How can I start a new project?
583
00:28:28,600 --> 00:28:31,520
So as I go in to start a new project,
584
00:28:31,520 --> 00:28:34,360
it says if you want to build a new app or website fully
585
00:28:34,360 --> 00:28:36,840
with React, we recommend picking one of the React-powered
586
00:28:36,840 --> 00:28:39,960
frameworks powerful in the community.
587
00:28:39,960 --> 00:28:42,360
So these are updated documents.
588
00:28:42,360 --> 00:28:44,920
And the documentation says that, hey, React
589
00:28:44,920 --> 00:28:47,720
is a very bare-bone library, as I mentioned in the roadmap
590
00:28:47,720 --> 00:28:48,220
as well.
591
00:28:48,220 --> 00:28:51,340
It doesn't do offer too much of the things to you.
592
00:28:51,340 --> 00:28:52,460
It doesn't have routing.
593
00:28:52,460 --> 00:28:55,220
It doesn't have advantages like incremental builds.
594
00:28:55,220 --> 00:28:56,860
There are so many of these things.
595
00:28:56,860 --> 00:28:58,620
So React team recommend that if you really
596
00:28:58,620 --> 00:29:00,540
want to build a full-blown application,
597
00:29:00,540 --> 00:29:04,940
just use some of the frameworks like Gatsby, Next.js,
598
00:29:04,940 --> 00:29:07,140
or any framework's remix, whatever you like to choose.
599
00:29:07,140 --> 00:29:09,500
So they actually mention all of this, that, hey, we're
600
00:29:09,500 --> 00:29:11,460
not biased towards just React, which
601
00:29:11,460 --> 00:29:14,020
is a lot of people are making confusion on the YouTube.
602
00:29:14,020 --> 00:29:16,220
No, they say, hey, you can use Next.js.
603
00:29:16,220 --> 00:29:17,700
You can use remix.
604
00:29:17,700 --> 00:29:18,940
Or you can use Gatsby.
605
00:29:18,940 --> 00:29:21,420
Whatever you like, it's your choice.
606
00:29:21,420 --> 00:29:23,900
But they are saying that, hey, this is for a full-blown
607
00:29:23,900 --> 00:29:25,380
application in the production.
608
00:29:25,380 --> 00:29:27,900
But if you just want to understand what the React is,
609
00:29:27,900 --> 00:29:28,940
it's not going anywhere.
610
00:29:28,940 --> 00:29:31,020
It is still a rock-solid library.
611
00:29:31,020 --> 00:29:33,900
But the way they mention it is a little bit controversial,
612
00:29:33,900 --> 00:29:36,460
that why this was actually mentioned in the deep dive.
613
00:29:36,460 --> 00:29:38,660
If you really want to have a deep dive understanding
614
00:29:38,660 --> 00:29:40,940
of those frameworks, as well as of the React,
615
00:29:40,940 --> 00:29:42,340
you need to have React knowledge.
616
00:29:42,340 --> 00:29:44,020
And you can use it without a framework.
617
00:29:44,020 --> 00:29:45,580
You can check the details.
618
00:29:45,580 --> 00:29:47,500
There are a couple of ways how you can actually go ahead
619
00:29:47,500 --> 00:29:48,780
and take advantage of this.
620
00:29:48,780 --> 00:29:51,140
They mention that, hey, you can actually
621
00:29:51,140 --> 00:29:53,620
use React and React DOM directly.
622
00:29:53,620 --> 00:29:56,060
I'll walk you through how you can do that, as well.
623
00:29:56,060 --> 00:29:57,220
Not walk you through, but I'll give you
624
00:29:57,220 --> 00:29:58,940
a brief reference of it.
625
00:29:58,940 --> 00:30:01,180
And you can use some of the bundlers, as well.
626
00:30:01,180 --> 00:30:04,700
Now, what on the god's green earth are these bundlers?
627
00:30:04,700 --> 00:30:06,220
You can use Vite or Parcel.
628
00:30:06,220 --> 00:30:09,300
Let's try out and test out what is this Vite.
629
00:30:09,300 --> 00:30:12,140
So Vite actually allows you to have,
630
00:30:12,140 --> 00:30:13,700
you can click on the Get Started Guide.
631
00:30:13,700 --> 00:30:16,980
And it will allow you to have an application
632
00:30:16,980 --> 00:30:18,420
pre-configured with the React.
633
00:30:18,420 --> 00:30:21,180
And all you have to do is NPM create Vite at latest.
634
00:30:21,180 --> 00:30:22,020
That's all.
635
00:30:22,020 --> 00:30:24,620
Okay, this is not the perfect ideal guide
636
00:30:24,620 --> 00:30:25,460
of getting started.
637
00:30:25,460 --> 00:30:26,940
So I'll walk you through with both the guides
638
00:30:26,940 --> 00:30:29,500
so that you can be in the sync of it.
639
00:30:29,500 --> 00:30:31,700
Now, first and foremost, we'll come back here.
640
00:30:32,860 --> 00:30:35,500
As you have installed a node,
641
00:30:35,500 --> 00:30:38,060
couple of other packages are also installed in the system.
642
00:30:38,060 --> 00:30:41,220
One of them being NPM and another being NPX.
643
00:30:41,220 --> 00:30:43,300
NPM being a node package manager,
644
00:30:43,300 --> 00:30:45,340
it helps you to install all the libraries,
645
00:30:45,340 --> 00:30:47,500
which are JavaScript friendly library,
646
00:30:47,500 --> 00:30:48,820
a node package manager.
647
00:30:48,820 --> 00:30:51,060
Another is node package executor,
648
00:30:51,060 --> 00:30:54,540
which helps you to directly execute these packages.
649
00:30:54,540 --> 00:30:56,500
So we'll be using one of them, which is NPX,
650
00:30:56,500 --> 00:31:00,380
and we'll be saying create dash react dash app.
651
00:31:00,380 --> 00:31:02,200
What is this create react app?
652
00:31:02,200 --> 00:31:05,660
This is a utility, which was really famous.
653
00:31:05,660 --> 00:31:08,380
Nowadays, people look a little bit down onto this library
654
00:31:08,380 --> 00:31:09,620
because it's a little bulky,
655
00:31:09,620 --> 00:31:12,260
it takes a little bit more time to get downloaded.
656
00:31:12,260 --> 00:31:13,540
It literally takes more time
657
00:31:13,540 --> 00:31:16,260
because it's bundled up with more things
658
00:31:16,260 --> 00:31:19,020
which are required for any beginner to get started.
659
00:31:19,020 --> 00:31:22,240
For example, even the testing library ships in this package,
660
00:31:22,240 --> 00:31:23,900
which probably you don't need,
661
00:31:23,900 --> 00:31:25,700
it's too much configured for you.
662
00:31:25,700 --> 00:31:27,660
So we'll check out both the applications,
663
00:31:27,660 --> 00:31:30,340
both the ways that how a package is being created
664
00:31:30,340 --> 00:31:32,060
with the classic create react app.
665
00:31:32,060 --> 00:31:34,100
And we'll also analyze the application
666
00:31:34,100 --> 00:31:38,100
which is built by the VIT or same thing goes for parser
667
00:31:38,180 --> 00:31:42,740
or any other similar package or bundler that we have.
668
00:31:42,740 --> 00:31:44,620
So once we have this create react app,
669
00:31:44,620 --> 00:31:46,500
we'll be calling this one as 01
670
00:31:46,500 --> 00:31:50,140
and we'll call this one as basic react
671
00:31:50,140 --> 00:31:52,740
because that's what it is, basic react application.
672
00:31:52,740 --> 00:31:56,820
As I click on this, notice that it's going to go on
673
00:31:56,820 --> 00:32:00,220
to GitHub basically and actually, yeah,
674
00:32:00,220 --> 00:32:03,340
basically it's called a CRA create react app template.
675
00:32:03,340 --> 00:32:06,760
It's fetching all the things for me, not only fetching it,
676
00:32:06,760 --> 00:32:08,680
it's actually installing the things for me.
677
00:32:08,680 --> 00:32:10,760
If I open up this directory right now,
678
00:32:10,760 --> 00:32:13,280
the first step is to just get the package.json
679
00:32:13,280 --> 00:32:14,440
which has a lot of things.
680
00:32:14,440 --> 00:32:15,800
I'll come back onto this one right now.
681
00:32:15,800 --> 00:32:17,240
I don't want to touch it.
682
00:32:17,240 --> 00:32:18,900
So basically that's what happening.
683
00:32:18,900 --> 00:32:20,440
I'll come back onto this project
684
00:32:20,440 --> 00:32:23,860
because this actually takes painstakingly long time.
685
00:32:23,860 --> 00:32:25,560
That's why I just want to show you,
686
00:32:25,560 --> 00:32:27,640
this is the only time I'll show you that yes,
687
00:32:27,640 --> 00:32:30,320
this although I have a beast of a machine,
688
00:32:30,320 --> 00:32:32,920
I have a Mac studio maxed out
689
00:32:32,920 --> 00:32:36,200
and my internet connection is decent with a 300 Mbps
690
00:32:36,200 --> 00:32:38,260
and still it took this much of the time.
691
00:32:38,260 --> 00:32:40,940
Not very long for a beginner to get started
692
00:32:40,940 --> 00:32:42,600
and we can see that there is so much
693
00:32:42,600 --> 00:32:43,640
that comes into this one.
694
00:32:43,640 --> 00:32:45,520
There is so much source.
695
00:32:45,520 --> 00:32:47,000
I'll walk you through how you can read
696
00:32:47,000 --> 00:32:49,400
these kinds of applications, don't you worry.
697
00:32:49,400 --> 00:32:51,640
But now we have this application.
698
00:32:51,640 --> 00:32:54,940
Next thing that I want to do is not to dive into this one.
699
00:32:54,940 --> 00:32:57,400
I would love to learn how these applications
700
00:32:57,400 --> 00:33:00,240
are being processed and how can make it up and running
701
00:33:00,240 --> 00:33:03,900
but I want to explore another option that, okay,
702
00:33:03,900 --> 00:33:06,340
I can create my React application with CRA,
703
00:33:06,340 --> 00:33:08,580
create React app but I can do the same thing
704
00:33:08,580 --> 00:33:09,900
with the VIT as well.
705
00:33:09,900 --> 00:33:12,020
In fact, the documentation says that you can actually
706
00:33:12,020 --> 00:33:14,260
use another bundler which is parcel.
707
00:33:14,260 --> 00:33:15,580
So what are these bundlers?
708
00:33:15,580 --> 00:33:18,420
We will explore them later on but I can actually do that.
709
00:33:18,420 --> 00:33:21,140
All I have to do for this is just to copy this command
710
00:33:21,140 --> 00:33:26,140
which is NPM, not the NPX, create then the VIT at latest.
711
00:33:26,460 --> 00:33:28,260
At latest is optional but we'll still use
712
00:33:28,260 --> 00:33:29,460
the as it is command.
713
00:33:29,460 --> 00:33:31,420
I'll just paste this command
714
00:33:31,420 --> 00:33:34,580
and this is a little different of operation.
715
00:33:34,580 --> 00:33:36,940
In the create React app, I don't have to even think.
716
00:33:36,940 --> 00:33:39,980
It just brings everything, installs, that's it done.
717
00:33:39,980 --> 00:33:41,820
When I click on the create VIT app,
718
00:33:41,820 --> 00:33:43,900
VIT is a bundler which has more options.
719
00:33:43,900 --> 00:33:47,140
If you just get a scroll onto the top,
720
00:33:47,140 --> 00:33:49,060
it says I don't just support React,
721
00:33:49,060 --> 00:33:53,060
I support pre-react, I support swelth, I support vanilla,
722
00:33:53,060 --> 00:33:54,580
I support a lot of things.
723
00:33:54,580 --> 00:33:57,300
So you have to tell it explicitly that what do you really
724
00:33:57,300 --> 00:33:59,180
want to build with this VIT
725
00:33:59,180 --> 00:34:01,540
or what should I bundle together for you?
726
00:34:01,540 --> 00:34:03,540
So if I run this command, it says first thing,
727
00:34:03,540 --> 00:34:04,980
what should I name your project?
728
00:34:04,980 --> 00:34:09,980
I'll say 01 and I'll call this one as basic VIT.
729
00:34:10,300 --> 00:34:11,780
Yeah, that's basically it.
730
00:34:11,780 --> 00:34:14,580
So I've got this basic VIT application but it says,
731
00:34:14,580 --> 00:34:17,260
hey, how do you want to actually build this application?
732
00:34:17,260 --> 00:34:18,900
Select your framework, library,
733
00:34:18,900 --> 00:34:21,020
it's a loose term that we use here.
734
00:34:21,020 --> 00:34:24,219
Vanilla, view, React, pre-react, whatever.
735
00:34:24,219 --> 00:34:27,819
You can use arrow keys to just go up and down
736
00:34:27,900 --> 00:34:29,460
and I'll use React obviously.
737
00:34:29,460 --> 00:34:31,699
Inside the React, it also gives you two options
738
00:34:31,699 --> 00:34:34,099
that you want to use TypeScript, JavaScript, whatever.
739
00:34:34,100 --> 00:34:36,860
I'll keep this as accessible for more audience,
740
00:34:36,860 --> 00:34:38,500
although I do have a TypeScript course,
741
00:34:38,500 --> 00:34:40,900
both on the free code cam on my channel as well.
742
00:34:40,900 --> 00:34:42,380
But in this entire course,
743
00:34:42,380 --> 00:34:43,980
I'll choose the classic JavaScript,
744
00:34:43,980 --> 00:34:47,340
but no worries, we can talk on TypeScript some other day.
745
00:34:47,340 --> 00:34:49,940
I'll just click on this and that's it, it's done.
746
00:34:49,940 --> 00:34:51,780
As you can see how fast the VIT was
747
00:34:51,780 --> 00:34:53,460
compared to the Create React app,
748
00:34:53,460 --> 00:34:55,300
but there are a couple of things you should be aware of.
749
00:34:55,300 --> 00:34:58,660
VIT just brought in these files for me.
750
00:34:58,660 --> 00:35:00,100
It never installed things for me.
751
00:35:00,100 --> 00:35:01,620
So I have to go ahead and install this,
752
00:35:01,620 --> 00:35:03,540
while on the other hand, the Create React app
753
00:35:03,540 --> 00:35:04,820
not only brought in the files,
754
00:35:04,820 --> 00:35:06,260
but actually installed those files.
755
00:35:06,260 --> 00:35:08,340
I can see the node modules here.
756
00:35:08,340 --> 00:35:12,020
So in this one, I have to go inside this folder and install it.
757
00:35:12,020 --> 00:35:13,820
Now this brings a very interesting option.
758
00:35:13,820 --> 00:35:16,220
Any time you're going to see any React application,
759
00:35:16,220 --> 00:35:18,940
this is how the React applications are brought in.
760
00:35:18,940 --> 00:35:21,060
There is never a node module folder.
761
00:35:21,060 --> 00:35:22,740
So what you have to do is,
762
00:35:22,740 --> 00:35:27,380
go ahead CD into your 01 basic VIT app
763
00:35:27,380 --> 00:35:29,220
or whatever the app you're going in.
764
00:35:29,220 --> 00:35:32,020
And you have to say ls or dir if you're on Windows,
765
00:35:32,020 --> 00:35:34,620
and you should be able to see this package.json.
766
00:35:34,620 --> 00:35:37,220
This should be in your path directory.
767
00:35:37,220 --> 00:35:40,260
Once this is there, then based on this file,
768
00:35:40,260 --> 00:35:42,820
you can actually run the command npm install.
769
00:35:42,820 --> 00:35:44,460
Whatever the packages are mentioned
770
00:35:44,460 --> 00:35:47,300
inside this package.json will be installed.
771
00:35:47,300 --> 00:35:50,500
Once I do this, now you'll see a folder being created
772
00:35:50,500 --> 00:35:53,380
live in front of us, which is node modules.
773
00:35:53,380 --> 00:35:56,340
This is the file which will actually allow us
774
00:35:56,340 --> 00:35:58,780
to install all the packages and now we can run.
775
00:35:58,780 --> 00:36:01,100
Now we are onto the same packages level
776
00:36:01,100 --> 00:36:03,900
that I can run my VTAB or the React app.
777
00:36:03,900 --> 00:36:05,980
But before I go there, I should really learn
778
00:36:05,980 --> 00:36:08,620
to understand that how these files are actually structured
779
00:36:08,620 --> 00:36:10,060
that we'll do in the next video.
780
00:36:10,060 --> 00:36:12,420
But we should actually really see that how can I run
781
00:36:12,420 --> 00:36:14,300
this actually bare minimum projects
782
00:36:14,300 --> 00:36:16,100
and what all the things are there.
783
00:36:16,100 --> 00:36:20,140
So I'll just go ahead and delete my terminal itself
784
00:36:20,140 --> 00:36:22,860
so that we can go into the basic project route.
785
00:36:22,860 --> 00:36:25,140
One thing you'll notice that the full structure
786
00:36:25,140 --> 00:36:26,500
looks a little bit similar,
787
00:36:26,500 --> 00:36:28,460
but the way how you should read these application
788
00:36:28,460 --> 00:36:31,100
is always jump into package.json.
789
00:36:31,100 --> 00:36:34,780
This is a centralized index of the entire application
790
00:36:34,780 --> 00:36:37,740
that what all the files are, what all the dependencies are,
791
00:36:37,740 --> 00:36:39,700
what all the dependencies for development are,
792
00:36:39,700 --> 00:36:42,220
what do I support, what's my name and everything.
793
00:36:42,220 --> 00:36:45,380
You can see name, version, the dependency list,
794
00:36:45,380 --> 00:36:47,900
the scripts that I have, linting configuration,
795
00:36:47,900 --> 00:36:49,580
what browsers list do I support,
796
00:36:49,580 --> 00:36:52,340
everything is mentioned in the package.json.
797
00:36:52,340 --> 00:36:54,060
As you can see with the Create React app,
798
00:36:54,060 --> 00:36:56,780
it doesn't really just build a bit brought in React
799
00:36:56,780 --> 00:36:59,500
and React Dom, it actually brings this couple of things.
800
00:36:59,500 --> 00:37:02,100
But before we move there, I would like to break you back
801
00:37:02,100 --> 00:37:07,100
onto our, another eraser, yeah, eraser, eraser.
802
00:37:09,860 --> 00:37:12,540
Yeah, I can go there and just give me a second.
803
00:37:12,540 --> 00:37:14,000
I'll be going up there.
804
00:37:14,000 --> 00:37:16,620
I want to walk you through with a couple of interesting thing
805
00:37:16,620 --> 00:37:19,100
about the React JS, so we'll just go back there.
806
00:37:19,100 --> 00:37:21,900
It's just exactly a scally draw.
807
00:37:21,900 --> 00:37:23,700
So what you need to understand a couple of things
808
00:37:23,700 --> 00:37:27,160
about the React is that React is a main application
809
00:37:27,160 --> 00:37:29,220
or the main package which does all the magic,
810
00:37:29,220 --> 00:37:31,900
but React actually alone doesn't work.
811
00:37:31,900 --> 00:37:35,140
We need to tell it that where I want to run my application.
812
00:37:35,140 --> 00:37:36,660
So React has a couple of versions
813
00:37:36,660 --> 00:37:38,100
that you have to go through with this.
814
00:37:38,100 --> 00:37:40,060
So there is one known as React Dom,
815
00:37:40,060 --> 00:37:43,260
which is a version or the connector of the React
816
00:37:43,260 --> 00:37:45,280
which talks to my Dom in the browser.
817
00:37:45,280 --> 00:37:46,960
It's a web application.
818
00:37:46,960 --> 00:37:48,840
Similarly, we have just like this.
819
00:37:48,840 --> 00:37:50,140
I can talk to the web.
820
00:37:50,140 --> 00:37:52,320
I can go ahead and talk to mobile apps as well.
821
00:37:52,320 --> 00:37:54,600
There is a React Native for that.
822
00:37:54,600 --> 00:37:56,440
The core foundation will always remain React.
823
00:37:56,440 --> 00:37:58,320
So it will always be there,
824
00:37:58,320 --> 00:37:59,960
but it will also have the React Dom
825
00:37:59,960 --> 00:38:02,800
if I want to work with the mobile, the web.
826
00:38:02,800 --> 00:38:05,080
If I want to work with the mobile, it's React Native.
827
00:38:05,080 --> 00:38:07,880
Even there is a version of connector of the React
828
00:38:07,880 --> 00:38:11,140
with the 3D applications like a 3JS and all of that.
829
00:38:11,140 --> 00:38:14,200
So there's a lot of hooks that you can actually
830
00:38:14,200 --> 00:38:16,560
wire up the React with other application.
831
00:38:16,560 --> 00:38:19,880
So now you can see that the important libraries for us
832
00:38:19,880 --> 00:38:21,680
are just React and React Dom.
833
00:38:21,680 --> 00:38:24,520
But actually install React Script, some web vitals
834
00:38:24,520 --> 00:38:27,280
to check out how your web is doing, what's the performance.
835
00:38:27,280 --> 00:38:29,120
It actually installs some of the test libraries
836
00:38:29,120 --> 00:38:31,480
without even asking that whether I want to use
837
00:38:31,480 --> 00:38:34,120
the Jest as a library or maybe I want to use Cypress
838
00:38:34,120 --> 00:38:36,760
or Mocha or any other library, it just installed it.
839
00:38:36,760 --> 00:38:38,880
It's very opinionated in that case.
840
00:38:38,880 --> 00:38:40,580
So this is the first thing that we have learned.
841
00:38:40,580 --> 00:38:42,200
Now let's go back onto the VIT.
842
00:38:42,240 --> 00:38:44,680
Yes, I know this looks like very repetitive
843
00:38:44,680 --> 00:38:47,280
that why are you comparing the CRA and the VIT?
844
00:38:47,280 --> 00:38:49,920
It's very important for you right now to understand this
845
00:38:49,920 --> 00:38:51,400
because you'll be creating applications
846
00:38:51,400 --> 00:38:52,400
with a lot of bundlers.
847
00:38:52,400 --> 00:38:55,320
Right now, let's just nail it off here.
848
00:38:55,320 --> 00:38:57,840
In the basic VIT, if I go and nail down
849
00:38:57,840 --> 00:39:00,600
into package.json again, you'll say that
850
00:39:00,600 --> 00:39:02,400
this is not very opinionated.
851
00:39:02,400 --> 00:39:05,160
It just gave me dependency list of React and React Dom.
852
00:39:05,160 --> 00:39:07,460
You need some testing libraries, you install it.
853
00:39:07,460 --> 00:39:08,480
I don't care about this.
854
00:39:08,480 --> 00:39:10,180
This dev dependencies, you don't need to worry
855
00:39:10,180 --> 00:39:11,880
because this doesn't ship it.
856
00:39:11,900 --> 00:39:14,160
These are for helping the developers only.
857
00:39:14,160 --> 00:39:16,720
So as you can see, there is no even React scripts.
858
00:39:16,720 --> 00:39:18,760
So that means that's not an essential library
859
00:39:18,760 --> 00:39:20,080
that is given to us.
860
00:39:20,080 --> 00:39:21,880
So now this is the basic.
861
00:39:21,880 --> 00:39:24,240
The next thing that we'll be doing is just to learn
862
00:39:24,240 --> 00:39:26,720
and understand that how we can run these applications.
863
00:39:26,720 --> 00:39:28,720
That is it, that is it.
864
00:39:28,720 --> 00:39:29,960
Understanding the file structure,
865
00:39:29,960 --> 00:39:32,640
that's for the next video or the next section of the video
866
00:39:32,640 --> 00:39:35,440
if you're watching it all one girl, I don't mind that.
867
00:39:35,440 --> 00:39:38,440
Okay, so open up your terminal
868
00:39:38,440 --> 00:39:41,080
and how you run this application is actually again mentioned
869
00:39:41,080 --> 00:39:42,200
in the package.json.
870
00:39:42,200 --> 00:39:43,880
So if I go up, check out this,
871
00:39:43,880 --> 00:39:45,760
notice here there's a start script.
872
00:39:45,760 --> 00:39:48,320
So all you have to do is somehow you need to learn
873
00:39:48,320 --> 00:39:50,520
that how I can invoke the start script.
874
00:39:50,520 --> 00:39:52,360
Similarly, you can invoke the build script,
875
00:39:52,360 --> 00:39:54,120
test the script, whatever the script.
876
00:39:54,120 --> 00:39:56,160
If I go into the VIT application,
877
00:39:56,160 --> 00:39:59,000
same application, same procedure there,
878
00:39:59,000 --> 00:40:01,760
there are scripts like in this, there is no start script.
879
00:40:01,760 --> 00:40:02,720
So there is a dev script.
880
00:40:02,720 --> 00:40:06,420
So all I have to know is how can I invoke these keys
881
00:40:06,420 --> 00:40:07,800
so that I can run the application?
882
00:40:07,800 --> 00:40:09,380
That's all, that's all I have to do.
883
00:40:09,380 --> 00:40:12,820
So open up your terminal and let's go into one folder,
884
00:40:12,820 --> 00:40:15,080
which is 01 Basic React.
885
00:40:15,080 --> 00:40:18,860
Once I'm into this and I'm able to see my package.json file,
886
00:40:18,860 --> 00:40:22,580
then I can go ahead and simply just say npm run
887
00:40:22,580 --> 00:40:25,860
and then invoke the script, start script, dev script,
888
00:40:25,860 --> 00:40:28,460
build script, whatever that is, just invoke that.
889
00:40:28,460 --> 00:40:30,460
So I'll just say npm start.
890
00:40:30,460 --> 00:40:33,420
That's what is mentioned in the Create React app.
891
00:40:33,420 --> 00:40:34,900
So if I go ahead and run this,
892
00:40:34,900 --> 00:40:36,820
it will say that, hey, I'll open this up
893
00:40:36,820 --> 00:40:40,580
and it opens up a bare minimum, bare bone react application.
894
00:40:40,580 --> 00:40:41,700
Cool.
895
00:40:41,700 --> 00:40:42,820
Okay.
896
00:40:42,820 --> 00:40:45,300
I'll just close this one because hey, it's all done
897
00:40:45,300 --> 00:40:47,700
and then kill the terminal as well.
898
00:40:47,700 --> 00:40:49,140
Now I want to run the VTAB.
899
00:40:49,140 --> 00:40:52,020
So as we just saw that VTAB don't have a start script,
900
00:40:52,020 --> 00:40:54,460
but it actually gives me another script, which is the dev.
901
00:40:54,460 --> 00:40:57,220
So I'll just invoke the dev and how simple it is.
902
00:40:57,220 --> 00:41:01,300
Once I know the basics of it, npm run and the dev
903
00:41:01,300 --> 00:41:02,900
and can I run this here?
904
00:41:02,900 --> 00:41:04,200
Notice here the error.
905
00:41:04,200 --> 00:41:06,100
If I click on this one, it says,
906
00:41:06,100 --> 00:41:08,100
hey, there's too much of the error.
907
00:41:08,100 --> 00:41:09,380
Why the errors are there?
908
00:41:09,380 --> 00:41:10,380
It ran into that.
909
00:41:10,380 --> 00:41:12,220
So there's, is there a problem in the VTAB?
910
00:41:12,220 --> 00:41:14,800
No, you missed the step that I actually taught you
911
00:41:14,800 --> 00:41:15,980
that hey, if I do an LS,
912
00:41:15,980 --> 00:41:18,260
I should be able to see my package.json.
913
00:41:18,260 --> 00:41:19,100
I couldn't.
914
00:41:19,100 --> 00:41:22,180
So I'm pretty sure now you'll take care of the errors
915
00:41:22,180 --> 00:41:23,020
by this way.
916
00:41:23,020 --> 00:41:25,700
So I'll just go into basic VTAB and I do a LS
917
00:41:25,700 --> 00:41:28,820
and I'm able to see my package.json somewhere.
918
00:41:28,820 --> 00:41:29,660
Give me a time.
919
00:41:29,660 --> 00:41:31,060
Okay, package.json.
920
00:41:31,060 --> 00:41:33,180
Okay, once I have this package.json,
921
00:41:33,180 --> 00:41:36,220
now I can say npm run and the script name.
922
00:41:36,220 --> 00:41:37,980
It's a build, whatever the script name is.
923
00:41:37,980 --> 00:41:39,220
In my case, it's dev.
924
00:41:39,220 --> 00:41:40,580
So I'll just say dev.
925
00:41:40,580 --> 00:41:42,660
It doesn't automatically open this up.
926
00:41:42,660 --> 00:41:44,400
So I'll just go ahead and control click
927
00:41:44,400 --> 00:41:46,220
or if you have the Mac command click,
928
00:41:46,220 --> 00:41:48,200
it will ask you to navigate, navigate there.
929
00:41:48,200 --> 00:41:49,640
And this is your VTA application.
930
00:41:49,640 --> 00:41:52,460
This was my react application, VTA application.
931
00:41:52,460 --> 00:41:54,140
So yeah, very similar, very similar,
932
00:41:54,140 --> 00:41:57,500
but there are certain differences between each one of them.
933
00:41:57,500 --> 00:42:00,140
So I think that's the wrap up.
934
00:42:00,140 --> 00:42:02,320
I'll call this one as the wrap up of this video
935
00:42:02,320 --> 00:42:05,000
because it's already quite a decently long,
936
00:42:05,000 --> 00:42:07,640
but at least we have moved on to one point
937
00:42:07,640 --> 00:42:09,640
that we can actually create applications
938
00:42:09,640 --> 00:42:11,840
without even being dependent on next shares
939
00:42:11,840 --> 00:42:13,280
or remakes or anything.
940
00:42:13,280 --> 00:42:15,600
So we're going into the core foundation of React.
941
00:42:15,600 --> 00:42:18,240
Within just few minutes or seconds or in the next video,
942
00:42:18,240 --> 00:42:20,440
we'll be exploring the file structure
943
00:42:20,440 --> 00:42:23,240
so that you have absolute confidence about that.
944
00:42:23,240 --> 00:42:24,560
Hey, I can build any React app
945
00:42:24,560 --> 00:42:27,320
or I can inject React wherever you ask me to do so.
946
00:42:27,320 --> 00:42:28,160
So that's all.
947
00:42:28,160 --> 00:42:29,800
Let's go ahead and meet up in the next video
948
00:42:29,840 --> 00:42:33,160
and explore the file structure of the React application
949
00:42:33,160 --> 00:42:34,940
and the VTA application as well.
950
00:42:34,940 --> 00:42:36,440
Let's catch up in the next one.
951
00:42:38,680 --> 00:42:39,520
Hey there, everyone.
952
00:42:39,520 --> 00:42:41,620
Hittai Sheer back again with another video
953
00:42:41,620 --> 00:42:43,360
and welcome to the React series.
954
00:42:43,360 --> 00:42:46,880
Let's continue further down the road in our React series.
955
00:42:46,880 --> 00:42:48,940
So we have built a couple of applications.
956
00:42:48,940 --> 00:42:51,680
In fact, two precisely of the applications.
957
00:42:51,680 --> 00:42:53,880
One was built using the Create React app.
958
00:42:53,880 --> 00:42:56,760
Another was built using the VIT, which is another bundler
959
00:42:56,760 --> 00:42:58,760
and there are many other such bundlers.
960
00:42:58,760 --> 00:43:00,320
So it is very crucial for us now
961
00:43:00,320 --> 00:43:03,280
that we dissect each one of these applications.
962
00:43:03,280 --> 00:43:05,360
Yes, there is a way that we can directly jump
963
00:43:05,360 --> 00:43:07,680
into the application, can build some projects
964
00:43:07,680 --> 00:43:10,960
like Todos or maybe some password generator or something.
965
00:43:10,960 --> 00:43:12,460
We will surely do that.
966
00:43:12,460 --> 00:43:14,720
But it is utterly important here at this point
967
00:43:14,720 --> 00:43:16,880
that we dissect the application.
968
00:43:16,880 --> 00:43:18,400
Once you understand each of these
969
00:43:18,400 --> 00:43:20,400
because they are like a critical example
970
00:43:20,400 --> 00:43:21,960
of how the bundlers actually work
971
00:43:21,960 --> 00:43:24,360
and how the default React CRA works.
972
00:43:24,360 --> 00:43:25,520
Once you understand the working
973
00:43:25,520 --> 00:43:27,380
and the file structure of both of them,
974
00:43:27,380 --> 00:43:29,780
you will be able to understand React much better
975
00:43:29,780 --> 00:43:31,180
and you will be able to inject React
976
00:43:31,180 --> 00:43:33,380
in any pre-built applications as well.
977
00:43:33,380 --> 00:43:35,840
Of course, you'll be able to create them fresh as well.
978
00:43:35,840 --> 00:43:38,300
So this video is only and only focused
979
00:43:38,300 --> 00:43:41,060
on each and every bit that is going behind the scene
980
00:43:41,060 --> 00:43:43,940
and is running in the React applications.
981
00:43:43,940 --> 00:43:47,140
So let's go ahead and just dive into that one.
982
00:43:47,140 --> 00:43:48,620
So let me share the screen.
983
00:43:48,620 --> 00:43:50,740
So this is our application that we have
984
00:43:50,740 --> 00:43:53,280
and the first project that we have is 01 Basic.
985
00:43:53,280 --> 00:43:55,660
This is being built by the CRA.
986
00:43:55,660 --> 00:43:57,740
The second one is being built by the VTAB.
987
00:43:57,740 --> 00:44:00,580
We will of course do the comparison between the two,
988
00:44:00,580 --> 00:44:03,820
but first let's jump into the React application.
989
00:44:03,820 --> 00:44:05,540
We've already seen that in order to read
990
00:44:05,540 --> 00:44:06,820
any such application,
991
00:44:06,820 --> 00:44:10,060
the first point is to go into package.json.
992
00:44:10,060 --> 00:44:14,460
This is kind of a index or a directory for your application.
993
00:44:14,460 --> 00:44:16,540
It shows you the name, the version
994
00:44:16,540 --> 00:44:18,500
and most importantly, the dependencies
995
00:44:18,500 --> 00:44:20,380
and the scripts that are available.
996
00:44:20,380 --> 00:44:22,620
As we can see, the React application
997
00:44:22,620 --> 00:44:24,580
with the CRA, React React app,
998
00:44:24,620 --> 00:44:25,980
it's a little bit opinionated.
999
00:44:25,980 --> 00:44:28,220
It gives us some of the testing library.
1000
00:44:28,220 --> 00:44:31,420
It never asked me that whether I want to use Jest or not.
1001
00:44:31,420 --> 00:44:34,020
Maybe I'm a big fan of Cypress or maybe Mocha.
1002
00:44:34,020 --> 00:44:35,900
These are also testing libraries.
1003
00:44:35,900 --> 00:44:37,060
So it doesn't ask me,
1004
00:44:37,060 --> 00:44:39,440
just directly give me these testing libraries.
1005
00:44:39,440 --> 00:44:42,220
On top of that, React and React Dom, as I mentioned,
1006
00:44:42,220 --> 00:44:44,960
these are the two vital things, which is React.
1007
00:44:44,960 --> 00:44:47,380
React is coreact and in order to talk to the Dom,
1008
00:44:47,380 --> 00:44:49,780
there's a separate package known as React Dom.
1009
00:44:49,780 --> 00:44:52,180
Similarly to talk to mobile apps, we have React Native.
1010
00:44:52,180 --> 00:44:54,060
So these kinds of things happen.
1011
00:44:54,060 --> 00:44:55,020
Also on top of that,
1012
00:44:55,020 --> 00:44:56,700
it actually includes some of the React scripts.
1013
00:44:56,700 --> 00:44:58,500
I'll walk you through what it is doing
1014
00:44:58,500 --> 00:44:59,620
behind the scene for you
1015
00:44:59,620 --> 00:45:02,380
and some web vitals to check the performance of the application.
1016
00:45:02,380 --> 00:45:04,620
So it never asked me that whether I want to use this package
1017
00:45:04,620 --> 00:45:06,240
to track the performance or not.
1018
00:45:06,240 --> 00:45:08,620
So a little bit opinionated of a library.
1019
00:45:08,620 --> 00:45:11,900
Then on top of that, it actually runs on the script.
1020
00:45:11,900 --> 00:45:13,940
So when I say NPM runs start,
1021
00:45:13,940 --> 00:45:16,740
it actually runs a script which is known as React scripts
1022
00:45:16,740 --> 00:45:18,100
and then it starts.
1023
00:45:18,100 --> 00:45:20,540
So even starting of the application is dependent
1024
00:45:20,540 --> 00:45:21,580
on these React scripts.
1025
00:45:21,580 --> 00:45:23,980
So I cannot just go ahead and uninstall this.
1026
00:45:23,980 --> 00:45:25,740
Similarly, we have some of the build scripts,
1027
00:45:25,740 --> 00:45:27,300
test the script and eject the script.
1028
00:45:27,300 --> 00:45:29,380
Maybe you want to eject the entire React application
1029
00:45:29,380 --> 00:45:31,300
from the React configuration.
1030
00:45:31,300 --> 00:45:33,460
Now the way how we start the React application
1031
00:45:33,460 --> 00:45:35,120
is actually in the development mode.
1032
00:45:35,120 --> 00:45:36,780
This is what you have been using.
1033
00:45:36,780 --> 00:45:38,580
But once it actually goes on production,
1034
00:45:38,580 --> 00:45:41,420
something known as Varsil, Netlify, Amazon,
1035
00:45:41,420 --> 00:45:44,000
there are lots of options to deploy your application.
1036
00:45:44,000 --> 00:45:46,820
You simply go ahead and run the build project of it.
1037
00:45:46,820 --> 00:45:48,780
And once you actually do this,
1038
00:45:48,780 --> 00:45:50,400
you run the script of build,
1039
00:45:50,400 --> 00:45:52,700
it actually gives you the production version
1040
00:45:52,700 --> 00:45:54,320
of how your application will be deployed.
1041
00:45:54,320 --> 00:45:56,100
And there is no rocket science behind it.
1042
00:45:56,100 --> 00:45:57,700
We can go ahead and just simply run this.
1043
00:45:57,700 --> 00:46:01,620
So we will go into 01 basics,
1044
00:46:01,620 --> 00:46:03,320
probably I am in basics.
1045
00:46:03,320 --> 00:46:05,220
I'll close this one, delete this one actually,
1046
00:46:05,220 --> 00:46:06,880
I'll start with the new one.
1047
00:46:06,880 --> 00:46:11,880
01 basics, my bad, 01 basic react, okay.
1048
00:46:12,540 --> 00:46:14,740
Now we are in the correct folder.
1049
00:46:14,740 --> 00:46:16,100
And I can run this script.
1050
00:46:16,100 --> 00:46:18,660
And simple way to run it is NPM run
1051
00:46:18,660 --> 00:46:19,700
and instead of start,
1052
00:46:19,700 --> 00:46:22,020
which will run the basic development server,
1053
00:46:22,040 --> 00:46:23,560
I can actually run the build servers
1054
00:46:23,560 --> 00:46:27,320
which your Netlify and Varsil actually run
1055
00:46:27,320 --> 00:46:28,520
to actually run your application.
1056
00:46:28,520 --> 00:46:30,800
Because when you run it in the start mode,
1057
00:46:30,800 --> 00:46:32,320
actually your browser doesn't understand
1058
00:46:32,320 --> 00:46:34,740
that there needs to be just one JavaScript file.
1059
00:46:34,740 --> 00:46:36,960
What it does is in the React building
1060
00:46:36,960 --> 00:46:37,920
or the development phase,
1061
00:46:37,920 --> 00:46:39,500
we build lots of React application.
1062
00:46:39,500 --> 00:46:42,080
They need to be combined and come at to one place.
1063
00:46:42,080 --> 00:46:43,860
And this is not an easy operation.
1064
00:46:43,860 --> 00:46:46,080
That's why there is a separate build script for that.
1065
00:46:46,080 --> 00:46:48,540
And each one of the packages gives you that.
1066
00:46:48,540 --> 00:46:50,300
So we'll be running this NPM run build.
1067
00:46:50,320 --> 00:46:52,420
As I done this, you can see there is a build folder
1068
00:46:52,420 --> 00:46:53,600
which is available for me.
1069
00:46:53,600 --> 00:46:56,880
And this build folder has the final JavaScript version
1070
00:46:56,880 --> 00:46:59,080
of everything that's required to run this application.
1071
00:46:59,080 --> 00:47:02,040
As you can see, HTML, CSS, JavaScript, that's it.
1072
00:47:02,040 --> 00:47:03,880
And these are your many five versions
1073
00:47:03,880 --> 00:47:05,600
and mapping of your JavaScript.
1074
00:47:05,600 --> 00:47:08,320
So end of the day, it's just HTML, CSS and JavaScript.
1075
00:47:08,320 --> 00:47:10,280
No rocket science there, all right.
1076
00:47:10,280 --> 00:47:12,680
So this is how your build applications are being built.
1077
00:47:12,680 --> 00:47:15,280
As we can see, React scripts are actually responsible
1078
00:47:15,280 --> 00:47:16,360
for doing this.
1079
00:47:16,360 --> 00:47:18,100
We'll come back and compare this exact thing
1080
00:47:18,100 --> 00:47:19,360
with the VIT as well.
1081
00:47:19,380 --> 00:47:20,980
But right now, just to summarize,
1082
00:47:20,980 --> 00:47:22,480
yes, there are lots of dependencies.
1083
00:47:22,480 --> 00:47:25,060
We have React scripts as well, and we have the start.
1084
00:47:25,060 --> 00:47:27,900
Now let's compare the exact same thing of package.json
1085
00:47:27,900 --> 00:47:30,300
with the VIT application and see and figure out
1086
00:47:30,300 --> 00:47:32,860
that why people love VIT so much.
1087
00:47:32,860 --> 00:47:35,300
Let's open the package.json of the VIT.
1088
00:47:35,300 --> 00:47:38,700
And as we can see, name, private version, very basic.
1089
00:47:38,700 --> 00:47:40,460
Nothing to be worried there.
1090
00:47:40,460 --> 00:47:42,500
We have the dev script, we have the build script.
1091
00:47:42,500 --> 00:47:45,280
Okay, I agree that part needs to be there.
1092
00:47:45,280 --> 00:47:47,900
In the dependencies, we have just the React and React DOM.
1093
00:47:47,920 --> 00:47:51,280
So no testing libraries, no React scripts,
1094
00:47:51,280 --> 00:47:54,320
and how does it is working without the React scripts?
1095
00:47:54,320 --> 00:47:56,220
That's an important question.
1096
00:47:56,220 --> 00:47:58,400
But rest of the dev dependencies, I'm not much worried
1097
00:47:58,400 --> 00:48:01,160
because they are only there for the development purpose.
1098
00:48:01,160 --> 00:48:03,240
As you run the build command, dev dependencies
1099
00:48:03,240 --> 00:48:07,140
never goes into your project or your files, all right.
1100
00:48:07,140 --> 00:48:07,980
So that's the one thing.
1101
00:48:07,980 --> 00:48:09,360
So that's why people love the VIT.
1102
00:48:09,360 --> 00:48:12,120
No opinions about the testing framework
1103
00:48:12,120 --> 00:48:15,080
or any React scripts, just the core minimum, bare minimum
1104
00:48:15,080 --> 00:48:16,760
essentials to run the React app.
1105
00:48:16,780 --> 00:48:18,020
That's pretty nice.
1106
00:48:18,020 --> 00:48:20,620
Okay, further down the road, as we can see,
1107
00:48:20,620 --> 00:48:22,200
this is much more easier and cleaner.
1108
00:48:22,200 --> 00:48:23,620
And we already understand that dev
1109
00:48:23,620 --> 00:48:25,100
is for development environment.
1110
00:48:25,100 --> 00:48:27,220
When I run npm run build, this is how it's going
1111
00:48:27,220 --> 00:48:28,260
to run the build command.
1112
00:48:28,260 --> 00:48:30,380
So very basic and bare minimum.
1113
00:48:30,380 --> 00:48:33,020
Again, closing this and this kind of a comparison
1114
00:48:33,020 --> 00:48:35,980
and necessary for understanding the application.
1115
00:48:35,980 --> 00:48:39,380
Now going into this one, we have this public folder
1116
00:48:39,380 --> 00:48:41,420
where we have this HTML, index.html.
1117
00:48:41,420 --> 00:48:44,040
Of course, this is where everything gets injected.
1118
00:48:44,040 --> 00:48:45,140
I'll walk you through.
1119
00:48:45,140 --> 00:48:46,740
And majority of the time you'll be spending
1120
00:48:47,560 --> 00:48:48,400
inside the source folder.
1121
00:48:48,400 --> 00:48:49,400
Rest of the things are pretty basic.
1122
00:48:49,400 --> 00:48:51,640
We have node modules, which installs all your packages.
1123
00:48:51,640 --> 00:48:53,800
We have gitignore to ignore some of the files
1124
00:48:53,800 --> 00:48:55,400
which are not interested.
1125
00:48:55,400 --> 00:48:57,440
There's a package.log folders as well,
1126
00:48:57,440 --> 00:49:00,000
which has a specified version of all the packages
1127
00:49:00,000 --> 00:49:01,680
that you are installing, pretty much the same,
1128
00:49:01,680 --> 00:49:03,640
but it's a locked version of it.
1129
00:49:03,640 --> 00:49:05,560
And we have the source.
1130
00:49:05,560 --> 00:49:07,480
Now, how does your React application works?
1131
00:49:07,480 --> 00:49:10,440
So for that, let's first go into public folder
1132
00:49:10,440 --> 00:49:12,300
and open up index.html.
1133
00:49:12,300 --> 00:49:13,680
Rest of your logo manifest.
1134
00:49:13,680 --> 00:49:15,400
These are not much to be worried robots
1135
00:49:15,420 --> 00:49:17,420
for your Google indexing,
1136
00:49:17,420 --> 00:49:19,300
manifest for the mobile indexing.
1137
00:49:19,300 --> 00:49:22,860
So all those mobile icons and stuff are very basic.
1138
00:49:22,860 --> 00:49:25,460
But if I go into index.html,
1139
00:49:25,460 --> 00:49:27,180
as you can see, there is a lot of things
1140
00:49:27,180 --> 00:49:28,740
that is being written here.
1141
00:49:28,740 --> 00:49:30,260
And you will be able to understand it more
1142
00:49:30,260 --> 00:49:31,780
if I remove the comments.
1143
00:49:31,780 --> 00:49:32,980
First of all, in the head part,
1144
00:49:32,980 --> 00:49:34,100
we have some of the meta tags.
1145
00:49:34,100 --> 00:49:36,380
So really not much worried about it.
1146
00:49:36,380 --> 00:49:39,380
The linking of the icons, not much worried about it.
1147
00:49:39,380 --> 00:49:42,140
And then it mentioned some things about the manifest
1148
00:49:42,140 --> 00:49:44,220
that it's a metadata used for your app,
1149
00:49:44,240 --> 00:49:46,960
even installed on the user mobile, not much worried.
1150
00:49:46,960 --> 00:49:48,440
So I'll just clean this one.
1151
00:49:48,440 --> 00:49:49,920
All right, similarly,
1152
00:49:49,920 --> 00:49:53,640
I will also just clean up this public URL and basic
1153
00:49:53,640 --> 00:49:55,520
that how we can link up the static assets.
1154
00:49:55,520 --> 00:49:57,120
So not much worried.
1155
00:49:57,120 --> 00:49:58,240
Now further down the road,
1156
00:49:58,240 --> 00:50:01,300
I'll also go ahead and clean up these comments as well.
1157
00:50:01,300 --> 00:50:03,400
So there we go, let's remove that.
1158
00:50:03,400 --> 00:50:07,240
And if I go ahead and save it now and close the head tag
1159
00:50:07,240 --> 00:50:10,280
where all the crucial information is there,
1160
00:50:10,280 --> 00:50:12,720
in the body, there is nothing much going on.
1161
00:50:12,720 --> 00:50:14,100
First a script that says that,
1162
00:50:14,100 --> 00:50:15,740
hey, if you want to run this application,
1163
00:50:15,740 --> 00:50:18,260
you need to be having JavaScript enabled
1164
00:50:18,260 --> 00:50:21,700
because some browsers can optionally disable that.
1165
00:50:21,700 --> 00:50:23,620
And there's just one thing which is known as div,
1166
00:50:23,620 --> 00:50:24,860
which has an ID of root.
1167
00:50:24,860 --> 00:50:27,620
And that's why we call the React app as the SPA,
1168
00:50:27,620 --> 00:50:29,180
single page application,
1169
00:50:29,180 --> 00:50:32,140
because there's not any other page, it's just a index.
1170
00:50:32,140 --> 00:50:35,580
And what React does, it actually takes your web application.
1171
00:50:35,580 --> 00:50:38,220
And in every web application or website,
1172
00:50:38,220 --> 00:50:40,620
we have these DOM nodes of HTML.
1173
00:50:40,740 --> 00:50:42,800
React basically does is remove the nodes
1174
00:50:42,800 --> 00:50:44,120
and inject the nodes at their place
1175
00:50:44,120 --> 00:50:45,920
so that we don't have a full page reload.
1176
00:50:45,920 --> 00:50:49,440
That's what we call that as SPA, single page application.
1177
00:50:49,440 --> 00:50:51,480
So if there is a div ID root,
1178
00:50:51,480 --> 00:50:54,600
there might be someone who is grabbing this,
1179
00:50:54,600 --> 00:50:57,120
if you understand the foundation of DOM,
1180
00:50:57,120 --> 00:50:59,120
there needs to be a script in this page,
1181
00:50:59,120 --> 00:51:00,360
which actually go ahead and say,
1182
00:51:00,360 --> 00:51:03,440
hey, document.getElementByID or querySelector or something,
1183
00:51:03,440 --> 00:51:06,600
because ultimately React is the foundational of,
1184
00:51:06,600 --> 00:51:08,560
like JavaScript is the foundation of React.
1185
00:51:08,560 --> 00:51:10,280
So this needs to be there.
1186
00:51:10,300 --> 00:51:12,700
Without this, it's not going to be working.
1187
00:51:12,700 --> 00:51:17,700
So right now I can see there is no script tag in my HTML.
1188
00:51:18,020 --> 00:51:20,180
So from there, this is script tag might be coming up
1189
00:51:20,180 --> 00:51:23,300
because otherwise how your HTML page loads your JavaScript,
1190
00:51:23,300 --> 00:51:25,760
that's an important question here.
1191
00:51:25,760 --> 00:51:28,820
So if I go ahead and try to run this application,
1192
00:51:28,820 --> 00:51:30,500
let's see what happens.
1193
00:51:30,500 --> 00:51:31,580
So let's run this into the,
1194
00:51:31,580 --> 00:51:33,140
and you don't need to run it into build mode,
1195
00:51:33,140 --> 00:51:34,580
NPM run start is all good.
1196
00:51:34,580 --> 00:51:38,780
NPM run start and try to evaluate this.
1197
00:51:38,800 --> 00:51:42,160
And there we go, our page runs nicely and fine.
1198
00:51:42,160 --> 00:51:45,540
If I right click and click on inspect,
1199
00:51:45,540 --> 00:51:46,960
let's go ahead and see.
1200
00:51:46,960 --> 00:51:48,840
So as we can see,
1201
00:51:48,840 --> 00:51:52,120
there's a lot of things which got injected in my application.
1202
00:51:52,120 --> 00:51:53,920
So this is my ID root,
1203
00:51:53,920 --> 00:51:56,480
and in this I can see app was injected,
1204
00:51:56,480 --> 00:51:58,880
then the app header, all these things, not much where it,
1205
00:51:58,880 --> 00:52:00,200
I'll understand that.
1206
00:52:00,200 --> 00:52:03,480
But not only that, some things like style ID,
1207
00:52:03,480 --> 00:52:04,560
this dashlane is mine,
1208
00:52:04,560 --> 00:52:05,960
because that's my password manager,
1209
00:52:05,960 --> 00:52:07,460
this always gets injected.
1210
00:52:07,460 --> 00:52:09,080
But apart from this couple of other things
1211
00:52:09,080 --> 00:52:11,080
also got injected into this one,
1212
00:52:11,080 --> 00:52:14,280
which I'm not sure from where this actually comes up.
1213
00:52:14,280 --> 00:52:16,700
And you also will see that couple of more things
1214
00:52:16,700 --> 00:52:18,760
actually get injected onto this one.
1215
00:52:18,760 --> 00:52:21,520
You can analyze it more by just clicking
1216
00:52:21,520 --> 00:52:22,960
and view page source.
1217
00:52:22,960 --> 00:52:24,800
And you might be noticing that previously
1218
00:52:24,800 --> 00:52:27,280
there was just this app,
1219
00:52:27,280 --> 00:52:30,120
but now if I go ahead and open and look onto this one,
1220
00:52:30,120 --> 00:52:33,760
there is a script which says static JS bundle JS.
1221
00:52:33,760 --> 00:52:36,400
So from where this script is getting injected
1222
00:52:36,420 --> 00:52:37,760
in my application.
1223
00:52:37,760 --> 00:52:40,520
Very interesting question if you just look at this.
1224
00:52:40,520 --> 00:52:42,940
And in order to answer this question,
1225
00:52:42,940 --> 00:52:45,020
there is inside the package.json,
1226
00:52:45,020 --> 00:52:48,580
there is this something known as React Script.
1227
00:52:48,580 --> 00:52:51,000
So this is doing behind the scene magic
1228
00:52:51,000 --> 00:52:52,980
that while running the application
1229
00:52:52,980 --> 00:52:54,020
or building the application,
1230
00:52:54,020 --> 00:52:56,460
since the application is being run by React Script,
1231
00:52:56,460 --> 00:52:58,700
it automatically finds your index.html
1232
00:52:58,700 --> 00:53:00,300
and inject its JavaScript there
1233
00:53:00,300 --> 00:53:03,580
before publishing it or pushing it onto the server
1234
00:53:03,580 --> 00:53:04,940
or our local server.
1235
00:53:04,940 --> 00:53:06,800
So this is the magic that's happening.
1236
00:53:06,800 --> 00:53:09,320
But as we saw in the VIT application,
1237
00:53:09,320 --> 00:53:11,520
this magic is not going on there.
1238
00:53:11,520 --> 00:53:14,240
So what is making sure that our app is running
1239
00:53:14,240 --> 00:53:16,760
because similar kind of a thing might be happening there.
1240
00:53:16,760 --> 00:53:18,380
Let's go ahead and analyze that as well.
1241
00:53:18,380 --> 00:53:20,000
This kind of comparison analysis,
1242
00:53:20,000 --> 00:53:22,040
I'm pretty sure a lot of people are not going to like it,
1243
00:53:22,040 --> 00:53:24,240
but this is very crucial to understand React.
1244
00:53:24,240 --> 00:53:27,940
After this is just packages and just fun stuff.
1245
00:53:27,940 --> 00:53:30,920
Okay, as I can see, there is no public folder,
1246
00:53:30,920 --> 00:53:32,220
like there is a public folder,
1247
00:53:32,220 --> 00:53:35,060
but my index.html is just outside.
1248
00:53:35,060 --> 00:53:35,900
If I look at this,
1249
00:53:35,900 --> 00:53:38,460
this is much more of a cleaner version of it.
1250
00:53:38,460 --> 00:53:39,300
There is a head tag.
1251
00:53:39,300 --> 00:53:40,700
Okay, I understand that part.
1252
00:53:40,700 --> 00:53:41,740
There is a div ID root.
1253
00:53:41,740 --> 00:53:44,900
So they're using the same analogy there,
1254
00:53:44,900 --> 00:53:47,740
but I can see that the script tag is automatically there.
1255
00:53:47,740 --> 00:53:49,940
So they are not using any React scripts
1256
00:53:49,940 --> 00:53:51,260
to inject your script,
1257
00:53:51,260 --> 00:53:53,220
but rather they are injecting it manually here.
1258
00:53:53,220 --> 00:53:54,060
And that's it.
1259
00:53:54,060 --> 00:53:55,580
That's what your React scripts are actually doing.
1260
00:53:55,580 --> 00:53:57,860
So that's exactly where it is happening.
1261
00:53:57,860 --> 00:54:00,260
Now, everything is coming up inside the source
1262
00:54:00,260 --> 00:54:03,460
and inside this index.jsx,
1263
00:54:03,460 --> 00:54:05,460
we'll talk about that one by one.
1264
00:54:05,460 --> 00:54:07,880
But now that we understand how the working part of there
1265
00:54:07,880 --> 00:54:09,540
and how the JavaScript of React
1266
00:54:09,540 --> 00:54:11,860
is getting injected into the application.
1267
00:54:11,860 --> 00:54:13,160
Now further down the road,
1268
00:54:13,160 --> 00:54:15,180
if I open up the source
1269
00:54:15,180 --> 00:54:17,060
and there's a lot of things in here,
1270
00:54:17,060 --> 00:54:18,660
so we obviously need to remove that.
1271
00:54:18,660 --> 00:54:21,820
Otherwise it would be really difficult to understand that.
1272
00:54:21,820 --> 00:54:23,980
So set up test, I'm not interested in test.
1273
00:54:23,980 --> 00:54:26,420
Go ahead and delete that, move to trash.
1274
00:54:26,420 --> 00:54:28,660
Report web vitals, I'm not interested in you.
1275
00:54:28,660 --> 00:54:30,620
I'll just go ahead and delete that.
1276
00:54:30,620 --> 00:54:33,500
All right, a logo, not interested in this,
1277
00:54:33,500 --> 00:54:36,020
vglogos, just delete that.
1278
00:54:36,020 --> 00:54:38,460
Yep, index.js, yes, I'm interested.
1279
00:54:38,460 --> 00:54:42,140
Index.css, I'm not gonna talk about CSS as of this moment,
1280
00:54:42,140 --> 00:54:43,820
later on we surely will.
1281
00:54:43,820 --> 00:54:46,220
App test, no testing this time.
1282
00:54:46,220 --> 00:54:48,020
I'll just go ahead and remove this.
1283
00:54:48,020 --> 00:54:50,800
And app.css, nope, not interested in this one.
1284
00:54:50,800 --> 00:54:52,540
So I'll go ahead and delete this.
1285
00:54:52,540 --> 00:54:55,700
So ultimately we have just two files here,
1286
00:54:55,700 --> 00:54:57,460
index.js and app.js.
1287
00:54:57,460 --> 00:54:59,340
As I can predict from here,
1288
00:54:59,340 --> 00:55:01,660
that the first entry point of my JavaScript
1289
00:55:01,660 --> 00:55:03,660
would be index.js, if you have guessed that,
1290
00:55:03,660 --> 00:55:05,860
that's correct, I'll just go up here.
1291
00:55:05,860 --> 00:55:08,140
And as you can see, there is again too many of the things,
1292
00:55:08,140 --> 00:55:10,180
so I'll just go ahead and first remove all of this,
1293
00:55:10,180 --> 00:55:11,520
so that's one.
1294
00:55:11,520 --> 00:55:12,540
I don't have web vitals,
1295
00:55:12,540 --> 00:55:14,280
so I'll just go ahead and remove this.
1296
00:55:14,280 --> 00:55:16,900
I don't have index.css, remove that.
1297
00:55:16,900 --> 00:55:18,780
React Dom and React, these are packages
1298
00:55:18,780 --> 00:55:20,620
and app is my file there.
1299
00:55:20,620 --> 00:55:23,580
So if I look at the index.js,
1300
00:55:23,580 --> 00:55:25,600
there's not too much things going on.
1301
00:55:25,600 --> 00:55:27,840
There is somebody who is actually referencing
1302
00:55:27,840 --> 00:55:29,880
document.getElementId by a root,
1303
00:55:29,880 --> 00:55:32,560
so it's referencing my index.html
1304
00:55:32,560 --> 00:55:34,320
and is bringing up the root.
1305
00:55:34,320 --> 00:55:37,040
And React, behind the scene, we have a React Dom,
1306
00:55:37,040 --> 00:55:39,600
so there is a browser Dom and there is a React Dom,
1307
00:55:39,600 --> 00:55:41,160
known as Virtual Dom.
1308
00:55:41,160 --> 00:55:43,720
It tries to mimic the original Dom as well,
1309
00:55:43,720 --> 00:55:45,160
and then whatever the updates you make
1310
00:55:45,160 --> 00:55:48,360
actually first goes into your virtual Dom or React Dom.
1311
00:55:48,360 --> 00:55:50,480
Calling it as a Dom right now, it's not a great idea
1312
00:55:50,480 --> 00:55:52,480
because now it's not a virtual Dom, it's fiber,
1313
00:55:52,480 --> 00:55:54,080
but we'll talk about that later.
1314
00:55:54,080 --> 00:55:56,840
So we go ahead and just have our own virtual Dom,
1315
00:55:56,840 --> 00:55:58,800
and that's what this React Dom is known as.
1316
00:55:58,800 --> 00:56:00,800
This is actually the virtual Dom.
1317
00:56:00,800 --> 00:56:03,320
And any update that happens here in the virtual Dom
1318
00:56:03,320 --> 00:56:05,440
actually gets pushed into the original Dom,
1319
00:56:05,440 --> 00:56:07,880
and only those pieces are pushed.
1320
00:56:07,880 --> 00:56:10,280
So as we can see, it's just creating a root here,
1321
00:56:10,280 --> 00:56:12,240
and then this root is actually rendering.
1322
00:56:12,240 --> 00:56:13,720
I'll definitely talk in one of the video
1323
00:56:13,720 --> 00:56:15,960
about these rendering process in much more detail.
1324
00:56:15,960 --> 00:56:18,800
In fact, we'll be creating our own render method,
1325
00:56:18,800 --> 00:56:20,200
just similar to this one.
1326
00:56:20,200 --> 00:56:22,800
And as I can see, this is just a React strict mode and React.
1327
00:56:22,880 --> 00:56:25,080
And by the way, I can just remove this strict mode as well
1328
00:56:25,080 --> 00:56:27,360
in order to make sure that you understand it much better.
1329
00:56:27,360 --> 00:56:29,080
This is also an optional code.
1330
00:56:29,080 --> 00:56:31,920
So we have just an app, which is just running in here.
1331
00:56:31,920 --> 00:56:33,800
All right, that seems good.
1332
00:56:33,800 --> 00:56:37,440
If I go into app.js, it looks there is so much going on,
1333
00:56:37,440 --> 00:56:40,440
but I can just go ahead and technically remove everything.
1334
00:56:40,440 --> 00:56:42,760
And in fact, if I just close this header,
1335
00:56:42,760 --> 00:56:45,080
I don't want this header entirely.
1336
00:56:45,080 --> 00:56:47,560
I'll just go ahead and say, hey, there is a dev app.
1337
00:56:47,560 --> 00:56:49,080
No, I'm not interested in that.
1338
00:56:49,080 --> 00:56:51,040
I'll just go ahead and write in simple H1,
1339
00:56:51,040 --> 00:56:53,160
which is like a HTML text.
1340
00:56:53,160 --> 00:56:55,200
So I'll just go ahead and say H1 or H2,
1341
00:56:55,200 --> 00:56:56,760
whatever feels good to you.
1342
00:56:56,760 --> 00:56:59,520
And I'll say custom, not custom,
1343
00:56:59,520 --> 00:57:04,520
it's a vanilla or classic React app.
1344
00:57:05,080 --> 00:57:05,920
I'll save this.
1345
00:57:05,920 --> 00:57:09,600
And if my application is running, which it is not,
1346
00:57:09,600 --> 00:57:10,640
I'm in the basic React.
1347
00:57:10,640 --> 00:57:14,360
So I can actually go ahead and run this NPM run start.
1348
00:57:14,360 --> 00:57:16,600
And technically my application should still be running,
1349
00:57:16,600 --> 00:57:18,440
but in the bare bone version.
1350
00:57:18,440 --> 00:57:20,320
So now we can see that classic React app.
1351
00:57:20,320 --> 00:57:22,920
So as we can see, a lot of things were coming in
1352
00:57:22,920 --> 00:57:24,760
just from the CSS and stuff.
1353
00:57:24,760 --> 00:57:27,400
And if you look at from the JavaScript perspective,
1354
00:57:27,400 --> 00:57:29,680
what we're doing here in the app.js,
1355
00:57:29,680 --> 00:57:33,280
we've just created a function that is an app, that's it.
1356
00:57:33,280 --> 00:57:35,840
And we are returning some HTML from it.
1357
00:57:35,840 --> 00:57:37,800
All right, we'll just go into the details
1358
00:57:37,800 --> 00:57:39,160
in the upcoming videos.
1359
00:57:39,160 --> 00:57:43,600
But as of now, just a function which returns the HTML.
1360
00:57:43,600 --> 00:57:46,580
Further down the road, if I just go up into the index,
1361
00:57:47,640 --> 00:57:50,120
we're importing this app from the file.
1362
00:57:50,200 --> 00:57:51,560
And we are rendering this here.
1363
00:57:51,560 --> 00:57:54,120
So how cool this is and how basic this is.
1364
00:57:55,280 --> 00:57:57,680
Now further down the road, we have this app.
1365
00:57:57,680 --> 00:57:58,520
So that is cool.
1366
00:57:58,520 --> 00:57:59,920
And we are running this.
1367
00:57:59,920 --> 00:58:02,440
And there's a special syntax of running this into this.
1368
00:58:02,440 --> 00:58:03,640
This is known as JSX.
1369
00:58:03,640 --> 00:58:05,480
We'll definitely go into much more depth.
1370
00:58:05,480 --> 00:58:07,500
But if this is bothering you a little bit,
1371
00:58:07,500 --> 00:58:09,960
since this is a method that you imported,
1372
00:58:09,960 --> 00:58:10,800
it shouldn't be done.
1373
00:58:10,800 --> 00:58:12,120
But since this is a method,
1374
00:58:12,120 --> 00:58:14,120
you can actually run the method like this.
1375
00:58:14,120 --> 00:58:15,640
And if I save this, yup.
1376
00:58:15,640 --> 00:58:19,160
If I can go back onto my React app, yeah, this is exactly.
1377
00:58:19,160 --> 00:58:20,000
It's a method.
1378
00:58:20,820 --> 00:58:21,660
You can execute a method like this.
1379
00:58:21,660 --> 00:58:23,200
But again, not a good practice.
1380
00:58:23,200 --> 00:58:24,340
It's supposed to be JSX.
1381
00:58:24,340 --> 00:58:25,180
We'll talk about that.
1382
00:58:25,180 --> 00:58:27,320
But yeah, that's the basics of it.
1383
00:58:27,320 --> 00:58:30,000
All right, so this was somehow the classic version
1384
00:58:30,000 --> 00:58:32,400
of dissecting a React app, which was built.
1385
00:58:32,400 --> 00:58:35,240
And now we understand that it's not that bad.
1386
00:58:35,240 --> 00:58:37,600
It's just some rendering that is happening behind the scene.
1387
00:58:37,600 --> 00:58:40,560
So React is doing some magic of optimizing the thing
1388
00:58:40,560 --> 00:58:43,080
by just selecting an element from the root.
1389
00:58:43,080 --> 00:58:44,240
Now I dissected it.
1390
00:58:44,240 --> 00:58:46,960
I know that I can change any time root to Bitesh
1391
00:58:46,960 --> 00:58:48,500
or maybe something else.
1392
00:58:48,500 --> 00:58:49,340
I can do that.
1393
00:58:49,340 --> 00:58:50,180
Totally do it.
1394
00:58:50,180 --> 00:58:52,700
And app, it's not really that fancy.
1395
00:58:52,700 --> 00:58:54,500
It looked fancy at the first go,
1396
00:58:54,500 --> 00:58:56,980
but now it's just a method which returns an HTML.
1397
00:58:56,980 --> 00:58:57,940
That's it.
1398
00:58:57,940 --> 00:59:01,600
And now it's time that we dive and dissect the VTAP as well
1399
00:59:01,600 --> 00:59:03,740
that, hey, what's happening at your side?
1400
00:59:03,740 --> 00:59:07,060
Index, we know that you are injecting my root here
1401
00:59:07,060 --> 00:59:08,260
and there's a script.
1402
00:59:08,260 --> 00:59:09,580
Cool, I accept that.
1403
00:59:09,580 --> 00:59:10,780
I understand that.
1404
00:59:10,780 --> 00:59:13,620
In the source, again, we have a lot of things going on.
1405
00:59:13,620 --> 00:59:16,360
So let's just go ahead and delete one by one.
1406
00:59:16,360 --> 00:59:20,840
Main.jsX, I think that's equivalent of our index.js.
1407
00:59:20,840 --> 00:59:22,240
So exactly same.
1408
00:59:22,240 --> 00:59:24,040
Again, we can do the same magic here.
1409
00:59:24,040 --> 00:59:24,880
We will do that,
1410
00:59:24,880 --> 00:59:27,240
but first let's go ahead and remove index.css,
1411
00:59:27,240 --> 00:59:29,240
not interested in the CSS part.
1412
00:59:29,240 --> 00:59:31,840
So I'll just go ahead and delete, not rename.
1413
00:59:31,840 --> 00:59:34,920
I'll delete that just to give you an idea
1414
00:59:34,920 --> 00:59:36,960
of how the barebone version looks like.
1415
00:59:36,960 --> 00:59:40,000
App.css, not interested in that either.
1416
00:59:40,000 --> 00:59:41,280
Move to trash.
1417
00:59:41,280 --> 00:59:44,360
Assets, not even tiny bit interested in that part.
1418
00:59:44,360 --> 00:59:45,800
So I'll delete that.
1419
00:59:45,800 --> 00:59:48,960
Now, if I go ahead, I have just app.jsX and main.jsX.
1420
00:59:48,960 --> 00:59:51,680
And you might have noticed that it calls it at JSX
1421
00:59:51,680 --> 00:59:53,320
and we call it as main.js.
1422
00:59:53,320 --> 00:59:55,000
So here's the convention rule.
1423
00:59:55,000 --> 00:59:57,480
If you're returning any HTML from your JavaScript,
1424
00:59:57,480 --> 01:00:01,160
that's known as JSX because technically it is JSX,
1425
01:00:01,160 --> 01:00:02,000
but it's just a rule.
1426
01:00:02,000 --> 01:00:04,320
You can avoid that in some of the cases,
1427
01:00:04,320 --> 01:00:06,320
but I recommend that you don't do that.
1428
01:00:06,320 --> 01:00:08,840
Also another convention is if you're creating any component,
1429
01:00:08,840 --> 01:00:11,560
yes, we call them as component in the React world.
1430
01:00:11,560 --> 01:00:13,640
Otherwise it's just a basic function.
1431
01:00:13,640 --> 01:00:15,920
We actually use a capitalized letter in the file name
1432
01:00:15,920 --> 01:00:17,080
and the component name as well.
1433
01:00:17,080 --> 01:00:19,480
I'll definitely walk you through with that as well.
1434
01:00:19,480 --> 01:00:20,840
So in the main.jsX,
1435
01:00:20,840 --> 01:00:22,400
now I can go ahead and do the same thing.
1436
01:00:22,400 --> 01:00:24,960
I don't have CSS, let's remove that.
1437
01:00:24,960 --> 01:00:28,160
App, yes, we have that and React, React DOM, that's cool.
1438
01:00:28,160 --> 01:00:30,340
React strict mode, we don't need that right now.
1439
01:00:30,340 --> 01:00:31,680
So we'll just go ahead and remove that.
1440
01:00:31,680 --> 01:00:34,120
We have just the app being returned, save that.
1441
01:00:34,120 --> 01:00:37,140
In the app.jsX, we don't have any CSS, remove that.
1442
01:00:37,140 --> 01:00:39,360
We don't have VIT logo, remove that.
1443
01:00:39,360 --> 01:00:41,420
React logo, not interested in that.
1444
01:00:41,460 --> 01:00:44,460
Use state, in fact, we don't need that.
1445
01:00:44,460 --> 01:00:46,060
I will just remove everything.
1446
01:00:46,060 --> 01:00:48,460
Remove all of this, which you don't understand right now.
1447
01:00:48,460 --> 01:00:51,180
And let's just go ahead and have this div.
1448
01:00:51,180 --> 01:00:52,940
This needs to go away.
1449
01:00:52,940 --> 01:00:54,940
And this whole thing needs to go away.
1450
01:00:55,820 --> 01:00:57,640
And again, we'll be doing the same thing.
1451
01:00:57,640 --> 01:00:58,700
Everything goes away.
1452
01:00:58,700 --> 01:01:03,700
We just have an H1 tag and it says VIT React app.
1453
01:01:04,020 --> 01:01:06,380
So that's it, that's the basic of how it goes.
1454
01:01:06,380 --> 01:01:09,460
In the main.jsX, we are importing it and showing that up.
1455
01:01:09,460 --> 01:01:10,300
That's it.
1456
01:01:10,300 --> 01:01:12,260
Told you it's super, super easy.
1457
01:01:12,260 --> 01:01:15,780
Let's stop that and run the VTAB to actually verify
1458
01:01:15,780 --> 01:01:19,620
that we have a VTAB running with the bare minimum basics.
1459
01:01:19,620 --> 01:01:24,580
So CD and this one is 01 Basic VIT.
1460
01:01:24,580 --> 01:01:27,240
And this one is npm run dev.
1461
01:01:29,000 --> 01:01:31,780
And this should also be running without any issues.
1462
01:01:31,780 --> 01:01:34,860
So VTAB and we have a Create React app, so classic.
1463
01:01:34,860 --> 01:01:36,900
So now that we understand each bit of it,
1464
01:01:36,900 --> 01:01:38,940
that how it is happening, why it is happening,
1465
01:01:38,940 --> 01:01:40,700
we can actually do a lot more.
1466
01:01:40,700 --> 01:01:43,260
Since we are into the VTAB itself,
1467
01:01:43,260 --> 01:01:45,380
if we actually understand the basics of it,
1468
01:01:45,380 --> 01:01:48,260
that hey, it's just a file and I can just go ahead
1469
01:01:48,260 --> 01:01:50,440
and create a function inside it,
1470
01:01:50,440 --> 01:01:52,080
can I do it one more time?
1471
01:01:52,080 --> 01:01:53,280
Yes, you can.
1472
01:01:53,280 --> 01:01:54,580
Actually, let's just do that.
1473
01:01:54,580 --> 01:01:56,980
So let's go ahead and remove all of this.
1474
01:01:56,980 --> 01:02:00,140
Into my, the same folder VIT, inside the source,
1475
01:02:00,140 --> 01:02:02,140
I'll create a new file and show you a couple of errors
1476
01:02:02,140 --> 01:02:02,980
as well.
1477
01:02:02,980 --> 01:02:06,860
So we'll just go ahead and call this one as youtube.js.
1478
01:02:06,860 --> 01:02:08,680
And in here, we'll be just going with the classic.
1479
01:02:09,320 --> 01:02:11,440
So we have a function whose name is YouTube.
1480
01:02:11,440 --> 01:02:12,960
And that's how it looks like.
1481
01:02:12,960 --> 01:02:15,400
And it goes ahead and says, I want to return.
1482
01:02:15,400 --> 01:02:17,020
There's a parenthesis here.
1483
01:02:17,020 --> 01:02:19,100
And I'll be returning an H1,
1484
01:02:20,680 --> 01:02:22,600
H1, just like this.
1485
01:02:24,100 --> 01:02:25,920
And an H1.
1486
01:02:25,920 --> 01:02:28,200
And I'll say YouTube app,
1487
01:02:28,200 --> 01:02:30,200
because I teach a lot on YouTube.
1488
01:02:30,200 --> 01:02:32,160
Okay, we have to export as well.
1489
01:02:32,160 --> 01:02:34,900
So we are going to say export default
1490
01:02:34,900 --> 01:02:36,920
and we'll be saying YouTube.
1491
01:02:36,920 --> 01:02:39,120
So now that I have exported this YouTube,
1492
01:02:39,120 --> 01:02:43,280
can I use this YouTube inside the main or in the app?
1493
01:02:43,280 --> 01:02:45,200
Yes, you can, you can.
1494
01:02:45,200 --> 01:02:46,920
There is only one rule you have to follow.
1495
01:02:46,920 --> 01:02:48,140
In the JSX, there is a rule
1496
01:02:48,140 --> 01:02:50,080
that you can only return one element.
1497
01:02:50,080 --> 01:02:52,620
So what if I have to return to H1 like this?
1498
01:02:52,620 --> 01:02:53,880
No, it's not allowed.
1499
01:02:53,880 --> 01:02:55,720
So there is a cool hack of it that, hey,
1500
01:02:55,720 --> 01:02:59,000
just go ahead and wrap everything inside the div.
1501
01:02:59,000 --> 01:03:01,460
And technically you're returning just one element,
1502
01:03:02,840 --> 01:03:04,040
but the error is gone.
1503
01:03:04,040 --> 01:03:06,000
This is so much of a common practice
1504
01:03:06,040 --> 01:03:08,120
that eventually React guy realized that,
1505
01:03:08,120 --> 01:03:11,080
hey, this is such a basic thing in the JSX.
1506
01:03:11,080 --> 01:03:15,620
It's kind of a backdrop of a JSX that we don't want it.
1507
01:03:15,620 --> 01:03:18,060
So eventually they removed it and they simply said,
1508
01:03:18,060 --> 01:03:20,360
hey, now we can return empty parentheses,
1509
01:03:20,360 --> 01:03:23,160
which doesn't create any extra div in the HTML
1510
01:03:23,160 --> 01:03:25,280
and keep everything just awesome.
1511
01:03:25,280 --> 01:03:27,840
In one of the mid version of the React,
1512
01:03:27,840 --> 01:03:29,440
we were supposed to actually bring it
1513
01:03:29,440 --> 01:03:31,080
as fragment from the React,
1514
01:03:31,080 --> 01:03:33,100
but now we don't need to have this,
1515
01:03:33,100 --> 01:03:35,560
even the import statement, it just works fine.
1516
01:03:35,560 --> 01:03:38,400
So if I go back here, it's a VTA, VTA, there we go.
1517
01:03:38,400 --> 01:03:40,040
Now similarly, if you understand
1518
01:03:40,040 --> 01:03:42,600
that how in the main.jsx you have imported app
1519
01:03:42,600 --> 01:03:46,000
from app.jsx, you can do same thing in the app as well.
1520
01:03:46,000 --> 01:03:47,120
You can just go ahead and say,
1521
01:03:47,120 --> 01:03:52,120
hey, I want to import YouTube and YouTube,
1522
01:03:52,840 --> 01:03:54,760
and now you can use the same syntax of that,
1523
01:03:54,760 --> 01:03:57,600
just like we have used in the app, just same syntax.
1524
01:03:57,600 --> 01:03:59,680
Yep, you can go ahead and use this,
1525
01:03:59,680 --> 01:04:01,880
but this will be throwing us some errors.
1526
01:04:01,880 --> 01:04:03,600
Don't worry, we'll be removing that.
1527
01:04:03,600 --> 01:04:04,840
So if I go back, it says,
1528
01:04:04,840 --> 01:04:07,480
hey, fail to parse the source code of import analysis
1529
01:04:07,480 --> 01:04:11,160
because the file contains invalid JS syntax.
1530
01:04:11,160 --> 01:04:14,660
If you're using JSX, make sure the name of should be JSX.
1531
01:04:14,660 --> 01:04:18,020
So this is one of the VIT, you can say rule,
1532
01:04:18,020 --> 01:04:21,140
that hey, your file was actually JSX,
1533
01:04:21,140 --> 01:04:24,060
but you actually call this as just a YouTube,
1534
01:04:24,060 --> 01:04:25,020
you shouldn't be doing that.
1535
01:04:25,020 --> 01:04:27,400
It's again a VIT specific issue.
1536
01:04:27,400 --> 01:04:28,800
Maybe some butlers also do that,
1537
01:04:28,800 --> 01:04:30,420
but now that you understand this,
1538
01:04:30,420 --> 01:04:32,440
you can just go ahead and rename this,
1539
01:04:32,440 --> 01:04:34,240
and you can call this as JSX
1540
01:04:34,260 --> 01:04:36,320
because you're throwing out some of the JS,
1541
01:04:36,320 --> 01:04:37,960
but this is also not gonna do it.
1542
01:04:37,960 --> 01:04:41,360
If I save this, go back, it technically runs that,
1543
01:04:41,360 --> 01:04:42,680
but where is my YouTube?
1544
01:04:42,680 --> 01:04:44,200
Hey, there should be a YouTube
1545
01:04:44,200 --> 01:04:46,060
because there's a text inside the YouTube,
1546
01:04:46,060 --> 01:04:47,760
I'm returning a YouTube app.
1547
01:04:47,760 --> 01:04:49,500
Why is this not going on?
1548
01:04:49,500 --> 01:04:52,960
Right click, inspect, and just look at the console.
1549
01:04:52,960 --> 01:04:54,320
Now some warning in the console.
1550
01:04:54,320 --> 01:04:57,000
The tag YouTube is unrecognized in the browser.
1551
01:04:57,000 --> 01:04:59,000
If you want to render React component,
1552
01:04:59,000 --> 01:05:00,960
start its name with an uppercase letter.
1553
01:05:00,960 --> 01:05:02,680
So yeah, again, one more error.
1554
01:05:02,680 --> 01:05:04,880
So let's just go ahead and remove that.
1555
01:05:04,880 --> 01:05:05,760
So I'll just go ahead and say,
1556
01:05:05,760 --> 01:05:08,360
hey, this is a YouTube with a capital U,
1557
01:05:08,360 --> 01:05:11,280
export that as a YouTube with a capital U.
1558
01:05:11,280 --> 01:05:14,920
In the app, obviously have to export that as YouTube.
1559
01:05:14,920 --> 01:05:17,520
And now I can just call this component as a YouTube.
1560
01:05:17,520 --> 01:05:19,600
So that is much better version of it.
1561
01:05:19,600 --> 01:05:21,500
And now we can see the YouTube app.
1562
01:05:21,500 --> 01:05:23,460
Now there is no such hard requirement
1563
01:05:23,460 --> 01:05:25,280
of naming the file as capital,
1564
01:05:25,280 --> 01:05:27,600
but this is a convention and I don't want to break that.
1565
01:05:27,600 --> 01:05:28,760
So I'll just go ahead and say that,
1566
01:05:28,760 --> 01:05:30,160
hey, that's a YouTube.
1567
01:05:30,160 --> 01:05:31,360
And the moment I do this,
1568
01:05:31,360 --> 01:05:33,840
this needs to be updating with the import.
1569
01:05:33,840 --> 01:05:35,720
Just the file name will be importing.
1570
01:05:35,720 --> 01:05:37,560
And sometimes you'll see the errors like this.
1571
01:05:37,560 --> 01:05:38,400
That's okay.
1572
01:05:38,400 --> 01:05:42,040
Just go ahead and command shift P and reload.
1573
01:05:42,040 --> 01:05:44,060
Reload the window and the errors will be gone.
1574
01:05:44,060 --> 01:05:45,440
So yeah, really basic.
1575
01:05:45,440 --> 01:05:47,600
I've been teaching this for years and years now
1576
01:05:47,600 --> 01:05:49,180
in all of the boot camps.
1577
01:05:49,180 --> 01:05:50,820
So yeah, this is a classic way of,
1578
01:05:50,820 --> 01:05:52,120
now you have learned how you can create
1579
01:05:52,120 --> 01:05:54,080
your own component basically,
1580
01:05:54,080 --> 01:05:55,000
which is just a method.
1581
01:05:55,000 --> 01:05:56,320
This is just a method.
1582
01:05:56,320 --> 01:05:57,600
So that's basic part of it.
1583
01:05:57,600 --> 01:05:58,920
Now let's try to do the same thing.
1584
01:05:58,920 --> 01:06:00,000
I know this is boring,
1585
01:06:00,000 --> 01:06:02,840
but it's very, very important for you to understand that why
1586
01:06:02,840 --> 01:06:04,340
and how we are having the bundlers
1587
01:06:04,340 --> 01:06:06,280
and how does they behave and all of that.
1588
01:06:06,280 --> 01:06:09,160
We need to do all of this in the basic React app as well.
1589
01:06:09,160 --> 01:06:12,520
I know, I'm sorry, but this is crucial information.
1590
01:06:12,520 --> 01:06:14,080
We cannot avoid that.
1591
01:06:14,080 --> 01:06:15,360
So let's go into the source.
1592
01:06:15,360 --> 01:06:18,000
We know this index.js, we know app.js.
1593
01:06:18,000 --> 01:06:19,880
Let's go ahead and create another one.
1594
01:06:19,880 --> 01:06:23,140
And let's call this one as a YouTube.
1595
01:06:23,140 --> 01:06:25,000
And we'll be following the convention this time
1596
01:06:25,000 --> 01:06:27,160
because there's no point of learning them again and again.
1597
01:06:27,160 --> 01:06:28,720
So we know that YouTube.
1598
01:06:28,720 --> 01:06:30,620
In this, I can actually use .js.
1599
01:06:30,620 --> 01:06:33,640
There is no hard and fast requirement to call it as JSX
1600
01:06:33,640 --> 01:06:35,880
because the rules were actually coming up from the VIT,
1601
01:06:35,880 --> 01:06:36,880
not the CRA.
1602
01:06:36,880 --> 01:06:39,120
So every bundler has their own rules,
1603
01:06:39,120 --> 01:06:41,440
but I actually like this JSX.
1604
01:06:41,440 --> 01:06:42,480
It actually gives me that, hey,
1605
01:06:42,480 --> 01:06:44,220
there is some JSX getting returned from it.
1606
01:06:44,220 --> 01:06:45,200
So I like that.
1607
01:06:45,200 --> 01:06:46,940
So I'll be following that.
1608
01:06:46,940 --> 01:06:49,860
In the function, I'll be calling this one as YouTube.
1609
01:06:49,860 --> 01:06:51,200
There we go, really basic.
1610
01:06:51,200 --> 01:06:54,320
And in this one, we'll be just going ahead and saying return.
1611
01:06:54,320 --> 01:06:57,200
And inside the return, we'll be returning a JSX,
1612
01:06:57,200 --> 01:07:02,200
probably adjust an H1, which says YouTube React app.
1613
01:07:02,760 --> 01:07:07,440
And end of the day, we'll be just saying export default
1614
01:07:07,440 --> 01:07:12,440
YouTube, if I can write that, not like that, YouTube.
1615
01:07:12,680 --> 01:07:15,080
So once we have actually created and exported that
1616
01:07:15,080 --> 01:07:18,420
in the app.js, I can actually go ahead and import that.
1617
01:07:18,420 --> 01:07:22,320
I can just go ahead and say import YouTube from YouTube.
1618
01:07:22,320 --> 01:07:23,920
We know that this needs to be uppercase.
1619
01:07:23,920 --> 01:07:27,280
If I go ahead and directly write this as a YouTube,
1620
01:07:27,280 --> 01:07:29,160
and just like that, it will bother me.
1621
01:07:29,160 --> 01:07:31,640
Now we know that the basics behind it that, hey,
1622
01:07:31,640 --> 01:07:35,840
this needs to wrap inside this, which is a fragment.
1623
01:07:35,840 --> 01:07:37,880
Very basic, not too much to be worried.
1624
01:07:37,880 --> 01:07:40,040
I can save this, and now I can run this.
1625
01:07:40,040 --> 01:07:42,080
So as you can see, once you understand the concept
1626
01:07:42,080 --> 01:07:44,300
at one places, moving them into another place
1627
01:07:44,300 --> 01:07:45,880
is now a big deal.
1628
01:07:45,880 --> 01:07:50,140
We'll just go ahead and say npm run and start.
1629
01:07:51,040 --> 01:07:52,540
I think that's the start script.
1630
01:07:52,540 --> 01:07:53,700
No, that's not a start script,
1631
01:07:53,700 --> 01:07:55,900
because I'm actually in the wrong folder.
1632
01:07:55,900 --> 01:08:00,020
I need to go inside, 01 Basic React.
1633
01:08:00,020 --> 01:08:03,180
And from here I can run npm run start.
1634
01:08:04,220 --> 01:08:07,280
And yes, these errors are really, really important
1635
01:08:07,280 --> 01:08:09,380
for you to see and actually walk through,
1636
01:08:09,380 --> 01:08:12,020
and just make sure never be afraid of going into the console
1637
01:08:12,020 --> 01:08:14,380
to see if there is any error or something like that.
1638
01:08:14,380 --> 01:08:16,620
That's how we all debug the application.
1639
01:08:16,620 --> 01:08:18,819
Now we have actually dissected the application
1640
01:08:18,819 --> 01:08:22,019
in such a way that we just know every inch,
1641
01:08:22,020 --> 01:08:24,500
every piece of how the React application is working,
1642
01:08:24,500 --> 01:08:27,220
from where the Reacts are getting injected in the HTML,
1643
01:08:27,220 --> 01:08:30,100
both in the VIT, how the build process works,
1644
01:08:30,100 --> 01:08:33,300
both in the CRA, Create React app, and the VIT as well.
1645
01:08:33,300 --> 01:08:35,760
That actually gives us a great foundation
1646
01:08:35,760 --> 01:08:38,620
of how things actually are being done inside this.
1647
01:08:38,620 --> 01:08:40,979
Again, some of this I understand was boring,
1648
01:08:40,979 --> 01:08:44,219
was repetitive, but it is essential for you to understand
1649
01:08:44,220 --> 01:08:46,859
how the dissecting is done, so that when we later on
1650
01:08:46,859 --> 01:08:49,059
create the React apps, you just see them
1651
01:08:49,060 --> 01:08:51,479
as just a JavaScript app, and that's my goal.
1652
01:08:51,479 --> 01:08:53,539
Not to see React as some fancy library,
1653
01:08:53,540 --> 01:08:55,540
but as something which is an addition
1654
01:08:55,540 --> 01:08:57,540
in your JavaScript writing capabilities.
1655
01:08:57,540 --> 01:08:58,960
That's what my goal is.
1656
01:08:58,960 --> 01:08:59,939
I hope you are enjoying this.
1657
01:08:59,939 --> 01:09:01,339
If you are enjoying this, do let me know
1658
01:09:01,340 --> 01:09:02,180
in the comment section.
1659
01:09:02,180 --> 01:09:05,260
That is very, very important for me to get a feedback,
1660
01:09:05,260 --> 01:09:06,620
to get some appreciation.
1661
01:09:06,620 --> 01:09:08,220
Everybody works for some motivation.
1662
01:09:08,220 --> 01:09:09,660
This is my motivation.
1663
01:09:09,660 --> 01:09:10,979
So that's it for this video.
1664
01:09:10,979 --> 01:09:12,939
We'll surely catch up in the next one.
1665
01:09:12,939 --> 01:09:17,579
Hey there, everyone.
1666
01:09:17,580 --> 01:09:19,660
Hitesh here, back again with another video,
1667
01:09:19,660 --> 01:09:21,859
and welcome to our React series.
1668
01:09:21,859 --> 01:09:24,059
I hope you are constantly watching this series,
1669
01:09:24,060 --> 01:09:25,899
and I'll also sharing this series,
1670
01:09:25,899 --> 01:09:28,979
so that helps me a little bit to spread the word around
1671
01:09:28,979 --> 01:09:30,719
that, hey, there is a remarkable series,
1672
01:09:30,720 --> 01:09:33,939
and yes, one thing is sure, this series is going to compete
1673
01:09:33,939 --> 01:09:36,119
with all of the paid courses that you have seen around
1674
01:09:36,120 --> 01:09:36,960
on the internet.
1675
01:09:36,960 --> 01:09:39,140
So with that, let's go ahead and get started.
1676
01:09:39,140 --> 01:09:41,819
In this video, we are going to focus on one very basic
1677
01:09:41,819 --> 01:09:44,819
concept of how can I create my own React?
1678
01:09:44,819 --> 01:09:47,939
Now, this sounds very fancy, but it is not.
1679
01:09:47,939 --> 01:09:50,259
A lot of people just believe that React is some kind
1680
01:09:50,260 --> 01:09:53,779
of a magic that happens behind the scene, but it is not.
1681
01:09:53,779 --> 01:09:55,540
It is just a ton of JavaScript, which
1682
01:09:55,540 --> 01:09:57,220
has been written by somebody else,
1683
01:09:57,220 --> 01:10:00,660
and a lot of algorithms, which makes the manipulation
1684
01:10:00,660 --> 01:10:03,580
in the DOM much more easier and consistent.
1685
01:10:03,580 --> 01:10:05,700
That is it, nothing more than that.
1686
01:10:05,700 --> 01:10:08,660
Once you get the mindset that React is doing nothing,
1687
01:10:08,660 --> 01:10:11,700
apart from helping me in manipulating the UI,
1688
01:10:12,220 --> 01:10:14,700
you will become an amazing React engineer,
1689
01:10:14,700 --> 01:10:17,460
or as a front-end engineer, that's debatable.
1690
01:10:17,460 --> 01:10:18,980
So in this video, I'll walk you through that,
1691
01:10:18,980 --> 01:10:22,100
how we can create a really basic HTML file
1692
01:10:22,100 --> 01:10:25,140
and a JavaScript file, and can kind of mimic
1693
01:10:25,140 --> 01:10:26,900
what React is trying to do in the backend.
1694
01:10:26,900 --> 01:10:28,700
Of course, React uses tons of algorithms,
1695
01:10:28,700 --> 01:10:30,060
we are not going to write that,
1696
01:10:30,060 --> 01:10:31,940
but still, this video is very valuable
1697
01:10:31,940 --> 01:10:33,820
and will give you a whole lot of idea about that.
1698
01:10:33,820 --> 01:10:35,340
I hope that makes you excited.
1699
01:10:35,340 --> 01:10:38,020
And in case you're watching it on my channel,
1700
01:10:38,020 --> 01:10:40,500
then definitely we have a target setting practice,
1701
01:10:40,500 --> 01:10:42,980
so go ahead and keep on learning the things
1702
01:10:42,980 --> 01:10:44,180
and post in the comment section,
1703
01:10:44,180 --> 01:10:46,860
we are targeting around, not higher,
1704
01:10:46,860 --> 01:10:49,180
but just 100 comments on the channel.
1705
01:10:49,180 --> 01:10:51,740
I hope you can help me in achieving that target.
1706
01:10:51,740 --> 01:10:54,140
Let's go back, and I'll first share the screen,
1707
01:10:54,140 --> 01:10:56,060
so there we go.
1708
01:10:56,060 --> 01:10:57,700
So this is my VS code, by the way,
1709
01:10:57,700 --> 01:11:01,700
you can find all the code files on my GitHub account,
1710
01:11:01,700 --> 01:11:04,300
post a star there as well, I'm asking too much.
1711
01:11:04,300 --> 01:11:05,860
That's really required.
1712
01:11:05,860 --> 01:11:08,620
Okay, moving further, let's create a new folder,
1713
01:11:08,700 --> 01:11:10,060
and we're going to call this one
1714
01:11:10,060 --> 01:11:11,780
as simply just custom react.
1715
01:11:11,780 --> 01:11:13,940
So let's go ahead and create a custom react.
1716
01:11:13,940 --> 01:11:15,260
Where does that folder go?
1717
01:11:15,260 --> 01:11:19,060
Oh, anywhere, custom react.
1718
01:11:19,060 --> 01:11:20,580
Or we're gonna call this one as custom,
1719
01:11:20,580 --> 01:11:24,700
I really like this color, but anyways, custom react.
1720
01:11:24,700 --> 01:11:27,980
Custom react will get just the two files, very basic,
1721
01:11:27,980 --> 01:11:31,180
just like how we do in the classic vanilla HTML.
1722
01:11:31,180 --> 01:11:33,740
So index.html, what else?
1723
01:11:33,740 --> 01:11:36,100
We're gonna get some JavaScript.
1724
01:11:36,100 --> 01:11:38,780
So let's call this one as custom react,
1725
01:11:38,780 --> 01:11:40,380
or whatever you like.
1726
01:11:41,740 --> 01:11:45,260
Custom react.js, should I uppercase this?
1727
01:11:46,140 --> 01:11:48,660
Yeah, I really think a lot about that.
1728
01:11:48,660 --> 01:11:51,140
Okay, what goes into the index.html?
1729
01:11:51,140 --> 01:11:53,140
Nothing much, we'll be using emit
1730
01:11:53,140 --> 01:11:55,620
to generate the boilerplate code, hit that,
1731
01:11:55,620 --> 01:11:57,980
two hits and after that two tabs,
1732
01:11:57,980 --> 01:12:02,260
and after that you can just write custom react.
1733
01:12:03,180 --> 01:12:05,660
Now the idea is, in the react,
1734
01:12:05,660 --> 01:12:07,340
what you might have seen is,
1735
01:12:07,340 --> 01:12:09,780
we have already explored that in the last video,
1736
01:12:09,780 --> 01:12:14,060
that it has just a div which has an ID of root, that is it.
1737
01:12:14,060 --> 01:12:16,060
If I go ahead and jog your memory again,
1738
01:12:16,060 --> 01:12:19,380
either I go in the VIT or wherever you want me to go,
1739
01:12:19,380 --> 01:12:22,700
I can just open this and this is exactly how it looks like.
1740
01:12:22,700 --> 01:12:25,660
In the VIT, we saw that there is a custom script
1741
01:12:25,660 --> 01:12:27,420
that is included, and in the react,
1742
01:12:27,420 --> 01:12:29,340
we saw that there are some react scripts
1743
01:12:29,340 --> 01:12:32,500
which helps me to inject this inside this.
1744
01:12:32,500 --> 01:12:35,780
So if I go ahead and look into my public,
1745
01:12:35,780 --> 01:12:39,500
index.html, nothing, and that is only and only one reason,
1746
01:12:39,500 --> 01:12:43,500
because in my package.json, there are some react scripts
1747
01:12:43,500 --> 01:12:44,580
which actually inject that.
1748
01:12:44,580 --> 01:12:46,300
So we're gonna not gonna do that,
1749
01:12:46,300 --> 01:12:48,940
we'll inject our script manually,
1750
01:12:48,940 --> 01:12:51,340
and there are a couple of ways how we can inject this,
1751
01:12:51,340 --> 01:12:52,620
we'll not talk much about it,
1752
01:12:52,620 --> 01:12:54,260
but right now I'll just say script,
1753
01:12:54,260 --> 01:12:56,300
and all I want is to have a source
1754
01:12:56,300 --> 01:12:59,220
and the source is in the current directory, custom react.
1755
01:12:59,220 --> 01:13:01,100
By the way, we can talk also about that
1756
01:13:01,100 --> 01:13:03,260
how the type of the loading of the script
1757
01:13:03,260 --> 01:13:07,020
can be common JS module, but not for this series,
1758
01:13:07,020 --> 01:13:08,980
not going to be too much into the JavaScript,
1759
01:13:08,980 --> 01:13:11,660
but wherever it is required, I'll discuss that.
1760
01:13:11,660 --> 01:13:13,620
Okay, now coming up on to the react,
1761
01:13:13,620 --> 01:13:16,100
how does react works and how does react is able
1762
01:13:16,100 --> 01:13:18,780
to just generate everything inside this route,
1763
01:13:18,780 --> 01:13:21,420
and how would I do this if I had to just
1764
01:13:21,420 --> 01:13:23,480
do really basic of it?
1765
01:13:23,480 --> 01:13:26,180
Now the first thing is that we need an element.
1766
01:13:26,180 --> 01:13:28,820
So what is the element that you want to inject here?
1767
01:13:28,820 --> 01:13:30,660
Now you might say that, hey, I want to inject,
1768
01:13:30,780 --> 01:13:33,020
let's just say an h1 tag, simple,
1769
01:13:33,020 --> 01:13:36,780
and inside the h1 tag, we'll have some lorem ipsum, great.
1770
01:13:36,780 --> 01:13:39,060
But this is not how react looks at the picture,
1771
01:13:39,060 --> 01:13:42,820
react looks at the picture that everything is an object,
1772
01:13:42,820 --> 01:13:44,580
and inside this object, you'll give me that,
1773
01:13:44,580 --> 01:13:46,060
what should I create?
1774
01:13:46,060 --> 01:13:47,500
First, give me a tag name,
1775
01:13:47,500 --> 01:13:49,300
then give me what should I insert into that,
1776
01:13:49,300 --> 01:13:52,180
give me what attribute should I add to those HTML,
1777
01:13:52,180 --> 01:13:53,420
that kind of a basic.
1778
01:13:53,420 --> 01:13:55,740
So we can just try that, let's just go ahead and do that.
1779
01:13:55,740 --> 01:13:58,300
First of all, let me say that, hey, this is a type,
1780
01:13:58,300 --> 01:14:00,080
what the element type should be.
1781
01:14:00,120 --> 01:14:03,480
It could be h1, it could be a tag, whatever you like,
1782
01:14:03,480 --> 01:14:05,220
that is exactly the type.
1783
01:14:05,220 --> 01:14:07,320
Now after that, what are the props
1784
01:14:07,320 --> 01:14:09,600
that you want to insert into this?
1785
01:14:09,600 --> 01:14:11,920
By the term props, you can just use attributes,
1786
01:14:11,920 --> 01:14:14,320
no problem there, my video, I chose to props,
1787
01:14:14,320 --> 01:14:16,320
your video, or your code,
1788
01:14:16,320 --> 01:14:18,640
you can choose absolutely to have this.
1789
01:14:18,640 --> 01:14:21,040
Now this props, since we know that the attributes
1790
01:14:21,040 --> 01:14:24,960
can be many, so that's why I'll use a prop as an object,
1791
01:14:24,960 --> 01:14:27,680
which can further be drilled down to multiple things.
1792
01:14:27,680 --> 01:14:30,040
Like for example, I want an href,
1793
01:14:30,040 --> 01:14:34,240
which goes to Google, so Google, if I can write that,
1794
01:14:34,240 --> 01:14:35,300
that would be great,
1795
01:14:36,440 --> 01:14:39,720
http colon slash slash, google.com.
1796
01:14:39,720 --> 01:14:42,080
So that's the first thing that I have here.
1797
01:14:42,080 --> 01:14:44,400
And apart from this, what else do I want?
1798
01:14:44,400 --> 01:14:46,180
Maybe a target, okay.
1799
01:14:47,120 --> 01:14:51,100
Target will be underscore, of course, in the string,
1800
01:14:51,100 --> 01:14:52,400
underscore blank.
1801
01:14:52,400 --> 01:14:54,000
Now right now it's giving us couple of errors,
1802
01:14:54,000 --> 01:14:56,560
don't worry, we'll fix them up in a minute.
1803
01:14:56,560 --> 01:14:59,640
But this is my basic, what else do you want to have?
1804
01:14:59,640 --> 01:15:03,160
Now let's just say I want to have some text inside it,
1805
01:15:03,160 --> 01:15:05,440
and I'm going to call these text as children.
1806
01:15:05,440 --> 01:15:07,280
And I'm pretty sure you might be wondering
1807
01:15:07,280 --> 01:15:09,600
how you are able to come up with the things
1808
01:15:09,600 --> 01:15:11,800
that we are going to call this as props or children.
1809
01:15:11,800 --> 01:15:13,760
No need, no need, no need to call it anything.
1810
01:15:13,760 --> 01:15:15,880
Feel free to call it whatever you like.
1811
01:15:15,880 --> 01:15:17,880
I'll just go ahead and say, and I'll say,
1812
01:15:17,880 --> 01:15:21,160
click me to visit Google,
1813
01:15:21,160 --> 01:15:24,060
and I know this is bothering you, so I'll just fix this.
1814
01:15:24,060 --> 01:15:26,200
Okay, since this is an object,
1815
01:15:26,200 --> 01:15:28,600
let's go ahead and store that into a variable.
1816
01:15:28,600 --> 01:15:32,040
So we'll just call this one as react element.
1817
01:15:32,040 --> 01:15:33,600
Feel free to call it whatever you like,
1818
01:15:33,600 --> 01:15:35,080
there's just nothing more than naming.
1819
01:15:35,080 --> 01:15:39,040
So now we have an element which we want to inject
1820
01:15:39,040 --> 01:15:43,160
inside our DOM, or root, in this case, root.
1821
01:15:43,160 --> 01:15:44,660
So I want to inject here.
1822
01:15:44,660 --> 01:15:46,560
Okay, how can I do that?
1823
01:15:46,560 --> 01:15:47,560
That's pretty easy.
1824
01:15:47,560 --> 01:15:50,480
First and foremost, get me the reference of this root.
1825
01:15:50,480 --> 01:15:51,520
That's easy.
1826
01:15:51,520 --> 01:15:53,840
If you have studied your JavaScript, that's easy.
1827
01:15:53,840 --> 01:15:56,040
All I have to do is say, document, hey document,
1828
01:15:56,040 --> 01:16:00,600
I want to have a get element by ID will also work.
1829
01:16:00,600 --> 01:16:03,320
We can have a query selector that will also work,
1830
01:16:03,320 --> 01:16:05,700
whatever you like, it's your choice.
1831
01:16:05,700 --> 01:16:08,360
So I'll just go ahead and say, give me a root.
1832
01:16:08,360 --> 01:16:09,240
There we go.
1833
01:16:09,240 --> 01:16:11,760
Now you might have noticed that if we go and check out
1834
01:16:11,760 --> 01:16:15,960
the VIT especially, this is exactly what they are also doing.
1835
01:16:15,960 --> 01:16:18,840
So in case you are looking forward for this one,
1836
01:16:18,840 --> 01:16:21,920
if I go ahead and open up source, main.jsx,
1837
01:16:21,920 --> 01:16:24,300
exactly like that, get element by ID, query selector,
1838
01:16:24,340 --> 01:16:26,220
whatever that is, exactly same.
1839
01:16:26,220 --> 01:16:28,620
Okay, since we have a reference of this,
1840
01:16:28,620 --> 01:16:32,140
let's call this one as main container.
1841
01:16:32,140 --> 01:16:34,360
There we go, feel free to name it, whatever you like.
1842
01:16:34,360 --> 01:16:36,220
Now, once I had this reference,
1843
01:16:36,220 --> 01:16:39,060
I am thinking that there should be a method
1844
01:16:39,060 --> 01:16:41,140
just like React has its own method.
1845
01:16:41,140 --> 01:16:43,260
If I have a custom render method,
1846
01:16:43,260 --> 01:16:44,900
which takes two parameter that,
1847
01:16:44,900 --> 01:16:47,740
where do you want to inject and what do you want to inject?
1848
01:16:47,740 --> 01:16:50,700
That is it, that is it, I'm done with my job.
1849
01:16:50,700 --> 01:16:52,940
So first thing is, I want to inject React element,
1850
01:16:52,940 --> 01:16:54,660
where do you want to inject it?
1851
01:16:54,660 --> 01:16:59,460
I want to inject it into container, main container, yeah,
1852
01:16:59,460 --> 01:17:01,180
that's whatever name.
1853
01:17:01,180 --> 01:17:02,580
Okay, so this is good.
1854
01:17:02,580 --> 01:17:04,340
Now the whole magic lies that,
1855
01:17:04,340 --> 01:17:06,860
how does the main container work?
1856
01:17:06,860 --> 01:17:08,220
It's a function, that's for sure.
1857
01:17:08,220 --> 01:17:10,300
So let's go ahead and create a function.
1858
01:17:10,300 --> 01:17:11,700
Why to worry about that?
1859
01:17:11,700 --> 01:17:13,820
And let's just call this one as main container
1860
01:17:13,820 --> 01:17:15,460
and there we go, there we go.
1861
01:17:15,460 --> 01:17:17,580
Magic function, that's it, tutorial done.
1862
01:17:17,580 --> 01:17:19,100
No, not like that.
1863
01:17:19,100 --> 01:17:21,860
Okay, main container takes a React element,
1864
01:17:21,860 --> 01:17:23,100
let's call it as React element
1865
01:17:23,100 --> 01:17:25,580
and whatever the container you want to inject.
1866
01:17:25,580 --> 01:17:27,300
So in my case, it's main container,
1867
01:17:27,300 --> 01:17:29,460
but we'll just differentiate it like this.
1868
01:17:29,460 --> 01:17:33,820
Okay, step number one is create an element.
1869
01:17:33,820 --> 01:17:35,340
So how do I create an element?
1870
01:17:35,340 --> 01:17:38,780
It's pretty simple, document.create,
1871
01:17:38,780 --> 01:17:40,700
no suggestions, create element, there we go,
1872
01:17:40,700 --> 01:17:42,500
we have suggestion, create element.
1873
01:17:42,500 --> 01:17:43,940
What element do you want to create?
1874
01:17:43,940 --> 01:17:47,500
I want to create an element, which is an A tag, great.
1875
01:17:47,500 --> 01:17:51,740
But I want to utilize the parameters which are passed to me.
1876
01:17:51,740 --> 01:17:54,420
So I can use a React element parameter
1877
01:17:54,420 --> 01:17:57,580
and I can say, hey, take the name of the parameter
1878
01:17:57,580 --> 01:17:59,460
from react element.type.
1879
01:17:59,460 --> 01:18:01,660
Okay, so that I can reuse this code
1880
01:18:01,660 --> 01:18:03,020
and not only just with the A,
1881
01:18:03,020 --> 01:18:06,580
I can actually inject H1 and H2 and whatnot,
1882
01:18:06,580 --> 01:18:07,780
all these values.
1883
01:18:07,780 --> 01:18:09,940
Let's store that into a variable.
1884
01:18:09,940 --> 01:18:12,940
So let's just call this one as DOM element,
1885
01:18:12,940 --> 01:18:15,180
whatever the name of the element, it's up to you.
1886
01:18:15,180 --> 01:18:18,100
So we have a DOM element that can be injected,
1887
01:18:18,100 --> 01:18:19,820
but right now it just created,
1888
01:18:19,820 --> 01:18:21,740
it doesn't have anything inside it.
1889
01:18:21,740 --> 01:18:24,340
So let's put something inside it.
1890
01:18:24,340 --> 01:18:27,060
So this DOM element, we're gonna go ahead
1891
01:18:27,060 --> 01:18:30,780
and set up inner HTML, inner HTML,
1892
01:18:30,780 --> 01:18:32,900
that's always something which I mess up.
1893
01:18:32,900 --> 01:18:35,700
And then we can use this React element
1894
01:18:35,700 --> 01:18:38,420
and I can just go ahead and use the children.
1895
01:18:38,420 --> 01:18:41,580
So inside the inner HTML, this children will be added
1896
01:18:41,580 --> 01:18:43,860
and now we have an A tag
1897
01:18:43,860 --> 01:18:46,420
and whose text is inside the inner HTML,
1898
01:18:46,420 --> 01:18:49,460
or you can say inner text as well, that's changeable.
1899
01:18:49,460 --> 01:18:50,580
And I have this access,
1900
01:18:50,580 --> 01:18:53,460
but I have set no attributes inside it.
1901
01:18:53,460 --> 01:18:55,580
So how do I set the attributes?
1902
01:18:55,580 --> 01:18:57,340
That's also easy, I can just go ahead and say,
1903
01:18:57,340 --> 01:19:00,300
hey, DOM element, I want to set an attribute,
1904
01:19:00,300 --> 01:19:05,180
set at no suggestions, that's mean,
1905
01:19:05,180 --> 01:19:07,580
at, oh, my bad, I'm writing wrong,
1906
01:19:07,580 --> 01:19:11,500
at tree, still no suggestion, I don't like that.
1907
01:19:11,500 --> 01:19:15,120
Okay, I'll say attribute, what attribute do you want to add?
1908
01:19:15,120 --> 01:19:16,660
Now I want to add an attribute,
1909
01:19:16,660 --> 01:19:20,500
which is going to be first href
1910
01:19:20,500 --> 01:19:22,700
and where will I get the value of href?
1911
01:19:22,700 --> 01:19:27,700
I'll get it from react element dot props dot href.
1912
01:19:28,580 --> 01:19:31,360
So this is my first attribute that I'm setting.
1913
01:19:31,360 --> 01:19:33,340
Now what is the next attribute you would love to set?
1914
01:19:33,340 --> 01:19:34,700
I would love to set this target.
1915
01:19:34,700 --> 01:19:37,620
So I'll just say, hey, now let's set the target
1916
01:19:37,620 --> 01:19:41,420
and the target you will be getting from target, that's it.
1917
01:19:41,420 --> 01:19:43,340
Okay, once this is done,
1918
01:19:43,340 --> 01:19:45,260
then I need to utilize this container
1919
01:19:45,300 --> 01:19:47,900
because this is where I'm going to append the things.
1920
01:19:47,900 --> 01:19:50,100
So I'm going to go ahead and say, hey, container,
1921
01:19:50,100 --> 01:19:54,260
let's go ahead and say append child
1922
01:19:54,260 --> 01:19:56,820
and in the append child, let's inject the DOM element,
1923
01:19:56,820 --> 01:19:57,860
that is it.
1924
01:19:57,860 --> 01:20:00,640
Now, so far we haven't utilized anything react
1925
01:20:00,640 --> 01:20:02,260
or reactors like that, we have just gone through
1926
01:20:02,260 --> 01:20:04,900
with the basic JavaScript to jog your memory of JavaScript
1927
01:20:04,900 --> 01:20:06,820
in the early days of react.
1928
01:20:06,820 --> 01:20:10,400
Okay, this looks good and we were able to do all of this,
1929
01:20:10,400 --> 01:20:13,580
but this code is not optimized, we can actually optimize it.
1930
01:20:13,580 --> 01:20:15,660
So I'm going to go ahead and put some comments
1931
01:20:15,660 --> 01:20:18,620
onto this one so that this is there for you.
1932
01:20:18,620 --> 01:20:20,260
And by the way, I've been doing this
1933
01:20:20,260 --> 01:20:23,380
for a really, really long time in lots of bootcamps.
1934
01:20:23,380 --> 01:20:25,240
Okay, there we go, we keep this.
1935
01:20:25,240 --> 01:20:26,620
Now let's try to do this again.
1936
01:20:26,620 --> 01:20:28,100
It will be a good revision for you.
1937
01:20:28,100 --> 01:20:29,860
A lot of people are not going to like it,
1938
01:20:29,860 --> 01:20:31,340
but this revision is necessary.
1939
01:20:31,340 --> 01:20:32,900
So let's do it one more time.
1940
01:20:32,900 --> 01:20:34,720
This time we'll write a little bit faster.
1941
01:20:34,720 --> 01:20:39,180
So we'll just go ahead and say document.createElement
1942
01:20:39,180 --> 01:20:41,220
and we know what's going to happen inside this one.
1943
01:20:41,220 --> 01:20:46,220
We'll take the reactElement.types, types or type.
1944
01:20:46,220 --> 01:20:48,180
And we're going to hold that into a variable.
1945
01:20:48,180 --> 01:20:50,580
Let's call this one again as DOM element.
1946
01:20:50,580 --> 01:20:51,540
And there we go.
1947
01:20:51,540 --> 01:20:54,340
Now we know that this part of the code is absolutely okay
1948
01:20:54,340 --> 01:20:56,820
and DOM element will also get the inner HTML.
1949
01:20:56,820 --> 01:20:59,780
So we'll just say inner HTML.
1950
01:20:59,780 --> 01:21:03,180
And we have the inner HTML, which is going to come to me
1951
01:21:03,180 --> 01:21:04,660
via reactElement.children.
1952
01:21:04,660 --> 01:21:07,580
So far, exactly same code, no big deal.
1953
01:21:07,580 --> 01:21:09,860
But what I want to do now is I want to loop
1954
01:21:09,860 --> 01:21:12,780
through this prop so that no matter how many elements
1955
01:21:12,780 --> 01:21:14,940
are coming in, I can just set them up.
1956
01:21:14,940 --> 01:21:17,980
So let's just utilize a loop here to write a better code.
1957
01:21:17,980 --> 01:21:20,260
And we're going to use a for in loop.
1958
01:21:20,260 --> 01:21:21,820
That makes sense.
1959
01:21:21,820 --> 01:21:24,900
And we're going to say for prop in,
1960
01:21:24,900 --> 01:21:29,180
and again, we have to go inside this props to loop through.
1961
01:21:29,180 --> 01:21:34,180
And I can just go ahead and say, hey, reactElement.props.
1962
01:21:34,780 --> 01:21:36,060
There is an S there.
1963
01:21:36,060 --> 01:21:38,160
So all of this element needs to go through with that.
1964
01:21:38,160 --> 01:21:39,500
I'll just remove this if part.
1965
01:21:39,500 --> 01:21:41,460
This is our classic basic code.
1966
01:21:41,460 --> 01:21:43,180
Now, let's just say, first of all,
1967
01:21:44,120 --> 01:21:47,780
this is also something which happens in the React as well.
1968
01:21:47,780 --> 01:21:49,860
By the way, you can just go ahead and set these elements.
1969
01:21:49,860 --> 01:21:52,060
So we can just go ahead and do something like this.
1970
01:21:52,060 --> 01:21:55,380
Access this DOM element, and just keep on looping through
1971
01:21:55,380 --> 01:21:57,260
and set the attribute.
1972
01:21:59,100 --> 01:22:02,140
Attribute, and that attribute,
1973
01:22:02,140 --> 01:22:05,100
the key of the attribute is obviously this thing,
1974
01:22:05,100 --> 01:22:07,260
which is actually looping through in the prop.
1975
01:22:07,260 --> 01:22:09,260
So I can just go ahead and say prop.
1976
01:22:09,300 --> 01:22:10,500
And what should be the value?
1977
01:22:10,500 --> 01:22:12,260
The value is going to be reactElement.
1978
01:22:12,260 --> 01:22:15,860
And we also know that objects can also be accessed
1979
01:22:15,860 --> 01:22:18,040
other ways than just the dot notation.
1980
01:22:18,040 --> 01:22:19,300
There is a square bracket.
1981
01:22:19,300 --> 01:22:21,380
In this case, that square bracket makes sense.
1982
01:22:21,380 --> 01:22:23,420
So inside this, go into the props.
1983
01:22:23,420 --> 01:22:25,060
Now we are inside this.
1984
01:22:25,060 --> 01:22:26,540
What property do you want to access?
1985
01:22:26,540 --> 01:22:28,940
Whatever there is in the prop, this same.
1986
01:22:28,940 --> 01:22:31,980
So I'll just use a square bracket, and I'll say prop.
1987
01:22:31,980 --> 01:22:33,020
That is it.
1988
01:22:33,020 --> 01:22:35,420
Now, this is how, obviously it will work,
1989
01:22:35,420 --> 01:22:38,180
but there are also cases that somebody might inject
1990
01:22:38,220 --> 01:22:42,260
accidentally a children here, just like this,
1991
01:22:42,260 --> 01:22:43,740
and might add a children here as well.
1992
01:22:43,740 --> 01:22:44,940
If there is a children here,
1993
01:22:44,940 --> 01:22:47,620
we are expecting that the children will come outside.
1994
01:22:47,620 --> 01:22:50,100
Now, remember this, I am setting the rules.
1995
01:22:50,100 --> 01:22:52,100
I am react, okay?
1996
01:22:52,100 --> 01:22:54,020
But still, I want to avoid that case.
1997
01:22:54,020 --> 01:22:55,860
So just taking care of the corner case,
1998
01:22:55,860 --> 01:22:57,020
I can just go ahead and say,
1999
01:22:57,020 --> 01:23:02,020
hey, if the prop is equals to a literal string of children,
2000
01:23:04,620 --> 01:23:07,580
and if that is the case, I just want to return.
2001
01:23:07,580 --> 01:23:10,660
So I'll just sneak it out.
2002
01:23:10,660 --> 01:23:11,860
I'll just say continue.
2003
01:23:12,860 --> 01:23:13,780
I cannot return here,
2004
01:23:13,780 --> 01:23:15,180
otherwise this will close the entire thing.
2005
01:23:15,180 --> 01:23:16,900
I just want to skip that one iteration.
2006
01:23:16,900 --> 01:23:18,700
Again, if this is something too much for you,
2007
01:23:18,700 --> 01:23:20,180
just go ahead and skip that.
2008
01:23:20,180 --> 01:23:22,620
Now, I have improved the code,
2009
01:23:22,620 --> 01:23:23,900
and I can just go ahead and say,
2010
01:23:23,900 --> 01:23:27,780
hey, take the container and append, nope,
2011
01:23:27,780 --> 01:23:30,540
no suggestions, hate that, append child.
2012
01:23:30,540 --> 01:23:32,620
And in the append child, I can just use the DOM element.
2013
01:23:32,620 --> 01:23:33,660
So it's a better approach,
2014
01:23:33,660 --> 01:23:37,540
definitely 100% a lot better approach.
2015
01:23:37,540 --> 01:23:40,500
But can we say that this was far better,
2016
01:23:40,500 --> 01:23:42,780
and this is how exactly the React works?
2017
01:23:42,780 --> 01:23:46,060
Absolutely 100%, this is how things works.
2018
01:23:46,060 --> 01:23:48,740
Let's go ahead and open this up into a live server
2019
01:23:48,740 --> 01:23:52,500
so that we can actually see that in action, okay?
2020
01:23:52,500 --> 01:23:54,180
We got some of the stuff wrong,
2021
01:23:54,180 --> 01:23:57,620
so let's just go ahead and fix that, okay?
2022
01:23:57,620 --> 01:24:01,460
Object, and we have back limiting, okay?
2023
01:24:01,460 --> 01:24:05,020
So some things are not loading up properly.
2024
01:24:05,020 --> 01:24:07,020
Let me go ahead and quickly check that.
2025
01:24:07,660 --> 01:24:09,540
All right, so after stirring the code a little bit,
2026
01:24:09,540 --> 01:24:11,060
stirring the warnings a little bit,
2027
01:24:11,060 --> 01:24:12,900
I found the bug, and it was pretty easy,
2028
01:24:12,900 --> 01:24:14,860
and not really that big of a deal.
2029
01:24:14,860 --> 01:24:17,660
So what we see here is that inside this,
2030
01:24:17,660 --> 01:24:19,820
I accidentally named it as main container,
2031
01:24:19,820 --> 01:24:21,020
shouldn't have done that.
2032
01:24:21,020 --> 01:24:23,580
This should be named as custom render,
2033
01:24:23,580 --> 01:24:25,100
probably bad suggestion there,
2034
01:24:25,100 --> 01:24:26,900
you might have already noticed that.
2035
01:24:26,900 --> 01:24:28,340
So once we do this, save this,
2036
01:24:28,340 --> 01:24:30,580
and when we go back onto the code part,
2037
01:24:30,580 --> 01:24:32,100
we see that click me, visit Google,
2038
01:24:32,100 --> 01:24:34,580
although very, very painful for your eyes.
2039
01:24:34,580 --> 01:24:35,740
But it's good, it's good.
2040
01:24:35,740 --> 01:24:37,260
It's actually working,
2041
01:24:37,260 --> 01:24:39,140
and I can just go ahead and fix it
2042
01:24:39,140 --> 01:24:41,380
so that you can at least see that properly.
2043
01:24:41,380 --> 01:24:44,460
So inside the body, I can just go ahead and add a style,
2044
01:24:44,460 --> 01:24:49,460
and can say background color is going to be probably ash,
2045
01:24:49,860 --> 01:24:54,100
and we're gonna go 414141, better.
2046
01:24:54,100 --> 01:24:56,540
All right, so although the link and the text
2047
01:24:56,540 --> 01:24:58,500
and everything is a little less visible,
2048
01:24:58,500 --> 01:24:59,980
but we can see it is there, it is there.
2049
01:24:59,980 --> 01:25:01,540
It is now much visible for you.
2050
01:25:01,540 --> 01:25:03,100
I can zoom this for you,
2051
01:25:03,100 --> 01:25:05,620
and we can see it is visible for me.
2052
01:25:06,140 --> 01:25:08,460
There are a couple of things that we need to discuss now
2053
01:25:08,460 --> 01:25:10,340
that how these all things are going on.
2054
01:25:10,340 --> 01:25:12,620
It's not really that bad of a deal.
2055
01:25:12,620 --> 01:25:14,980
So we have concluded so far that yes,
2056
01:25:14,980 --> 01:25:17,620
we are perfectly capable of designing our own React,
2057
01:25:17,620 --> 01:25:20,740
and this is what React actually does on the surface level.
2058
01:25:20,740 --> 01:25:23,220
Where React shines is there are definitely
2059
01:25:23,220 --> 01:25:27,420
the capability of creating things inside inside it.
2060
01:25:27,420 --> 01:25:29,620
Like for example, there is right now just an A tag,
2061
01:25:29,620 --> 01:25:31,540
but what about when there is a div tag,
2062
01:25:31,540 --> 01:25:33,340
then there is a span tag, then there's a A tag.
2063
01:25:33,340 --> 01:25:34,820
We obviously need to loop through values,
2064
01:25:34,860 --> 01:25:37,220
and smartly design our components.
2065
01:25:37,220 --> 01:25:38,780
So we can do that, no problem.
2066
01:25:38,780 --> 01:25:40,300
Surely take some time,
2067
01:25:40,300 --> 01:25:43,420
but with enough of the time, it can be done.
2068
01:25:43,420 --> 01:25:46,020
Also React uses some of the algorithms behind the scene
2069
01:25:46,020 --> 01:25:48,480
that makes this entire process easier.
2070
01:25:48,480 --> 01:25:50,980
So now can we relate this, our custom design thing
2071
01:25:50,980 --> 01:25:53,300
with the React itself so that it makes sense
2072
01:25:53,300 --> 01:25:55,620
or start to make sense a little bit?
2073
01:25:55,620 --> 01:25:58,920
Yes, turns out yes, we can actually go ahead and try that.
2074
01:25:58,920 --> 01:26:00,820
So now let me go back onto the code part.
2075
01:26:00,820 --> 01:26:02,600
This is the code that we have written.
2076
01:26:02,600 --> 01:26:04,620
Now technically, if this is whole the theory,
2077
01:26:05,260 --> 01:26:08,340
which is correct, I can actually bring whole of this
2078
01:26:08,340 --> 01:26:11,240
into the VIT and should be able to run this.
2079
01:26:11,240 --> 01:26:13,060
And that is where the challenge begins.
2080
01:26:13,060 --> 01:26:16,060
So I'll just go into the source main.jsx,
2081
01:26:16,060 --> 01:26:18,460
and I'll just say, hey, I have this React element
2082
01:26:18,460 --> 01:26:21,220
and I just want to run this React element.
2083
01:26:21,220 --> 01:26:22,640
Can you do this for me?
2084
01:26:22,640 --> 01:26:26,220
I think yes, you can, because what we noticed,
2085
01:26:26,220 --> 01:26:28,700
if I just close it and jog your memory again,
2086
01:26:28,700 --> 01:26:31,460
in the app.jsx, this is just a function.
2087
01:26:31,460 --> 01:26:33,860
That is it, you are exporting a function.
2088
01:26:33,860 --> 01:26:35,340
If I come back and for a minute,
2089
01:26:35,340 --> 01:26:37,740
if I just forget about my React element,
2090
01:26:37,740 --> 01:26:39,620
I can just go ahead and declare my own function.
2091
01:26:39,620 --> 01:26:42,140
And I just can call this one as my app.
2092
01:26:43,020 --> 01:26:44,580
And that's my app.
2093
01:26:44,580 --> 01:26:47,100
And literally, whatever exactly we are doing in the app,
2094
01:26:47,100 --> 01:26:49,000
we can do here, we are just returning this.
2095
01:26:49,000 --> 01:26:50,620
So let's just return this.
2096
01:26:50,620 --> 01:26:53,020
So I can just go ahead and say, hey, I want to return.
2097
01:26:53,020 --> 01:26:54,300
What do you want to return?
2098
01:26:54,300 --> 01:26:57,980
A simple div which says custom app, maybe like this.
2099
01:26:57,980 --> 01:27:00,220
So I'll just say, hey, this is my div.
2100
01:27:01,180 --> 01:27:03,700
Not like that, didn't intention.
2101
01:27:03,700 --> 01:27:06,460
So one more time, a div, yep, just like that.
2102
01:27:06,460 --> 01:27:08,500
And we will have an h1.
2103
01:27:08,500 --> 01:27:13,540
And this h1 will say custom React app.
2104
01:27:13,540 --> 01:27:16,420
So we should be able to run this technically.
2105
01:27:16,420 --> 01:27:18,700
And we will be, I can just go ahead
2106
01:27:18,700 --> 01:27:19,980
and remove instead of the app.
2107
01:27:19,980 --> 01:27:23,540
I can just go ahead and say, my app, just like this.
2108
01:27:23,540 --> 01:27:25,340
And even I can do all the fancy stuff,
2109
01:27:25,340 --> 01:27:28,560
since this is a function, I can do this literally.
2110
01:27:28,560 --> 01:27:30,060
And let's try to run this.
2111
01:27:30,060 --> 01:27:31,920
And I'll open this up.
2112
01:27:31,920 --> 01:27:33,360
And let's just clean this up.
2113
01:27:33,360 --> 01:27:37,400
And I'll go inside a 01 basic.
2114
01:27:38,580 --> 01:27:40,800
And probably we are already in the basic React.
2115
01:27:40,800 --> 01:27:42,880
So I'll kill the terminal, start it again.
2116
01:27:42,880 --> 01:27:45,960
CD01 basic VIT.
2117
01:27:45,960 --> 01:27:48,840
And the way to run it is npm run dev.
2118
01:27:48,840 --> 01:27:50,920
We have already seen that.
2119
01:27:50,920 --> 01:27:53,060
And are we not able to run it?
2120
01:27:54,000 --> 01:27:57,200
Let's just do an ls, package.json.
2121
01:27:57,200 --> 01:28:00,080
Probably we are missing, let me just check.
2122
01:28:00,120 --> 01:28:03,560
Oh, I probably deleted the node modules folder.
2123
01:28:03,560 --> 01:28:06,960
npm install, shouldn't take much time.
2124
01:28:06,960 --> 01:28:11,640
npm run dev.
2125
01:28:11,640 --> 01:28:13,880
And now, yep, we are able to see that.
2126
01:28:13,880 --> 01:28:15,520
So now we can see custom React app.
2127
01:28:15,520 --> 01:28:18,800
This is exactly what we intended to do.
2128
01:28:18,800 --> 01:28:20,720
But this is not a correct way.
2129
01:28:20,720 --> 01:28:22,660
This is not a recommended way in the React,
2130
01:28:22,660 --> 01:28:25,120
although there is nothing which is stopping you to do so.
2131
01:28:25,120 --> 01:28:27,120
But it might hinder some of the optimization.
2132
01:28:27,120 --> 01:28:29,860
So rather better way is to load it as a component.
2133
01:28:29,860 --> 01:28:33,060
Custom design element, HTML element,
2134
01:28:33,060 --> 01:28:34,460
that would be a better name.
2135
01:28:34,460 --> 01:28:36,620
So I just go back and say, hey, still it works.
2136
01:28:36,620 --> 01:28:39,620
Custom React app, so hey, that is exactly.
2137
01:28:39,620 --> 01:28:42,620
Now, if this is the exact process that is happening
2138
01:28:42,620 --> 01:28:44,500
of looping through the elements,
2139
01:28:45,380 --> 01:28:47,780
can we reach to the point where I can just
2140
01:28:47,780 --> 01:28:49,400
loop through this element?
2141
01:28:49,400 --> 01:28:50,660
Let's just try this.
2142
01:28:50,660 --> 01:28:53,360
So how can I, if I can render this whole thing
2143
01:28:53,360 --> 01:28:55,620
with a function, I should be able to render things
2144
01:28:55,620 --> 01:28:58,120
if I directly pass it on as an element.
2145
01:28:58,120 --> 01:29:00,640
So what about if I go ahead and say, hey,
2146
01:29:00,640 --> 01:29:02,040
I want to give you a const,
2147
01:29:02,040 --> 01:29:05,920
which is going to be named as another element,
2148
01:29:05,920 --> 01:29:07,580
whatever you want to name it.
2149
01:29:07,580 --> 01:29:10,880
And this another element is directly not a function.
2150
01:29:10,880 --> 01:29:14,320
It just doesn't return, but it directly gives you an A tag,
2151
01:29:14,320 --> 01:29:16,960
which actually goes to
2152
01:29:18,760 --> 01:29:23,760
google.com and has a target of underscore blank.
2153
01:29:23,760 --> 01:29:27,520
Underscore blank.
2154
01:29:27,520 --> 01:29:30,220
And we can just go ahead and say, visit Google.
2155
01:29:31,820 --> 01:29:32,660
Visit Google.
2156
01:29:32,660 --> 01:29:35,040
This should also work because this is exactly
2157
01:29:35,040 --> 01:29:35,880
what is happening.
2158
01:29:35,880 --> 01:29:37,520
This is what is getting returned.
2159
01:29:37,520 --> 01:29:39,360
If I can get it as a return,
2160
01:29:39,360 --> 01:29:41,440
can I render my element directly like that?
2161
01:29:42,880 --> 01:29:45,840
You can actually, if I can just go ahead and remove this,
2162
01:29:45,840 --> 01:29:47,740
I can just say another element directly,
2163
01:29:47,740 --> 01:29:50,200
and this should technically work in theory.
2164
01:29:50,200 --> 01:29:52,920
So if I go ahead and move this, this is not working.
2165
01:29:52,960 --> 01:29:54,160
I'll tell you the reason.
2166
01:29:54,160 --> 01:29:56,560
If I go ahead and inspect and say console, it says,
2167
01:29:56,560 --> 01:29:59,360
hey, warning, another element is using incorrect casing.
2168
01:29:59,360 --> 01:30:02,120
That is the only problem with the Vtis
2169
01:30:02,120 --> 01:30:04,780
because it wants me to actually make it capital.
2170
01:30:04,780 --> 01:30:07,880
And this one also has capital and this is all happy.
2171
01:30:07,880 --> 01:30:09,160
This is all happy.
2172
01:30:09,160 --> 01:30:11,240
If I go ahead and redirect it, reload it.
2173
01:30:11,240 --> 01:30:14,000
Now notice here, it says in the console that,
2174
01:30:14,000 --> 01:30:18,400
hey, react.jsx is invalid expecting a string.
2175
01:30:18,400 --> 01:30:21,320
You are expecting a string, but let's try the same thing
2176
01:30:21,320 --> 01:30:23,120
because this is actually a warning
2177
01:30:23,120 --> 01:30:27,280
or some of the issues that are given to me in the VIT itself.
2178
01:30:27,280 --> 01:30:30,580
Can I go ahead and just change it like this?
2179
01:30:30,580 --> 01:30:31,560
Yes, you can.
2180
01:30:31,560 --> 01:30:33,820
And by the way, I'll just go ahead and show you
2181
01:30:33,820 --> 01:30:36,900
how the things are actually being done in this exact way.
2182
01:30:37,760 --> 01:30:41,400
Now the most important thing is that if this is an element,
2183
01:30:41,400 --> 01:30:43,360
which is already generating an element,
2184
01:30:43,360 --> 01:30:46,320
do I actually use this it like this?
2185
01:30:46,320 --> 01:30:50,080
Or do I use it like this syntax?
2186
01:30:50,080 --> 01:30:51,280
I know this is weird.
2187
01:30:51,280 --> 01:30:53,480
Or this syntax, but this is not a function.
2188
01:30:53,480 --> 01:30:55,600
This is just something.
2189
01:30:55,600 --> 01:30:57,120
I don't know what this is even.
2190
01:30:57,120 --> 01:30:59,320
I have never seen anybody returning like that.
2191
01:30:59,320 --> 01:31:02,280
But one thing I can surely say that this whole thing
2192
01:31:02,280 --> 01:31:03,640
is going to be looped through,
2193
01:31:03,640 --> 01:31:05,480
just like here we have looped through.
2194
01:31:05,480 --> 01:31:07,400
So I don't need to do any of this.
2195
01:31:07,400 --> 01:31:10,240
And can I just go ahead and pass it like a variable?
2196
01:31:10,240 --> 01:31:12,360
Will it accept it like this?
2197
01:31:12,360 --> 01:31:15,400
If I go ahead and save it and go back onto my browser,
2198
01:31:15,400 --> 01:31:18,440
oh, we can see that it accepted it like this.
2199
01:31:18,440 --> 01:31:19,760
Oh, that's interesting.
2200
01:31:19,800 --> 01:31:21,400
Never seen React like this.
2201
01:31:21,400 --> 01:31:24,060
So if I go back, I have concluded a few things that,
2202
01:31:24,060 --> 01:31:27,320
okay, it's totally possible to just declare a function
2203
01:31:27,320 --> 01:31:31,560
and return an HTML from it, that is your JSX technically.
2204
01:31:31,560 --> 01:31:33,720
And I can also go ahead and do some things like that,
2205
01:31:33,720 --> 01:31:37,760
which is very, very weird, but it technically works.
2206
01:31:37,760 --> 01:31:40,280
Now, if technically this whole thing works,
2207
01:31:40,280 --> 01:31:42,640
can I just render React element like this?
2208
01:31:42,640 --> 01:31:44,880
And you might be very, very curious to see it
2209
01:31:44,880 --> 01:31:48,400
like working like this, but you go to the web and it doesn't.
2210
01:31:48,480 --> 01:31:51,640
If I go back onto the Chrome and I go ahead and reload
2211
01:31:51,640 --> 01:31:53,620
and you say that, hey, it doesn't work.
2212
01:31:53,620 --> 01:31:55,640
Now, again, you are excited that probably
2213
01:31:55,640 --> 01:31:57,280
this needs to work somehow.
2214
01:31:57,280 --> 01:31:59,280
So I can use a syntax like this
2215
01:31:59,280 --> 01:32:01,660
or maybe another Angular bracket syntax.
2216
01:32:01,660 --> 01:32:04,400
No, it doesn't work sadly like that.
2217
01:32:04,400 --> 01:32:07,680
And you might want me to answer this, why it doesn't work?
2218
01:32:07,680 --> 01:32:09,640
The reason for that is,
2219
01:32:09,640 --> 01:32:11,320
React doesn't know what is this type.
2220
01:32:11,320 --> 01:32:12,880
React doesn't know these are props.
2221
01:32:12,880 --> 01:32:14,600
React doesn't know these are children.
2222
01:32:14,600 --> 01:32:16,840
This is something that is, I designed it,
2223
01:32:16,840 --> 01:32:19,040
my custom React, I made it up.
2224
01:32:19,040 --> 01:32:20,400
So whenever you made it up,
2225
01:32:20,400 --> 01:32:23,340
how can I react actually understand your language?
2226
01:32:23,340 --> 01:32:26,400
So there is no way react actually understands your language.
2227
01:32:26,400 --> 01:32:28,400
If you want to create an element like this,
2228
01:32:28,400 --> 01:32:30,380
you have to understand the React language
2229
01:32:30,380 --> 01:32:32,240
and have to give it a React language.
2230
01:32:32,240 --> 01:32:34,520
So what is this React element?
2231
01:32:34,520 --> 01:32:37,960
So I'll just go ahead and say const
2232
01:32:38,840 --> 01:32:42,680
and actual React element,
2233
01:32:42,680 --> 01:32:45,440
or I can just say a React element.
2234
01:32:45,440 --> 01:32:46,680
The reason for saying this is
2235
01:32:46,680 --> 01:32:49,960
because we already have this React element as variable.
2236
01:32:49,960 --> 01:32:52,240
So I'll just call this one as React element.
2237
01:32:52,240 --> 01:32:55,520
In order to properly actually convert this thing,
2238
01:32:55,520 --> 01:32:58,140
this whole a thing or whatever the div thing is,
2239
01:32:58,140 --> 01:33:00,600
you have to actually convert this whole thing
2240
01:33:00,600 --> 01:33:02,080
using the React language.
2241
01:33:02,080 --> 01:33:03,840
And how do you understand the React language?
2242
01:33:03,840 --> 01:33:05,800
By importing React, that is it.
2243
01:33:05,800 --> 01:33:08,120
And use a method that says create element.
2244
01:33:08,120 --> 01:33:09,360
This is exactly how it does,
2245
01:33:09,360 --> 01:33:11,520
just like we created our render element.
2246
01:33:11,520 --> 01:33:13,480
This is how react actually create element.
2247
01:33:13,480 --> 01:33:14,880
So whatever you return back,
2248
01:33:14,880 --> 01:33:18,240
this whole JSX actually goes through the React element,
2249
01:33:18,240 --> 01:33:21,160
and then it is converted into an object.
2250
01:33:21,160 --> 01:33:22,880
And how does it look like?
2251
01:33:22,880 --> 01:33:24,760
We saw that we gave this type and everything.
2252
01:33:24,760 --> 01:33:26,040
No, React don't use it.
2253
01:33:26,040 --> 01:33:28,200
React actually directly gave it as a tag.
2254
01:33:28,200 --> 01:33:30,120
This is how literally you convert that.
2255
01:33:30,120 --> 01:33:32,360
After that, you go ahead and inject an object.
2256
01:33:32,360 --> 01:33:35,700
This object, second thing is always and always an object.
2257
01:33:35,700 --> 01:33:37,440
The order here is also important.
2258
01:33:37,440 --> 01:33:39,460
And then it actually loop through and say
2259
01:33:39,460 --> 01:33:41,960
that all the attributes that you want to go through,
2260
01:33:41,960 --> 01:33:44,000
you go ahead and inject those attributes.
2261
01:33:44,000 --> 01:33:46,880
For example, google.com.
2262
01:33:46,880 --> 01:33:49,560
I should have used my own website, but anyways.
2263
01:33:49,560 --> 01:33:53,160
Target, and we use the target in the strings,
2264
01:33:53,160 --> 01:33:56,520
of course, underscore blank.
2265
01:33:56,520 --> 01:33:57,920
That's the second thing.
2266
01:33:57,920 --> 01:34:00,360
And finally, the last thing that comes up
2267
01:34:00,360 --> 01:34:02,560
is whatever needs to inject as a children.
2268
01:34:02,560 --> 01:34:04,940
And that is where you actually says,
2269
01:34:04,940 --> 01:34:09,660
click to visit Google.
2270
01:34:09,660 --> 01:34:12,380
And that is why I named them specifically as childrens
2271
01:34:12,380 --> 01:34:13,600
and props and everything.
2272
01:34:13,600 --> 01:34:15,200
This is exactly what happens.
2273
01:34:15,200 --> 01:34:16,420
The first thing is your element.
2274
01:34:16,420 --> 01:34:17,940
The second thing is all the attributes.
2275
01:34:17,940 --> 01:34:19,460
And the third thing is all the children
2276
01:34:19,460 --> 01:34:20,860
that you actually inject.
2277
01:34:20,860 --> 01:34:23,740
This is how literally React actually break it down.
2278
01:34:23,740 --> 01:34:26,080
Once you have this one as a React element,
2279
01:34:26,080 --> 01:34:28,120
let's go ahead and place it up here.
2280
01:34:28,120 --> 01:34:30,080
That, hey, I now have a React element.
2281
01:34:30,080 --> 01:34:31,060
Let's go back.
2282
01:34:31,060 --> 01:34:34,060
And we can see that now there is no problem
2283
01:34:34,060 --> 01:34:36,300
in saying that, hey, this is not uppercase, lowercase,
2284
01:34:36,300 --> 01:34:39,560
because we are not using those elements now.
2285
01:34:39,560 --> 01:34:43,200
Nothing is getting extracted from another element.
2286
01:34:43,200 --> 01:34:45,000
Another element, this is literal HTML.
2287
01:34:45,000 --> 01:34:48,000
This is what the React expects while rendering,
2288
01:34:48,000 --> 01:34:51,480
because it is the object version of it.
2289
01:34:51,480 --> 01:34:53,860
Quite a lot of stuff, which is fun stuff.
2290
01:34:53,860 --> 01:34:56,480
Now, another thing which you might have seen
2291
01:34:56,480 --> 01:34:58,560
is actually fun stuff.
2292
01:34:58,560 --> 01:35:02,080
So let me just go ahead and say, let's roll back to app.js.
2293
01:35:02,080 --> 01:35:03,560
So we already have this one.
2294
01:35:03,560 --> 01:35:05,640
So we'll just inject this.
2295
01:35:05,640 --> 01:35:09,160
And I'll say, hey, let's render app with a self-closing tag.
2296
01:35:09,160 --> 01:35:10,000
And there we go.
2297
01:35:10,000 --> 01:35:11,720
We have number of times VTAB.
2298
01:35:11,720 --> 01:35:15,540
You might have noticed that what happens into this one
2299
01:35:15,540 --> 01:35:19,160
is sometimes you go ahead and inject those variables.
2300
01:35:19,160 --> 01:35:22,160
That is also super, super important.
2301
01:35:22,160 --> 01:35:25,500
The way how we render the variables
2302
01:35:25,500 --> 01:35:28,960
is not really too different from how we render anything
2303
01:35:28,960 --> 01:35:29,920
in the JavaScript.
2304
01:35:29,920 --> 01:35:31,080
You want to render an element,
2305
01:35:31,080 --> 01:35:33,140
this is how you go ahead, do that.
2306
01:35:33,140 --> 01:35:35,700
Now, here I can just go ahead and say two plus two,
2307
01:35:35,700 --> 01:35:37,300
go back, and it gives me four.
2308
01:35:37,300 --> 01:35:39,140
So it is actually converting everything,
2309
01:35:39,140 --> 01:35:41,300
whatever I have as like this.
2310
01:35:41,300 --> 01:35:44,020
Now, not only this, I can declare my own variables.
2311
01:35:44,020 --> 01:35:46,300
If I go back onto the code part,
2312
01:35:46,300 --> 01:35:50,660
I can go up here and say, hey, I want to have a username.
2313
01:35:50,660 --> 01:35:53,580
And that username is literally my name.
2314
01:35:53,580 --> 01:35:55,940
I can instead of two plus two, or in another variable,
2315
01:35:55,940 --> 01:35:57,700
I can just go ahead and say that, hey,
2316
01:35:57,700 --> 01:36:00,100
now I have this username.
2317
01:36:00,100 --> 01:36:02,780
So this is, oh, by the way, wrong place.
2318
01:36:02,780 --> 01:36:05,060
This is where it should be going up.
2319
01:36:05,060 --> 01:36:08,200
So inside the function, why is it bothering me?
2320
01:36:09,140 --> 01:36:11,320
Okay, too many bothers.
2321
01:36:11,320 --> 01:36:14,100
No corresponding closing tag, you have a closing tag.
2322
01:36:15,060 --> 01:36:18,020
Okay, probably some place I messed it up,
2323
01:36:18,020 --> 01:36:22,260
const username, closing it, return, just like that.
2324
01:36:22,260 --> 01:36:24,320
Okay, I'll hit command Z couple of times.
2325
01:36:26,260 --> 01:36:29,500
Oh, my bad, we actually messed it up here.
2326
01:36:29,500 --> 01:36:31,180
And this should be all happy now.
2327
01:36:31,180 --> 01:36:32,660
Now we can place it back.
2328
01:36:32,660 --> 01:36:34,540
So this is how we get our username,
2329
01:36:34,540 --> 01:36:36,300
whatever the variable is, funny.
2330
01:36:37,180 --> 01:36:39,580
And I go back and see I have this variable.
2331
01:36:39,580 --> 01:36:41,500
So how does that actually works?
2332
01:36:41,500 --> 01:36:42,900
And a lot of people wonder that,
2333
01:36:42,900 --> 01:36:46,380
why cannot I just go ahead and use something like this
2334
01:36:46,380 --> 01:36:51,380
if username equal, equal, maybe one more equal.
2335
01:36:53,460 --> 01:36:55,700
And I go ahead and say Hitesh,
2336
01:36:55,700 --> 01:37:00,300
then can I use my other stuff like Trinity operators here,
2337
01:37:00,300 --> 01:37:02,000
just like that, there is a string.
2338
01:37:02,000 --> 01:37:04,360
And you can see it, it's not working out.
2339
01:37:04,360 --> 01:37:07,840
And it says, no, this one says yes.
2340
01:37:07,840 --> 01:37:11,000
So why does this doesn't work and this works?
2341
01:37:11,000 --> 01:37:14,020
Because the reason behind that is whatever you write,
2342
01:37:14,020 --> 01:37:16,600
React actually goes inside each of your element,
2343
01:37:16,600 --> 01:37:19,200
each of your element, HTML element,
2344
01:37:19,200 --> 01:37:21,500
and extract these curly braces out of it.
2345
01:37:21,500 --> 01:37:24,100
And whatever it extracts these curly braces,
2346
01:37:24,100 --> 01:37:27,000
it actually puts one more object property here.
2347
01:37:27,000 --> 01:37:28,760
And whatever you place it there,
2348
01:37:28,760 --> 01:37:30,700
it actually literally moves it there.
2349
01:37:30,700 --> 01:37:33,400
So for example, when you go ahead and say two plus two,
2350
01:37:33,420 --> 01:37:34,700
that two plus two goes here.
2351
01:37:34,700 --> 01:37:37,080
And since this is evaluated as JavaScript,
2352
01:37:37,080 --> 01:37:40,940
that two plus two gets converted into actual value,
2353
01:37:40,940 --> 01:37:42,020
which is four.
2354
01:37:42,020 --> 01:37:44,100
But if you go ahead and write it like this,
2355
01:37:44,100 --> 01:37:46,980
if, let's just bring it so that we can see that
2356
01:37:46,980 --> 01:37:48,940
why it doesn't make sense.
2357
01:37:48,940 --> 01:37:50,780
I copy this and instead of two plus two,
2358
01:37:50,780 --> 01:37:54,880
if I go ahead and use this, this cannot be evaluated.
2359
01:37:54,880 --> 01:37:58,140
So the only thing which I recommend everybody to understand
2360
01:37:58,140 --> 01:38:01,540
is whatever the expression you write is,
2361
01:38:01,540 --> 01:38:03,400
this is evaluated expression.
2362
01:38:03,400 --> 01:38:06,080
It could be, it should be evaluated to something.
2363
01:38:06,080 --> 01:38:08,080
So this something here is two plus two four,
2364
01:38:08,080 --> 01:38:09,760
so that can be evaluated.
2365
01:38:09,760 --> 01:38:12,920
And that is literally being taken and is being placed
2366
01:38:12,920 --> 01:38:15,580
so that JavaScript engine can just take it as it is.
2367
01:38:15,580 --> 01:38:16,680
When JavaScript takes it,
2368
01:38:16,680 --> 01:38:19,560
this is expression which needs to be evaluated.
2369
01:38:19,560 --> 01:38:21,600
This is not already evaluated.
2370
01:38:21,600 --> 01:38:24,600
And this is, I know this is too much,
2371
01:38:24,600 --> 01:38:27,640
but this is literally how it plays it as another property.
2372
01:38:27,640 --> 01:38:30,260
And that's why you are able to see your username here.
2373
01:38:30,260 --> 01:38:32,640
So it just refers to that as a variable.
2374
01:38:32,640 --> 01:38:34,840
I'm just good in referencing the variable
2375
01:38:34,840 --> 01:38:37,440
or doing some JavaScript-ish calculation,
2376
01:38:37,440 --> 01:38:39,480
not your whole logic should be written here
2377
01:38:39,480 --> 01:38:40,880
because it doesn't make sense.
2378
01:38:40,880 --> 01:38:43,720
Properties should not have logics like this.
2379
01:38:43,720 --> 01:38:46,280
This is literally just a property, list of properties.
2380
01:38:46,280 --> 01:38:48,520
And that is one thing you need to understand.
2381
01:38:48,520 --> 01:38:50,460
So this whole thing doesn't work.
2382
01:38:50,460 --> 01:38:52,640
So you should not be doing it like that.
2383
01:38:52,640 --> 01:38:56,920
If you go ahead and place it as empty, that is also okay.
2384
01:38:56,920 --> 01:38:59,240
Sometimes you will see there are empty lines and stuff.
2385
01:38:59,260 --> 01:39:01,020
Like for example, if you want some spacing
2386
01:39:01,020 --> 01:39:04,420
or something between them, or maybe at some places,
2387
01:39:04,420 --> 01:39:06,700
you'll see people literally just use it like this
2388
01:39:06,700 --> 01:39:08,340
and then put an empty string here,
2389
01:39:08,340 --> 01:39:09,900
just like that with the spaces.
2390
01:39:09,900 --> 01:39:11,960
Because this is literally being taken up here
2391
01:39:11,960 --> 01:39:15,700
and this space actually is taken like this.
2392
01:39:15,700 --> 01:39:18,580
So yes, this is valid and you'll see a lot of bugs
2393
01:39:18,580 --> 01:39:20,620
and things being reduced.
2394
01:39:20,620 --> 01:39:23,760
If you understand this part of JSX, that is it.
2395
01:39:23,760 --> 01:39:25,900
You understand a lot of React.
2396
01:39:25,900 --> 01:39:27,140
This is a lot, I know,
2397
01:39:27,140 --> 01:39:29,540
and I can totally understand and relate to you.
2398
01:39:29,540 --> 01:39:32,400
But this portion of the code is really important for you
2399
01:39:32,400 --> 01:39:36,280
to understand that how the JSX is actually evaluated,
2400
01:39:36,280 --> 01:39:37,960
how React sees the thing,
2401
01:39:37,960 --> 01:39:40,160
and never, never fascinate React
2402
01:39:40,160 --> 01:39:42,000
as something which is magical.
2403
01:39:42,000 --> 01:39:43,860
We already tried to building something.
2404
01:39:43,860 --> 01:39:46,240
Of course, we didn't spend that much amount of time
2405
01:39:46,240 --> 01:39:49,640
with the algorithms and chaining of these elements.
2406
01:39:49,640 --> 01:39:51,760
But hey, we did a fantastic job
2407
01:39:51,760 --> 01:39:53,800
in actually doing a lot of stuff.
2408
01:39:53,800 --> 01:39:56,040
So this is where actually your foundation
2409
01:39:56,040 --> 01:39:57,340
begins of the React, that hey,
2410
01:39:57,340 --> 01:40:00,620
now I understand JavaScript, now I understand JSX,
2411
01:40:00,620 --> 01:40:01,660
now I understand React.
2412
01:40:01,660 --> 01:40:03,080
It's nothing more than that.
2413
01:40:03,080 --> 01:40:05,780
All these H1, H2 tags are converted into object,
2414
01:40:05,780 --> 01:40:08,060
react.createElement helps me to do that.
2415
01:40:08,060 --> 01:40:09,180
And later on, I'll walk you through
2416
01:40:09,180 --> 01:40:11,700
with even the source code of the React
2417
01:40:11,700 --> 01:40:12,940
on the Facebook GitHub page.
2418
01:40:12,940 --> 01:40:14,820
Yes, we'll do that as well later on.
2419
01:40:14,820 --> 01:40:17,060
But I think this video gave you a lot of insight
2420
01:40:17,060 --> 01:40:19,380
of how the custom React is being designed.
2421
01:40:19,380 --> 01:40:21,300
And I know whenever I teach this,
2422
01:40:21,300 --> 01:40:23,140
even in the early days of the React,
2423
01:40:23,140 --> 01:40:24,740
in any offline online bootcamp,
2424
01:40:24,740 --> 01:40:27,200
people just go, oh man, this is too much,
2425
01:40:27,200 --> 01:40:28,400
but we loved it.
2426
01:40:28,400 --> 01:40:30,400
So if you have enjoyed this, please do support me.
2427
01:40:30,400 --> 01:40:32,000
Hit that target in the comment section.
2428
01:40:32,000 --> 01:40:33,840
I would be super, super happy
2429
01:40:33,840 --> 01:40:35,520
to have this kind of support from you.
2430
01:40:35,520 --> 01:40:37,300
And again, videos will be coming soon,
2431
01:40:37,300 --> 01:40:39,260
as constantly as they have been coming
2432
01:40:39,260 --> 01:40:41,520
for years and years now.
2433
01:40:41,520 --> 01:40:43,880
Let's go ahead and catch up in another video.
2434
01:40:46,400 --> 01:40:47,240
Hey there, everyone.
2435
01:40:47,240 --> 01:40:49,600
Hathaish here, and welcome back to another video
2436
01:40:49,600 --> 01:40:51,560
in the series of React.js.
2437
01:40:51,560 --> 01:40:53,960
So we are taking our time absorbing the React
2438
01:40:53,980 --> 01:40:55,040
as much as possible.
2439
01:40:55,040 --> 01:40:57,700
And now let's start the fundamental foundation
2440
01:40:57,700 --> 01:40:59,220
of React itself.
2441
01:40:59,220 --> 01:41:02,400
One of the core foundation of the React is state.
2442
01:41:02,400 --> 01:41:03,440
Not the state management,
2443
01:41:03,440 --> 01:41:05,300
that's a separate topic, we'll cover that,
2444
01:41:05,300 --> 01:41:06,460
but the state.
2445
01:41:06,460 --> 01:41:07,860
What do you mean by state?
2446
01:41:07,860 --> 01:41:10,940
And to be honest, you don't need state in the React.
2447
01:41:10,940 --> 01:41:13,560
So state is the way we first need to understand
2448
01:41:13,560 --> 01:41:15,740
that where does the state comes into the picture?
2449
01:41:15,740 --> 01:41:16,580
Should I learn it?
2450
01:41:16,580 --> 01:41:18,180
Should I, or can I skip that?
2451
01:41:18,180 --> 01:41:20,460
And right now I would say, yes, you can skip that.
2452
01:41:20,460 --> 01:41:21,860
But as you will see the need,
2453
01:41:21,860 --> 01:41:23,180
automatically you'll understand that,
2454
01:41:23,240 --> 01:41:26,640
oh, this is why I should learn the state in the React.
2455
01:41:26,640 --> 01:41:28,600
So let's go ahead and try to build a project,
2456
01:41:28,600 --> 01:41:31,320
very basic project, and let's do the stuff with that.
2457
01:41:31,320 --> 01:41:34,200
And I think hands-on practice is always the good idea.
2458
01:41:34,200 --> 01:41:36,320
By the way, if you're watching it on my YouTube channel,
2459
01:41:36,320 --> 01:41:38,900
I am expecting just a hundred comments
2460
01:41:38,900 --> 01:41:41,120
under the comment section itself,
2461
01:41:41,120 --> 01:41:43,400
just to provide support and to set a target for you.
2462
01:41:43,400 --> 01:41:45,160
If you complete that, that's awesome.
2463
01:41:45,160 --> 01:41:47,080
If not, hey, I need some support.
2464
01:41:47,080 --> 01:41:49,800
I need some encouragement from your side as well.
2465
01:41:49,800 --> 01:41:51,680
It's really difficult to just talk to camera
2466
01:41:51,680 --> 01:41:53,900
and sit here all day in the room itself.
2467
01:41:53,900 --> 01:41:55,980
So I deserve that, hopefully.
2468
01:41:55,980 --> 01:41:59,300
If I, okay, let's go ahead and start with that.
2469
01:41:59,300 --> 01:42:04,140
So first of all, we are on to VS Code, just like always.
2470
01:42:04,140 --> 01:42:07,100
And I'll just start, I'll just actually close this one.
2471
01:42:07,100 --> 01:42:08,840
I'll start another terminal
2472
01:42:08,840 --> 01:42:10,940
and we'll be creating a fresh new project.
2473
01:42:10,940 --> 01:42:12,440
By the way, all the projects are available
2474
01:42:12,440 --> 01:42:13,960
on my GitHub repository.
2475
01:42:13,960 --> 01:42:16,160
You can just search for React English,
2476
01:42:16,160 --> 01:42:18,400
somewhat repository, it will be in the description.
2477
01:42:18,400 --> 01:42:19,940
So it will be available there.
2478
01:42:19,940 --> 01:42:24,260
So let's go ahead and try to have this one at latest.
2479
01:42:24,260 --> 01:42:26,300
And this is just how you create the VTAP.
2480
01:42:26,300 --> 01:42:27,940
And by the way, we have discussed quite a lot.
2481
01:42:27,940 --> 01:42:29,860
VTAP, React app, doesn't really matter,
2482
01:42:29,860 --> 01:42:32,220
whatever like suits you, you like that,
2483
01:42:32,220 --> 01:42:34,420
you just go ahead and get started with that.
2484
01:42:34,420 --> 01:42:36,620
I'll name this one as, this is second project.
2485
01:42:36,620 --> 01:42:38,780
So I'll just call this one as zero to counter
2486
01:42:38,780 --> 01:42:41,660
to keep a track of how many projects we are building
2487
01:42:41,660 --> 01:42:42,980
in this one, whether small or big,
2488
01:42:42,980 --> 01:42:44,480
that doesn't really matter.
2489
01:42:44,480 --> 01:42:46,220
So I'll just go ahead, work with React.
2490
01:42:46,220 --> 01:42:47,620
I want to go with JavaScript.
2491
01:42:47,620 --> 01:42:50,100
I know a lot of you want to go into TypeScript,
2492
01:42:50,100 --> 01:42:52,220
especially after seeing my entire playlist
2493
01:42:52,220 --> 01:42:53,660
on this channel or free code cam,
2494
01:42:53,660 --> 01:42:54,820
wherever you have seen that,
2495
01:42:54,820 --> 01:42:56,740
entire playlist on TypeScript.
2496
01:42:56,740 --> 01:42:58,980
I want to keep this entire React series
2497
01:42:58,980 --> 01:43:01,300
much more accessible to everyone.
2498
01:43:01,300 --> 01:43:03,220
I don't want too much of the prerequisite
2499
01:43:03,220 --> 01:43:04,900
because already there is too much prerequisite
2500
01:43:04,900 --> 01:43:07,060
of JavaScript in the React series.
2501
01:43:07,060 --> 01:43:09,820
So I would just say that, hey, we are not using TypeScript,
2502
01:43:09,820 --> 01:43:11,460
at least in the initial level.
2503
01:43:11,460 --> 01:43:14,500
I will keep couple of videos at the very last of the series
2504
01:43:14,500 --> 01:43:16,660
to just give you an idea of how you can use TypeScript
2505
01:43:16,780 --> 01:43:18,700
with React, but for majority of the part,
2506
01:43:18,700 --> 01:43:21,500
my goal is to make you familiarize
2507
01:43:21,500 --> 01:43:23,620
with the concept and foundation of React
2508
01:43:23,620 --> 01:43:25,540
and not to just bog you down with the TypeScript.
2509
01:43:25,540 --> 01:43:27,300
That's the idea.
2510
01:43:27,300 --> 01:43:30,180
So let's go ahead into zero two
2511
01:43:30,180 --> 01:43:32,940
and I can just go ahead and say npm install.
2512
01:43:32,940 --> 01:43:34,500
That is all what we need.
2513
01:43:34,500 --> 01:43:38,060
And then we'll simply fire npm run dev to start this.
2514
01:43:38,060 --> 01:43:42,460
If my internet is decently fast, I hope so.
2515
01:43:42,460 --> 01:43:43,900
There is not too much of dependencies.
2516
01:43:43,900 --> 01:43:45,420
That's a good thing.
2517
01:43:45,420 --> 01:43:47,740
Something, something has happened to my internet.
2518
01:43:47,740 --> 01:43:49,780
It's usually not this slow.
2519
01:43:49,780 --> 01:43:53,740
Anyways, let's go ahead and say npm run dev.
2520
01:43:53,740 --> 01:43:55,180
And by the way, we have already seen that
2521
01:43:55,180 --> 01:43:58,060
how we can actually see that which command runs all of that
2522
01:43:58,060 --> 01:43:59,340
via the package.json.
2523
01:43:59,340 --> 01:44:02,700
This is how it looks like, which is good, which is good.
2524
01:44:02,700 --> 01:44:04,900
Going back into zero two counter
2525
01:44:04,900 --> 01:44:09,020
and we'll see inside the source that we have app.jsx.
2526
01:44:09,020 --> 01:44:11,660
This is the file where we are interested in mostly.
2527
01:44:11,660 --> 01:44:14,620
And we'll try to build something of our own
2528
01:44:14,620 --> 01:44:16,540
into this entire application.
2529
01:44:16,540 --> 01:44:18,460
So let's just remove everything.
2530
01:44:18,460 --> 01:44:20,500
We'll just keep the bare minimum basic.
2531
01:44:20,500 --> 01:44:23,780
And let's see that can we build something of our own?
2532
01:44:23,780 --> 01:44:26,620
So let's just go ahead and have a simple H1.
2533
01:44:26,620 --> 01:44:31,620
It says React course with Hitesh and that's it.
2534
01:44:34,740 --> 01:44:39,300
And probably there is another H1 here or probably H2
2535
01:44:39,300 --> 01:44:43,580
and I'll say a counter value and then nothing.
2536
01:44:43,820 --> 01:44:45,700
This is exactly what we want to do.
2537
01:44:45,700 --> 01:44:48,060
And then I'll probably have a button
2538
01:44:48,060 --> 01:44:49,740
and that button does nothing.
2539
01:44:49,740 --> 01:44:51,820
It just says add value.
2540
01:44:51,820 --> 01:44:55,460
And there is another button which just says remove value.
2541
01:44:56,460 --> 01:44:58,460
And for some reason, I don't know,
2542
01:44:58,460 --> 01:45:01,420
I want to inject some values in these buttons as well.
2543
01:45:01,420 --> 01:45:02,260
And there is one more.
2544
01:45:02,260 --> 01:45:04,820
I'll just go ahead and say, hey, there is a paragraph
2545
01:45:04,820 --> 01:45:08,660
which says footer, which will also get some value.
2546
01:45:08,660 --> 01:45:11,620
Can we first go ahead and just remove everything
2547
01:45:11,620 --> 01:45:14,060
from this file just like we did in the last one
2548
01:45:14,060 --> 01:45:16,380
that hey, I'm not interested in any one of that.
2549
01:45:16,380 --> 01:45:18,540
I just want to see how my app looks like.
2550
01:45:18,540 --> 01:45:19,380
So there we go.
2551
01:45:20,260 --> 01:45:22,580
Right now we can add some more values to it
2552
01:45:22,580 --> 01:45:24,780
or probably we can inject some of the spacing as well.
2553
01:45:24,780 --> 01:45:26,140
By the way, here's a fun thing.
2554
01:45:26,140 --> 01:45:28,660
I can just go ahead and add like this
2555
01:45:28,660 --> 01:45:30,660
and notice here, it adds a space.
2556
01:45:30,660 --> 01:45:32,740
If you know how the JSX are being converted,
2557
01:45:32,740 --> 01:45:34,700
this shouldn't really bother you.
2558
01:45:34,700 --> 01:45:36,000
But right now there are buttons.
2559
01:45:36,000 --> 01:45:37,540
They do nothing, footer, nothing.
2560
01:45:37,540 --> 01:45:41,420
And what I want to do is I want to have a variable
2561
01:45:41,460 --> 01:45:43,940
and that variable should be shown all the places.
2562
01:45:43,940 --> 01:45:44,820
No big deal.
2563
01:45:44,820 --> 01:45:47,940
I can come here and I can declare a variable.
2564
01:45:47,940 --> 01:45:49,780
Let's just say we will have a counter.
2565
01:45:49,780 --> 01:45:50,780
Since this will change,
2566
01:45:50,780 --> 01:45:53,940
I'll start with the value 15, 20, whatever you like.
2567
01:45:53,940 --> 01:45:55,260
This is my counter.
2568
01:45:55,260 --> 01:45:58,700
And I know already that I can just use these curly braces
2569
01:45:58,700 --> 01:46:00,420
to have my counter.
2570
01:46:00,420 --> 01:46:02,880
This is known as variable injection.
2571
01:46:02,880 --> 01:46:04,220
No fancy thing.
2572
01:46:04,220 --> 01:46:06,760
And I also want to inject it here.
2573
01:46:06,760 --> 01:46:08,860
So I'll just go ahead and say counter.
2574
01:46:09,780 --> 01:46:12,500
And I'll also come here in footer
2575
01:46:12,500 --> 01:46:14,840
and I'll inject it here and I'll say counter.
2576
01:46:14,840 --> 01:46:17,060
So this is a common thing, which I shared you
2577
01:46:17,060 --> 01:46:20,340
in the story of React, how it actually got up.
2578
01:46:20,340 --> 01:46:23,740
So I can see it's 15, it's 15, it's 15 everywhere.
2579
01:46:23,740 --> 01:46:27,380
So first of all, notice and even appreciate
2580
01:46:27,380 --> 01:46:30,540
that you don't have to say document.getElement by ID
2581
01:46:30,540 --> 01:46:33,180
and then inject that, append that, add value,
2582
01:46:33,180 --> 01:46:36,100
append HTML, nothing, nothing like that.
2583
01:46:36,100 --> 01:46:37,700
I can just use literally variable.
2584
01:46:37,700 --> 01:46:39,900
So I'm more focused on the programming side of it
2585
01:46:39,900 --> 01:46:44,300
than just attaching things to the node list in my document.
2586
01:46:44,300 --> 01:46:46,460
So that's one advantage here.
2587
01:46:46,460 --> 01:46:49,560
Now, next thing is I want to have a method
2588
01:46:49,560 --> 01:46:52,140
that when I click on the button, it adds the value.
2589
01:46:52,140 --> 01:46:53,580
Cool, you can have that.
2590
01:46:53,580 --> 01:46:56,020
Pretty simple, there is nothing Reactish in that.
2591
01:46:56,020 --> 01:46:57,460
It's just simple JavaScript.
2592
01:46:57,460 --> 01:47:00,220
So I can just go ahead and say, hey, I'll use an onClick.
2593
01:47:00,220 --> 01:47:02,740
This onClick will say add a value.
2594
01:47:02,740 --> 01:47:05,120
Since this is a method, this needs to be declared.
2595
01:47:05,120 --> 01:47:07,460
So we can just go ahead, use classic function
2596
01:47:07,460 --> 01:47:09,380
or arrow function, totally up to you,
2597
01:47:09,380 --> 01:47:11,020
not going to crash your app.
2598
01:47:11,020 --> 01:47:13,060
So I'll just say add value
2599
01:47:13,060 --> 01:47:16,280
and add value will be an arrow function in my case.
2600
01:47:16,280 --> 01:47:19,220
And what it does, it takes the counter
2601
01:47:19,220 --> 01:47:20,800
and it adds the value to it.
2602
01:47:20,800 --> 01:47:23,500
So I'll just go ahead and say plus one and that is all.
2603
01:47:23,500 --> 01:47:25,820
Now on top of this,
2604
01:47:25,820 --> 01:47:29,420
let's go ahead and try to do a console log of the counter
2605
01:47:29,420 --> 01:47:31,000
whenever I add a value.
2606
01:47:31,860 --> 01:47:36,140
I'll just go ahead and say, let's console log here itself.
2607
01:47:36,160 --> 01:47:39,340
I'll say console log and I want to have the value of counter.
2608
01:47:39,340 --> 01:47:40,380
That is it.
2609
01:47:40,380 --> 01:47:42,600
So I'll save this, go back
2610
01:47:42,600 --> 01:47:45,220
and I'll open up my inspect and console
2611
01:47:45,220 --> 01:47:47,420
so that I can see what's happening there.
2612
01:47:47,420 --> 01:47:50,760
So the value is 15 and I simply click on add value
2613
01:47:50,760 --> 01:47:51,840
and it says 15.
2614
01:47:51,840 --> 01:47:55,800
I again click on this and it says two time it's 15.
2615
01:47:55,800 --> 01:47:57,160
Very interesting.
2616
01:47:57,160 --> 01:47:58,560
So if I go back,
2617
01:47:58,560 --> 01:48:01,320
I see that the counter plus one doesn't increase it.
2618
01:48:01,320 --> 01:48:02,160
Why?
2619
01:48:02,160 --> 01:48:03,440
Because I didn't save it anywhere.
2620
01:48:03,440 --> 01:48:05,080
So it should be something like this.
2621
01:48:05,080 --> 01:48:07,280
Counter is equals to counter plus one.
2622
01:48:07,280 --> 01:48:09,100
So I'm updating the value of counter
2623
01:48:09,100 --> 01:48:11,540
by adding one to the existing value.
2624
01:48:11,540 --> 01:48:12,580
That's good.
2625
01:48:12,580 --> 01:48:15,420
Let's go ahead and just facilitate it again.
2626
01:48:15,420 --> 01:48:17,660
Refresh and remove everything.
2627
01:48:17,660 --> 01:48:18,900
And I say add value.
2628
01:48:18,900 --> 01:48:22,500
I get 16, add value 17, add value 18.
2629
01:48:22,500 --> 01:48:23,460
Okay.
2630
01:48:23,460 --> 01:48:26,440
So I'm able to do almost everything in so far,
2631
01:48:26,440 --> 01:48:28,900
whatever is required in the JavaScript as well.
2632
01:48:28,900 --> 01:48:30,580
I have my variable.
2633
01:48:30,580 --> 01:48:32,020
I can add value to it.
2634
01:48:32,020 --> 01:48:33,780
I can similarly remove the values,
2635
01:48:33,780 --> 01:48:35,900
whatever everything that JavaScript is telling me,
2636
01:48:35,900 --> 01:48:37,260
I can do that.
2637
01:48:37,260 --> 01:48:39,780
Except from this, what's coming up next.
2638
01:48:39,780 --> 01:48:42,020
Now the next target in front of us is that,
2639
01:48:42,020 --> 01:48:43,780
hey, you have this, great, good.
2640
01:48:43,780 --> 01:48:45,100
We appreciate that.
2641
01:48:45,100 --> 01:48:48,500
But now we want this new value to be updated here as well.
2642
01:48:48,500 --> 01:48:50,820
Now this brings something to your mind that,
2643
01:48:50,820 --> 01:48:53,580
hey, how does this work?
2644
01:48:53,580 --> 01:48:57,400
Because technically if we are updating this variable,
2645
01:48:57,400 --> 01:48:59,500
this should be updated here as well.
2646
01:48:59,500 --> 01:49:02,460
And here as well, and here as well.
2647
01:49:02,460 --> 01:49:04,100
Why is it not working?
2648
01:49:04,100 --> 01:49:06,420
Because I'm pretty sure on 100%
2649
01:49:06,420 --> 01:49:07,620
that the value is getting updated.
2650
01:49:07,620 --> 01:49:10,700
I'm seeing this and I can add the value 19,
2651
01:49:10,700 --> 01:49:13,080
but this is not getting updated here.
2652
01:49:13,080 --> 01:49:16,420
And this is my friends, where it comes to the React.
2653
01:49:16,420 --> 01:49:19,340
React, this is exactly where React comes into the picture.
2654
01:49:19,340 --> 01:49:22,460
React is a library which actually takes the control from you
2655
01:49:22,460 --> 01:49:25,180
and gives you that, hey, this is now the mechanism
2656
01:49:25,180 --> 01:49:27,500
of how you're going to update your UI.
2657
01:49:27,500 --> 01:49:31,860
Remember that is why we call React as a UI library,
2658
01:49:31,900 --> 01:49:34,780
majorly, because it controls how you're going to take care
2659
01:49:34,780 --> 01:49:37,860
of the UI itself, not your JavaScript,
2660
01:49:37,860 --> 01:49:40,180
not how you're going to take the data from the database,
2661
01:49:40,180 --> 01:49:42,700
but how you're going to display the things on the website
2662
01:49:42,700 --> 01:49:45,100
and how things are going to be getting updated.
2663
01:49:45,100 --> 01:49:47,900
And this is exactly where React actually tells you
2664
01:49:47,900 --> 01:49:50,340
that you know what, you cannot go ahead
2665
01:49:50,340 --> 01:49:52,500
and just update things like that.
2666
01:49:52,500 --> 01:49:54,340
I will provide you a mechanism.
2667
01:49:54,340 --> 01:49:56,220
You're going to follow that mechanism.
2668
01:49:56,220 --> 01:49:58,760
And by which you are going to update everything
2669
01:49:58,760 --> 01:50:00,340
and anything that you want.
2670
01:50:00,340 --> 01:50:03,020
And exactly we have to follow the things.
2671
01:50:03,020 --> 01:50:05,980
React came up with the concept known as a state.
2672
01:50:05,980 --> 01:50:08,520
And state is a unique thing in the React,
2673
01:50:08,520 --> 01:50:12,060
which actually simply just is getting constantly monitored
2674
01:50:12,060 --> 01:50:17,020
and any change in the state re-renders the UI on the web.
2675
01:50:17,020 --> 01:50:19,940
And this is what the state is being designed for.
2676
01:50:19,940 --> 01:50:22,500
Any change in the state will re-render the webpage.
2677
01:50:22,500 --> 01:50:25,180
That's it, told you, it's really, really simple.
2678
01:50:25,180 --> 01:50:26,660
So we cannot just go ahead and say, hey,
2679
01:50:26,660 --> 01:50:27,940
let counter equals to 15.
2680
01:50:27,940 --> 01:50:30,020
There is a way how you do it in the React.
2681
01:50:30,040 --> 01:50:32,980
And once you understand this way once, and that's it,
2682
01:50:32,980 --> 01:50:35,700
you will be able to do it every single time.
2683
01:50:35,700 --> 01:50:37,420
We can already see that in the VIT,
2684
01:50:37,420 --> 01:50:40,060
there is already an import statement of use a stat,
2685
01:50:40,060 --> 01:50:41,760
use a state from the React.
2686
01:50:41,760 --> 01:50:44,140
And this is exactly the state that comes up.
2687
01:50:44,140 --> 01:50:46,620
Now, let's just go ahead and say const
2688
01:50:46,620 --> 01:50:48,500
and we want to use this state.
2689
01:50:48,500 --> 01:50:50,800
So the way how you say it is simply say,
2690
01:50:50,800 --> 01:50:52,820
use state and the parenthesis.
2691
01:50:52,820 --> 01:50:55,340
I'll tell you later on, these are known as hooks
2692
01:50:55,340 --> 01:50:57,940
and how you can design your own custom hooks as well.
2693
01:50:57,980 --> 01:51:00,020
Yes, we'll be designing a full fledged.
2694
01:51:00,020 --> 01:51:02,220
But the whole idea is, this is a method.
2695
01:51:02,220 --> 01:51:04,060
What does this method returns to you?
2696
01:51:04,060 --> 01:51:06,940
And it's pretty simple to extract value from it.
2697
01:51:06,940 --> 01:51:09,340
It returns you something in the format of array.
2698
01:51:09,340 --> 01:51:12,020
The first thing is actually the variable,
2699
01:51:12,020 --> 01:51:14,020
whatever you want to call it, it's up to you.
2700
01:51:14,020 --> 01:51:15,660
And the second is a method.
2701
01:51:15,660 --> 01:51:17,660
And there is no hard and fast rule
2702
01:51:17,660 --> 01:51:19,420
that you always should call it as counter,
2703
01:51:19,420 --> 01:51:21,660
then set counter number, then set number.
2704
01:51:21,660 --> 01:51:23,100
It just is a convention.
2705
01:51:23,100 --> 01:51:24,580
Feel free to call it as Superman,
2706
01:51:24,580 --> 01:51:25,820
and this one has Spiderman.
2707
01:51:25,820 --> 01:51:26,940
Nobody is going to stop you
2708
01:51:26,940 --> 01:51:29,540
and your code is not going to go bonkers.
2709
01:51:29,540 --> 01:51:30,380
Really basic.
2710
01:51:30,380 --> 01:51:34,140
Now, just introducing this and saying it as counter,
2711
01:51:34,140 --> 01:51:36,220
by the way, I could have called this one as count
2712
01:51:36,220 --> 01:51:38,260
or I could have called this one as Hitesh.
2713
01:51:38,260 --> 01:51:39,460
It would have still worked.
2714
01:51:39,460 --> 01:51:41,260
Again, different Hitesh and set counter.
2715
01:51:41,260 --> 01:51:43,020
They are also linked.
2716
01:51:43,020 --> 01:51:44,780
Always remember the one thing,
2717
01:51:44,780 --> 01:51:47,100
that the first value that you see here,
2718
01:51:47,100 --> 01:51:48,900
it's actually a variable.
2719
01:51:48,900 --> 01:51:51,980
And the second value that you see here is a function.
2720
01:51:51,980 --> 01:51:53,580
Yes, you can call it method as well.
2721
01:51:53,580 --> 01:51:56,380
I won't harm you for that.
2722
01:51:56,380 --> 01:51:58,700
I won't be failing you in the interviews as well,
2723
01:51:58,700 --> 01:52:01,460
but hey, remember this is a variable.
2724
01:52:01,460 --> 01:52:03,820
This is a method.
2725
01:52:03,820 --> 01:52:05,100
Okay, moving further.
2726
01:52:05,100 --> 01:52:06,580
Just because the name is counter,
2727
01:52:06,580 --> 01:52:09,300
I cannot just go ahead and say counter equals plus one.
2728
01:52:09,300 --> 01:52:11,540
This is not going to work still.
2729
01:52:11,540 --> 01:52:13,100
I can save this, show you that,
2730
01:52:13,100 --> 01:52:15,100
hey, this is all good, refresh it,
2731
01:52:15,100 --> 01:52:17,060
and all refresh, good.
2732
01:52:17,060 --> 01:52:18,860
And I can just say add value.
2733
01:52:18,860 --> 01:52:20,700
And now even this thing is gone.
2734
01:52:20,700 --> 01:52:22,060
So what happened?
2735
01:52:22,060 --> 01:52:23,140
What just happened?
2736
01:52:23,140 --> 01:52:25,620
How can this value actually go away?
2737
01:52:25,620 --> 01:52:27,460
Let's look at the code, see the error.
2738
01:52:27,460 --> 01:52:29,460
So it says, hey, const variable and stuff.
2739
01:52:29,460 --> 01:52:30,820
So what is happening?
2740
01:52:30,820 --> 01:52:32,420
What is happening?
2741
01:52:32,420 --> 01:52:34,060
Simply because this is a const,
2742
01:52:34,060 --> 01:52:35,660
you might be thinking, hey, this is a constant.
2743
01:52:35,660 --> 01:52:37,500
That's why it's not able to add the value.
2744
01:52:37,500 --> 01:52:39,660
Okay, let's just go ahead and try this.
2745
01:52:39,660 --> 01:52:42,660
If that works, let, and there we go.
2746
01:52:42,660 --> 01:52:44,780
If I go back again and hit a refresh,
2747
01:52:44,780 --> 01:52:46,140
I still don't see the numbers.
2748
01:52:46,140 --> 01:52:48,020
It says, hey, that const error is gone.
2749
01:52:48,020 --> 01:52:50,180
Now even we don't have any error.
2750
01:52:50,180 --> 01:52:52,220
So the problem is not with the let or const.
2751
01:52:52,220 --> 01:52:53,420
You can still keep it const,
2752
01:52:53,420 --> 01:52:54,900
because every time you update the value,
2753
01:52:55,020 --> 01:52:56,740
a new state is given to you.
2754
01:52:56,740 --> 01:52:59,780
Okay, how do I update this whole thing?
2755
01:52:59,780 --> 01:53:02,580
So this whole thing, updation is pretty simple.
2756
01:53:02,580 --> 01:53:05,460
All you do in this one is just whatever you want to update,
2757
01:53:05,460 --> 01:53:07,380
you update it via the method.
2758
01:53:07,380 --> 01:53:09,300
So once you have the method, for example,
2759
01:53:09,300 --> 01:53:11,660
I remove everything from here in the add value,
2760
01:53:11,660 --> 01:53:14,140
you call this method set counter.
2761
01:53:14,140 --> 01:53:16,020
The set counter method is responsible
2762
01:53:16,020 --> 01:53:18,180
for updating its nearby,
2763
01:53:18,180 --> 01:53:20,380
or I know nearby is not a good word,
2764
01:53:20,380 --> 01:53:22,220
but in the array, there is only one nearby,
2765
01:53:22,220 --> 01:53:23,340
which is a counter.
2766
01:53:23,340 --> 01:53:26,740
So it's brother, the brother is a good word,
2767
01:53:26,740 --> 01:53:28,100
it's brother here.
2768
01:53:28,100 --> 01:53:29,060
And how do you do that?
2769
01:53:29,060 --> 01:53:30,460
You just pass the updated value.
2770
01:53:30,460 --> 01:53:32,060
So in this case, I can just go ahead and say,
2771
01:53:32,060 --> 01:53:33,660
hey, I want to say counter,
2772
01:53:33,660 --> 01:53:35,220
and I want to add one to it.
2773
01:53:35,220 --> 01:53:36,780
Okay, you just do that.
2774
01:53:36,780 --> 01:53:38,460
Now what happens when I do this?
2775
01:53:38,460 --> 01:53:40,420
If I go back and hit a refresh,
2776
01:53:40,420 --> 01:53:41,740
then notice here it says,
2777
01:53:41,740 --> 01:53:45,020
react to the counter value is gone, nothing, nothing.
2778
01:53:45,020 --> 01:53:47,580
If I go ahead and say add value, it says none.
2779
01:53:47,580 --> 01:53:48,420
Why is that?
2780
01:53:48,420 --> 01:53:50,460
Because there is one more portion of the thing
2781
01:53:50,460 --> 01:53:51,700
which you need to learn.
2782
01:53:51,700 --> 01:53:53,740
Notice here, the user state right now
2783
01:53:53,740 --> 01:53:55,540
has these parentheses.
2784
01:53:55,540 --> 01:53:58,820
These parentheses define what should be the initial value
2785
01:53:58,820 --> 01:53:59,860
because it's available.
2786
01:53:59,860 --> 01:54:01,020
You are defining a variable,
2787
01:54:01,020 --> 01:54:02,940
something needs to go into it.
2788
01:54:02,940 --> 01:54:04,940
So obviously when there is nothing,
2789
01:54:04,940 --> 01:54:08,380
so it's undefined and undefined, you add one to it,
2790
01:54:08,380 --> 01:54:10,700
you don't get the desired result.
2791
01:54:10,700 --> 01:54:12,020
So you can start it with a zero,
2792
01:54:12,020 --> 01:54:14,180
or in this case, we started our variable with 15,
2793
01:54:14,180 --> 01:54:15,740
it's up to you, whatever you want to start,
2794
01:54:15,740 --> 01:54:17,140
I'll start with 15.
2795
01:54:17,140 --> 01:54:19,700
And now I see the 15 again here.
2796
01:54:19,700 --> 01:54:21,620
Now again, by the way, in case just for the info,
2797
01:54:22,420 --> 01:54:24,780
it doesn't need to be variable like numbers here.
2798
01:54:24,780 --> 01:54:26,540
You can just go ahead and start with true.
2799
01:54:26,540 --> 01:54:30,100
You can start with an empty array, a filled array, an object.
2800
01:54:30,100 --> 01:54:33,020
You can even put methods into it, which is not a good idea,
2801
01:54:33,020 --> 01:54:35,740
but you can, nobody's stopping you from that.
2802
01:54:35,740 --> 01:54:37,220
I'll start with 15.
2803
01:54:37,220 --> 01:54:40,020
Okay, now things are looking like a little bit better.
2804
01:54:40,020 --> 01:54:44,740
I can see React course with a page 15, 15, 15 everywhere.
2805
01:54:44,740 --> 01:54:48,260
And if I even add value to it, it gets updated here.
2806
01:54:48,260 --> 01:54:49,520
So goal achieved.
2807
01:54:49,520 --> 01:54:52,040
So we have learned here that there is a way,
2808
01:54:52,040 --> 01:54:54,120
there is a mechanism, there is a flow of data
2809
01:54:54,120 --> 01:54:55,640
that React is controlling.
2810
01:54:55,640 --> 01:54:57,280
And what we can appreciate here is
2811
01:54:57,280 --> 01:55:00,400
I can just click on one button and it updates the value
2812
01:55:00,400 --> 01:55:03,760
all at all the three places, I don't have to worry at all.
2813
01:55:03,760 --> 01:55:05,760
So that is what your state is.
2814
01:55:05,760 --> 01:55:07,600
There is only a single source of truth.
2815
01:55:07,600 --> 01:55:10,300
There is a single state and everybody is consulting
2816
01:55:10,300 --> 01:55:12,520
and is looking forward to this state only.
2817
01:55:12,520 --> 01:55:14,120
That's why everybody gets updated
2818
01:55:14,120 --> 01:55:15,900
and hence React solved the problem
2819
01:55:15,900 --> 01:55:19,160
of the ghost messages in the Facebook.
2820
01:55:19,680 --> 01:55:21,680
That is it, this is the whole gist of it.
2821
01:55:21,680 --> 01:55:24,160
But this actually, although the next portion
2822
01:55:24,160 --> 01:55:27,120
of this section, I usually, first let's cover up.
2823
01:55:27,120 --> 01:55:29,680
Let's cover up the decrease value part as well
2824
01:55:29,680 --> 01:55:30,920
because there's a button here as well.
2825
01:55:30,920 --> 01:55:33,680
So it would be fun to actually go ahead
2826
01:55:33,680 --> 01:55:35,160
and work on with it.
2827
01:55:35,160 --> 01:55:36,880
So I'll just say click and I'll say,
2828
01:55:36,880 --> 01:55:40,680
hey, there will be a new method which will be remove a value
2829
01:55:40,680 --> 01:55:42,520
and that needs to be a method as well.
2830
01:55:42,520 --> 01:55:45,440
And by the way, you can use the classic functions as well.
2831
01:55:45,440 --> 01:55:48,440
And this will be remove value,
2832
01:55:48,480 --> 01:55:51,000
which will be in our case an arrow functions.
2833
01:55:51,000 --> 01:55:51,880
So there we go.
2834
01:55:51,880 --> 01:55:53,360
And we can use the same state.
2835
01:55:53,360 --> 01:55:55,360
So same method because I cannot just go ahead
2836
01:55:55,360 --> 01:55:57,240
and say counter plus one or minus one.
2837
01:55:57,240 --> 01:56:00,120
This method will be responsible for having this.
2838
01:56:00,120 --> 01:56:02,080
By the way, you can also do something like this.
2839
01:56:02,080 --> 01:56:07,080
Hey, counter is going to be equal to counter minus one,
2840
01:56:07,520 --> 01:56:11,160
oops, counter minus one inconsistency.
2841
01:56:11,160 --> 01:56:12,800
And then I can go ahead and pass up
2842
01:56:12,800 --> 01:56:14,200
the updated value of counter.
2843
01:56:14,200 --> 01:56:17,480
You can name this one as a new counter as well
2844
01:56:17,480 --> 01:56:19,360
and you can pass on that as well.
2845
01:56:19,360 --> 01:56:21,600
No big deal, just style of writing the code.
2846
01:56:21,600 --> 01:56:24,320
And we can just go ahead and say counter minus one.
2847
01:56:24,320 --> 01:56:25,720
The reason for writing this is
2848
01:56:25,720 --> 01:56:28,120
because there's something interesting I want to show you.
2849
01:56:28,120 --> 01:56:29,960
I go back and I say remove value.
2850
01:56:29,960 --> 01:56:32,240
It removes the value at all places, it adds the value.
2851
01:56:32,240 --> 01:56:33,680
So there's this great.
2852
01:56:33,680 --> 01:56:35,920
Now this next portion of the video,
2853
01:56:35,920 --> 01:56:39,140
I usually go ahead and take this as kind of exercise
2854
01:56:39,140 --> 01:56:41,800
for interviews and stuff, but I'll just throw it away.
2855
01:56:41,800 --> 01:56:45,280
Okay, I go ahead and duplicate this line a couple of times.
2856
01:56:45,280 --> 01:56:48,240
What do you think is the expected output here?
2857
01:56:48,240 --> 01:56:50,960
This is a classic interview react question, which says,
2858
01:56:50,960 --> 01:56:53,760
hey, now since it is getting started on 15,
2859
01:56:53,760 --> 01:56:55,920
I'm running the function add value.
2860
01:56:55,920 --> 01:57:00,460
So it should be after 15, it should be 16, 17, 18 and 19.
2861
01:57:00,460 --> 01:57:02,440
But when you actually go ahead and see add value,
2862
01:57:02,440 --> 01:57:05,400
it just adds 16 and 17 and 18.
2863
01:57:05,400 --> 01:57:07,000
This is something which has to do
2864
01:57:07,000 --> 01:57:08,760
with the concept of batching.
2865
01:57:08,760 --> 01:57:11,920
React doesn't actually send the things immediately
2866
01:57:11,920 --> 01:57:14,280
when you actually perform any action or state.
2867
01:57:14,280 --> 01:57:16,200
It actually bundles everything together.
2868
01:57:16,200 --> 01:57:19,240
We'll go through into the algorithm behind this,
2869
01:57:19,240 --> 01:57:21,320
known as reconciliation, how that's being done.
2870
01:57:21,320 --> 01:57:22,320
But these are fancy words,
2871
01:57:22,320 --> 01:57:24,440
we'll throw them around a little bit later.
2872
01:57:24,440 --> 01:57:25,920
So what React is doing,
2873
01:57:25,920 --> 01:57:28,060
it's actually taking all this batch
2874
01:57:28,060 --> 01:57:29,000
and it's saying that, hey,
2875
01:57:29,000 --> 01:57:30,880
there's only one method you're firing up
2876
01:57:30,880 --> 01:57:33,320
and it has just one operation to be done as counter,
2877
01:57:33,320 --> 01:57:34,440
which is increasing.
2878
01:57:34,440 --> 01:57:36,800
So this batching actually gives you a problem.
2879
01:57:36,800 --> 01:57:38,740
If you want to avoid the batching that, hey,
2880
01:57:38,740 --> 01:57:41,040
this is not the exactly same value I'm taking
2881
01:57:41,040 --> 01:57:42,840
and I'm updating one because this is right now
2882
01:57:42,840 --> 01:57:44,920
just the same value I'm taking it.
2883
01:57:44,920 --> 01:57:47,240
There is a way how you can actually avoid that
2884
01:57:47,240 --> 01:57:50,520
or actually maybe this is the situation you want to do that.
2885
01:57:50,520 --> 01:57:51,620
I want to click it.
2886
01:57:51,620 --> 01:57:53,400
I want to update just four to it,
2887
01:57:53,400 --> 01:57:54,720
but instead of adding four to it,
2888
01:57:54,720 --> 01:57:56,000
I want to do it iterationally.
2889
01:57:56,000 --> 01:57:58,120
And there will be situations, not exactly like this,
2890
01:57:58,120 --> 01:57:59,640
but there will be situation.
2891
01:57:59,640 --> 01:58:01,160
In that case, what you can do is
2892
01:58:01,160 --> 01:58:04,080
there is a callback given to you in this method.
2893
01:58:04,080 --> 01:58:05,680
So since this is a method,
2894
01:58:05,680 --> 01:58:07,680
this actually accepts a callback
2895
01:58:07,680 --> 01:58:09,840
and this is how your callback looks like.
2896
01:58:09,840 --> 01:58:12,020
And in this, you automatically get the access
2897
01:58:12,180 --> 01:58:13,620
of the previous counter.
2898
01:58:13,620 --> 01:58:15,700
So I'll just for the understanding purpose,
2899
01:58:15,700 --> 01:58:17,780
I'll call this one as previous counter.
2900
01:58:17,780 --> 01:58:19,260
And now either you can return it
2901
01:58:19,260 --> 01:58:21,260
or if it's just one liner, you can just go ahead and say,
2902
01:58:21,260 --> 01:58:25,580
hey, now my pref counter will add a value of one to it.
2903
01:58:25,580 --> 01:58:27,940
Yeah, this is now a game changer
2904
01:58:27,940 --> 01:58:29,840
because now since you're using a callback,
2905
01:58:29,840 --> 01:58:32,980
that means there is a guarantee the callback needs to finish,
2906
01:58:32,980 --> 01:58:35,680
your state will be returning the values
2907
01:58:35,680 --> 01:58:36,940
and whatever you call it here,
2908
01:58:36,940 --> 01:58:39,580
pref counter, counter doesn't really matter.
2909
01:58:39,580 --> 01:58:40,860
It's just a callback.
2910
01:58:40,860 --> 01:58:43,780
Here, you just get the access of the updated state value.
2911
01:58:43,780 --> 01:58:44,820
That is it.
2912
01:58:44,820 --> 01:58:48,180
So I can literally go ahead and copy this
2913
01:58:48,180 --> 01:58:50,620
and I can just have a multiple cursors here.
2914
01:58:50,620 --> 01:58:53,620
I can just go back here and paste it.
2915
01:58:53,620 --> 01:58:55,580
Now you have just changed how things will be.
2916
01:58:55,580 --> 01:58:57,280
Now these cannot be batched
2917
01:58:57,280 --> 01:58:59,140
because they are dependent on the previous values.
2918
01:58:59,140 --> 01:59:01,460
They have to extract the previous value.
2919
01:59:01,460 --> 01:59:03,020
Now, if I go ahead and add the value,
2920
01:59:03,020 --> 01:59:06,020
notice here now they are jumping up in the ratio,
2921
01:59:06,020 --> 01:59:07,940
in the update steps of four.
2922
01:59:07,940 --> 01:59:10,100
So this is really sometimes is given to you,
2923
01:59:10,220 --> 01:59:13,380
sometimes in today's day, just create a counter for me.
2924
01:59:13,380 --> 01:59:15,940
You do that quickly and he does something like this
2925
01:59:15,940 --> 01:59:17,500
or something tricky, sneaky like that.
2926
01:59:17,500 --> 01:59:19,740
And if you don't know the foundation of the React,
2927
01:59:19,740 --> 01:59:21,580
you obviously will get into the trouble,
2928
01:59:21,580 --> 01:59:23,700
but not after watching my video for sure.
2929
01:59:23,700 --> 01:59:26,580
So go ahead and try to get the similar situation
2930
01:59:26,580 --> 01:59:28,060
and scenario in this one.
2931
01:59:28,060 --> 01:59:31,500
And I am pretty sure that now at this point of time,
2932
01:59:31,500 --> 01:59:34,820
you truly, truly understand that why we have state,
2933
01:59:34,820 --> 01:59:36,860
what advantage state gives us,
2934
01:59:36,860 --> 01:59:39,660
and is there any real world use case
2935
01:59:40,100 --> 01:59:40,940
for the state or not?
2936
01:59:40,940 --> 01:59:43,540
Are we just learning it for the sake of fanciness?
2937
01:59:43,540 --> 01:59:44,380
No, it's not.
2938
01:59:44,380 --> 01:59:47,620
We are actually learning it because it's important for us.
2939
01:59:47,620 --> 01:59:48,980
So now that you understand state,
2940
01:59:48,980 --> 01:59:51,500
told you it's not really difficult when you're with me,
2941
01:59:51,500 --> 01:59:53,140
React is just a breeze.
2942
01:59:53,140 --> 01:59:54,700
Let's go ahead and move on to the next video
2943
01:59:54,700 --> 01:59:56,740
where I'll walk you through with another project,
2944
01:59:56,740 --> 01:59:58,800
another fun, another concept.
2945
01:59:58,800 --> 02:00:00,420
So again, just go ahead,
2946
02:00:00,420 --> 02:00:02,500
if you're watching it on my channel itself,
2947
02:00:02,500 --> 02:00:05,780
go ahead and share this video and the comments.
2948
02:00:05,780 --> 02:00:08,980
One just hurt or like motivates me a lot.
2949
02:00:08,980 --> 02:00:10,780
So let's catch up in the next video.
2950
02:00:13,340 --> 02:00:15,180
This is a theoretical video.
2951
02:00:15,180 --> 02:00:17,660
And I know a lot of people don't like theoretical videos,
2952
02:00:17,660 --> 02:00:20,540
but this is an essential part of understanding the React
2953
02:00:20,540 --> 02:00:22,100
and to explore things on your own.
2954
02:00:22,100 --> 02:00:24,820
So I am pretty sure those who really appreciate
2955
02:00:24,820 --> 02:00:26,620
the under the hood working of the things
2956
02:00:26,620 --> 02:00:28,660
and they want to really go in the engineering side
2957
02:00:28,660 --> 02:00:30,500
of the thing, they will appreciate it.
2958
02:00:30,500 --> 02:00:32,700
Those who just want to learn superficially,
2959
02:00:32,700 --> 02:00:34,060
they will not appreciate.
2960
02:00:34,060 --> 02:00:36,620
So the target for this video is just 200 comments.
2961
02:00:36,660 --> 02:00:39,660
I'm pretty sure you will help me in achieving a confidence
2962
02:00:39,660 --> 02:00:42,020
as well as engagement that yes,
2963
02:00:42,020 --> 02:00:43,980
we are actually watching the videos.
2964
02:00:43,980 --> 02:00:47,740
You are not just literally talking to camera in a old room.
2965
02:00:47,740 --> 02:00:49,860
We are actually with you learning together.
2966
02:00:49,860 --> 02:00:51,580
So if you have any issues, by the way,
2967
02:00:51,580 --> 02:00:53,380
just look at a poster in the comment section.
2968
02:00:53,380 --> 02:00:54,820
I'm pretty active there.
2969
02:00:54,820 --> 02:00:56,420
All right, so in this video,
2970
02:00:56,420 --> 02:00:59,340
I'll walk you through with a few concepts of virtual DOM,
2971
02:00:59,340 --> 02:01:03,260
reconciliation, a bunch of fiber and all those stuffs.
2972
02:01:03,260 --> 02:01:05,540
Before that, let me set the stage for you.
2973
02:01:05,540 --> 02:01:08,140
So the idea behind the React is pretty simple
2974
02:01:08,140 --> 02:01:10,500
that once you actually are in the JavaScript,
2975
02:01:10,500 --> 02:01:13,780
you always have to go get element by ID and whatnot.
2976
02:01:13,780 --> 02:01:15,340
And whenever there is any change,
2977
02:01:15,340 --> 02:01:16,860
what your browser does,
2978
02:01:16,860 --> 02:01:18,860
it actually re renders the entire page.
2979
02:01:18,860 --> 02:01:22,100
So your painting of the page is entirely being repainted.
2980
02:01:22,100 --> 02:01:25,300
Your DOM, CSSOM, everything is reconstructed.
2981
02:01:25,300 --> 02:01:26,980
This is a painful process,
2982
02:01:26,980 --> 02:01:29,340
especially for the large scale application.
2983
02:01:29,340 --> 02:01:30,820
What React does behind the scene,
2984
02:01:30,820 --> 02:01:35,220
it actually creates its own virtual mimic of the DOM.
2985
02:01:35,220 --> 02:01:36,620
So however the DOM looks like,
2986
02:01:36,620 --> 02:01:38,380
it actually tries to mimic it,
2987
02:01:38,380 --> 02:01:39,540
all those nodes, everything.
2988
02:01:39,540 --> 02:01:42,420
And whenever there's a slight change in the node,
2989
02:01:42,420 --> 02:01:45,420
it actually then tries to compare with the original DOM.
2990
02:01:45,420 --> 02:01:47,460
And only the thing which needs an update,
2991
02:01:47,460 --> 02:01:49,660
it just gives an update of that.
2992
02:01:49,660 --> 02:01:51,900
So it's really a great remarkable thing
2993
02:01:53,500 --> 02:01:55,220
of how things are done in the React.
2994
02:01:55,220 --> 02:02:00,220
But this mimicking of the virtual DOM, of the real DOM,
2995
02:02:00,380 --> 02:02:02,220
this mimicking part is known as virtual DOM,
2996
02:02:02,220 --> 02:02:05,420
but how good it is and how good it is right now,
2997
02:02:05,420 --> 02:02:08,140
that can be understood by the latest version of the React.
2998
02:02:08,140 --> 02:02:09,580
So a lot of things.
2999
02:02:09,580 --> 02:02:11,300
Okay, by the way, before we get started,
3000
02:02:11,300 --> 02:02:12,780
let me share the screen.
3001
02:02:12,780 --> 02:02:16,420
So by the way, this is the Facebook GitHub repository,
3002
02:02:16,420 --> 02:02:18,020
and this is where they have the React.
3003
02:02:18,020 --> 02:02:19,900
So by the way, you can go into the Facebook.
3004
02:02:19,900 --> 02:02:22,140
Of course, their pin repositories React,
3005
02:02:22,140 --> 02:02:23,900
obviously what else it would be.
3006
02:02:23,900 --> 02:02:25,180
You can go into the React,
3007
02:02:25,180 --> 02:02:27,500
and then you can actually go into the packages
3008
02:02:27,500 --> 02:02:30,140
and see everything which is there listed in the React.
3009
02:02:30,140 --> 02:02:32,380
I'll just move it a little bit here,
3010
02:02:32,380 --> 02:02:34,900
so that you can see it nicely.
3011
02:02:34,900 --> 02:02:37,220
And I'll actually zoom this a tiny bit,
3012
02:02:37,220 --> 02:02:38,560
so that you can see what's happening
3013
02:02:38,560 --> 02:02:39,920
and where it is happening.
3014
02:02:39,920 --> 02:02:40,900
So on the left hand side,
3015
02:02:40,900 --> 02:02:43,020
you will see that there's so much that is given to you.
3016
02:02:43,020 --> 02:02:44,860
Even your React DOM is here.
3017
02:02:44,860 --> 02:02:46,740
And if you'll click on this,
3018
02:02:46,740 --> 02:02:48,780
you'll be actually taken into the source.
3019
02:02:48,780 --> 02:02:50,660
By the way, I'll just zoom out a little bit.
3020
02:02:50,660 --> 02:02:52,020
Yeah, now it's better.
3021
02:02:52,020 --> 02:02:55,700
So you can go into this one where we are.
3022
02:02:55,700 --> 02:02:57,220
Here is the React DOM.
3023
02:02:57,220 --> 02:02:58,260
And inside the source,
3024
02:02:58,260 --> 02:02:59,360
I can check out that,
3025
02:02:59,360 --> 02:03:01,080
let's just say I want to study the client side,
3026
02:03:01,080 --> 02:03:02,740
how does the React behave.
3027
02:03:02,740 --> 02:03:05,300
There is a DOM legacy, which we don't want to use.
3028
02:03:05,300 --> 02:03:07,320
React root, how does it work?
3029
02:03:07,320 --> 02:03:08,740
React DOM, how does it work?
3030
02:03:08,740 --> 02:03:09,580
So you can just go ahead.
3031
02:03:09,580 --> 02:03:11,280
Even if you don't understand much,
3032
02:03:11,280 --> 02:03:13,580
you will get introduced to the new terminologies,
3033
02:03:13,580 --> 02:03:15,060
like there is a container,
3034
02:03:15,060 --> 02:03:17,360
there is something known as hydrate root options,
3035
02:03:17,360 --> 02:03:19,260
there is a create root options.
3036
02:03:19,260 --> 02:03:21,300
And maybe eventually, as you'll go through,
3037
02:03:21,300 --> 02:03:23,220
you will understand a lot of this code.
3038
02:03:23,220 --> 02:03:24,500
And this is how people contribute
3039
02:03:24,500 --> 02:03:25,540
in the open source as well,
3040
02:03:25,540 --> 02:03:27,900
which I am very active in the community.
3041
02:03:27,900 --> 02:03:29,500
So hydrate root and all these things,
3042
02:03:29,500 --> 02:03:30,980
or at least you can ask your GPT
3043
02:03:30,980 --> 02:03:33,140
like what these are, I want to understand them.
3044
02:03:33,140 --> 02:03:37,640
Okay, moving on, let me just get this a little bit.
3045
02:03:37,640 --> 02:03:41,100
Don't want to go like this.
3046
02:03:41,100 --> 02:03:43,740
Okay, let's go back onto the source.
3047
02:03:43,740 --> 02:03:47,340
Okay, I want it not to be like this.
3048
02:03:47,340 --> 02:03:49,000
Okay, not like that.
3049
02:03:49,000 --> 02:03:50,780
I wanted the entire full view.
3050
02:03:50,780 --> 02:03:52,300
Yeah, there we go.
3051
02:03:52,300 --> 02:03:53,220
A little difficult,
3052
02:03:53,220 --> 02:03:55,260
so I'll probably move my entire thing here.
3053
02:03:55,260 --> 02:03:57,140
So that's actually better and visible.
3054
02:03:57,340 --> 02:03:58,460
It's really small.
3055
02:03:58,460 --> 02:04:01,200
But videos are in 4K, by the way, you can change it.
3056
02:04:01,200 --> 02:04:03,220
Okay, one more package I would like to introduce you
3057
02:04:03,220 --> 02:04:05,860
a little bit, not too much, is React Core Packer.
3058
02:04:05,860 --> 02:04:07,420
So this is the React Core.
3059
02:04:07,420 --> 02:04:09,700
You can expand this and see there's a source,
3060
02:04:09,700 --> 02:04:12,840
expand this, and this is where you can find a lot of things.
3061
02:04:12,840 --> 02:04:14,060
How does the React work?
3062
02:04:14,060 --> 02:04:15,220
How does the cache work?
3063
02:04:15,220 --> 02:04:16,860
Children's and whatnots.
3064
02:04:16,860 --> 02:04:20,060
And even there are some other things like hooks and stuff
3065
02:04:20,060 --> 02:04:22,860
that you can find, like React hooks, we talk about that.
3066
02:04:22,860 --> 02:04:25,740
And here, you can actually see that how does a hook work?
3067
02:04:25,740 --> 02:04:28,820
So whenever it says something like useState,
3068
02:04:28,820 --> 02:04:30,200
you'll find that, you'll find that.
3069
02:04:30,200 --> 02:04:31,040
I'll show you.
3070
02:04:31,040 --> 02:04:32,700
There is a useContext here.
3071
02:04:32,700 --> 02:04:36,840
And there will be a useContext.
3072
02:04:37,980 --> 02:04:40,060
And then there is a useEffect hook here.
3073
02:04:40,060 --> 02:04:42,140
There is a useRef here.
3074
02:04:42,140 --> 02:04:45,340
Use insertionEffect, probably you have never heard about it.
3075
02:04:45,340 --> 02:04:49,500
Use layoutEffect, callback, useMemo, we'll use some of them.
3076
02:04:49,500 --> 02:04:51,940
So as you can see, there is almost every hook.
3077
02:04:51,940 --> 02:04:54,900
We'll be also using useID once in the entire series.
3078
02:04:54,940 --> 02:04:58,140
So you got the idea that there is everything written here.
3079
02:04:58,140 --> 02:04:59,740
Probably right now, we don't understand it,
3080
02:04:59,740 --> 02:05:01,260
but it's a good idea to at least see that,
3081
02:05:01,260 --> 02:05:02,660
OK, things exist there.
3082
02:05:02,660 --> 02:05:05,140
I'm not the only one who's just mimicking here,
3083
02:05:05,140 --> 02:05:06,140
things stuff.
3084
02:05:06,140 --> 02:05:07,780
Also, you can go into the JSX.
3085
02:05:07,780 --> 02:05:09,740
The things which we studied in the JSX
3086
02:05:09,740 --> 02:05:11,700
actually comes from here, this part here.
3087
02:05:11,700 --> 02:05:13,740
In the JSX element, if you go into this one,
3088
02:05:13,740 --> 02:05:15,900
you'll see that everything which I talked about
3089
02:05:15,900 --> 02:05:17,340
actually comes from here.
3090
02:05:17,340 --> 02:05:19,660
So if you scroll a little bit, you'll find that
3091
02:05:19,660 --> 02:05:21,200
here are all the things.
3092
02:05:21,200 --> 02:05:24,060
So let me zoom this.
3093
02:05:24,060 --> 02:05:26,380
So when I say the React element to you,
3094
02:05:26,380 --> 02:05:29,020
this element actually takes these parameters of type,
3095
02:05:29,020 --> 02:05:31,540
key, ref, and props, all of these things.
3096
02:05:31,540 --> 02:05:33,780
So I was not making up things in the thin air,
3097
02:05:33,780 --> 02:05:35,700
they actually do exist.
3098
02:05:35,700 --> 02:05:36,540
All right.
3099
02:05:36,540 --> 02:05:38,320
So this is the first portion of the theory
3100
02:05:38,320 --> 02:05:40,060
that I wanted to introduce you a little bit
3101
02:05:40,060 --> 02:05:42,980
with the core React itself.
3102
02:05:42,980 --> 02:05:44,140
How does that looks like?
3103
02:05:44,140 --> 02:05:46,580
So I'll just go on to the 100% back again.
3104
02:05:46,580 --> 02:05:47,940
But there is one more thing.
3105
02:05:47,940 --> 02:05:50,220
If you'll search for the React fiber on the Google,
3106
02:05:50,220 --> 02:05:52,820
this is usually for me is the first one here,
3107
02:05:52,820 --> 02:05:55,180
because I don't think so I have actually recommended
3108
02:05:55,180 --> 02:05:58,620
in any bootcamp anything more than this.
3109
02:05:58,620 --> 02:06:03,340
So this is a big shout out to a Cadlite.
3110
02:06:03,340 --> 02:06:05,060
I don't know how to spell it,
3111
02:06:05,060 --> 02:06:07,180
but he wrote it so well that I don't even want
3112
02:06:07,180 --> 02:06:08,300
to fork it or something.
3113
02:06:08,300 --> 02:06:10,900
And this is so long, it's seven years ago.
3114
02:06:10,900 --> 02:06:11,820
I'm still using this.
3115
02:06:11,820 --> 02:06:15,480
This was constantly updated obviously, but here's something.
3116
02:06:15,480 --> 02:06:17,400
So this is the portion where we dive into
3117
02:06:17,400 --> 02:06:18,780
the React architecture.
3118
02:06:18,780 --> 02:06:19,620
How does it work?
3119
02:06:19,620 --> 02:06:22,320
So it's a React fiber previously, not previously,
3120
02:06:22,320 --> 02:06:24,520
but yeah, the React core algorithm got changed
3121
02:06:24,520 --> 02:06:26,800
and this is the whole study we'll be doing.
3122
02:06:26,800 --> 02:06:28,080
Some of the things it's really important
3123
02:06:28,080 --> 02:06:29,800
that you pay attention on to this one.
3124
02:06:29,800 --> 02:06:31,360
So I'll just go through with that.
3125
02:06:31,360 --> 02:06:33,200
I'll zoom it even a tiny bit more.
3126
02:06:33,200 --> 02:06:34,200
Yeah, tiny bit more.
3127
02:06:34,200 --> 02:06:36,040
Now it's much more understandable.
3128
02:06:36,040 --> 02:06:37,280
Let's go up here.
3129
02:06:37,280 --> 02:06:40,360
So all it says is the React fiber is an ongoing
3130
02:06:40,360 --> 02:06:42,960
implementation of React's core algorithm.
3131
02:06:42,960 --> 02:06:45,400
Spoiler alert, it's not an ongoing.
3132
02:06:45,400 --> 02:06:48,160
It was already introduced in a couple of version ago,
3133
02:06:48,160 --> 02:06:49,800
but you saw it first time.
3134
02:06:49,800 --> 02:06:52,240
Again, the goal of the React fiber is to increase
3135
02:06:53,040 --> 02:06:54,480
the suitability for area like animation.
3136
02:06:54,480 --> 02:06:56,200
So what's the problem with animation?
3137
02:06:56,200 --> 02:06:59,440
Animation happens back to back and we saw it just there
3138
02:06:59,440 --> 02:07:02,360
in the user state that it's not possible for us
3139
02:07:02,360 --> 02:07:03,920
to do back to back updates.
3140
02:07:03,920 --> 02:07:05,840
React uses something known as batching
3141
02:07:05,840 --> 02:07:07,480
and once the batch is gone, it's gone.
3142
02:07:07,480 --> 02:07:09,840
I cannot do anything in the core algorithm.
3143
02:07:09,840 --> 02:07:12,480
But now we can see its headline feature
3144
02:07:12,480 --> 02:07:14,060
is incremental rendering.
3145
02:07:14,060 --> 02:07:16,640
So animations, smooth animations.
3146
02:07:16,640 --> 02:07:18,960
The ability to split the rendering work into chunks
3147
02:07:18,960 --> 02:07:20,980
and spread it over multiple frames.
3148
02:07:21,020 --> 02:07:24,140
So it's not like previously React used to just do things
3149
02:07:24,140 --> 02:07:26,340
instantaneously, but now they actually wait
3150
02:07:26,340 --> 02:07:28,260
for algorithm-ish time.
3151
02:07:28,260 --> 02:07:30,540
By the term algorithm-ish time, I mean.
3152
02:07:30,540 --> 02:07:32,780
They actually decided for ourselves that I'm not gonna
3153
02:07:32,780 --> 02:07:35,060
do update right now, I'll send the batch eventually
3154
02:07:35,060 --> 02:07:37,320
to do multiple updates at the same time.
3155
02:07:37,320 --> 02:07:40,060
So it gives us the ability to pause, abort, and reuse
3156
02:07:40,060 --> 02:07:43,900
the work as new updates come in or not to just give that.
3157
02:07:43,900 --> 02:07:48,180
So it's a concurrency primitive, so this is best here.
3158
02:07:48,180 --> 02:07:49,980
Okay, this is the first part.
3159
02:07:49,980 --> 02:07:52,140
This is the introduction of why the core algorithm
3160
02:07:52,140 --> 02:07:53,020
got changed.
3161
02:07:53,020 --> 02:07:55,460
Now, Fiverr introduces several novel concept.
3162
02:07:55,460 --> 02:07:57,060
We will talk about them, some of them.
3163
02:07:57,060 --> 02:07:59,460
I'll give you a brief overview of that.
3164
02:07:59,460 --> 02:08:02,880
But again, this is again, big shout out to this one.
3165
02:08:02,880 --> 02:08:05,900
So for this, you need to have a basic understanding
3166
02:08:05,900 --> 02:08:08,540
of the React, which you have now, you have seen the videos.
3167
02:08:08,540 --> 02:08:11,620
So it says React core components element instances.
3168
02:08:11,620 --> 02:08:12,980
We have seen that already.
3169
02:08:12,980 --> 02:08:15,260
Reconciliation, this is something really nice,
3170
02:08:15,260 --> 02:08:17,460
but they cover it in this documentation itself.
3171
02:08:17,460 --> 02:08:18,900
So I'll walk you through with that.
3172
02:08:18,900 --> 02:08:22,060
React basic theory concept and React design principle.
3173
02:08:22,060 --> 02:08:23,660
So I'll walk you through with that.
3174
02:08:23,660 --> 02:08:25,700
So first of all, what is reconciliation?
3175
02:08:25,700 --> 02:08:27,500
Being asked in the interview quite a lot.
3176
02:08:27,500 --> 02:08:31,660
The algorithm React uses to diff one tree with another.
3177
02:08:31,660 --> 02:08:34,220
And by the term diff one tree with another means
3178
02:08:34,220 --> 02:08:37,000
original DOM, my virtual DOM, are they same?
3179
02:08:37,000 --> 02:08:38,540
And if this DOM gets updated,
3180
02:08:38,540 --> 02:08:40,500
is this DOM is following the principle.
3181
02:08:40,500 --> 02:08:42,380
So that's your diffing algorithm
3182
02:08:42,380 --> 02:08:43,900
known as diff one tree with another.
3183
02:08:43,900 --> 02:08:47,740
So we are comparing two trees of the node list.
3184
02:08:47,780 --> 02:08:50,340
To determine which part needs to be changed.
3185
02:08:50,340 --> 02:08:52,460
Yeah, literally what I just said.
3186
02:08:52,460 --> 02:08:56,540
So update, a change in the data used to render a React app.
3187
02:08:56,540 --> 02:08:58,740
Usually the result of set state,
3188
02:08:58,740 --> 02:09:01,220
eventually results are in the re-render.
3189
02:09:01,220 --> 02:09:04,420
So as it says, if you want to re-render the app,
3190
02:09:04,420 --> 02:09:07,580
usually it's the set state, which governs the thing.
3191
02:09:07,580 --> 02:09:09,580
So that's why we use use state,
3192
02:09:09,580 --> 02:09:12,020
because ultimately the method which actually does all of this
3193
02:09:12,020 --> 02:09:13,820
is use state, we just saw that.
3194
02:09:13,820 --> 02:09:16,420
The central idea of the React API is to think of the updates
3195
02:09:16,460 --> 02:09:18,300
as they cause to app re-render.
3196
02:09:18,300 --> 02:09:20,820
So whole picture is all about re-rendering.
3197
02:09:20,820 --> 02:09:23,460
So how can we get into from state of A to B,
3198
02:09:23,460 --> 02:09:25,500
then B to C and C to A and so on.
3199
02:09:25,500 --> 02:09:27,380
So how can we move into different transition
3200
02:09:27,380 --> 02:09:28,660
of all of that?
3201
02:09:28,660 --> 02:09:33,460
Okay, actually re-rendering the entire app on each change
3202
02:09:33,460 --> 02:09:36,860
only works for the most trivial apps in real world apps.
3203
02:09:36,860 --> 02:09:39,420
It's, so again, we can actually skip this part
3204
02:09:39,420 --> 02:09:40,900
because it's all it's saying is
3205
02:09:40,900 --> 02:09:43,180
we don't want to re-render the entire app.
3206
02:09:43,180 --> 02:09:45,780
We want the performance, we want to cost to be coming up
3207
02:09:45,780 --> 02:09:48,740
and that whole this process is known as reconciliation.
3208
02:09:48,740 --> 02:09:51,540
So it's kind of a re-walkthrough of the reconciliation.
3209
02:09:51,540 --> 02:09:54,500
I have gone through with this one probably 20, 30 times.
3210
02:09:54,500 --> 02:09:56,460
So I know every inch of it.
3211
02:09:56,460 --> 02:10:00,020
So sorry if I'm jumping something some places around.
3212
02:10:00,020 --> 02:10:01,820
Okay, so by the way, this whole thing is again
3213
02:10:01,820 --> 02:10:04,100
reconciliation and different things.
3214
02:10:04,100 --> 02:10:05,940
Reconciliation versus rendering.
3215
02:10:05,940 --> 02:10:07,920
So again, this is an interesting paragraph.
3216
02:10:07,920 --> 02:10:10,700
The DOM is just one of the rendering environment
3217
02:10:10,700 --> 02:10:11,820
React can render to.
3218
02:10:11,820 --> 02:10:14,580
The other major target being a native iOS and Android,
3219
02:10:14,580 --> 02:10:16,140
I told you in the earlier as well
3220
02:10:16,140 --> 02:10:18,540
that React is one implementation on the web
3221
02:10:18,540 --> 02:10:21,020
is known as React DOM, but more things exist
3222
02:10:21,020 --> 02:10:23,620
like React Native and React for 3D renderings
3223
02:10:23,620 --> 02:10:24,780
or stuff like that.
3224
02:10:24,780 --> 02:10:26,500
The reason it can support so many target
3225
02:10:26,500 --> 02:10:29,100
because React is designed so that reconciliation
3226
02:10:29,100 --> 02:10:32,260
and re-renderings are separate phases.
3227
02:10:32,260 --> 02:10:33,860
So yeah, that is why.
3228
02:10:33,860 --> 02:10:35,900
I hope now if anybody's asked you,
3229
02:10:35,900 --> 02:10:38,000
I think you have great information here.
3230
02:10:38,000 --> 02:10:39,400
Okay, moving on.
3231
02:10:39,400 --> 02:10:41,080
Now what we have is we don't want to go
3232
02:10:41,080 --> 02:10:43,700
into the React design principles and key points.
3233
02:10:43,700 --> 02:10:45,340
Here is where we want to study more.
3234
02:10:45,340 --> 02:10:47,300
What is fiber?
3235
02:10:47,300 --> 02:10:48,140
We are about to discuss
3236
02:10:48,140 --> 02:10:50,300
the heart of React fibers architecture.
3237
02:10:50,300 --> 02:10:53,060
Fibers are much lower level abstraction
3238
02:10:53,060 --> 02:10:54,260
than application development.
3239
02:10:54,260 --> 02:10:55,940
Typically think about it.
3240
02:10:55,940 --> 02:10:57,460
If you find yourself frustrated
3241
02:10:57,460 --> 02:11:00,220
in your attempts to understand it, don't feel discouraged.
3242
02:11:00,220 --> 02:11:03,540
So if this best article on the internet says discouraged,
3243
02:11:04,460 --> 02:11:05,380
you don't need to fail that.
3244
02:11:05,380 --> 02:11:07,880
I also understood it after going repetition
3245
02:11:07,880 --> 02:11:09,260
and repetition after it.
3246
02:11:09,260 --> 02:11:10,740
Keep trying it eventually makes sense.
3247
02:11:10,740 --> 02:11:12,300
Yeah, same happened with me.
3248
02:11:12,300 --> 02:11:13,360
Okay, here we go.
3249
02:11:13,880 --> 02:11:14,920
So here are the key points.
3250
02:11:14,920 --> 02:11:16,440
I'll just give you a brief summary of it
3251
02:11:16,440 --> 02:11:17,280
and then that's it.
3252
02:11:17,280 --> 02:11:18,600
We'll call it a day.
3253
02:11:18,600 --> 02:11:20,400
Pause work and come back later to it.
3254
02:11:20,400 --> 02:11:21,800
So one of the advantage of this
3255
02:11:21,800 --> 02:11:26,040
is sometimes you are back to back firing the updates.
3256
02:11:26,040 --> 02:11:29,480
So sometimes let's just say you updated A to B
3257
02:11:29,480 --> 02:11:31,320
and same variable to C,
3258
02:11:31,320 --> 02:11:33,200
there was no point of updating it to B
3259
02:11:33,200 --> 02:11:35,520
because eventually it is supposed to become the C.
3260
02:11:35,520 --> 02:11:38,400
So if you pause your work, come back here
3261
02:11:38,400 --> 02:11:42,200
without updating it, probably we can save some of our time
3262
02:11:42,280 --> 02:11:43,640
and updating it to B.
3263
02:11:43,640 --> 02:11:45,000
We can directly update it to C.
3264
02:11:45,000 --> 02:11:45,980
So that's what it says.
3265
02:11:45,980 --> 02:11:47,860
Pause your work and come back to it later.
3266
02:11:47,860 --> 02:11:49,720
So yeah, literally.
3267
02:11:49,720 --> 02:11:51,680
Assign priorities to different type of work.
3268
02:11:51,680 --> 02:11:52,740
So we can just say that,
3269
02:11:52,740 --> 02:11:56,080
hey, maybe this animation is going on,
3270
02:11:56,080 --> 02:11:57,640
but this button also needs an update,
3271
02:11:57,640 --> 02:12:01,040
but this button might take few micro milliseconds later on
3272
02:12:01,040 --> 02:12:02,680
as well, but this animation needs
3273
02:12:02,680 --> 02:12:04,120
to be constantly re-rendering.
3274
02:12:04,120 --> 02:12:06,120
So that's why it says we can assign priorities
3275
02:12:06,120 --> 02:12:07,480
to different works.
3276
02:12:07,480 --> 02:12:09,600
Reuse the previously completed work.
3277
02:12:09,600 --> 02:12:12,760
So we can actually take estates and stuff like that.
3278
02:12:12,760 --> 02:12:14,280
Abort work if no longer needed.
3279
02:12:14,280 --> 02:12:16,840
So again, example, if A gets converted to B
3280
02:12:16,840 --> 02:12:19,080
and B finally gets converted to back into A
3281
02:12:19,080 --> 02:12:21,020
within fractions of second,
3282
02:12:21,020 --> 02:12:23,080
then there is no point of updating it to the user.
3283
02:12:23,080 --> 02:12:24,200
User don't want to see that.
3284
02:12:24,200 --> 02:12:25,780
User want to see the ultimate truth.
3285
02:12:25,780 --> 02:12:28,080
So there is no point of showing him the state
3286
02:12:28,080 --> 02:12:29,920
if you want to do so.
3287
02:12:29,920 --> 02:12:32,720
So again, now it comes up as a structure of the fiber.
3288
02:12:32,720 --> 02:12:34,920
Fiber always treat them like fiber,
3289
02:12:34,920 --> 02:12:36,940
just like your muscles have fibers.
3290
02:12:36,940 --> 02:12:38,240
Everything is attached to each other.
3291
02:12:38,240 --> 02:12:39,380
That's like the fiber.
3292
02:12:39,400 --> 02:12:42,420
Everything is getting controlled and stuff like that.
3293
02:12:42,420 --> 02:12:44,860
It's almost like everything is in the fiber-ish term
3294
02:12:44,860 --> 02:12:46,120
in the world of React.
3295
02:12:46,120 --> 02:12:49,140
Okay, it further goes into the return statement,
3296
02:12:49,140 --> 02:12:50,080
how it does and all of that.
3297
02:12:50,080 --> 02:12:51,840
You don't want to go into that.
3298
02:12:51,840 --> 02:12:53,840
Future section, you can just try that.
3299
02:12:53,840 --> 02:12:55,460
But again, there is no need of it.
3300
02:12:55,460 --> 02:12:56,740
If you want to watch,
3301
02:12:56,740 --> 02:12:59,260
you can just watch this one 2016, pretty old.
3302
02:12:59,260 --> 02:13:02,700
But again, this is whole thing which I wanted to share.
3303
02:13:02,700 --> 02:13:05,220
I know this is a little bit probably boring part
3304
02:13:05,220 --> 02:13:06,620
of the entire series,
3305
02:13:06,620 --> 02:13:09,000
but these are some foundational algorithm
3306
02:13:09,000 --> 02:13:11,640
which I wanted you to learn from the direct resources
3307
02:13:11,640 --> 02:13:12,800
and repository of React.
3308
02:13:12,800 --> 02:13:14,440
Not from me, not from anybody else.
3309
02:13:14,440 --> 02:13:16,080
Just go dive into that.
3310
02:13:16,080 --> 02:13:18,120
So at least you are not afraid of that one.
3311
02:13:18,120 --> 02:13:19,000
Okay, a few things.
3312
02:13:19,000 --> 02:13:20,280
We now know reconciliation.
3313
02:13:20,280 --> 02:13:23,080
We now know a lot about the React virtual DOM.
3314
02:13:23,080 --> 02:13:25,040
We also know a lot about the React fiber.
3315
02:13:25,040 --> 02:13:27,600
And we also know a lot about the batching of the update
3316
02:13:27,600 --> 02:13:28,640
and all these things.
3317
02:13:28,640 --> 02:13:30,800
These will be foundational and very helpful
3318
02:13:30,800 --> 02:13:33,040
when you'll be learning Next.js as well,
3319
02:13:33,040 --> 02:13:34,720
on which I also have a course.
3320
02:13:34,720 --> 02:13:37,240
Happened to be, I'm producing a lot of them.
3321
02:13:37,240 --> 02:13:39,840
So I think now you have a core foundational understanding
3322
02:13:39,840 --> 02:13:40,680
of it.
3323
02:13:40,680 --> 02:13:42,560
And later on, we'll definitely talk more
3324
02:13:42,560 --> 02:13:43,840
about these documentation,
3325
02:13:43,840 --> 02:13:45,080
but I think that is enough.
3326
02:13:45,080 --> 02:13:46,280
That is enough for you.
3327
02:13:46,280 --> 02:13:48,460
In the next video, we'll jump into the code part
3328
02:13:48,460 --> 02:13:49,800
and the course part itself,
3329
02:13:49,800 --> 02:13:51,760
and you'll learn more on that.
3330
02:13:51,760 --> 02:13:52,920
Okay, that's it for this video,
3331
02:13:52,920 --> 02:13:54,720
and let's catch up in the next one.
3332
02:13:56,960 --> 02:13:57,800
Hey there, folks.
3333
02:13:57,800 --> 02:13:58,640
How are you doing?
3334
02:13:58,640 --> 02:14:00,380
I'm pretty sure you're doing good.
3335
02:14:00,380 --> 02:14:01,220
Hey there, everyone.
3336
02:14:01,220 --> 02:14:03,920
My name is Hitesh, and let's go ahead and get started
3337
02:14:03,920 --> 02:14:05,800
and continue with our React series.
3338
02:14:05,800 --> 02:14:09,060
So we are done already with a couple of topics,
3339
02:14:09,060 --> 02:14:11,440
and especially the response that you have given me
3340
02:14:11,440 --> 02:14:14,020
on the videos like state, what is a state,
3341
02:14:14,020 --> 02:14:15,360
how does we work it,
3342
02:14:15,360 --> 02:14:18,320
and some topics that we discussed about like virtual DOM,
3343
02:14:18,320 --> 02:14:21,040
reconciliation, fiber, pretty interesting topic.
3344
02:14:21,040 --> 02:14:21,960
Little bit theoretical,
3345
02:14:21,960 --> 02:14:24,240
but very important and interesting one.
3346
02:14:24,240 --> 02:14:27,680
In this video, we'll take down another such topic,
3347
02:14:27,680 --> 02:14:30,320
which I always begin with, why do you need it?
3348
02:14:30,320 --> 02:14:32,400
You don't need it at the very first place
3349
02:14:32,400 --> 02:14:35,240
until unless you understand the possible need
3350
02:14:35,240 --> 02:14:36,880
of the subject, then only you should learn.
3351
02:14:36,880 --> 02:14:38,560
So that's the props for us,
3352
02:14:38,560 --> 02:14:40,520
and we'll go through and understand that.
3353
02:14:40,520 --> 02:14:43,620
Apart from that, there is kind of industry trend these days
3354
02:14:43,620 --> 02:14:46,460
to use something known as Tailwind CSS.
3355
02:14:46,460 --> 02:14:48,840
This is not going to be a dedicated class
3356
02:14:48,840 --> 02:14:50,240
about the Tailwind CSS,
3357
02:14:50,240 --> 02:14:53,000
but still we need to learn to configure it with the React
3358
02:14:53,000 --> 02:14:54,240
so that we can utilize it,
3359
02:14:54,240 --> 02:14:56,240
and it's not really that heavy.
3360
02:14:56,240 --> 02:14:58,440
It's quite understandable,
3361
02:14:58,440 --> 02:15:00,600
and we will be doing that on the go as well.
3362
02:15:00,600 --> 02:15:03,000
So without a further ado, let's go ahead and get started,
3363
02:15:03,000 --> 02:15:05,320
and let's understand what is the need of the prop
3364
02:15:05,320 --> 02:15:07,240
and why the props are there.
3365
02:15:07,240 --> 02:15:10,000
By the way, we will also learn a little bit about components
3366
02:15:10,000 --> 02:15:12,600
and building components in the React in this video.
3367
02:15:12,600 --> 02:15:15,080
And let me just announce this first
3368
02:15:15,080 --> 02:15:18,720
that components are no proprietary of the React itself.
3369
02:15:18,720 --> 02:15:21,440
They used to exist in other programming languages
3370
02:15:21,440 --> 02:15:25,060
like PHP long before when React came into the picture.
3371
02:15:25,060 --> 02:15:26,980
So it's not something which is new to React
3372
02:15:26,980 --> 02:15:27,820
or new to the industry.
3373
02:15:27,820 --> 02:15:29,120
It's a very common thing.
3374
02:15:29,120 --> 02:15:32,080
We used to divide the chunks of the web
3375
02:15:32,080 --> 02:15:34,360
like headers and footers into separate file.
3376
02:15:34,360 --> 02:15:36,360
A common practice being done in the PHP
3377
02:15:36,360 --> 02:15:38,320
and other programming languages as well.
3378
02:15:38,320 --> 02:15:40,960
Same, we are going to learn how we do that in the React.
3379
02:15:40,960 --> 02:15:42,920
It will make your life a little bit easier
3380
02:15:42,920 --> 02:15:44,400
as a web developer.
3381
02:15:44,400 --> 02:15:46,120
Things are just at one place.
3382
02:15:46,120 --> 02:15:47,720
You make a change at one place.
3383
02:15:47,720 --> 02:15:49,980
It propagates to every single page.
3384
02:15:49,980 --> 02:15:50,880
It's pretty easy.
3385
02:15:50,880 --> 02:15:52,180
Life is easy with that.
3386
02:15:52,180 --> 02:15:56,000
So let's go ahead and let me first share the screen
3387
02:15:56,000 --> 02:15:57,440
and we'll go through with that.
3388
02:15:57,440 --> 02:15:59,880
So this is our application.
3389
02:15:59,880 --> 02:16:02,040
We have been working on this one.
3390
02:16:02,860 --> 02:16:05,440
So we will be now creating our third-ish app,
3391
02:16:05,440 --> 02:16:07,400
actually the third one itself.
3392
02:16:07,400 --> 02:16:09,800
So we'll be just going through with the third.
3393
02:16:09,800 --> 02:16:12,380
So let me just go ahead and open up the terminal
3394
02:16:12,380 --> 02:16:14,520
and we'll be going with the same NPM.
3395
02:16:14,520 --> 02:16:16,800
I know a lot of you want to go with the bun.
3396
02:16:16,800 --> 02:16:18,660
We don't have bun as of now.
3397
02:16:18,660 --> 02:16:21,880
I do have it on my system, but I won't be using them.
3398
02:16:21,880 --> 02:16:25,800
So we'll be saying just simply create at the rate of wheat.
3399
02:16:25,800 --> 02:16:28,880
Sorry, wheat at the rate latest.
3400
02:16:28,880 --> 02:16:31,000
So this gives us a wheat project
3401
02:16:31,000 --> 02:16:34,200
and we'll be naming our project as a zero three
3402
02:16:34,200 --> 02:16:36,379
because it's a third prop project
3403
02:16:36,379 --> 02:16:38,439
and we'll be calling it as tailwind
3404
02:16:38,440 --> 02:16:40,600
and we also are going to be using props,
3405
02:16:40,600 --> 02:16:42,160
tailwind props components.
3406
02:16:42,160 --> 02:16:43,920
Yeah, I think that's a good name.
3407
02:16:43,920 --> 02:16:45,799
We'll be using react for this.
3408
02:16:45,799 --> 02:16:47,439
We'll be going with JavaScript.
3409
02:16:47,440 --> 02:16:49,719
I know you want me to switch into TypeScript,
3410
02:16:49,719 --> 02:16:52,959
but no, I want this videos, the entire series to be
3411
02:16:52,959 --> 02:16:55,479
mass reachable, more and more people should be able
3412
02:16:55,480 --> 02:16:58,520
to learn it without the hindrance of additional TypeScript.
3413
02:16:58,520 --> 02:17:00,680
Yes, I do have a TypeScript series and playlist
3414
02:17:00,680 --> 02:17:02,840
on my channel, but this time we are going
3415
02:17:02,840 --> 02:17:05,059
just with a JavaScript probably at the end of the series,
3416
02:17:05,059 --> 02:17:07,719
I'll introduce you briefly with the TypeScript as well.
3417
02:17:07,719 --> 02:17:11,919
All right, so let's go into this one and it's zero three
3418
02:17:11,920 --> 02:17:15,040
and let's go ahead and run NPM install.
3419
02:17:15,040 --> 02:17:18,360
That's the basic of how you get started with this one.
3420
02:17:18,360 --> 02:17:20,639
Okay, by the time we get started,
3421
02:17:20,639 --> 02:17:22,439
the first thing that we are going to take down
3422
02:17:22,440 --> 02:17:26,480
is how we can actually install and configure tailwind CSS.
3423
02:17:26,480 --> 02:17:29,320
There is a process to it and we all need to learn that.
3424
02:17:29,320 --> 02:17:31,320
So first of all, let's go ahead and work
3425
02:17:31,320 --> 02:17:33,200
with tailwindcss.com.
3426
02:17:33,200 --> 02:17:35,360
This is the official website and every single time
3427
02:17:35,360 --> 02:17:37,320
I'll need to configure the tailwind CSS,
3428
02:17:37,320 --> 02:17:38,600
I always go with the docs.
3429
02:17:38,600 --> 02:17:40,200
You should also go with the docs.
3430
02:17:40,200 --> 02:17:42,760
This is how we actually learn and install it.
3431
02:17:42,760 --> 02:17:45,639
So in the docs, there is a section here in the installation.
3432
02:17:45,639 --> 02:17:49,639
So there is a tailwind CSS, CLI, post CSS.
3433
02:17:49,639 --> 02:17:52,679
We actually are going to be working with framework guides.
3434
02:17:52,680 --> 02:17:54,760
Yes, you can say React is a library,
3435
02:17:54,760 --> 02:17:57,760
but this is how it is being mentioned.
3436
02:17:57,760 --> 02:17:59,040
We are working with the VIT.
3437
02:17:59,040 --> 02:18:01,320
In case you are working with CRA, Create React app,
3438
02:18:01,320 --> 02:18:02,400
there is a guidance for that
3439
02:18:02,400 --> 02:18:04,440
and almost similar looking guidance.
3440
02:18:04,440 --> 02:18:05,719
We'll be going with the VIT.
3441
02:18:05,719 --> 02:18:07,599
We don't need to work with these first two steps
3442
02:18:07,600 --> 02:18:09,879
because we are already done with that.
3443
02:18:09,879 --> 02:18:11,319
We'll be going with the second step.
3444
02:18:11,320 --> 02:18:12,760
So go ahead and copy this.
3445
02:18:12,760 --> 02:18:15,639
These are the two commands that we need to work through.
3446
02:18:15,639 --> 02:18:17,339
So let's just go ahead and clean this.
3447
02:18:17,340 --> 02:18:19,240
Make sure you do an LS.
3448
02:18:19,240 --> 02:18:21,760
The most important thing is you should be in the same folder
3449
02:18:21,760 --> 02:18:23,799
where this package.json file is.
3450
02:18:23,799 --> 02:18:25,839
So make sure you take care of that.
3451
02:18:25,840 --> 02:18:27,559
I'm pretty sure you will.
3452
02:18:27,559 --> 02:18:29,359
Go ahead and paste the commands.
3453
02:18:29,360 --> 02:18:31,920
This command will install a couple of dev dependencies.
3454
02:18:31,920 --> 02:18:34,559
The dash D is for development dependencies.
3455
02:18:34,559 --> 02:18:37,499
They don't get shipped to the production itself.
3456
02:18:37,500 --> 02:18:39,559
Most interestingly, it creates a file
3457
02:18:39,559 --> 02:18:42,159
known as tailwindconfig.js.
3458
02:18:42,160 --> 02:18:44,299
This is your tailwind configuration
3459
02:18:44,299 --> 02:18:48,159
because tailwind is kind of a preprocessor, you can say,
3460
02:18:48,160 --> 02:18:49,799
because whatever the tailwind you write,
3461
02:18:49,799 --> 02:18:52,079
it actually generates that CSS on the go.
3462
02:18:52,080 --> 02:18:53,799
Not everything is being shipped.
3463
02:18:53,799 --> 02:18:56,519
Only the CSS that you need is generated.
3464
02:18:56,520 --> 02:18:59,000
And for that generation, you need to actually define it
3465
02:18:59,000 --> 02:19:00,959
that where should I find my content.
3466
02:19:00,959 --> 02:19:03,759
So the next step is actually go ahead and define
3467
02:19:03,760 --> 02:19:05,160
where my content is.
3468
02:19:05,160 --> 02:19:08,080
So in the VIT, the content is actually index.html
3469
02:19:08,080 --> 02:19:09,680
and you're some source folder.
3470
02:19:09,680 --> 02:19:13,920
So everything, components, every file, app.js, everything
3471
02:19:13,920 --> 02:19:15,040
will be inside the source.
3472
02:19:15,040 --> 02:19:18,400
So this line actually is a regex, regular expression,
3473
02:19:18,400 --> 02:19:20,920
to find all the files that's related to JavaScript
3474
02:19:20,920 --> 02:19:23,840
or TypeScript, JSX or TSX.
3475
02:19:23,840 --> 02:19:26,320
And also, we are also listing our index.html.
3476
02:19:26,360 --> 02:19:28,959
So go ahead and copy this entire content thing.
3477
02:19:28,959 --> 02:19:31,519
Go back up here and we want to replace it.
3478
02:19:31,520 --> 02:19:34,360
Make sure you take care of the additional comma at the end.
3479
02:19:34,360 --> 02:19:35,920
Usually, this is a common mistake
3480
02:19:35,920 --> 02:19:38,040
which a lot of programmers in the initial days
3481
02:19:38,040 --> 02:19:40,760
while learning the React, they do this.
3482
02:19:40,760 --> 02:19:41,840
Things are not done yet.
3483
02:19:41,840 --> 02:19:44,920
We also need to mention that, hey, in the index.css file,
3484
02:19:44,920 --> 02:19:47,639
we'll be using this as directives.
3485
02:19:47,639 --> 02:19:49,320
These directives are must to have
3486
02:19:49,320 --> 02:19:50,920
without these things don't work.
3487
02:19:50,920 --> 02:19:52,960
So go back inside the source.
3488
02:19:52,960 --> 02:19:56,320
This is where my index.css file is there.
3489
02:19:56,320 --> 02:19:58,160
Now, there are two options in front of you.
3490
02:19:58,160 --> 02:19:59,840
You can just keep everything there
3491
02:19:59,840 --> 02:20:01,160
and just paste it at the top,
3492
02:20:01,160 --> 02:20:03,760
or you can remove everything and just keep it up here.
3493
02:20:03,760 --> 02:20:05,520
But in case you have some additional CSS,
3494
02:20:05,520 --> 02:20:07,360
which usually you will not have,
3495
02:20:07,360 --> 02:20:09,040
you can go ahead and write them still.
3496
02:20:09,040 --> 02:20:10,320
It is not going to bother you,
3497
02:20:10,320 --> 02:20:12,160
but you still have all of this.
3498
02:20:12,160 --> 02:20:13,000
So that's it.
3499
02:20:13,000 --> 02:20:15,840
These are the two steps, three steps technically,
3500
02:20:15,840 --> 02:20:18,960
this command, the tailwind config and this thing.
3501
02:20:18,960 --> 02:20:20,840
And after that, it's all npm run dev.
3502
02:20:20,840 --> 02:20:22,600
So that is all what we have.
3503
02:20:22,600 --> 02:20:24,520
Now let's go ahead and try to run it first
3504
02:20:24,520 --> 02:20:28,280
so that we can see are we good or not, npm run dev.
3505
02:20:28,280 --> 02:20:29,840
And we just run it.
3506
02:20:29,840 --> 02:20:31,360
Hopefully it looks good.
3507
02:20:31,360 --> 02:20:35,080
And right now we have no idea is it working or not.
3508
02:20:35,080 --> 02:20:39,640
So what we can do is let's go into app.jsx
3509
02:20:39,640 --> 02:20:42,480
and minimize the things which we don't need.
3510
02:20:42,480 --> 02:20:44,080
Let's just remove everything
3511
02:20:44,080 --> 02:20:46,640
and go ahead and grab an h1,
3512
02:20:46,640 --> 02:20:49,840
which says wheat with tailwind.
3513
02:20:49,840 --> 02:20:53,400
Tailwind, there we go.
3514
02:20:54,600 --> 02:20:57,640
In the h1, we'll be using a class name, which is a keyword.
3515
02:20:57,640 --> 02:21:01,200
Since we are in the JavaScript world or JavaScript paradigm,
3516
02:21:01,200 --> 02:21:03,160
we cannot use the word class itself.
3517
02:21:03,160 --> 02:21:05,120
It's a reserved keyword for the JavaScript.
3518
02:21:05,120 --> 02:21:06,760
So we use class name.
3519
02:21:06,760 --> 02:21:09,440
Only handful of the thing in the HTML are changed.
3520
02:21:09,440 --> 02:21:12,720
Like there is also an HTML4,
3521
02:21:14,040 --> 02:21:17,480
HTML4, which is also changed.
3522
02:21:17,480 --> 02:21:19,720
In the other input field especially,
3523
02:21:19,840 --> 02:21:20,680
you'll find that.
3524
02:21:20,680 --> 02:21:22,280
So if there is an input field,
3525
02:21:22,280 --> 02:21:24,800
it's usually in the label actually.
3526
02:21:24,800 --> 02:21:26,760
So in the label, you'll see the HTML4.
3527
02:21:26,760 --> 02:21:29,480
So in the regular HTML, we just write it for,
3528
02:21:29,480 --> 02:21:31,200
but again, for is a reserved keyword.
3529
02:21:31,200 --> 02:21:32,840
So only a handful of places are there
3530
02:21:32,840 --> 02:21:35,320
where you have these kinds of things, otherwise it's not.
3531
02:21:35,320 --> 02:21:36,720
So let's just say we want to have it.
3532
02:21:36,720 --> 02:21:41,720
So we can have the text dash three XL suggestions, three XL.
3533
02:21:42,680 --> 02:21:44,840
By the way, these suggestions come from a plugin,
3534
02:21:44,840 --> 02:21:46,780
which I have installed in my VS code,
3535
02:21:46,780 --> 02:21:49,580
known as Tailwind IntelliSense.
3536
02:21:49,580 --> 02:21:50,940
Yep.
3537
02:21:50,940 --> 02:21:55,140
And we'll go with the BG green and we'll go with this one
3538
02:21:55,140 --> 02:21:58,660
and we'll add a padding of three maybe just for fun.
3539
02:21:58,660 --> 02:22:00,900
If I go back, all these things are here.
3540
02:22:00,900 --> 02:22:03,180
That means, say, everything is looking good.
3541
02:22:03,180 --> 02:22:04,940
By the way, there are some fun classes as well.
3542
02:22:04,940 --> 02:22:07,700
Like I can go around at MD, it looks good.
3543
02:22:07,700 --> 02:22:10,780
So this is our basic Tailwind configuration.
3544
02:22:10,780 --> 02:22:12,060
So step one is done.
3545
02:22:12,060 --> 02:22:16,020
Now we are almost a master of configuring the Tailwind
3546
02:22:16,060 --> 02:22:17,020
in our application.
3547
02:22:17,020 --> 02:22:19,260
That's the basic that we have.
3548
02:22:19,260 --> 02:22:22,380
Next step, let's go ahead and understand the things
3549
02:22:22,380 --> 02:22:23,260
about the props.
3550
02:22:23,260 --> 02:22:24,300
Do we need a prop?
3551
02:22:24,300 --> 02:22:26,420
Right now, we don't need any prop.
3552
02:22:26,420 --> 02:22:30,260
Now, one thing to understand here is that this is a function.
3553
02:22:30,260 --> 02:22:33,460
So if this is a function and this whole function is imported
3554
02:22:33,460 --> 02:22:38,460
in the main.js, x main.jsx, can I write more such function?
3555
02:22:40,100 --> 02:22:43,260
And in those function, can I return some JSX,
3556
02:22:43,260 --> 02:22:44,980
which we have already studied quite a lot
3557
02:22:44,980 --> 02:22:47,620
during our custom preparation of the React?
3558
02:22:47,620 --> 02:22:49,900
Can I go ahead and do this kind of a thing?
3559
02:22:49,900 --> 02:22:51,540
I don't know, let's try it.
3560
02:22:51,540 --> 02:22:53,620
I'll create a new folder.
3561
02:22:53,620 --> 02:22:54,780
You don't need to create a folder.
3562
02:22:54,780 --> 02:22:56,740
I'm just organizing the things better.
3563
02:22:56,740 --> 02:22:59,220
I'll just call this one as components.
3564
02:22:59,220 --> 02:23:02,180
And inside the components, let's create a new file
3565
02:23:02,180 --> 02:23:05,380
and call this one as a card.
3566
02:23:06,260 --> 02:23:08,580
And of course, since this will be returning some JSX,
3567
02:23:08,580 --> 02:23:11,260
I'll be calling it as obviously.jsx.
3568
02:23:11,260 --> 02:23:12,900
Now there's a shortcut that you can use
3569
02:23:12,900 --> 02:23:17,420
if you have installed the React or not React.
3570
02:23:17,420 --> 02:23:19,900
There are some IntelliSense plugins available as well.
3571
02:23:19,900 --> 02:23:21,980
So there is some, let me just show you.
3572
02:23:21,980 --> 02:23:25,700
So there is some plugin known as React Snippets.
3573
02:23:25,700 --> 02:23:27,380
Yeah, this is the one that I have.
3574
02:23:27,380 --> 02:23:29,060
So you can actually go ahead and install this.
3575
02:23:29,060 --> 02:23:30,700
This makes life a little bit easier.
3576
02:23:30,700 --> 02:23:32,460
Once you have installed this one,
3577
02:23:32,460 --> 02:23:35,780
what this will allow you to do is you can type things
3578
02:23:35,780 --> 02:23:39,180
like rfce, which will give you a React functional component.
3579
02:23:39,180 --> 02:23:42,460
You can go ahead and say react afce.
3580
02:23:42,460 --> 02:23:45,740
For example, I can go ahead and say rafce,
3581
02:23:45,740 --> 02:23:48,500
which gives me a React arrow function component.
3582
02:23:48,500 --> 02:23:50,220
I can go ahead and say rfce,
3583
02:23:50,220 --> 02:23:52,060
which gives me a React functional component.
3584
02:23:52,060 --> 02:23:53,620
So whichever the one you like,
3585
02:23:53,620 --> 02:23:55,460
you can go ahead and go with that.
3586
02:23:55,460 --> 02:23:58,660
Now, what I'll do inside this,
3587
02:23:58,660 --> 02:24:00,620
since I know there is a div here,
3588
02:24:00,620 --> 02:24:01,820
I'll go ahead and say that,
3589
02:24:01,820 --> 02:24:04,460
hey, what I want to know is,
3590
02:24:04,460 --> 02:24:07,820
let's just say I'll import an image here,
3591
02:24:07,820 --> 02:24:10,340
and I'll give you a source as well in a minute.
3592
02:24:10,340 --> 02:24:12,540
I'll also give you an h1.
3593
02:24:12,540 --> 02:24:16,460
In the h1, I'll just say this is going to have some class,
3594
02:24:16,460 --> 02:24:21,460
text-2xl, and we'll be having a bg-green.
3595
02:24:23,740 --> 02:24:27,620
This one, padding of three maybe, rounded.
3596
02:24:30,180 --> 02:24:35,180
Rounded, and this will say a card for photos.
3597
02:24:36,300 --> 02:24:37,220
I don't know.
3598
02:24:37,220 --> 02:24:39,180
And we'll also have some paragraph
3599
02:24:39,180 --> 02:24:40,660
with a lorem of 10 words.
3600
02:24:40,660 --> 02:24:43,620
I don't know, this is my card that we have.
3601
02:24:43,620 --> 02:24:45,500
Let's give it an image source as well.
3602
02:24:45,500 --> 02:24:47,900
I'll obviously pick from some of my images
3603
02:24:47,900 --> 02:24:50,140
that I donated to Pexels.
3604
02:24:50,140 --> 02:24:51,420
I think this one looks good.
3605
02:24:51,420 --> 02:24:54,700
I'll just right-click, copy image address,
3606
02:24:54,700 --> 02:24:56,840
go back and just paste it up there.
3607
02:24:56,840 --> 02:25:00,820
Now, I have this image, and this is looking good,
3608
02:25:00,820 --> 02:25:02,060
but this is a function.
3609
02:25:02,060 --> 02:25:03,340
There's nothing more to it.
3610
02:25:03,340 --> 02:25:06,540
And again, don't ever overestimate React.
3611
02:25:06,540 --> 02:25:07,620
It's just JavaScript.
3612
02:25:07,620 --> 02:25:10,500
Always think it from the JavaScript perspective.
3613
02:25:10,500 --> 02:25:11,460
Now we have this card.
3614
02:25:11,460 --> 02:25:15,300
Can I import this card in app.jsx or main.jsx even?
3615
02:25:15,300 --> 02:25:17,460
Yes, you can import it wherever you like.
3616
02:25:17,460 --> 02:25:20,700
Let's go ahead and say that I want to import a card,
3617
02:25:20,700 --> 02:25:24,020
and that card will come from ./component.
3618
02:25:24,020 --> 02:25:27,800
So I'm going into one directory, and then I have this card.
3619
02:25:27,800 --> 02:25:30,580
You don't need to write this like card.jsx.
3620
02:25:30,580 --> 02:25:33,300
It's auto-imported, so you can just avoid that.
3621
02:25:33,300 --> 02:25:34,460
How can we use it?
3622
02:25:34,460 --> 02:25:35,980
Just like we used app.
3623
02:25:36,020 --> 02:25:38,140
So it's going to be simply like card.
3624
02:25:38,140 --> 02:25:40,220
And a self-closing one, just like that.
3625
02:25:40,220 --> 02:25:41,580
That's it.
3626
02:25:41,580 --> 02:25:43,340
Now let's see if it works.
3627
02:25:43,340 --> 02:25:46,600
So we'll go up here, and we see that, OK, we have this.
3628
02:25:46,600 --> 02:25:50,020
This is a pretty big card, but there is nothing
3629
02:25:50,020 --> 02:25:51,100
which is stopping us.
3630
02:25:51,100 --> 02:25:53,940
It's looking pretty nice, and we have this one.
3631
02:25:53,940 --> 02:25:56,140
All right, so we have this card.
3632
02:25:56,140 --> 02:25:57,860
Now let's go back onto the Tailwind
3633
02:25:57,860 --> 02:26:01,340
and see if what they can offer us on the home page.
3634
02:26:01,340 --> 02:26:03,460
So on the home page also, they are offering us
3635
02:26:03,620 --> 02:26:04,580
some of this card.
3636
02:26:04,580 --> 02:26:08,700
And let's go ahead and copy this entirety
3637
02:26:08,700 --> 02:26:10,660
and see if we can actually somebody,
3638
02:26:10,660 --> 02:26:13,740
what happens if somebody gives us the components like this.
3639
02:26:13,740 --> 02:26:18,240
I'll just go ahead and replace my card with this card.
3640
02:26:18,240 --> 02:26:20,200
And obviously, you can see there are a lot of places
3641
02:26:20,200 --> 02:26:22,260
where things are going wrong and whatnot.
3642
02:26:22,260 --> 02:26:23,840
So let's just figure out.
3643
02:26:23,840 --> 02:26:26,700
So this is a common mistake or common error
3644
02:26:26,700 --> 02:26:27,960
that you will also be facing.
3645
02:26:27,960 --> 02:26:29,960
So let's not run away from them.
3646
02:26:29,960 --> 02:26:31,580
Instead, let's deal with them.
3647
02:26:31,580 --> 02:26:33,220
So first one, it says, hey, figure.
3648
02:26:33,260 --> 02:26:34,340
So what is this problem?
3649
02:26:34,340 --> 02:26:37,140
It says figure has no corresponding closing tag.
3650
02:26:37,140 --> 02:26:40,020
Another JSX requirement that if something is getting started,
3651
02:26:40,020 --> 02:26:42,100
it needs to close as well.
3652
02:26:42,100 --> 02:26:44,380
So notice here, this is where the figure is ending.
3653
02:26:44,380 --> 02:26:46,180
So what's the issue?
3654
02:26:46,180 --> 02:26:48,580
You can see that at some of the places,
3655
02:26:48,580 --> 02:26:51,740
this needs to close so that now it goes.
3656
02:26:51,740 --> 02:26:55,020
Now you can see some of the errors are gone just with that.
3657
02:26:55,020 --> 02:26:56,980
It's not always about, hey, figure was missing
3658
02:26:56,980 --> 02:26:58,060
or something like that.
3659
02:26:58,060 --> 02:27:02,240
But we can see things are going not that great in this case.
3660
02:27:02,240 --> 02:27:04,800
So for example, we have some of the errors here as well.
3661
02:27:04,800 --> 02:27:06,560
Why these errors are here?
3662
02:27:06,560 --> 02:27:08,800
It should be all supported like this.
3663
02:27:08,800 --> 02:27:12,040
Yes, the reason for them is let me go ahead and hit Command-Z
3664
02:27:12,040 --> 02:27:13,880
a couple of times.
3665
02:27:13,880 --> 02:27:15,960
We were supposed to enter this all here.
3666
02:27:15,960 --> 02:27:17,600
But if I go ahead and copy this, you
3667
02:27:17,600 --> 02:27:20,360
can see it's not properly being written
3668
02:27:20,360 --> 02:27:22,880
or it's not properly being organized.
3669
02:27:22,880 --> 02:27:24,800
So I need to actually grab it properly,
3670
02:27:24,800 --> 02:27:27,120
light click, and copy this.
3671
02:27:27,120 --> 02:27:30,160
But again, you will face some of the issues with this
3672
02:27:30,160 --> 02:27:32,040
because things are not great.
3673
02:27:32,040 --> 02:27:33,620
Things are not great at this moment.
3674
02:27:33,620 --> 02:27:35,000
So let's just paste this.
3675
02:27:35,000 --> 02:27:37,160
And probably this time they have come back
3676
02:27:37,160 --> 02:27:38,640
in a better situation.
3677
02:27:38,640 --> 02:27:42,920
But the issue is I have this a lot of errors.
3678
02:27:42,920 --> 02:27:45,360
So I'll first indent this because this is bothering me
3679
02:27:45,360 --> 02:27:45,960
a little bit.
3680
02:27:45,960 --> 02:27:48,680
So OK.
3681
02:27:48,680 --> 02:27:51,160
Now these things, these curly braces
3682
02:27:51,160 --> 02:27:53,920
and these closing brackets, they are good.
3683
02:27:53,920 --> 02:27:56,520
But the problem is that first of all,
3684
02:27:56,520 --> 02:27:58,640
our image is having no ending tag.
3685
02:27:58,640 --> 02:28:00,600
When the image is not having any ending tag,
3686
02:28:00,600 --> 02:28:03,040
you can actually provide a self-closing tag.
3687
02:28:03,040 --> 02:28:05,080
That will remove at least one of the error.
3688
02:28:05,080 --> 02:28:06,580
Now let's see what's the other error.
3689
02:28:06,580 --> 02:28:09,080
The other error is we have these quotes
3690
02:28:09,080 --> 02:28:11,120
inside it, which is obviously giving us
3691
02:28:11,120 --> 02:28:13,240
these commas and errors.
3692
02:28:13,240 --> 02:28:15,720
IntelliSense is helping me to figure this out.
3693
02:28:15,720 --> 02:28:18,720
And I'll have a lot of 10 words, maybe something like this.
3694
02:28:18,720 --> 02:28:20,160
This will work better.
3695
02:28:20,160 --> 02:28:22,160
And now we can see some of the errors are gone.
3696
02:28:22,160 --> 02:28:23,760
OK, some of the errors are gone.
3697
02:28:23,760 --> 02:28:26,520
But I'm pretty sure the image is not going to work.
3698
02:28:26,520 --> 02:28:27,680
Why so?
3699
02:28:27,680 --> 02:28:28,840
Because the source.
3700
02:28:28,840 --> 02:28:31,120
The source of the image, I don't have it.
3701
02:28:31,120 --> 02:28:33,200
Easiest way is to fix it.
3702
02:28:33,200 --> 02:28:34,840
Just stay calm and fix the stuff.
3703
02:28:34,840 --> 02:28:36,480
That's how the programming works.
3704
02:28:36,480 --> 02:28:38,760
Let's say copy image address, go back,
3705
02:28:38,760 --> 02:28:42,480
and we'll just replace this whole image with this.
3706
02:28:42,480 --> 02:28:43,520
OK.
3707
02:28:43,520 --> 02:28:46,320
Now that our designer has given us a better card
3708
02:28:46,320 --> 02:28:48,320
by designing that, this is looking good.
3709
02:28:48,320 --> 02:28:51,600
And since it's a tailwind, it should be optimized as well.
3710
02:28:51,600 --> 02:28:53,920
Decently optimized, not the best.
3711
02:28:53,920 --> 02:28:55,120
But OK.
3712
02:28:55,120 --> 02:28:58,680
Now I understand that, yes, this is a common thing, which
3713
02:28:58,680 --> 02:29:00,960
I can say that, hey, eventually I
3714
02:29:00,960 --> 02:29:03,240
can keep all of my components separate like this.
3715
02:29:03,240 --> 02:29:06,000
For example, header could be its own file.
3716
02:29:06,000 --> 02:29:08,600
Navigation menu could be in its own file.
3717
02:29:08,600 --> 02:29:10,720
Footer could be in its own file and can
3718
02:29:10,720 --> 02:29:12,640
be rendered on every single page.
3719
02:29:12,640 --> 02:29:14,480
And if I have to make any change,
3720
02:29:14,480 --> 02:29:17,560
I can go ahead and make a change in one place, and that's it.
3721
02:29:17,560 --> 02:29:20,200
It will serve at every single page.
3722
02:29:20,200 --> 02:29:22,560
Now this is exactly known as component building.
3723
02:29:22,560 --> 02:29:23,840
And there is a word for it.
3724
02:29:23,840 --> 02:29:25,560
We call it as dumb component.
3725
02:29:25,560 --> 02:29:27,200
Yeah, very rude.
3726
02:29:27,200 --> 02:29:28,680
But we call it as dumb component.
3727
02:29:28,680 --> 02:29:32,120
The reason being, this component doesn't take any parameter.
3728
02:29:32,120 --> 02:29:34,040
It's not modifiable.
3729
02:29:34,040 --> 02:29:35,600
It just works like this.
3730
02:29:35,600 --> 02:29:37,680
So how can we make it a little bit more
3731
02:29:37,680 --> 02:29:39,960
intelligent of a component?
3732
02:29:39,960 --> 02:29:41,960
Now a couple of ways how you can do it.
3733
02:29:41,960 --> 02:29:46,040
The first way is that, hey, I want to pass on some text.
3734
02:29:46,040 --> 02:29:49,000
For example, in our card, as we can see,
3735
02:29:49,000 --> 02:29:53,520
this is the name of a person and then the post, maybe
3736
02:29:53,520 --> 02:29:55,880
software engineer, staff engineer.
3737
02:29:55,880 --> 02:29:58,520
So these things, probably I want
3738
02:29:58,520 --> 02:30:02,120
to assign that, hey, maybe multiple cards should be there.
3739
02:30:02,120 --> 02:30:04,120
And I want to pass on this argument.
3740
02:30:04,120 --> 02:30:06,000
Right now, there is nothing which
3741
02:30:06,000 --> 02:30:08,240
is stopping me to actually display this card because I've
3742
02:30:08,240 --> 02:30:08,880
imported that.
3743
02:30:08,880 --> 02:30:12,200
I can display two times, three times, however I like.
3744
02:30:12,200 --> 02:30:14,280
But the information is exactly same.
3745
02:30:14,280 --> 02:30:17,220
So the first step actually is, whenever
3746
02:30:17,220 --> 02:30:20,320
you may want to make a card to accept any parameter,
3747
02:30:20,320 --> 02:30:23,360
is go up here and accept it.
3748
02:30:23,360 --> 02:30:25,560
The way how we accept it, actually,
3749
02:30:25,560 --> 02:30:27,400
with every single of these component,
3750
02:30:27,400 --> 02:30:30,520
there is a React magic that goes on onto it,
3751
02:30:30,520 --> 02:30:32,640
which is known as props.
3752
02:30:32,640 --> 02:30:35,040
Now what does prop is doing right now?
3753
02:30:35,040 --> 02:30:38,200
If I go ahead and hit a reload, there's nothing inside it.
3754
02:30:38,200 --> 02:30:39,600
It even broke my application.
3755
02:30:39,600 --> 02:30:42,960
So if I go ahead and check out the console, it says props
3756
02:30:42,960 --> 02:30:44,680
is not defined.
3757
02:30:44,680 --> 02:30:47,360
So if the prop is not defined, how the things
3758
02:30:47,360 --> 02:30:49,280
are going to go ahead and work?
3759
02:30:49,280 --> 02:30:52,080
Notice here, props is not defined everywhere.
3760
02:30:52,080 --> 02:30:54,040
And you are saying that React actually gives me
3761
02:30:54,040 --> 02:30:55,640
a prop like this?
3762
02:30:55,640 --> 02:30:58,960
Yes, React actually gives you a prop like this.
3763
02:30:58,960 --> 02:30:59,600
But why?
3764
02:30:59,600 --> 02:31:01,560
I cannot even access this.
3765
02:31:01,560 --> 02:31:03,360
You cannot access this because, first, you
3766
02:31:03,360 --> 02:31:06,320
have to actually accept that there is a props.
3767
02:31:06,320 --> 02:31:07,800
Once I go ahead and save it back,
3768
02:31:07,800 --> 02:31:10,240
you can see at least our application is loading,
3769
02:31:10,240 --> 02:31:12,240
if I go ahead and hit a reload.
3770
02:31:12,240 --> 02:31:14,080
But I can see all empty.
3771
02:31:14,080 --> 02:31:15,200
Yes, it should be empty.
3772
02:31:15,200 --> 02:31:16,880
And by the way, there is a class error.
3773
02:31:16,880 --> 02:31:18,600
Let me just fix that.
3774
02:31:18,600 --> 02:31:21,160
The class should be.
3775
02:31:21,240 --> 02:31:23,600
Let me just go ahead and do Command-D
3776
02:31:23,600 --> 02:31:26,280
to find all the instances of this
3777
02:31:26,280 --> 02:31:31,080
so that I can actually rename this.
3778
02:31:31,080 --> 02:31:34,360
So this would be class name.
3779
02:31:34,360 --> 02:31:36,080
Now it should be all happy.
3780
02:31:36,080 --> 02:31:38,680
Yeah, hopefully.
3781
02:31:38,680 --> 02:31:39,920
Let's hit a reload.
3782
02:31:39,920 --> 02:31:40,400
There we go.
3783
02:31:40,400 --> 02:31:42,440
At least that error is gone.
3784
02:31:42,440 --> 02:31:45,360
So we can see that now there is nothing inside this.
3785
02:31:45,360 --> 02:31:48,920
There is this square bracket, square bracket, prop prototype,
3786
02:31:48,920 --> 02:31:50,480
which is, again, a hidden scope.
3787
02:31:50,480 --> 02:31:51,560
We won't talk about this.
3788
02:31:51,560 --> 02:31:53,360
This is not a JavaScript class.
3789
02:31:53,360 --> 02:31:56,840
But I can see at least that, OK, so far we are correct
3790
02:31:56,840 --> 02:31:59,120
that, at least in the card, there
3791
02:31:59,120 --> 02:32:01,040
is something which is known as props.
3792
02:32:01,040 --> 02:32:02,400
And I can console log this.
3793
02:32:02,400 --> 02:32:03,880
OK, so far, good.
3794
02:32:03,880 --> 02:32:05,400
But how can I use this props?
3795
02:32:05,400 --> 02:32:07,160
We just saw that this is an object.
3796
02:32:07,160 --> 02:32:10,200
So if it is an object, we can add value to it.
3797
02:32:10,200 --> 02:32:11,200
All right, that's good.
3798
02:32:11,200 --> 02:32:13,240
So how can I add value to it?
3799
02:32:13,240 --> 02:32:15,160
Wherever you are calling this card,
3800
02:32:15,160 --> 02:32:16,560
go ahead and pass on values.
3801
02:32:16,560 --> 02:32:19,600
For example, I'll just call this one as a user name
3802
02:32:19,600 --> 02:32:23,240
and the value of user name is here is going to be Hitesh.
3803
02:32:23,240 --> 02:32:26,320
OK, now how can I utilize this?
3804
02:32:26,320 --> 02:32:28,640
Everything that you pass here in this format,
3805
02:32:28,640 --> 02:32:31,200
it's actually a key value thing, key and value.
3806
02:32:31,200 --> 02:32:33,200
So you can actually have this props here.
3807
02:32:33,200 --> 02:32:35,280
And now I can change the name here.
3808
02:32:35,280 --> 02:32:38,000
I can inject my JavaScript just like this.
3809
02:32:38,000 --> 02:32:40,280
And I can say props, since this was an object.
3810
02:32:40,280 --> 02:32:42,720
And I can go ahead and say dot username.
3811
02:32:42,720 --> 02:32:45,000
And this technically will render my name.
3812
02:32:45,000 --> 02:32:47,520
So I can see that this is Hitesh now.
3813
02:32:47,520 --> 02:32:49,080
Rest of all the things, they are gone
3814
02:32:49,080 --> 02:32:51,560
because they never passed me anything.
3815
02:32:51,560 --> 02:32:52,440
But this is an issue.
3816
02:32:52,440 --> 02:32:56,000
What happens if the user doesn't pass on this props?
3817
02:32:56,000 --> 02:32:57,080
Common case.
3818
02:32:57,080 --> 02:32:58,880
So in this case, what we can do is
3819
02:32:58,880 --> 02:33:01,320
we can actually just provide some default value
3820
02:33:01,320 --> 02:33:03,800
if the value doesn't exist, use this value.
3821
02:33:03,800 --> 02:33:05,560
One more thing, if I'm going to pass you
3822
02:33:05,560 --> 02:33:10,440
these values like prop dot user name, prop dot your post,
3823
02:33:10,440 --> 02:33:13,800
whatever that is, every time you have to say prop dot prop dot.
3824
02:33:13,800 --> 02:33:15,520
So one common thing that you're going to see
3825
02:33:15,520 --> 02:33:18,200
is just destructuring this object directly.
3826
02:33:18,240 --> 02:33:20,440
And whatever the field you need, you just simply
3827
02:33:20,440 --> 02:33:23,040
go ahead and say, hey, I want to extract username out of it,
3828
02:33:23,040 --> 02:33:24,280
or whatever you want.
3829
02:33:24,280 --> 02:33:26,920
In this case, you don't have to say props like this.
3830
02:33:26,920 --> 02:33:28,640
And everything still works.
3831
02:33:28,640 --> 02:33:32,240
Now, there is a good thing that if this value is not
3832
02:33:32,240 --> 02:33:34,920
available, then there are a couple of ways, actually,
3833
02:33:34,920 --> 02:33:36,920
you can go ahead and work on with this.
3834
02:33:36,920 --> 02:33:40,760
For example, I can go ahead and say username.
3835
02:33:40,760 --> 02:33:44,400
Or if username is not there, go ahead and print Hitesh.
3836
02:33:44,400 --> 02:33:45,760
So it works.
3837
02:33:45,760 --> 02:33:46,680
But there's a problem.
3838
02:33:46,680 --> 02:33:48,440
Here's a problem with this case.
3839
02:33:48,440 --> 02:33:50,400
This is not scalable.
3840
02:33:50,400 --> 02:33:54,160
The reason why, how many times your other fellow coders
3841
02:33:54,160 --> 02:33:56,720
are going to come and look into this much of the pieces
3842
02:33:56,720 --> 02:33:58,160
of the code and will say, hey, this
3843
02:33:58,160 --> 02:34:00,040
is where you have used the conditional.
3844
02:34:00,040 --> 02:34:00,720
This works.
3845
02:34:00,720 --> 02:34:01,640
A lot of people use that.
3846
02:34:01,640 --> 02:34:03,560
I've seen that in the production code even,
3847
02:34:03,560 --> 02:34:04,960
but not a good approach.
3848
02:34:04,960 --> 02:34:07,680
So technically, it is correct, but it's not
3849
02:34:07,680 --> 02:34:08,680
scalable solution.
3850
02:34:08,680 --> 02:34:12,040
So the better approach could be that, hey, you should actually
3851
02:34:12,040 --> 02:34:15,400
give some values here as well, like Hitesh.
3852
02:34:15,400 --> 02:34:17,720
Or maybe Hitesh.
3853
02:34:17,720 --> 02:34:21,640
Or I'll just use an H. Oops, Command-Z, a couple of times.
3854
02:34:21,640 --> 02:34:24,360
I'll just go ahead and say, instead of this, Hc.
3855
02:34:24,360 --> 02:34:25,440
Just like that.
3856
02:34:25,440 --> 02:34:27,440
Save this.
3857
02:34:27,440 --> 02:34:30,840
And now, if I go back, notice here it says Hc.
3858
02:34:30,840 --> 02:34:32,760
So the logic is still same.
3859
02:34:32,760 --> 02:34:35,200
So if you will give me the value, which you have given me
3860
02:34:35,200 --> 02:34:37,480
here, I'll use that value.
3861
02:34:37,480 --> 02:34:40,080
If you are not going to give me any value in any component
3862
02:34:40,080 --> 02:34:42,240
call, I'll just use this default value.
3863
02:34:42,240 --> 02:34:43,760
So this is a far more better approach,
3864
02:34:43,760 --> 02:34:45,520
because at the very start of the function,
3865
02:34:45,520 --> 02:34:47,600
you get all the usernames and what the values you
3866
02:34:47,600 --> 02:34:49,680
want to extract, and you can work on with that.
3867
02:34:49,680 --> 02:34:52,520
Similarly, we can just put a comma separated values.
3868
02:34:52,520 --> 02:34:54,040
I can just say post.
3869
02:34:54,040 --> 02:34:56,160
And I can just simply say equals.
3870
02:34:56,160 --> 02:34:57,880
And then instead of staff engineer,
3871
02:34:57,880 --> 02:35:04,040
we'll be using something else not assigned yet.
3872
02:35:04,040 --> 02:35:06,600
So we can see that right now it says still,
3873
02:35:06,600 --> 02:35:08,320
because we haven't used it.
3874
02:35:08,320 --> 02:35:12,120
So in here, I can just go ahead and enable my JavaScript.
3875
02:35:12,120 --> 02:35:16,360
And I can just go ahead and say, I don't have to say props.
3876
02:35:16,360 --> 02:35:18,720
I can just directly say post.
3877
02:35:18,720 --> 02:35:19,520
So there we go.
3878
02:35:19,520 --> 02:35:21,880
Now it says not assigned yet, not assigned yet.
3879
02:35:21,880 --> 02:35:25,520
So every single time you call any component or a piece of code,
3880
02:35:25,520 --> 02:35:27,160
you can just go ahead and provide, hey,
3881
02:35:27,160 --> 02:35:28,760
I want to make it more reusable.
3882
02:35:28,760 --> 02:35:29,840
This time, it was attached.
3883
02:35:29,840 --> 02:35:32,840
This time, it's going to be JSON.
3884
02:35:32,840 --> 02:35:35,320
And then I want to also provide a post, which
3885
02:35:35,320 --> 02:35:36,820
is an optional parameter, by the way.
3886
02:35:36,820 --> 02:35:38,560
There's no comma here.
3887
02:35:38,560 --> 02:35:46,720
Post, and the post value is going to be stuff, engineer.
3888
02:35:46,720 --> 02:35:47,680
So just like that.
3889
02:35:47,680 --> 02:35:50,280
And we can see that this changes a lot of stuff.
3890
02:35:50,280 --> 02:35:52,080
So instead of making a dumb component,
3891
02:35:52,080 --> 02:35:54,440
we can go ahead and make it much more smarter.
3892
02:35:54,440 --> 02:35:57,960
Similarly, you can go ahead and provide a URL of the image
3893
02:35:57,960 --> 02:35:58,960
here as well.
3894
02:35:58,960 --> 02:36:01,200
And instead of getting this whole big thing,
3895
02:36:01,200 --> 02:36:03,560
you can just go ahead and make it as an optional,
3896
02:36:03,560 --> 02:36:04,960
that, hey, this is optional.
3897
02:36:04,960 --> 02:36:06,340
And you can inject your JavaScript.
3898
02:36:06,340 --> 02:36:06,840
Just same.
3899
02:36:06,840 --> 02:36:09,560
Curly braces, add a string, and that is it.
3900
02:36:09,560 --> 02:36:11,400
That's your assignment, by the way.
3901
02:36:11,400 --> 02:36:12,640
Really easy one.
3902
02:36:12,640 --> 02:36:14,920
Go ahead and make this component a little bit better
3903
02:36:14,920 --> 02:36:17,880
so that you can make it more reusable.
3904
02:36:17,880 --> 02:36:20,360
But one more thing, will I always
3905
02:36:20,360 --> 02:36:22,280
be passing strings like that?
3906
02:36:22,280 --> 02:36:25,040
Can't I just pass something more, something like, hey,
3907
02:36:25,040 --> 02:36:27,360
in this first card, I want to provide an array.
3908
02:36:27,360 --> 02:36:29,640
So I'll just go ahead and say my error.
3909
02:36:29,640 --> 02:36:31,720
And that is going to be an array like this.
3910
02:36:31,720 --> 02:36:33,840
And that's going to be 1, 2, 3, 4.
3911
02:36:33,840 --> 02:36:35,480
We can see, obviously, that's an error.
3912
02:36:35,480 --> 02:36:36,520
That's an error.
3913
02:36:36,520 --> 02:36:38,040
The reason for this error is, if you
3914
02:36:38,040 --> 02:36:41,800
have studied my JSX chapter in this entire series,
3915
02:36:41,800 --> 02:36:43,760
this whole thing will be taken up as it is
3916
02:36:43,760 --> 02:36:47,600
and will be placed in the JSX line by line parsing of it.
3917
02:36:47,600 --> 02:36:49,480
So this is obviously not a great idea.
3918
02:36:49,480 --> 02:36:50,640
Yes, you can pass arrays.
3919
02:36:50,640 --> 02:36:51,680
You can pass on objects.
3920
02:36:51,680 --> 02:36:53,800
But there is a way of doing that.
3921
02:36:53,800 --> 02:36:56,960
And that is where you have to inject your JavaScript in here.
3922
02:36:56,960 --> 02:36:58,600
And that's how you pass it.
3923
02:36:58,600 --> 02:37:01,280
And while the better way, even, actually, to do this,
3924
02:37:01,280 --> 02:37:04,040
if you really want to pass on something like this,
3925
02:37:04,040 --> 02:37:07,880
the best way is to create an object first,
3926
02:37:07,880 --> 02:37:09,480
create a variable first.
3927
02:37:09,480 --> 02:37:10,920
And that would be a better name.
3928
02:37:10,920 --> 02:37:13,560
So for example, you go ahead and pass on my object
3929
02:37:13,560 --> 02:37:14,760
just like this.
3930
02:37:14,760 --> 02:37:17,400
And in this, we will have a couple of values.
3931
02:37:17,400 --> 02:37:19,080
Oh, that's too much of the values.
3932
02:37:19,080 --> 02:37:21,160
I don't know how we came up with that address.
3933
02:37:21,160 --> 02:37:23,000
I don't even live in this.
3934
02:37:23,000 --> 02:37:30,280
I'll just live in the pink city, just for fun, just for fun.
3935
02:37:30,280 --> 02:37:33,600
And I'll just say new array.
3936
02:37:33,600 --> 02:37:35,320
And some values into that.
3937
02:37:35,320 --> 02:37:36,640
So it's always a better idea if you
3938
02:37:36,640 --> 02:37:38,600
want to pass on any values or like this.
3939
02:37:38,600 --> 02:37:40,560
Go ahead and pass on this variable.
3940
02:37:40,560 --> 02:37:41,960
That's usually a better approach.
3941
02:37:41,960 --> 02:37:44,040
So I can just go ahead and say new array.
3942
02:37:44,040 --> 02:37:47,200
And oops, my bad.
3943
02:37:47,200 --> 02:37:48,920
My bad in syntax.
3944
02:37:48,920 --> 02:37:49,440
There we go.
3945
02:37:49,440 --> 02:37:51,800
Now I can go ahead and say new array.
3946
02:37:51,800 --> 02:37:53,640
This is a far more better approach
3947
02:37:53,640 --> 02:37:54,800
than just writing the thing.
3948
02:37:54,800 --> 02:37:57,760
So if you want to pass on anything, your arrays,
3949
02:37:57,760 --> 02:38:00,520
objects, strings, anything else, maybe you
3950
02:38:00,520 --> 02:38:02,060
have called some values from the database.
3951
02:38:02,060 --> 02:38:03,360
You want to pass it on as it is.
3952
02:38:03,440 --> 02:38:04,760
You can go ahead and do that.
3953
02:38:04,760 --> 02:38:06,760
Maybe you want to pass on each of these elements.
3954
02:38:06,760 --> 02:38:08,720
You can spread these values and can pass on.
3955
02:38:08,720 --> 02:38:12,480
But it's up to you that how you are accepting these values here
3956
02:38:12,480 --> 02:38:13,000
as well.
3957
02:38:13,000 --> 02:38:14,480
That is the most important thing.
3958
02:38:14,480 --> 02:38:16,840
Here we are expecting that they will be an object, having
3959
02:38:16,840 --> 02:38:18,800
a string into that, so optional string.
3960
02:38:18,800 --> 02:38:21,160
If you expect that the values will be spreaded array,
3961
02:38:21,160 --> 02:38:23,760
go ahead and handle and deal it with that way.
3962
02:38:23,760 --> 02:38:25,720
That is the most important thing.
3963
02:38:25,720 --> 02:38:27,600
And that is why you need props.
3964
02:38:27,600 --> 02:38:29,280
So in this video, now we have learned.
3965
02:38:29,280 --> 02:38:30,880
So let me just summarize this.
3966
02:38:30,880 --> 02:38:35,280
First of all, we went through with the tailwind
3967
02:38:35,280 --> 02:38:38,360
configuration, absolute basic, nothing to be worried about.
3968
02:38:38,360 --> 02:38:42,480
We just went through with step-by-step instruction
3969
02:38:42,480 --> 02:38:44,000
from the documentation.
3970
02:38:44,000 --> 02:38:47,480
Then we studied a little bit about why props are necessary.
3971
02:38:47,480 --> 02:38:49,680
By the way, this whole thing, this user name,
3972
02:38:49,680 --> 02:38:51,360
it is, this is the prop.
3973
02:38:51,360 --> 02:38:52,280
That is it.
3974
02:38:52,280 --> 02:38:54,360
It's a short form for properties.
3975
02:38:54,360 --> 02:38:57,520
And the reason why we call this one here as a props, that
3976
02:38:57,520 --> 02:38:59,600
is, again, a short form for properties,
3977
02:38:59,640 --> 02:39:02,240
we saw in the console log, there is an object.
3978
02:39:02,240 --> 02:39:03,760
That object is called as property.
3979
02:39:03,760 --> 02:39:05,960
And that's why, hence, the short name of props.
3980
02:39:05,960 --> 02:39:08,160
So coming back, so we studied about how
3981
02:39:08,160 --> 02:39:09,480
we can make dumb components.
3982
02:39:09,480 --> 02:39:12,360
Component is like shortening the code
3983
02:39:12,360 --> 02:39:14,600
and make it more modularized so that you
3984
02:39:14,600 --> 02:39:18,120
can have individual control on each component, like cards.
3985
02:39:18,120 --> 02:39:19,720
Eventually, we can loop through the cards,
3986
02:39:19,720 --> 02:39:22,560
generate hundreds of cards, a navigation bar, footers,
3987
02:39:22,560 --> 02:39:24,680
and all of this so that we can keep them separate.
3988
02:39:24,680 --> 02:39:27,280
This is how the production code is being written.
3989
02:39:27,280 --> 02:39:29,120
On top of that, we studied a little bit
3990
02:39:29,160 --> 02:39:30,960
how we can actually grab the entire props
3991
02:39:30,960 --> 02:39:33,520
or we can de-structure them at the very top.
3992
02:39:33,520 --> 02:39:35,680
And if we are interested in de-structuring,
3993
02:39:35,680 --> 02:39:36,920
then it's much better.
3994
02:39:36,920 --> 02:39:39,680
We also studied the concept that if you don't pass on
3995
02:39:39,680 --> 02:39:41,760
any default value, what are the consequences?
3996
02:39:41,760 --> 02:39:44,880
We also studied there is a non-scalable approach
3997
02:39:44,880 --> 02:39:46,240
that could be have taken, but you
3998
02:39:46,240 --> 02:39:48,320
can improve your code with the scalable approach
3999
02:39:48,320 --> 02:39:51,000
of providing the default value up here itself.
4000
02:39:51,000 --> 02:39:53,160
That is always a great idea.
4001
02:39:53,160 --> 02:39:53,680
This is all.
4002
02:39:53,680 --> 02:39:55,240
This is all that you want to study
4003
02:39:55,240 --> 02:39:57,320
in this particular video about props.
4004
02:39:57,320 --> 02:39:59,760
Now you have a great idea about what are the states,
4005
02:39:59,760 --> 02:40:00,760
why they are being used.
4006
02:40:00,760 --> 02:40:03,760
You also have the idea about modularizing your code
4007
02:40:03,760 --> 02:40:04,600
using the props.
4008
02:40:04,600 --> 02:40:05,840
We created a card component.
4009
02:40:05,840 --> 02:40:07,520
Go ahead and create another component,
4010
02:40:07,520 --> 02:40:10,240
like header or footer or something, and try this out.
4011
02:40:10,240 --> 02:40:10,880
This is all.
4012
02:40:10,880 --> 02:40:14,640
This is all that we have for this particular video.
4013
02:40:14,640 --> 02:40:18,080
If you're enjoying this video, it gives me an immense boost
4014
02:40:18,080 --> 02:40:18,720
in confidence.
4015
02:40:18,720 --> 02:40:20,640
If you leave a comment, drop down a comment.
4016
02:40:20,640 --> 02:40:23,320
Any thank note, hurt, emoji, whatever that is.
4017
02:40:23,320 --> 02:40:26,440
I'm expecting at least 100 comments on this video
4018
02:40:26,440 --> 02:40:27,960
just to give me a model boost.
4019
02:40:27,960 --> 02:40:28,920
That's it.
4020
02:40:28,920 --> 02:40:30,760
Let's go ahead and catch up in the next video.
4021
02:40:34,680 --> 02:40:35,640
Hey, dear everyone.
4022
02:40:35,640 --> 02:40:37,560
Hithai Sheer back again with another video,
4023
02:40:37,560 --> 02:40:39,920
and welcome to our React series.
4024
02:40:39,920 --> 02:40:43,680
So we are on to our React journey going pretty good.
4025
02:40:43,680 --> 02:40:46,400
And now is the time that we learned the things on the go
4026
02:40:46,400 --> 02:40:47,920
while building the applications.
4027
02:40:47,920 --> 02:40:50,480
And of course, we're going to start with absolute basics.
4028
02:40:50,480 --> 02:40:52,360
And let me break this here.
4029
02:40:52,360 --> 02:40:54,600
A lot of time when I bring this kind of application
4030
02:40:54,600 --> 02:40:56,920
at the start of the things, people just say, hey, Tish,
4031
02:40:56,920 --> 02:40:57,840
that's too basic.
4032
02:40:57,840 --> 02:40:58,680
That's too basic.
4033
02:40:58,680 --> 02:41:00,760
We really don't want to build this one.
4034
02:41:00,760 --> 02:41:01,640
Show us something cool.
4035
02:41:01,640 --> 02:41:03,920
Build an Amazon clone or a Spotify clone
4036
02:41:03,920 --> 02:41:05,720
or a blog application.
4037
02:41:05,720 --> 02:41:08,080
But the reality is that if you directly jump
4038
02:41:08,080 --> 02:41:10,360
into these applications, especially at this level,
4039
02:41:10,360 --> 02:41:12,040
because somebody who is learning React
4040
02:41:12,040 --> 02:41:13,640
has just gone through with JavaScript,
4041
02:41:13,640 --> 02:41:16,160
trying their hands on some frontend libraries,
4042
02:41:16,160 --> 02:41:18,120
this is where you can make a lot of mistakes.
4043
02:41:18,120 --> 02:41:19,360
So please don't do that.
4044
02:41:19,360 --> 02:41:21,480
Building these kinds of smaller application
4045
02:41:21,480 --> 02:41:23,720
will get confidence in you, as well as you'll
4046
02:41:23,800 --> 02:41:26,400
understand a lot of workflow as we go through.
4047
02:41:26,400 --> 02:41:28,600
So let me show you what we are about to build.
4048
02:41:28,600 --> 02:41:30,360
And then I'll walk you through that how we are going
4049
02:41:30,360 --> 02:41:31,800
to actually build it.
4050
02:41:31,800 --> 02:41:33,880
We'll be using a lot of tailwind for this one.
4051
02:41:33,880 --> 02:41:35,580
So this is how we are going to get started.
4052
02:41:35,580 --> 02:41:36,760
So this is absolute basic.
4053
02:41:36,760 --> 02:41:38,680
This is how we are going to get started.
4054
02:41:38,680 --> 02:41:40,360
At the bottom, we will have a few buttons.
4055
02:41:40,360 --> 02:41:41,960
Of course, we will not focus too much
4056
02:41:41,960 --> 02:41:43,560
on the tailwind side of it,
4057
02:41:43,560 --> 02:41:45,440
but still these are going to button.
4058
02:41:45,440 --> 02:41:46,760
As you click on these buttons,
4059
02:41:46,760 --> 02:41:48,480
they will actually change the color.
4060
02:41:48,480 --> 02:41:51,600
So it will turn it into red, green and blue.
4061
02:41:51,600 --> 02:41:53,280
And then if you hit the refresh,
4062
02:41:53,760 --> 02:41:55,400
it again comes back to the olive.
4063
02:41:55,400 --> 02:41:58,440
So this is all that we are going to build together.
4064
02:41:58,440 --> 02:42:00,980
We will be using again, classic wheat for this.
4065
02:42:00,980 --> 02:42:02,440
We'll be using tailwind for this
4066
02:42:02,440 --> 02:42:04,640
and just the basic state management.
4067
02:42:04,640 --> 02:42:06,200
This will give you a thorough confidence
4068
02:42:06,200 --> 02:42:07,760
of how states are being used
4069
02:42:07,760 --> 02:42:09,680
and how you can actually utilize them.
4070
02:42:09,680 --> 02:42:11,560
What are the impacts of using the state?
4071
02:42:11,560 --> 02:42:13,640
And eventually, gradually,
4072
02:42:13,640 --> 02:42:16,120
we are going to level up the difficulties here.
4073
02:42:16,120 --> 02:42:17,160
I hope you are all excited.
4074
02:42:17,160 --> 02:42:19,280
We're going to get started absolutely from scratch.
4075
02:42:19,280 --> 02:42:21,040
So let's go up there.
4076
02:42:21,040 --> 02:42:22,640
So this is my application.
4077
02:42:22,680 --> 02:42:24,280
Let's go back onto this one.
4078
02:42:24,280 --> 02:42:26,240
So this is how we are going to get started.
4079
02:42:26,240 --> 02:42:28,660
We'll be creating our very fourth app
4080
02:42:28,660 --> 02:42:30,500
that we have right now.
4081
02:42:30,500 --> 02:42:32,560
So let me go ahead and fire this up.
4082
02:42:32,560 --> 02:42:33,400
There we go.
4083
02:42:33,400 --> 02:42:35,880
We need to close this again, fire this up.
4084
02:42:35,880 --> 02:42:37,320
And this will be our fourth app.
4085
02:42:37,320 --> 02:42:41,740
So I'll be just saying NPM create wheat.
4086
02:42:42,640 --> 02:42:44,840
And we'll be going with the latest.
4087
02:42:44,840 --> 02:42:47,880
I think that's the best approach that we can have.
4088
02:42:47,880 --> 02:42:49,240
And then it requires a name.
4089
02:42:49,240 --> 02:42:51,200
This will be our fourth app technically.
4090
02:42:51,200 --> 02:42:55,080
So we'll be saying 04 and this will be a BG changer.
4091
02:42:55,080 --> 02:42:56,440
Feel free to name it something else
4092
02:42:56,440 --> 02:42:58,200
if this doesn't suits to you.
4093
02:42:58,200 --> 02:42:59,120
Works great with me.
4094
02:42:59,120 --> 02:43:00,760
So I'll be just using this one.
4095
02:43:00,760 --> 02:43:03,300
And package name is exactly same for me.
4096
02:43:03,300 --> 02:43:05,440
I'll be using React for this one.
4097
02:43:05,440 --> 02:43:08,920
I wish they could have asked me for a library of CSS as well,
4098
02:43:08,920 --> 02:43:10,440
but sadly they don't do.
4099
02:43:10,440 --> 02:43:12,280
Again, we'll be going with classic JavaScript
4100
02:43:12,280 --> 02:43:14,520
so that we can have more people using this library.
4101
02:43:14,520 --> 02:43:17,540
So let's go on to 04 and there we go.
4102
02:43:17,540 --> 02:43:19,720
Now the first thing that I have to do is NPM install
4103
02:43:19,720 --> 02:43:21,880
in case you are already on bun,
4104
02:43:21,880 --> 02:43:24,440
you can go ahead and use bun install as well.
4105
02:43:24,440 --> 02:43:25,560
No problem there.
4106
02:43:25,560 --> 02:43:28,480
It's usually a comparatively fast install that we have,
4107
02:43:28,480 --> 02:43:30,040
but by the time it does all of this,
4108
02:43:30,040 --> 02:43:33,240
let's go back here and work on the Tailwind CSS.
4109
02:43:33,240 --> 02:43:35,160
Again, classic go back to docs.
4110
02:43:35,160 --> 02:43:36,640
It might look repetitive to you,
4111
02:43:36,640 --> 02:43:38,240
but this reputation is necessary
4112
02:43:38,240 --> 02:43:40,080
so that you feel absolutely comfortable
4113
02:43:40,080 --> 02:43:41,720
in doing all these things.
4114
02:43:41,720 --> 02:43:43,640
I want this to be a muscle memory in use.
4115
02:43:43,640 --> 02:43:48,080
So let's go back and let's go ahead and clean this up
4116
02:43:48,080 --> 02:43:49,400
and paste these two things
4117
02:43:49,420 --> 02:43:51,360
so that we can have background changer
4118
02:43:51,360 --> 02:43:54,120
and we get a new file, which file?
4119
02:43:54,120 --> 02:43:56,640
Yep, a configuration file for Tailwind,
4120
02:43:56,640 --> 02:43:58,960
exactly this one, a Tailwind config.
4121
02:43:58,960 --> 02:44:01,000
In this, we have to change some configuration.
4122
02:44:01,000 --> 02:44:02,200
So we are using wheat.
4123
02:44:02,200 --> 02:44:03,400
So that's why we'll mention
4124
02:44:03,400 --> 02:44:05,920
that our index file is actually outside.
4125
02:44:05,920 --> 02:44:06,940
I'll just replace this
4126
02:44:06,940 --> 02:44:09,000
and rest of the files will be inside the source.
4127
02:44:09,000 --> 02:44:10,880
So this is exactly for that.
4128
02:44:10,880 --> 02:44:14,640
After that, we have to get the decorators, directives.
4129
02:44:14,640 --> 02:44:16,600
There are a lot of names for that.
4130
02:44:16,600 --> 02:44:17,640
Different language,
4131
02:44:17,640 --> 02:44:20,000
depends on what language you are coming up for.
4132
02:44:20,000 --> 02:44:23,160
And I'll be just changing that into index.css,
4133
02:44:23,160 --> 02:44:24,120
just replace everything.
4134
02:44:24,120 --> 02:44:26,960
We don't need much of the CSS, just save this.
4135
02:44:26,960 --> 02:44:28,760
And there we go, just save this.
4136
02:44:28,760 --> 02:44:32,040
And now technically you should be able to run npm run dev,
4137
02:44:32,040 --> 02:44:33,840
which hopefully we will be.
4138
02:44:33,840 --> 02:44:36,360
So we'll be saying npm run dev
4139
02:44:36,360 --> 02:44:38,260
and things should be up and running.
4140
02:44:38,260 --> 02:44:41,040
Before we go there, let's go into app.jsx
4141
02:44:41,040 --> 02:44:43,500
and actually just clean the things.
4142
02:44:43,500 --> 02:44:45,640
So we'll be saying, hey, let's clean this.
4143
02:44:45,640 --> 02:44:48,960
Let's clean this from here to here.
4144
02:44:48,960 --> 02:44:50,840
We'll be just putting up a simple H1
4145
02:44:51,840 --> 02:44:54,160
and what we're going to write.
4146
02:44:54,160 --> 02:44:58,220
A bgchanger app with wheat, looks good.
4147
02:44:59,360 --> 02:45:02,040
And we'll be having a simple class name.
4148
02:45:02,040 --> 02:45:07,040
And that says we need a bg-green suggestions, please.
4149
02:45:07,160 --> 02:45:09,520
I'll be using 500 variant of it.
4150
02:45:09,520 --> 02:45:11,960
And we'll be saying text of three Excel.
4151
02:45:11,960 --> 02:45:15,520
So we'll be saying three Excel.
4152
02:45:16,520 --> 02:45:18,080
Why is it not suggesting me?
4153
02:45:18,080 --> 02:45:19,520
Yeah, it is suggesting me.
4154
02:45:19,520 --> 02:45:22,400
Okay, let's see if the application is working or not.
4155
02:45:22,400 --> 02:45:23,880
Let's go up here.
4156
02:45:23,880 --> 02:45:24,720
And there we go.
4157
02:45:24,720 --> 02:45:26,640
Not really the nicest, coolest of the all,
4158
02:45:26,640 --> 02:45:28,560
but it is what it is.
4159
02:45:28,560 --> 02:45:30,800
It is decently good that we have.
4160
02:45:30,800 --> 02:45:32,440
Okay, going back.
4161
02:45:32,440 --> 02:45:35,640
Now how we're going to deal with this one, nothing too much.
4162
02:45:35,640 --> 02:45:37,160
Let me just give you a brief overview
4163
02:45:37,160 --> 02:45:39,360
of how we are going to take down this application.
4164
02:45:39,360 --> 02:45:42,360
Main.js, we are not going to be taking it down
4165
02:45:42,360 --> 02:45:44,540
because our app is being served inside it.
4166
02:45:44,540 --> 02:45:47,700
So let's just close this totally.
4167
02:45:47,700 --> 02:45:49,420
I'll close everything.
4168
02:45:49,420 --> 02:45:51,860
Okay, then we'll go into app.jsx.
4169
02:45:51,860 --> 02:45:55,340
This is the file which is serving entirety of my content.
4170
02:45:55,340 --> 02:45:58,740
So in fact, all of my content is going to go inside this.
4171
02:45:58,740 --> 02:46:00,080
For this, I need to go ahead
4172
02:46:00,080 --> 02:46:03,020
and create a simple full page width.
4173
02:46:03,020 --> 02:46:05,140
Inside that at the bottom, we'll be creating few buttons.
4174
02:46:05,140 --> 02:46:07,140
It's not really compulsory that you keep the buttons
4175
02:46:07,140 --> 02:46:09,180
at the bottom, top, left, right.
4176
02:46:09,180 --> 02:46:10,500
It's totally up to you,
4177
02:46:10,500 --> 02:46:13,300
but we need a full page of the screen itself.
4178
02:46:13,300 --> 02:46:15,140
So let's go ahead and do this.
4179
02:46:15,140 --> 02:46:17,420
What we're going to do is remove all of this.
4180
02:46:17,420 --> 02:46:20,500
The easiest way of doing this is to have a simple dev.
4181
02:46:20,500 --> 02:46:22,160
We'll be putting some content inside this,
4182
02:46:22,160 --> 02:46:24,020
but first let me add a few classes.
4183
02:46:24,020 --> 02:46:26,900
These classes comes from the Tailwind itself.
4184
02:46:26,900 --> 02:46:28,460
First of all, I want the width to be full.
4185
02:46:28,460 --> 02:46:30,340
So that's the shortcut for this one.
4186
02:46:30,340 --> 02:46:33,020
Edge screen actually gives you a viewport height screen.
4187
02:46:33,020 --> 02:46:34,620
If you hover your mouse onto this one,
4188
02:46:34,620 --> 02:46:37,620
it says give me height of 100% viewport.
4189
02:46:37,620 --> 02:46:39,660
Again, this is not a series about Tailwind,
4190
02:46:39,660 --> 02:46:41,340
but still want to give you a brief overview
4191
02:46:41,340 --> 02:46:43,100
of how things are actually going ahead
4192
02:46:43,260 --> 02:46:44,500
and we'll do it.
4193
02:46:44,500 --> 02:46:46,700
We'll also go ahead and add a duration of this
4194
02:46:46,700 --> 02:46:48,420
so that whenever there's a change,
4195
02:46:48,420 --> 02:46:50,500
it actually does it slowly.
4196
02:46:50,500 --> 02:46:54,580
Now, next thing, we're going to just keep it as it is.
4197
02:46:54,580 --> 02:46:56,460
This is how the basic looks like.
4198
02:46:56,460 --> 02:46:57,580
Now, once we have this,
4199
02:46:57,580 --> 02:47:00,700
I'll just not use these suggestions here.
4200
02:47:00,700 --> 02:47:04,060
We'll be using a simple Flexbox class here
4201
02:47:04,060 --> 02:47:06,060
so that we can have all these buttons and everything.
4202
02:47:06,060 --> 02:47:07,740
So let's go ahead and have a dev.
4203
02:47:07,740 --> 02:47:09,740
Inside this dev, let's have a class name.
4204
02:47:09,740 --> 02:47:11,220
First of all, we want it to be fixed
4205
02:47:11,220 --> 02:47:13,820
so that it's always fixed from the bottom.
4206
02:47:13,820 --> 02:47:15,420
Fixed, there we go.
4207
02:47:15,420 --> 02:47:16,780
And we'll be using a flex.
4208
02:47:16,780 --> 02:47:21,780
We'll be using a flex wrap, flex dash wrap, there we go.
4209
02:47:21,900 --> 02:47:24,620
And again, justify center
4210
02:47:24,620 --> 02:47:27,140
and we will be fixing it up from bottom
4211
02:47:27,140 --> 02:47:30,900
so we can use a bottom of how much you want to have it.
4212
02:47:30,900 --> 02:47:35,020
12, maybe 13, totally depends on you, no big deal.
4213
02:47:35,020 --> 02:47:36,840
We'll be also using one of the other property
4214
02:47:36,840 --> 02:47:38,380
which gives you inset as well.
4215
02:47:38,380 --> 02:47:39,940
And by the way, you can provide an inset
4216
02:47:40,100 --> 02:47:41,660
on X-axis and Y-axis.
4217
02:47:41,660 --> 02:47:44,700
Again, not a class for CSS, but we'll be going with that.
4218
02:47:44,700 --> 02:47:46,620
You can just copy and paste these ones.
4219
02:47:46,620 --> 02:47:49,100
So this is what we have as a basic.
4220
02:47:49,100 --> 02:47:51,220
And now once we have this,
4221
02:47:51,220 --> 02:47:54,740
then we can just go ahead and simply have the suggestions.
4222
02:47:54,740 --> 02:47:57,860
We can actually go ahead and take this one.
4223
02:47:57,860 --> 02:48:00,220
This gives us nice suggestions for this.
4224
02:48:00,220 --> 02:48:01,060
There we go.
4225
02:48:01,060 --> 02:48:02,500
Now we'll not be using everything.
4226
02:48:02,500 --> 02:48:03,340
We need flex.
4227
02:48:03,340 --> 02:48:06,740
We definitely need a flex wrap, justify center.
4228
02:48:06,740 --> 02:48:10,340
We'll be using some gap and some of the shadows as well.
4229
02:48:10,340 --> 02:48:13,020
So let me just go ahead and give you the CSS directly
4230
02:48:13,020 --> 02:48:14,820
again from my notes.
4231
02:48:14,820 --> 02:48:17,060
We'll be not using a widthful and all of that.
4232
02:48:17,060 --> 02:48:18,420
Again, it doesn't really matter
4233
02:48:18,420 --> 02:48:21,020
what CSS and anything you're using.
4234
02:48:21,020 --> 02:48:24,380
I'll be just using a simple button and let's just say test.
4235
02:48:24,380 --> 02:48:26,300
Again, if this UI doesn't make sense,
4236
02:48:26,300 --> 02:48:28,060
only UI that should make sense for you
4237
02:48:28,060 --> 02:48:30,220
is the width should be full, the height should be screen
4238
02:48:30,220 --> 02:48:32,700
and after that, just add button wherever you like.
4239
02:48:32,700 --> 02:48:35,080
Let's go back and see how does it looks like.
4240
02:48:35,080 --> 02:48:37,320
So we can see at the bottom, we have a button.
4241
02:48:37,320 --> 02:48:39,200
In fact, what we can do temporarily,
4242
02:48:39,200 --> 02:48:43,560
we can use a background color of let's just say a black
4243
02:48:43,560 --> 02:48:45,040
so that you can properly see this.
4244
02:48:45,040 --> 02:48:47,360
This is what the screen is right now.
4245
02:48:47,360 --> 02:48:49,800
Again, we don't have a full width as of now
4246
02:48:49,800 --> 02:48:52,080
because our application is loading only in this much.
4247
02:48:52,080 --> 02:48:55,240
We'll see and figure out how we can actually manipulate that.
4248
02:48:55,240 --> 02:48:57,360
Not a big deal, we can just change out the things.
4249
02:48:57,360 --> 02:49:00,240
So we can see, this is what we have, test is one button.
4250
02:49:00,240 --> 02:49:01,960
But if we add more buttons,
4251
02:49:01,960 --> 02:49:03,320
we can just go ahead and do this
4252
02:49:03,320 --> 02:49:05,720
and these are the buttons that we have.
4253
02:49:05,720 --> 02:49:07,040
We'll be manipulating these button
4254
02:49:07,040 --> 02:49:09,040
with a little bit more of these classes.
4255
02:49:09,040 --> 02:49:10,240
So just don't worry,
4256
02:49:10,240 --> 02:49:12,200
we'll be getting through them as well.
4257
02:49:12,200 --> 02:49:15,280
All right, let me just remove this, okay.
4258
02:49:15,280 --> 02:49:17,960
The first thing that we have is, oops,
4259
02:49:17,960 --> 02:49:20,000
in the button is the class name.
4260
02:49:20,000 --> 02:49:21,680
You can add more properties to this one,
4261
02:49:21,680 --> 02:49:25,040
but I do have some button classes as well in my notes.
4262
02:49:25,040 --> 02:49:27,680
So I'll be just directly giving it to you.
4263
02:49:27,680 --> 02:49:28,960
All right, you can just go ahead
4264
02:49:28,960 --> 02:49:31,040
and use them from the GitHub notes.
4265
02:49:31,040 --> 02:49:32,580
We are using an outline none,
4266
02:49:32,580 --> 02:49:34,620
we are giving some padding on the X axis,
4267
02:49:34,620 --> 02:49:37,380
padding on Y axis, rounded fold, text is white
4268
02:49:37,380 --> 02:49:38,980
and the shadow is large.
4269
02:49:38,980 --> 02:49:40,700
So this makes the button looks like this.
4270
02:49:40,700 --> 02:49:43,060
Obviously we don't have any text colors and all of that.
4271
02:49:43,060 --> 02:49:45,860
So we'll be providing them as well.
4272
02:49:45,860 --> 02:49:48,100
No worries, this is right now, text is white.
4273
02:49:48,100 --> 02:49:49,700
By the way, this was just to show you
4274
02:49:49,700 --> 02:49:52,340
that yeah, something BG was there.
4275
02:49:52,340 --> 02:49:54,780
Okay, now we have a button like this,
4276
02:49:54,780 --> 02:49:56,340
but our text is missing.
4277
02:49:56,340 --> 02:49:58,340
So let's go ahead and add a text.
4278
02:49:58,340 --> 02:49:59,780
What kind of text do you want to have?
4279
02:49:59,780 --> 02:50:02,980
I'll be saying text as black.
4280
02:50:02,980 --> 02:50:05,740
And there we go, a decent button that we have.
4281
02:50:05,740 --> 02:50:07,340
Oops, text white, text black.
4282
02:50:07,340 --> 02:50:09,440
No, we want to text black.
4283
02:50:09,440 --> 02:50:11,460
That will make sense.
4284
02:50:11,460 --> 02:50:13,380
Okay, looking good already.
4285
02:50:13,380 --> 02:50:15,540
Now, similarly, we can have more buttons
4286
02:50:15,540 --> 02:50:20,540
and we can call this one as test two, two, there we go.
4287
02:50:21,180 --> 02:50:23,060
Okay, so the functionality is there.
4288
02:50:23,060 --> 02:50:26,820
Now coming up onto how does this actually work?
4289
02:50:26,820 --> 02:50:29,220
So we have already learned about the functionality.
4290
02:50:29,260 --> 02:50:31,660
I hope you remember that the most important part
4291
02:50:31,660 --> 02:50:34,220
of this application is the functionality.
4292
02:50:34,220 --> 02:50:36,120
In the functionality, we have already seen
4293
02:50:36,120 --> 02:50:39,300
that if you want to render any changes in the UI,
4294
02:50:39,300 --> 02:50:41,940
those changes cannot be directly propagated.
4295
02:50:41,940 --> 02:50:44,940
We need to use some kind of state management for this.
4296
02:50:44,940 --> 02:50:48,180
And in the React, we have a hook for that known as use state.
4297
02:50:48,180 --> 02:50:51,540
And this exact project is actually based on that.
4298
02:50:51,540 --> 02:50:53,340
So we'll be using that one.
4299
02:50:53,340 --> 02:50:54,700
Let me just walk you through with that.
4300
02:50:54,700 --> 02:50:56,240
It's super, super easy.
4301
02:50:56,240 --> 02:50:58,620
For using the state, just like we have a count here,
4302
02:50:58,660 --> 02:51:00,060
let's go ahead and remove the count.
4303
02:51:00,060 --> 02:51:01,980
We want to have some kind of a state management
4304
02:51:01,980 --> 02:51:03,060
for the color.
4305
02:51:03,060 --> 02:51:04,180
So I'll be using a const
4306
02:51:04,180 --> 02:51:06,260
and let's just say we'll be using a color
4307
02:51:06,260 --> 02:51:08,540
and that actually uses set color
4308
02:51:08,540 --> 02:51:10,280
and we use some user state
4309
02:51:10,280 --> 02:51:11,860
and what color you want to have.
4310
02:51:11,860 --> 02:51:14,880
In this one, I'll be just writing olive as base one.
4311
02:51:14,880 --> 02:51:17,260
Always remember, this first part in the array
4312
02:51:17,260 --> 02:51:18,820
is your variable.
4313
02:51:18,820 --> 02:51:22,060
The second part is a method which is responsible
4314
02:51:22,060 --> 02:51:23,340
for changing this variable.
4315
02:51:23,340 --> 02:51:25,660
No other thing cannot change this variable.
4316
02:51:25,660 --> 02:51:27,700
This is the guy which is responsible
4317
02:51:27,700 --> 02:51:29,420
for changing this color.
4318
02:51:29,420 --> 02:51:31,140
Whatever you put inside the use states,
4319
02:51:31,140 --> 02:51:32,780
that's the default value.
4320
02:51:32,780 --> 02:51:34,480
Now, how can I use this default value?
4321
02:51:34,480 --> 02:51:37,260
You can go up here and can actually add this as a property.
4322
02:51:37,260 --> 02:51:39,380
For example, you can add your own styling,
4323
02:51:39,380 --> 02:51:41,080
not the styling from the tailwind,
4324
02:51:41,080 --> 02:51:43,260
but actually a style property just like this.
4325
02:51:43,260 --> 02:51:46,040
And by the way, I need to go outside of this string.
4326
02:51:46,040 --> 02:51:46,880
So there we go.
4327
02:51:46,880 --> 02:51:48,100
We have this style property.
4328
02:51:48,100 --> 02:51:49,860
Inside this, I can go ahead and say
4329
02:51:49,860 --> 02:51:51,700
I want a background color
4330
02:51:51,700 --> 02:51:53,660
and what should be the background color value?
4331
02:51:53,660 --> 02:51:55,220
Just like this, you can go ahead and say,
4332
02:51:55,420 --> 02:51:58,260
I want to have this olive color into this one
4333
02:51:58,260 --> 02:52:00,900
and that color will obviously get propagated up here.
4334
02:52:00,900 --> 02:52:02,260
So all the way up here.
4335
02:52:02,260 --> 02:52:04,660
Why is it not going all the way left and right?
4336
02:52:04,660 --> 02:52:06,180
I'll need to debug a little bit.
4337
02:52:06,180 --> 02:52:07,440
We'll do that at the end of it.
4338
02:52:07,440 --> 02:52:08,780
No big deal there.
4339
02:52:08,780 --> 02:52:11,420
We can just have some manipulation there.
4340
02:52:11,420 --> 02:52:14,900
Okay, apart from this, now since this is olive,
4341
02:52:14,900 --> 02:52:17,420
how can I actually replace this string with some variable?
4342
02:52:17,420 --> 02:52:18,260
It's pretty simple.
4343
02:52:18,260 --> 02:52:20,820
You're already in the double curly braces.
4344
02:52:20,820 --> 02:52:23,580
All you have to do is simply go ahead and say color.
4345
02:52:23,580 --> 02:52:25,340
Now I'm using now a state variable
4346
02:52:25,340 --> 02:52:26,820
and that's why we get an olive here.
4347
02:52:26,820 --> 02:52:28,820
But if I go ahead and change it to red,
4348
02:52:28,820 --> 02:52:31,020
since the default value of the state is red,
4349
02:52:31,020 --> 02:52:33,140
I get the red, but I'm happy with the olive
4350
02:52:33,140 --> 02:52:34,800
as a default starting color.
4351
02:52:34,800 --> 02:52:36,900
Okay, that part is good.
4352
02:52:36,900 --> 02:52:39,540
But now I need to work on some method
4353
02:52:39,540 --> 02:52:41,380
by which I can change this.
4354
02:52:41,380 --> 02:52:43,740
And again, remember, change can only be done
4355
02:52:43,740 --> 02:52:45,620
when you change this color as a variable
4356
02:52:45,620 --> 02:52:48,380
and this variable can only be manipulated
4357
02:52:48,380 --> 02:52:50,780
and changed by this set color.
4358
02:52:50,780 --> 02:52:52,600
Cool, you get this.
4359
02:52:52,600 --> 02:52:55,560
Okay, so what can I do is on this button,
4360
02:52:55,560 --> 02:52:57,520
if I know my JavaScript, I can just go ahead
4361
02:52:57,520 --> 02:52:59,440
and add an event which is onClick.
4362
02:52:59,440 --> 02:53:01,440
Now this onClick is pretty nice.
4363
02:53:01,440 --> 02:53:03,760
It can take a reference of a variable.
4364
02:53:03,760 --> 02:53:05,800
Maybe you are defining a method here,
4365
02:53:05,800 --> 02:53:09,320
which is something like this, function and change color,
4366
02:53:09,320 --> 02:53:11,000
something like this, and there we go.
4367
02:53:11,000 --> 02:53:13,160
Let's just assume this change the color.
4368
02:53:13,160 --> 02:53:14,920
You can go ahead and pass on the reference
4369
02:53:14,920 --> 02:53:16,480
of this change color.
4370
02:53:16,480 --> 02:53:18,080
Now, once you pass on this reference,
4371
02:53:18,080 --> 02:53:19,760
this method alone cannot work.
4372
02:53:19,760 --> 02:53:22,280
It needs some parameter to be passed on.
4373
02:53:22,300 --> 02:53:24,440
For example, if you give it something like this,
4374
02:53:24,440 --> 02:53:26,720
let's just say a parameter of color,
4375
02:53:26,720 --> 02:53:28,960
whatever the color string you're passing me,
4376
02:53:28,960 --> 02:53:31,880
inside in here, I can go ahead and use the set color,
4377
02:53:31,880 --> 02:53:34,080
which is a method to change this color.
4378
02:53:34,080 --> 02:53:35,280
This is my ideal way.
4379
02:53:35,280 --> 02:53:37,720
But again, the problem is the change color
4380
02:53:37,720 --> 02:53:40,280
needs to pass this color as a variable.
4381
02:53:40,280 --> 02:53:43,160
Now, right now, I cannot just go ahead and do like this
4382
02:53:43,160 --> 02:53:45,580
because it will immediately execute it.
4383
02:53:45,580 --> 02:53:47,680
And if you remember your JavaScript,
4384
02:53:47,680 --> 02:53:49,880
onClick doesn't change the value
4385
02:53:49,880 --> 02:53:51,480
which is returned from a function.
4386
02:53:51,520 --> 02:53:53,400
It needs a function itself.
4387
02:53:53,400 --> 02:53:56,520
And this is not a React, this is JavaScript in itself.
4388
02:53:56,520 --> 02:53:58,520
So there is no way you can do this
4389
02:53:58,520 --> 02:53:59,680
because this will execute it
4390
02:53:59,680 --> 02:54:01,720
and whatever the return value will go in onClick.
4391
02:54:01,720 --> 02:54:03,400
OnClick doesn't accept that.
4392
02:54:03,400 --> 02:54:05,240
You need to pass on a function into this.
4393
02:54:05,240 --> 02:54:07,200
That's the only way how you do it.
4394
02:54:07,200 --> 02:54:09,200
So another way of handling this situation,
4395
02:54:09,200 --> 02:54:11,160
whenever you have to pass on some parameter,
4396
02:54:11,160 --> 02:54:13,160
is just go like this, use a callback,
4397
02:54:13,160 --> 02:54:15,320
and then you can actually use a change color
4398
02:54:15,320 --> 02:54:18,240
because now onClick satisfies the condition that,
4399
02:54:18,240 --> 02:54:21,280
hey, I'm passing you a callback, which is also a method.
4400
02:54:21,280 --> 02:54:23,580
And on the way, I'm actually changing this color.
4401
02:54:23,580 --> 02:54:25,480
So this will be going as a red.
4402
02:54:25,480 --> 02:54:27,080
So if I go ahead and test this out,
4403
02:54:27,080 --> 02:54:28,320
this actually changes that.
4404
02:54:28,320 --> 02:54:30,320
So that's really nice that I can go ahead
4405
02:54:30,320 --> 02:54:31,760
and work on with this one.
4406
02:54:31,760 --> 02:54:33,680
By the way, I'll change this to red,
4407
02:54:33,680 --> 02:54:36,980
this one to blue or green, whatever you like.
4408
02:54:38,200 --> 02:54:39,920
Okay, but the problem is
4409
02:54:39,920 --> 02:54:41,920
I need to actually do exactly same thing.
4410
02:54:41,920 --> 02:54:44,720
So I can just go ahead and copy this
4411
02:54:44,720 --> 02:54:46,040
and paste it up here.
4412
02:54:46,040 --> 02:54:46,880
And there we go.
4413
02:54:46,880 --> 02:54:49,600
Instead of this, let's go ahead and pass on this green.
4414
02:54:49,600 --> 02:54:52,080
So technically, this actually solves my purpose
4415
02:54:52,080 --> 02:54:53,720
that, hey, this is red, this is green,
4416
02:54:53,720 --> 02:54:55,480
and I can go ahead and change these values.
4417
02:54:55,480 --> 02:54:57,040
I can add more buttons.
4418
02:54:57,040 --> 02:54:59,740
But there could be a better way of doing this.
4419
02:54:59,740 --> 02:55:01,600
This is no problem at all.
4420
02:55:01,600 --> 02:55:04,760
You can also have a different take on this one.
4421
02:55:04,760 --> 02:55:06,280
In this entire series, I'll walk you through
4422
02:55:06,280 --> 02:55:08,320
with a different perspective of the code
4423
02:55:08,320 --> 02:55:10,240
so that you feel better where you'll see
4424
02:55:10,240 --> 02:55:11,480
other people's code.
4425
02:55:11,480 --> 02:55:12,840
I'll just comment this out.
4426
02:55:12,840 --> 02:55:14,240
We don't want this one.
4427
02:55:14,240 --> 02:55:17,000
What you can do is if I know that this change color
4428
02:55:17,000 --> 02:55:19,880
is a method I need to call and pass on a value,
4429
02:55:19,880 --> 02:55:22,280
I can actually do this with the set color as well.
4430
02:55:22,280 --> 02:55:23,640
Can I do this directly?
4431
02:55:23,640 --> 02:55:25,440
Yes, actually you can.
4432
02:55:25,440 --> 02:55:28,560
You can just directly set the color into this color
4433
02:55:28,560 --> 02:55:30,600
because this is responsible for that.
4434
02:55:30,600 --> 02:55:32,560
So instead of using the change color,
4435
02:55:32,560 --> 02:55:34,360
I can just go ahead and use the set color
4436
02:55:34,360 --> 02:55:36,560
and pass on any parameter to this.
4437
02:55:36,560 --> 02:55:38,480
Whatever you pass on parameter into this,
4438
02:55:38,480 --> 02:55:40,440
whether that's numbers, string, whatever,
4439
02:55:40,440 --> 02:55:43,540
that value is the new updated value in this variable.
4440
02:55:43,540 --> 02:55:47,180
And that variable automatically is monitored by React
4441
02:55:47,180 --> 02:55:48,860
to propagate the changes.
4442
02:55:48,860 --> 02:55:49,780
That's cool.
4443
02:55:49,780 --> 02:55:52,380
So I don't need to use this extra function that I've defined.
4444
02:55:52,380 --> 02:55:55,820
I can just go ahead and use the set color of a method
4445
02:55:55,820 --> 02:55:56,900
and this still works.
4446
02:55:56,900 --> 02:55:58,180
So it saves me some time
4447
02:55:58,180 --> 02:56:00,660
by not declaring extra functions here.
4448
02:56:00,660 --> 02:56:02,340
A good approach, good approach.
4449
02:56:02,340 --> 02:56:04,660
So now I can say red, green, it still works.
4450
02:56:04,660 --> 02:56:06,260
There is still a bug in the application,
4451
02:56:06,260 --> 02:56:10,420
which actually prevents me from going all the way up here.
4452
02:56:10,420 --> 02:56:12,220
So really don't want that.
4453
02:56:12,220 --> 02:56:14,020
So let me quickly go ahead and fix this
4454
02:56:14,020 --> 02:56:15,460
that how it is not going.
4455
02:56:15,460 --> 02:56:18,520
It's really minor CSS issue, not much bothered about it.
4456
02:56:19,580 --> 02:56:21,900
All right, so found it, it was pretty easy.
4457
02:56:21,900 --> 02:56:25,060
There was already a CSS, which was overwriting our CSS.
4458
02:56:25,060 --> 02:56:26,860
It was in the app.css index.
4459
02:56:26,860 --> 02:56:28,580
We have already cleared in the app.css.
4460
02:56:28,580 --> 02:56:30,060
So just go ahead and remove everything.
4461
02:56:30,060 --> 02:56:31,580
If you don't need anything at all,
4462
02:56:31,580 --> 02:56:34,140
and this actually flushes out everything that we don't need.
4463
02:56:34,140 --> 02:56:35,460
So really basic fix.
4464
02:56:35,460 --> 02:56:37,740
And now we have a red button, we have a green button,
4465
02:56:37,740 --> 02:56:39,380
it changes the things.
4466
02:56:39,380 --> 02:56:41,900
So this is really nice that how we are actually
4467
02:56:42,220 --> 02:56:44,260
able to do this in couple of ways.
4468
02:56:44,260 --> 02:56:46,420
And again, saying that this is correct,
4469
02:56:46,420 --> 02:56:49,740
or this is much more better, it's just an opinion.
4470
02:56:49,740 --> 02:56:51,440
And I respect your opinion as well,
4471
02:56:51,440 --> 02:56:53,260
in case you want to go with further,
4472
02:56:53,260 --> 02:56:55,980
like, hey, no, this is my preference or something like that.
4473
02:56:55,980 --> 02:56:57,940
Now, one last thing that we are going to go ahead
4474
02:56:57,940 --> 02:57:01,060
and work on with this one is just let,
4475
02:57:01,060 --> 02:57:03,140
let's add some of the colors onto this one,
4476
02:57:03,140 --> 02:57:04,900
because I think that's also pretty good.
4477
02:57:04,900 --> 02:57:08,500
So let's just go ahead and add a style to this one.
4478
02:57:09,500 --> 02:57:12,380
And we'll be saying background color.
4479
02:57:12,380 --> 02:57:14,820
And the background color that we'll be using
4480
02:57:14,820 --> 02:57:17,780
is going to be red.
4481
02:57:17,780 --> 02:57:19,740
Yeah, we can actually hard code this.
4482
02:57:19,740 --> 02:57:23,220
And we can see this looks good, text could be changed.
4483
02:57:23,220 --> 02:57:25,100
But again, not really bothered too much.
4484
02:57:25,100 --> 02:57:27,020
And we'll be hard coding the value here as well
4485
02:57:27,020 --> 02:57:27,860
on the green.
4486
02:57:27,860 --> 02:57:31,000
Again, it's totally your choice, just visual aesthetic.
4487
02:57:31,000 --> 02:57:33,220
The whole idea is to understand different perspective
4488
02:57:33,220 --> 02:57:35,300
of how the things are being changed.
4489
02:57:35,300 --> 02:57:36,820
So your role is really simple,
4490
02:57:36,820 --> 02:57:40,260
just add a few more colors, maybe a red, green, blue,
4491
02:57:40,260 --> 02:57:44,740
orange, red, pink, purple, violet, and put up a straight bar.
4492
02:57:44,740 --> 02:57:46,700
All you have to do is copy paste the buttons.
4493
02:57:46,700 --> 02:57:48,940
And again, remember, this is really important part
4494
02:57:48,940 --> 02:57:51,380
of the 90, 10 or 80, 10 teaching,
4495
02:57:51,380 --> 02:57:54,100
where initially I'll be giving you small assignments.
4496
02:57:54,100 --> 02:57:55,780
If you will think that, hey, this is too easy,
4497
02:57:55,780 --> 02:57:56,860
I won't be doing that,
4498
02:57:56,860 --> 02:57:58,500
you will be lagging behind eventually
4499
02:57:58,500 --> 02:57:59,660
for the bigger assignments.
4500
02:57:59,660 --> 02:58:02,100
So do this assignment, tag me on Twitter, Instagram,
4501
02:58:02,100 --> 02:58:03,060
LinkedIn, wherever you like.
4502
02:58:03,060 --> 02:58:04,460
If you don't like that, it's okay too,
4503
02:58:04,460 --> 02:58:05,940
but at least do the assignment.
4504
02:58:05,940 --> 02:58:09,180
This will help you in improving your skills as well.
4505
02:58:09,180 --> 02:58:11,940
So that is it, that is it, what we'll be doing.
4506
02:58:11,940 --> 02:58:13,580
We'll be starting with absolute basic.
4507
02:58:13,580 --> 02:58:15,620
This is the first project that we have done.
4508
02:58:15,620 --> 02:58:18,140
Let's take down another project in the next video.
4509
02:58:20,820 --> 02:58:22,860
All right, it's been a while.
4510
02:58:22,860 --> 02:58:25,580
Yes, finally, I'm back on this channel as well.
4511
02:58:25,580 --> 02:58:26,900
Hey there, everyone, Hitesh here,
4512
02:58:26,900 --> 02:58:28,540
back again with another video.
4513
02:58:28,540 --> 02:58:30,500
And in this video, we will continue our series
4514
02:58:30,500 --> 02:58:32,180
on React.js, I'll walk you through,
4515
02:58:32,180 --> 02:58:34,380
and we'll be building one project.
4516
02:58:34,380 --> 02:58:35,580
Although at a first glance,
4517
02:58:35,580 --> 02:58:37,740
this project might look absolute basic,
4518
02:58:37,740 --> 02:58:38,940
there is nothing too much,
4519
02:58:38,940 --> 02:58:41,140
but I'll walk you through with some scenarios,
4520
02:58:41,140 --> 02:58:42,860
some of the experiences that I had,
4521
02:58:42,860 --> 02:58:45,020
and together we'll be crafting this project
4522
02:58:45,020 --> 02:58:46,820
like an expert will do.
4523
02:58:46,820 --> 02:58:48,420
You will understand the good practices,
4524
02:58:48,420 --> 02:58:49,820
bad practices of the React,
4525
02:58:49,820 --> 02:58:51,820
and how even a smaller thing can change
4526
02:58:51,820 --> 02:58:55,580
the entire overview of how the project should be built up.
4527
02:58:55,580 --> 02:58:57,020
So welcome on board,
4528
02:58:57,020 --> 02:59:00,300
and I expect just a minimum of 100 comments
4529
02:59:00,300 --> 02:59:04,220
under this video so that I can get some moral boost.
4530
02:59:04,380 --> 02:59:05,700
But hey, you are interested in this series,
4531
02:59:05,700 --> 02:59:08,100
and I should focus more of my attention here.
4532
02:59:08,100 --> 02:59:11,460
All right, so first let me share a simple my screen,
4533
02:59:11,460 --> 02:59:13,980
and this is the project that we'll be building up.
4534
02:59:13,980 --> 02:59:14,820
And you might be thinking,
4535
02:59:14,820 --> 02:59:17,740
hey Hitesh, this is absolutely a simple beginner project,
4536
02:59:17,740 --> 02:59:20,380
but trust me, there can be a lot of intricacies
4537
02:59:20,380 --> 02:59:22,540
in this project, and together we can learn
4538
02:59:22,540 --> 02:59:23,540
some of the good practices
4539
02:59:23,540 --> 02:59:25,540
and how to approach this kind of project,
4540
02:59:25,540 --> 02:59:27,380
what is the mental model required.
4541
02:59:27,380 --> 02:59:28,700
So first, let's go through.
4542
02:59:28,700 --> 02:59:31,980
So this project obviously is a simple password generator
4543
02:59:31,980 --> 02:59:34,500
of a project, and in these kinds of password generator
4544
02:59:34,500 --> 02:59:37,660
as a project, we can see we have some default length
4545
02:59:37,660 --> 02:59:40,860
in our slider, we do have a slider here of course.
4546
02:59:40,860 --> 02:59:44,540
And based on the slider, it generates a random password
4547
02:59:44,540 --> 02:59:47,700
for me, which includes the upper and the lowercase letters.
4548
02:59:47,700 --> 02:59:50,620
Now as I moved my, and first of all, if I refresh this,
4549
02:59:50,620 --> 02:59:53,100
it actually gives me one initial password.
4550
02:59:53,100 --> 02:59:57,260
So I need to learn that how can I actually run some code,
4551
02:59:57,260 --> 02:59:59,220
which as soon as this component loads
4552
02:59:59,220 --> 03:00:01,940
or this webpage loads up, it executes my code.
4553
03:00:01,940 --> 03:00:03,220
That's the step one.
4554
03:00:03,220 --> 03:00:05,620
When I touch any component and change its value,
4555
03:00:05,620 --> 03:00:08,620
it actually reruns my code, the code that is responsible
4556
03:00:08,620 --> 03:00:11,620
for generating the password and gets me that code.
4557
03:00:11,620 --> 03:00:14,500
On top of that, when I have this number being clicked,
4558
03:00:14,500 --> 03:00:17,780
it again reruns my code with all the previous values
4559
03:00:17,780 --> 03:00:20,940
and the new values and generates me a password for that.
4560
03:00:20,940 --> 03:00:22,820
If I include it again as a character,
4561
03:00:22,820 --> 03:00:24,940
it actually generates all of this,
4562
03:00:24,940 --> 03:00:27,740
again runs the code and gives me the password.
4563
03:00:27,740 --> 03:00:29,980
On top of that, I can copy this,
4564
03:00:30,020 --> 03:00:32,100
and it gives me that, hey, this was being copied.
4565
03:00:32,100 --> 03:00:35,140
Now here comes some of the UX and UI elements.
4566
03:00:35,140 --> 03:00:36,620
Now for copying anything,
4567
03:00:36,620 --> 03:00:38,260
you don't need to highlight anything.
4568
03:00:38,260 --> 03:00:39,700
That is the step one.
4569
03:00:39,700 --> 03:00:42,820
But still, we gave the user a feel that yes,
4570
03:00:42,820 --> 03:00:45,140
this entire thing was copied.
4571
03:00:45,140 --> 03:00:46,780
This is kind of a user experience,
4572
03:00:46,780 --> 03:00:48,900
and we need to learn about some of the hooks in React
4573
03:00:48,900 --> 03:00:50,700
to give the user this experience.
4574
03:00:50,700 --> 03:00:52,100
You can just click on the button and say,
4575
03:00:52,100 --> 03:00:52,940
hey, this was copied.
4576
03:00:52,940 --> 03:00:54,420
You might have seen in a lot of website,
4577
03:00:54,420 --> 03:00:56,240
it just says copied at a tick mark.
4578
03:00:56,240 --> 03:00:59,420
That could also have been done, but we went extra step,
4579
03:00:59,420 --> 03:01:01,740
and we simply said when you click on copy,
4580
03:01:01,740 --> 03:01:03,420
and we have copied it already,
4581
03:01:03,420 --> 03:01:04,780
but on another line of code,
4582
03:01:04,780 --> 03:01:06,900
we were able to highlight all of this piece that,
4583
03:01:06,900 --> 03:01:08,380
hey, this piece was selected,
4584
03:01:08,380 --> 03:01:10,020
automatically it came to your mind that,
4585
03:01:10,020 --> 03:01:11,860
hey, I was able to do this.
4586
03:01:11,860 --> 03:01:15,140
Now, the way how this project is going to be taken down,
4587
03:01:15,140 --> 03:01:17,380
of course, we'll be using Tailwind CSS in that.
4588
03:01:17,380 --> 03:01:18,860
We are not worried about the Tailwind.
4589
03:01:18,860 --> 03:01:20,980
We will not talk about the CSS much.
4590
03:01:20,980 --> 03:01:22,540
But if there would be a button here,
4591
03:01:22,540 --> 03:01:23,940
which says generate password,
4592
03:01:23,940 --> 03:01:26,860
then approach of taking down this project
4593
03:01:26,860 --> 03:01:29,100
would be completely, completely different.
4594
03:01:29,580 --> 03:01:31,500
Because when I have a manual button,
4595
03:01:31,500 --> 03:01:32,900
which says generate a password,
4596
03:01:32,900 --> 03:01:35,040
that means I am controlling the event,
4597
03:01:35,040 --> 03:01:37,140
and the event will be controlled and executed
4598
03:01:37,140 --> 03:01:39,740
only when I'm ready and only at one time.
4599
03:01:39,740 --> 03:01:40,800
So in that case,
4600
03:01:40,800 --> 03:01:43,260
my function is not going to be keep on running
4601
03:01:43,260 --> 03:01:44,380
and keep on running.
4602
03:01:44,380 --> 03:01:46,900
Here, the exact same function is keep on running,
4603
03:01:46,900 --> 03:01:49,100
keep on running on just every single event.
4604
03:01:49,100 --> 03:01:50,860
So there is a potential use case
4605
03:01:50,860 --> 03:01:52,740
that we can optimize the things.
4606
03:01:52,740 --> 03:01:54,380
And that's exactly what we're going to learn,
4607
03:01:54,380 --> 03:01:57,620
how we can optimize when we have a similar kind of method
4608
03:01:57,620 --> 03:02:00,140
executing again, again, with just minor changes.
4609
03:02:00,140 --> 03:02:02,420
This is known as memoization concept,
4610
03:02:02,420 --> 03:02:04,780
in which we can keep most of the execution
4611
03:02:04,780 --> 03:02:06,340
of the methods in the memory,
4612
03:02:06,340 --> 03:02:10,320
which saves us and ultimately our React app performs well.
4613
03:02:10,320 --> 03:02:12,340
So this is quite a classy project
4614
03:02:12,340 --> 03:02:13,240
that we'll be taking down.
4615
03:02:13,240 --> 03:02:15,800
But if this would be a project where some UX guy says,
4616
03:02:15,800 --> 03:02:16,960
hey, just add a button here,
4617
03:02:16,960 --> 03:02:19,020
that would be better user experience,
4618
03:02:19,020 --> 03:02:21,260
I have to actually rewrite the entire project
4619
03:02:21,260 --> 03:02:23,620
with a different approach of optimizing it.
4620
03:02:23,620 --> 03:02:25,180
If he says, no, we don't need a button,
4621
03:02:25,180 --> 03:02:27,580
just remove the button and generate the password like this,
4622
03:02:27,580 --> 03:02:29,540
then there would be a completely different approach.
4623
03:02:29,540 --> 03:02:32,380
So when next time in your group meeting
4624
03:02:32,380 --> 03:02:33,940
or your agile meeting something,
4625
03:02:33,940 --> 03:02:36,620
somebody says, hey, this is a UX design,
4626
03:02:36,620 --> 03:02:39,820
get this straight that it is going to take some time.
4627
03:02:39,820 --> 03:02:42,700
All right, so this is the basic that we have.
4628
03:02:42,700 --> 03:02:44,460
Let's go ahead and generate a new project
4629
03:02:44,460 --> 03:02:47,220
and install CSS and whatnot onto this one.
4630
03:02:47,220 --> 03:02:48,980
This is our technically fifth project.
4631
03:02:48,980 --> 03:02:50,720
So we'll be just going forward with that.
4632
03:02:50,720 --> 03:02:53,060
So let me just generate that.
4633
03:02:53,060 --> 03:02:56,500
Pretty simple, we are going to say npm create wheat
4634
03:02:56,500 --> 03:02:59,020
and we'll be going with the latest
4635
03:02:59,020 --> 03:03:01,560
and we'll be saying this is our zero five project.
4636
03:03:01,560 --> 03:03:03,740
So we'll be naming it as a zero five
4637
03:03:03,740 --> 03:03:07,820
and we'll be calling it as password generator.
4638
03:03:07,820 --> 03:03:10,340
Of course, React would love to,
4639
03:03:10,340 --> 03:03:12,220
but not TypeScript this time.
4640
03:03:12,220 --> 03:03:14,220
We'll be going with classic JavaScript.
4641
03:03:14,220 --> 03:03:16,460
By the way, if you haven't checked out my TypeScript series,
4642
03:03:16,460 --> 03:03:17,780
it's pretty awesome.
4643
03:03:17,780 --> 03:03:19,980
Well-renowned, well-accepted by Twitter
4644
03:03:19,980 --> 03:03:21,420
and free code camp and whatnot.
4645
03:03:21,420 --> 03:03:22,700
So check it out, it's pretty nice.
4646
03:03:22,700 --> 03:03:25,060
But in this case, we'll go with the JavaScript.
4647
03:03:25,060 --> 03:03:26,780
Let's go into a zero five.
4648
03:03:26,780 --> 03:03:31,340
Actually, what I can do here is a quick, neat little trick.
4649
03:03:31,340 --> 03:03:33,180
I can just right click and open this
4650
03:03:33,180 --> 03:03:35,940
as an integrated terminal so that by default,
4651
03:03:35,940 --> 03:03:37,440
I'm always into this folder.
4652
03:03:38,460 --> 03:03:40,260
And we can say npm install
4653
03:03:41,420 --> 03:03:43,860
and this will install all the packages,
4654
03:03:43,860 --> 03:03:45,340
hopefully pretty quickly.
4655
03:03:45,340 --> 03:03:49,580
And we can just say npm run dev.
4656
03:03:50,460 --> 03:03:52,980
Okay, till it's, okay, not taking much time.
4657
03:03:52,980 --> 03:03:56,780
Okay, npm run dev, that's how we get there.
4658
03:03:56,780 --> 03:03:59,720
And let's see how our project looks like default.
4659
03:03:59,720 --> 03:04:00,980
Pretty classic.
4660
03:04:00,980 --> 03:04:05,260
And we'll also go on to Tailwind CSS to get our Tailwind.
4661
03:04:05,260 --> 03:04:07,040
We won't be discussing Tailwind too much,
4662
03:04:07,040 --> 03:04:10,820
but at least we need Tailwind framework guides, wheat.
4663
03:04:10,820 --> 03:04:12,420
I always go with the documentation
4664
03:04:12,420 --> 03:04:15,280
and I highly, highly recommend to you also do the same
4665
03:04:15,280 --> 03:04:16,740
because there might be some steps
4666
03:04:16,740 --> 03:04:18,620
who might have changed eventually.
4667
03:04:18,620 --> 03:04:21,260
We don't want to get into that one.
4668
03:04:21,300 --> 03:04:25,420
So simply go ahead and, oh, we need to install it, my bad.
4669
03:04:25,420 --> 03:04:27,300
Stop this one, paste it up here
4670
03:04:27,300 --> 03:04:31,100
and this should generate a new file for us,
4671
03:04:31,100 --> 03:04:33,200
which will be Tailwind config.
4672
03:04:33,200 --> 03:04:35,300
That's exactly what we need.
4673
03:04:35,300 --> 03:04:36,780
And let's go back.
4674
03:04:36,780 --> 03:04:40,660
We need this exact set of instruction to be copied
4675
03:04:40,660 --> 03:04:42,500
and let's go into this one.
4676
03:04:42,500 --> 03:04:44,140
Let's copy and paste.
4677
03:04:44,140 --> 03:04:46,060
So now my content is aware
4678
03:04:46,060 --> 03:04:48,540
that I'll be writing my Tailwind CSS
4679
03:04:48,540 --> 03:04:51,260
in either the index file or in the source.
4680
03:04:51,260 --> 03:04:54,380
All the JSTS might include some of the TypeScript.
4681
03:04:54,380 --> 03:04:56,500
Tailwind, not TypeScript.
4682
03:04:56,500 --> 03:04:58,300
And we'll be copying this one.
4683
03:04:58,300 --> 03:05:01,420
All right, so this needs to go into CSS, your core CSS.
4684
03:05:01,420 --> 03:05:02,820
So open up this.
4685
03:05:02,820 --> 03:05:06,220
We'll be opening up main index.css,
4686
03:05:06,220 --> 03:05:08,060
remove everything else and paste it up here.
4687
03:05:08,060 --> 03:05:09,740
That's all what we need.
4688
03:05:09,740 --> 03:05:13,140
We won't be needing anything inside the app CSS as well.
4689
03:05:13,140 --> 03:05:14,300
We can actually go ahead
4690
03:05:14,300 --> 03:05:17,220
and probably can remove this one as well.
4691
03:05:17,220 --> 03:05:19,220
This will give us a necessary paint later on.
4692
03:05:19,220 --> 03:05:21,380
So we'll just remove this one.
4693
03:05:21,380 --> 03:05:25,860
All right, now technically our CSS should be all okay.
4694
03:05:25,860 --> 03:05:27,780
We should be able to run it.
4695
03:05:27,780 --> 03:05:29,940
Let's go ahead and run the command.
4696
03:05:29,940 --> 03:05:31,340
First NPM run dev.
4697
03:05:32,500 --> 03:05:35,060
All right, so it says nothing as of now,
4698
03:05:35,060 --> 03:05:36,580
but let's go ahead and try out
4699
03:05:36,580 --> 03:05:38,340
if we can have some of the CSS
4700
03:05:38,340 --> 03:05:40,340
and everything up and running.
4701
03:05:40,340 --> 03:05:43,020
Let's go into index.html.
4702
03:05:43,020 --> 03:05:46,280
And what I'll do is I'll add some of the class here as well.
4703
03:05:46,280 --> 03:05:48,520
I'll say BG dash gray.
4704
03:05:50,760 --> 03:05:53,280
Gray, okay, suggestion.
4705
03:05:53,280 --> 03:05:54,920
Okay, this one gray.
4706
03:05:54,920 --> 03:05:57,840
Let's go with 800, yep.
4707
03:05:57,840 --> 03:05:59,960
Okay, so at least our CSS is up and running.
4708
03:05:59,960 --> 03:06:01,200
So no problem there.
4709
03:06:01,200 --> 03:06:02,800
At least one of the task is all done
4710
03:06:02,800 --> 03:06:04,440
that we have this whole thing.
4711
03:06:04,440 --> 03:06:06,560
The next thing what we're going to do is
4712
03:06:06,560 --> 03:06:09,720
let's go into app.jsx and take down this project
4713
03:06:09,720 --> 03:06:12,720
by first removing all the unnecessary stuff.
4714
03:06:12,720 --> 03:06:14,960
It's necessary, but we'll remove that.
4715
03:06:14,960 --> 03:06:16,120
Let's have a basic h1.
4716
03:06:17,120 --> 03:06:20,120
Let's have a basic h1 that says setup ready.
4717
03:06:21,040 --> 03:06:22,480
I don't like to skip any steps
4718
03:06:22,480 --> 03:06:23,880
so that you can also follow along,
4719
03:06:23,880 --> 03:06:25,120
pause me in the meantime
4720
03:06:25,120 --> 03:06:26,800
and can just set up your steps as well.
4721
03:06:26,800 --> 03:06:29,160
I don't like to bring in any code from the GitHub.
4722
03:06:29,160 --> 03:06:32,640
I initially, at least that it feels like a magic
4723
03:06:32,640 --> 03:06:34,240
is happening or it's not like that.
4724
03:06:34,240 --> 03:06:36,920
So we'll go this time BG dash red,
4725
03:06:37,880 --> 03:06:41,120
suggestions red 400 to just check it out.
4726
03:06:41,120 --> 03:06:42,660
Yep, it's looking good.
4727
03:06:42,660 --> 03:06:44,800
Things are all done and all good.
4728
03:06:44,840 --> 03:06:47,480
Now, first of all, how we're going to take down this project.
4729
03:06:47,480 --> 03:06:49,640
Now we will be needing a couple of states
4730
03:06:49,640 --> 03:06:51,160
so that we can manipulate things
4731
03:06:51,160 --> 03:06:54,280
based on whatever the values are getting changed.
4732
03:06:54,280 --> 03:06:57,280
And it's pretty obvious to check out from the previous ones.
4733
03:06:57,280 --> 03:06:58,960
It actually refreshed all of the pages,
4734
03:06:58,960 --> 03:07:01,400
but we still have a picture and a photo
4735
03:07:01,400 --> 03:07:03,480
that hey, this is what we're about to build.
4736
03:07:03,480 --> 03:07:05,320
So the first thing that we're going to need is
4737
03:07:05,320 --> 03:07:07,320
we need a length so that we can monitor
4738
03:07:07,320 --> 03:07:10,720
how much the input box is being scratched.
4739
03:07:10,720 --> 03:07:13,000
And you want 10 characters, 15 characters,
4740
03:07:13,000 --> 03:07:14,200
how much you need.
4741
03:07:14,240 --> 03:07:16,280
We need something as is numbers allowed.
4742
03:07:16,280 --> 03:07:18,440
We also need is special characters allowed.
4743
03:07:18,440 --> 03:07:20,360
And we need a state of password as well.
4744
03:07:20,360 --> 03:07:22,080
Because if you notice in the input field,
4745
03:07:22,080 --> 03:07:23,680
the password was being displayed.
4746
03:07:23,680 --> 03:07:26,240
So we need a state for that also to maintain.
4747
03:07:26,240 --> 03:07:27,920
So a couple of states, we need that.
4748
03:07:27,920 --> 03:07:29,980
So let's go ahead and work on with this.
4749
03:07:29,980 --> 03:07:32,480
So first of all, let's go ahead and have a simple length.
4750
03:07:32,480 --> 03:07:35,640
So we'll just go ahead and say that hey, we need a length.
4751
03:07:35,640 --> 03:07:37,800
This will help us to monitor the length.
4752
03:07:37,800 --> 03:07:39,880
By default, we won't be going 20, that's too much.
4753
03:07:39,880 --> 03:07:41,240
We'll be going just with the eight.
4754
03:07:41,240 --> 03:07:43,520
Feel free to change it, no problem at all.
4755
03:07:43,640 --> 03:07:45,120
This is my password length.
4756
03:07:45,120 --> 03:07:47,040
Now I'll be needing is number allowed
4757
03:07:47,040 --> 03:07:48,040
or is character allowed.
4758
03:07:48,040 --> 03:07:50,080
That will be just a Boolean value to figure out
4759
03:07:50,080 --> 03:07:53,520
whether are allowed or by default they are set or not.
4760
03:07:53,520 --> 03:07:54,800
So we're going to say const
4761
03:07:54,800 --> 03:07:59,800
and we're going to say number allowed, allowed.
4762
03:08:00,240 --> 03:08:02,000
And suggestions, yep, numbers allowed.
4763
03:08:02,000 --> 03:08:04,800
By default, no, not true, I'll be getting false.
4764
03:08:04,800 --> 03:08:06,600
By default, they are not allowed.
4765
03:08:06,600 --> 03:08:08,840
Similarly, we'll be having our symbols allowed.
4766
03:08:08,840 --> 03:08:13,420
So we'll be calling as characters, special characters.
4767
03:08:14,220 --> 03:08:16,180
It's totally up to you how you want to rename that.
4768
03:08:16,180 --> 03:08:20,180
Set character allowed, we'll be getting a false.
4769
03:08:20,180 --> 03:08:22,260
And these three are my states
4770
03:08:22,260 --> 03:08:24,020
based on which things will be changing.
4771
03:08:24,020 --> 03:08:25,780
But once the password is generated,
4772
03:08:25,780 --> 03:08:28,540
I need an input box where I'll be setting all this one on.
4773
03:08:28,540 --> 03:08:29,860
So I'll call this one as password,
4774
03:08:29,860 --> 03:08:31,940
the actual password that we'll be generating.
4775
03:08:31,940 --> 03:08:34,420
So I'll be saying password and that will be set password.
4776
03:08:34,420 --> 03:08:36,780
Initially, that will be empty.
4777
03:08:36,780 --> 03:08:38,860
All right, so now that I have all these,
4778
03:08:38,860 --> 03:08:41,300
I'm not worried about error case and all of that.
4779
03:08:41,300 --> 03:08:43,300
This is all good, what we have right now.
4780
03:08:43,300 --> 03:08:46,100
Let's take care about how we are actually returning
4781
03:08:46,100 --> 03:08:48,180
the value because there is a lot of CSS,
4782
03:08:48,180 --> 03:08:49,860
I'll be copying and pasting them.
4783
03:08:49,860 --> 03:08:51,900
This is not a CSS or a Tailwind class,
4784
03:08:51,900 --> 03:08:54,180
so I'll be directly just putting things up
4785
03:08:54,180 --> 03:08:56,780
and we'll be just directly enjoying the CSS
4786
03:08:56,780 --> 03:08:58,060
that I have here.
4787
03:08:58,060 --> 03:08:59,380
Okay, so let's remove all of this.
4788
03:08:59,380 --> 03:09:00,980
We'll be having a simple div.
4789
03:09:00,980 --> 03:09:03,020
In this div, I have some of the classes
4790
03:09:03,020 --> 03:09:07,100
that I'll be directly grabbing and pasting from my notes.
4791
03:09:07,100 --> 03:09:08,940
Again, reminding you that we are not here
4792
03:09:08,940 --> 03:09:09,940
about the Tailwind.
4793
03:09:09,940 --> 03:09:12,060
This is just a boilerplate for us.
4794
03:09:12,060 --> 03:09:14,700
You can have your password generator
4795
03:09:14,700 --> 03:09:17,260
with completely different look, completely different theme.
4796
03:09:17,260 --> 03:09:18,700
We don't really care.
4797
03:09:18,700 --> 03:09:20,780
After this, we will be having a simple H1
4798
03:09:20,780 --> 03:09:21,980
which says password generator,
4799
03:09:21,980 --> 03:09:25,420
but I do have my classes for this one as well
4800
03:09:25,420 --> 03:09:27,460
to make it look almost similar to what we have.
4801
03:09:27,460 --> 03:09:29,700
So we'll be just pasting this one.
4802
03:09:29,700 --> 03:09:32,220
Now, once we have this password generator as here,
4803
03:09:32,220 --> 03:09:34,740
we'll be having a div section,
4804
03:09:34,740 --> 03:09:38,340
which will be responsible for holding our input box
4805
03:09:38,340 --> 03:09:41,140
as well as the button, the copy button that we have.
4806
03:09:41,140 --> 03:09:43,860
So let's have first this div up here.
4807
03:09:43,860 --> 03:09:46,140
And obviously we'll be having some of the classes here.
4808
03:09:46,140 --> 03:09:47,540
Let me grab the classes again.
4809
03:09:47,540 --> 03:09:50,420
These are just the flex boxes classes that we have.
4810
03:09:50,420 --> 03:09:51,940
Nothing too much fancy.
4811
03:09:51,940 --> 03:09:53,460
So flex, shadow and all of that.
4812
03:09:53,460 --> 03:09:55,180
So that button can be on the left side,
4813
03:09:55,180 --> 03:09:56,580
input box can be on the left side,
4814
03:09:56,580 --> 03:09:58,460
button could be on the right side.
4815
03:09:58,460 --> 03:09:59,940
That's all what we have.
4816
03:09:59,940 --> 03:10:01,220
Now what's interesting here is
4817
03:10:01,220 --> 03:10:03,460
the first thing is going to be an input box.
4818
03:10:03,460 --> 03:10:06,020
So let's go ahead and grab an input.
4819
03:10:06,020 --> 03:10:08,620
It can be of type text, so no problem there.
4820
03:10:08,700 --> 03:10:11,420
Let me just move it on to the next line.
4821
03:10:11,420 --> 03:10:14,260
Now what next comes up is very interesting.
4822
03:10:14,260 --> 03:10:15,780
We should really discuss that.
4823
03:10:15,780 --> 03:10:17,060
First of all, value.
4824
03:10:17,060 --> 03:10:18,980
The default value is going to be password.
4825
03:10:18,980 --> 03:10:20,780
As of now, it's a default empty state.
4826
03:10:20,780 --> 03:10:23,340
So we'll be keeping at that as it is, no problem.
4827
03:10:23,340 --> 03:10:25,580
It will be having some of the classes as well.
4828
03:10:25,580 --> 03:10:26,420
Nothing too much.
4829
03:10:26,420 --> 03:10:27,900
We do have just a couple of ones.
4830
03:10:27,900 --> 03:10:29,980
Outline is going to be none.
4831
03:10:29,980 --> 03:10:31,140
No, not that much.
4832
03:10:31,140 --> 03:10:34,100
Let me just grab the other ones as well from the notes.
4833
03:10:35,060 --> 03:10:36,540
All right, that's it.
4834
03:10:36,540 --> 03:10:38,900
Again, classes are not to be discussed.
4835
03:10:38,900 --> 03:10:41,900
They are very basic CSS kind of stuff.
4836
03:10:41,900 --> 03:10:44,420
Let's also place a placeholder which says password.
4837
03:10:44,420 --> 03:10:45,260
Great.
4838
03:10:45,260 --> 03:10:46,660
This will be a read-only field
4839
03:10:46,660 --> 03:10:48,780
so that nobody can actually come into it
4840
03:10:48,780 --> 03:10:50,020
and keep on writing.
4841
03:10:50,020 --> 03:10:51,620
We'll be keeping it as read-only.
4842
03:10:51,620 --> 03:10:54,380
We'll be filling it from the programmatical aspect only
4843
03:10:54,380 --> 03:10:56,380
and we'll be keeping it that much added.
4844
03:10:56,380 --> 03:10:58,740
Now one more thing I'll be passing it on here
4845
03:10:58,740 --> 03:11:00,060
which will be used later on.
4846
03:11:00,060 --> 03:11:01,500
This is known as ref.
4847
03:11:01,500 --> 03:11:03,380
And this reference is going to be
4848
03:11:03,380 --> 03:11:04,660
some kind of a password reference.
4849
03:11:04,660 --> 03:11:05,500
That will be variable.
4850
03:11:05,500 --> 03:11:07,580
We will be discussing about this later on.
4851
03:11:07,580 --> 03:11:08,740
But just to keep an idea
4852
03:11:08,740 --> 03:11:10,300
that what's coming up in the future,
4853
03:11:10,300 --> 03:11:12,100
yes, we'll be talking about reference,
4854
03:11:12,100 --> 03:11:13,100
but not right now.
4855
03:11:13,100 --> 03:11:16,700
It is there in the process as well.
4856
03:11:16,700 --> 03:11:18,980
Okay, after this, we'll be having a simple button.
4857
03:11:18,980 --> 03:11:20,700
So let's go ahead and have a button.
4858
03:11:20,700 --> 03:11:23,700
This button is going to just say copy.
4859
03:11:23,700 --> 03:11:25,140
Now, of course, not just copy.
4860
03:11:25,140 --> 03:11:26,820
We do have CSS for this one as well.
4861
03:11:26,820 --> 03:11:30,140
So let's just go have some class name as well.
4862
03:11:30,140 --> 03:11:32,260
And the class names.
4863
03:11:32,260 --> 03:11:34,780
Copy that and paste it up there.
4864
03:11:34,780 --> 03:11:36,540
Okay, so this is the button that we have.
4865
03:11:36,540 --> 03:11:37,980
So you can see that yes,
4866
03:11:37,980 --> 03:11:39,860
we are first generating all of this.
4867
03:11:39,860 --> 03:11:40,940
Don't you worry, eventually,
4868
03:11:40,940 --> 03:11:42,580
as we move on to the complex project,
4869
03:11:42,580 --> 03:11:45,300
I'll be giving you these notes file
4870
03:11:45,300 --> 03:11:47,260
so that you can directly copy and paste them
4871
03:11:47,260 --> 03:11:50,500
and you don't have to worry painfully sit here,
4872
03:11:50,500 --> 03:11:52,660
watch me just writing the CSS.
4873
03:11:54,780 --> 03:11:56,420
We are here to enjoy React,
4874
03:11:56,420 --> 03:11:59,900
not these button making designs and stuff.
4875
03:11:59,900 --> 03:12:03,180
All right, so this is the first part of my dev.
4876
03:12:03,180 --> 03:12:06,180
The second part or the second dev that I have
4877
03:12:06,180 --> 03:12:07,900
also have some of the classes as well.
4878
03:12:07,900 --> 03:12:12,900
So that to forget there and we'll be having class name.
4879
03:12:15,060 --> 03:12:18,940
All right, let's add more of these classes in here as well.
4880
03:12:18,940 --> 03:12:23,940
So first of all, let's go ahead and copy and paste this.
4881
03:12:24,060 --> 03:12:26,700
Inside this also, we do have some more devs.
4882
03:12:28,020 --> 03:12:29,540
Okay, what can I do?
4883
03:12:29,540 --> 03:12:31,940
We have to go through with this at least once here.
4884
03:12:32,020 --> 03:12:35,460
Let's add the class names and then we'll be having,
4885
03:12:35,460 --> 03:12:36,780
this is how we designed it.
4886
03:12:36,780 --> 03:12:37,980
What can I say?
4887
03:12:37,980 --> 03:12:39,380
And then once I'm inside this,
4888
03:12:39,380 --> 03:12:41,580
then comes the important part which we need to discuss,
4889
03:12:41,580 --> 03:12:42,980
which is the input field.
4890
03:12:42,980 --> 03:12:45,660
So this input field is going to be of type range
4891
03:12:45,660 --> 03:12:48,660
because that's the first one we actually worked on with.
4892
03:12:48,660 --> 03:12:50,460
So this range is very interesting.
4893
03:12:50,460 --> 03:12:52,660
We can actually decide how much the range can go
4894
03:12:52,660 --> 03:12:53,620
in all of these things.
4895
03:12:53,620 --> 03:12:56,460
We can decide the name and IDs and whatnot.
4896
03:12:56,460 --> 03:12:58,180
Let me just move them on to the next line
4897
03:12:58,180 --> 03:12:59,460
so that we can have a discussion.
4898
03:12:59,460 --> 03:13:01,380
Okay, so first of all, we have type.
4899
03:13:01,460 --> 03:13:04,060
We can define the min and the maximum into this one.
4900
03:13:04,060 --> 03:13:06,060
So minimum, let's just say we need six characters
4901
03:13:06,060 --> 03:13:08,820
of the password to be generated.
4902
03:13:08,820 --> 03:13:11,340
And the max that user can actually drag and drop,
4903
03:13:11,340 --> 03:13:12,180
it's totally up to you.
4904
03:13:12,180 --> 03:13:14,260
You want 20 characters, you want 100 characters,
4905
03:13:14,260 --> 03:13:16,380
that's totally liberty on your own.
4906
03:13:16,380 --> 03:13:18,900
This requires a value property as well.
4907
03:13:18,900 --> 03:13:22,540
The value is going to be governed by the length itself
4908
03:13:22,540 --> 03:13:24,060
so that anytime I can go ahead
4909
03:13:24,060 --> 03:13:26,620
and grab the length of the value itself.
4910
03:13:26,620 --> 03:13:29,500
Then obviously, we'll be having some class here as well.
4911
03:13:29,500 --> 03:13:31,300
What can I say, classes are there.
4912
03:13:32,540 --> 03:13:34,300
We'll be having cursor pointer.
4913
03:13:34,300 --> 03:13:36,500
On top of this, we'll be having an on change
4914
03:13:36,500 --> 03:13:39,420
because as soon as something change into this one,
4915
03:13:39,420 --> 03:13:41,100
we need to fire up an event.
4916
03:13:41,100 --> 03:13:42,420
The event is going to be simple,
4917
03:13:42,420 --> 03:13:43,860
set length to the new values.
4918
03:13:43,860 --> 03:13:47,500
So set length is a method which governs
4919
03:13:47,500 --> 03:13:51,060
or which regulates how you can enter data into the length.
4920
03:13:51,060 --> 03:13:53,260
So we are using that based on an event.
4921
03:13:53,260 --> 03:13:55,660
And whatever the event.target.value is,
4922
03:13:55,660 --> 03:13:58,380
we are actually setting that value into the length.
4923
03:13:58,380 --> 03:14:00,060
Pretty clear explanation.
4924
03:14:00,060 --> 03:14:02,060
Once we have this input, then after that,
4925
03:14:02,060 --> 03:14:04,260
we just have a simple label, which actually says,
4926
03:14:04,260 --> 03:14:06,420
hey, this is length or something like that.
4927
03:14:06,420 --> 03:14:08,940
So we'll be having a label.
4928
03:14:08,940 --> 03:14:13,260
And this one is for HTML for, for label, I guess, length.
4929
03:14:14,180 --> 03:14:15,740
And we'll be putting up length.
4930
03:14:16,700 --> 03:14:18,980
Not only that, we'll be actually parsing
4931
03:14:18,980 --> 03:14:20,140
a value of length as well,
4932
03:14:20,140 --> 03:14:23,020
so that user know that how much the value exactly is.
4933
03:14:23,020 --> 03:14:25,140
So if I go ahead, save this up here,
4934
03:14:25,140 --> 03:14:27,140
notice here so that the length actually is here
4935
03:14:27,140 --> 03:14:28,420
and it changes that.
4936
03:14:28,420 --> 03:14:31,260
So this thing is actually going into my state as well.
4937
03:14:31,260 --> 03:14:34,620
That's the one thing which we are pretty interested about.
4938
03:14:34,620 --> 03:14:36,180
Once we have this one,
4939
03:14:37,140 --> 03:14:40,140
this entire thing as the labels and stuff,
4940
03:14:40,140 --> 03:14:42,540
we'll be having one more of the div.
4941
03:14:42,540 --> 03:14:45,940
Actually, we are actually copy pasting this div now.
4942
03:14:45,940 --> 03:14:49,300
Copy and paste this div again.
4943
03:14:49,300 --> 03:14:52,400
This time we don't have any input field like this.
4944
03:14:53,620 --> 03:14:55,420
Okay, so this one looks good.
4945
03:14:56,420 --> 03:14:58,620
And what we need is just an input box
4946
03:14:58,620 --> 03:15:00,540
which is going to have a check box.
4947
03:15:00,540 --> 03:15:03,100
So I can actually remove all of this.
4948
03:15:03,100 --> 03:15:05,260
We don't need a label for this one or do we need?
4949
03:15:05,260 --> 03:15:07,860
Well, check, we will be needing a label, yeah.
4950
03:15:07,860 --> 03:15:12,220
Okay, so this one is input of type check box.
4951
03:15:12,220 --> 03:15:16,180
And again, we don't need to worry about names and whatnot.
4952
03:15:16,180 --> 03:15:18,900
Just give me a second, I'll just fix this quickly.
4953
03:15:20,180 --> 03:15:21,020
All right.
4954
03:15:21,820 --> 03:15:25,180
Okay, now this is the input box which is a check box.
4955
03:15:25,340 --> 03:15:27,620
So what is the default value first of all?
4956
03:15:27,620 --> 03:15:29,860
So the default checked is a parameter
4957
03:15:29,860 --> 03:15:32,260
and we can just simply govern it by our state
4958
03:15:32,260 --> 03:15:33,780
which is number allowed.
4959
03:15:33,780 --> 03:15:36,300
Now on this, we can put up IDs and on whatnot.
4960
03:15:36,300 --> 03:15:37,900
But most important part is
4961
03:15:37,900 --> 03:15:39,420
what happens when something changes.
4962
03:15:39,420 --> 03:15:42,300
So we need to actually have this on change.
4963
03:15:42,300 --> 03:15:43,900
So we'll be having on change.
4964
03:15:43,900 --> 03:15:46,140
This is a simple event that is triggering.
4965
03:15:46,140 --> 03:15:48,120
And this is how it works.
4966
03:15:49,140 --> 03:15:52,060
And we'll be firing up a callback onto this one.
4967
03:15:52,060 --> 03:15:54,300
And then inside the callback, we'll be saying that,
4968
03:15:54,340 --> 03:15:56,980
hey, I am going to take care of this one.
4969
03:15:56,980 --> 03:16:00,340
This input box is going to be governing the number itself,
4970
03:16:00,340 --> 03:16:02,060
the check box for the number.
4971
03:16:02,060 --> 03:16:05,280
So I'll be using set number allowed through this.
4972
03:16:05,280 --> 03:16:07,100
And here's the most important part.
4973
03:16:08,220 --> 03:16:09,780
I'll be using a callback here.
4974
03:16:09,780 --> 03:16:12,860
So in each of these state, you actually receive a callback.
4975
03:16:12,860 --> 03:16:14,660
You can directly manipulate the value.
4976
03:16:14,660 --> 03:16:17,260
But if you use a callback in here,
4977
03:16:17,260 --> 03:16:19,740
that's a guarantee that you can actually use
4978
03:16:19,740 --> 03:16:23,860
the previous value and all the changes properly propagate.
4979
03:16:23,900 --> 03:16:25,220
We actually discussed that briefly
4980
03:16:25,220 --> 03:16:26,640
in the last video as well.
4981
03:16:26,640 --> 03:16:28,200
So we'll be using the same thing.
4982
03:16:28,200 --> 03:16:29,460
We'll be using a callback here
4983
03:16:29,460 --> 03:16:31,180
so that whatever the previous value is,
4984
03:16:31,180 --> 03:16:32,860
we can call this one as prev,
4985
03:16:32,860 --> 03:16:34,100
or you can call this value.
4986
03:16:34,100 --> 03:16:35,020
Whatever you like to call this,
4987
03:16:35,020 --> 03:16:36,640
this is just a placeholder.
4988
03:16:36,640 --> 03:16:38,840
So previous value, whatever that is, true or false,
4989
03:16:38,840 --> 03:16:39,900
we want to just reverse it.
4990
03:16:39,900 --> 03:16:41,520
So we'll be just reversing it.
4991
03:16:41,520 --> 03:16:44,320
Now we could have directly just send here true or false,
4992
03:16:44,320 --> 03:16:45,780
but that doesn't serve our purpose.
4993
03:16:45,780 --> 03:16:48,580
We want to pick up the previous value that is being there.
4994
03:16:48,580 --> 03:16:50,080
And then we want to do this.
4995
03:16:50,080 --> 03:16:52,380
Now these changes could be really quickly.
4996
03:16:52,460 --> 03:16:54,780
A user can just keep on clicking there, click, click, click,
4997
03:16:54,780 --> 03:16:57,660
and sometimes React might not react that fast.
4998
03:16:57,660 --> 03:16:59,860
And it might think that, hey, that was the previous value.
4999
03:16:59,860 --> 03:17:02,300
So in order to make sure that React actually React,
5000
03:17:02,300 --> 03:17:03,580
we are using a callback here.
5001
03:17:03,580 --> 03:17:05,580
So this is really good practice here
5002
03:17:05,580 --> 03:17:08,340
and kind of a high level code that we have.
5003
03:17:08,340 --> 03:17:10,540
We probably don't need name and all these IDs,
5004
03:17:10,540 --> 03:17:11,940
but it doesn't really harm anything.
5005
03:17:11,940 --> 03:17:13,620
So we'll be just skipping them.
5006
03:17:13,620 --> 03:17:14,660
We'll be having a label.
5007
03:17:14,660 --> 03:17:15,880
This one is for numbers.
5008
03:17:15,880 --> 03:17:17,380
So we'll be just saying number.
5009
03:17:18,540 --> 03:17:21,340
And this one will be a label for numbers.
5010
03:17:23,020 --> 03:17:25,180
Okay, so we have numbers just like that.
5011
03:17:25,180 --> 03:17:27,820
If I can write that better.
5012
03:17:27,820 --> 03:17:29,020
Numbers, so there we go.
5013
03:17:29,020 --> 03:17:29,900
Now you got this.
5014
03:17:29,900 --> 03:17:33,140
You understand the proper use case and everything for this.
5015
03:17:33,140 --> 03:17:35,940
Rest of these elements are just one.
5016
03:17:35,940 --> 03:17:37,940
I'll be just copying and pasting this
5017
03:17:37,940 --> 03:17:39,700
so that we don't have to talk about the things
5018
03:17:39,700 --> 03:17:40,540
again and again.
5019
03:17:40,540 --> 03:17:42,380
Exactly same thing.
5020
03:17:42,380 --> 03:17:46,380
Probably we have got some.
5021
03:17:46,380 --> 03:17:48,740
We need to actually write this manually
5022
03:17:48,740 --> 03:17:52,020
because it might give us some of the issues.
5023
03:17:52,020 --> 03:17:54,420
This one is character for input.
5024
03:17:54,420 --> 03:17:55,880
And let's hit refresh.
5025
03:17:57,340 --> 03:18:00,460
Okay, so looks like we need to hit a command Z
5026
03:18:00,460 --> 03:18:02,420
couple of times.
5027
03:18:02,420 --> 03:18:04,660
Probably this is having an issue with us.
5028
03:18:04,660 --> 03:18:06,740
So let's just minimize this.
5029
03:18:07,740 --> 03:18:11,980
Minimize this and actually just copy and paste this one
5030
03:18:11,980 --> 03:18:15,740
so that copying and pasting sometimes gives you error.
5031
03:18:15,740 --> 03:18:19,660
And okay, now it's back.
5032
03:18:19,660 --> 03:18:20,820
Now it's back.
5033
03:18:20,940 --> 03:18:22,660
But we have this numbers here.
5034
03:18:22,660 --> 03:18:25,020
So we need to actually write the code ourself.
5035
03:18:25,020 --> 03:18:26,420
Okay, checkbox.
5036
03:18:26,420 --> 03:18:30,380
Your default value is going to be character allowed.
5037
03:18:30,380 --> 03:18:34,900
On change, I'll be changing the set character allowed.
5038
03:18:34,900 --> 03:18:36,460
And I'll be taking the previous value,
5039
03:18:36,460 --> 03:18:38,740
reversing it, name ID, that's okay.
5040
03:18:38,740 --> 03:18:41,220
HTML, this one is for character.
5041
03:18:42,260 --> 03:18:43,640
Car input.
5042
03:18:43,640 --> 03:18:47,960
And this one is for character.
5043
03:18:47,960 --> 03:18:49,320
Now this should be okay.
5044
03:18:50,320 --> 03:18:52,680
Okay, at least our UI part is all done
5045
03:18:52,680 --> 03:18:54,480
and we are happy with this one.
5046
03:18:54,480 --> 03:18:56,840
Hopefully, whatever happy we could be.
5047
03:18:56,840 --> 03:18:59,080
Okay, so the UI part is all done.
5048
03:18:59,080 --> 03:19:01,320
Now let's go ahead and see that how we can work
5049
03:19:01,320 --> 03:19:03,440
on the logic part of this one.
5050
03:19:03,440 --> 03:19:06,200
The logic part is actually fairly straightforward.
5051
03:19:06,200 --> 03:19:08,800
There shouldn't be too much worried about this.
5052
03:19:08,800 --> 03:19:11,200
Let's first assume that there is a button
5053
03:19:11,200 --> 03:19:13,080
and on this click of a button,
5054
03:19:13,080 --> 03:19:15,040
we will be generating a password.
5055
03:19:15,040 --> 03:19:17,640
All right, so in that case,
5056
03:19:17,680 --> 03:19:19,440
I'll be simply writing something like this,
5057
03:19:19,440 --> 03:19:20,880
const generate password.
5058
03:19:20,880 --> 03:19:22,600
This is my generate password method
5059
03:19:22,600 --> 03:19:24,120
and I'll be generating a password.
5060
03:19:24,120 --> 03:19:27,280
And in here, I'll write the logic for it.
5061
03:19:27,280 --> 03:19:29,320
We'll discuss about the logic part as well.
5062
03:19:29,320 --> 03:19:31,920
But what I really want to bring your attention in here
5063
03:19:31,920 --> 03:19:34,160
is this same thing is actually being done
5064
03:19:34,160 --> 03:19:35,880
again and again and again.
5065
03:19:35,880 --> 03:19:39,080
And if some kind of, if similar kind of a situation
5066
03:19:39,080 --> 03:19:40,980
is there in your project as well,
5067
03:19:40,980 --> 03:19:43,680
then go ahead and do study this one hook
5068
03:19:43,680 --> 03:19:47,040
which is used, known as use callback react.
5069
03:19:47,040 --> 03:19:50,080
This is one great hook which you can utilize.
5070
03:19:50,080 --> 03:19:52,400
And notice here, use callback is a react hook
5071
03:19:52,400 --> 03:19:54,640
that lets you cache a function definition
5072
03:19:54,640 --> 03:19:55,680
between re-renders.
5073
03:19:55,680 --> 03:19:57,200
That's exactly what we are doing.
5074
03:19:57,200 --> 03:20:00,320
We are re-rendering, but not only re-rendering,
5075
03:20:00,320 --> 03:20:03,320
the majority portion of our function is exactly same.
5076
03:20:03,320 --> 03:20:05,340
Yes, there are some values which are getting changed,
5077
03:20:05,340 --> 03:20:06,840
true, false and all of that,
5078
03:20:06,840 --> 03:20:09,880
but majority of the function is exactly that.
5079
03:20:09,880 --> 03:20:12,080
So it uses under the hood some techniques
5080
03:20:12,080 --> 03:20:13,880
known as memoization.
5081
03:20:13,880 --> 03:20:14,860
That's a great technique.
5082
03:20:14,860 --> 03:20:17,340
Almost all of the programmers knows about it.
5083
03:20:17,340 --> 03:20:18,980
If you're not aware of it,
5084
03:20:18,980 --> 03:20:20,900
then please go ahead, learn about it.
5085
03:20:20,900 --> 03:20:23,600
It's a fun technique, especially helpful in DSA,
5086
03:20:23,600 --> 03:20:25,460
data structures and algorithm.
5087
03:20:25,460 --> 03:20:26,900
So we'll be using this one.
5088
03:20:26,900 --> 03:20:28,980
Using this is exactly like this.
5089
03:20:28,980 --> 03:20:32,240
You use a use callback just like this and that's it.
5090
03:20:32,240 --> 03:20:35,800
You passed on your things as a callback just like that.
5091
03:20:35,800 --> 03:20:37,540
So pretty easy to work on with this one.
5092
03:20:37,540 --> 03:20:39,700
So let's go ahead and apart from use state,
5093
03:20:39,700 --> 03:20:42,860
we'll be using use callback just like that.
5094
03:20:42,860 --> 03:20:45,700
Now previously I was about to create a function
5095
03:20:45,700 --> 03:20:46,960
which will generate password.
5096
03:20:46,960 --> 03:20:48,260
This looks like a regular function.
5097
03:20:48,260 --> 03:20:50,020
How can I convert this regular function
5098
03:20:50,020 --> 03:20:52,380
into a use callback hook?
5099
03:20:52,380 --> 03:20:54,540
You don't have to do anything there.
5100
03:20:54,540 --> 03:20:58,660
And what I want to do is just simply use callback.
5101
03:20:58,660 --> 03:21:01,100
And this use callback works just like this.
5102
03:21:01,100 --> 03:21:03,080
This is your regular use callback.
5103
03:21:03,080 --> 03:21:07,580
Now inside this, use a simple callback, that is it.
5104
03:21:07,580 --> 03:21:08,500
That's it.
5105
03:21:08,500 --> 03:21:10,640
All the rest of memoization and optimization
5106
03:21:10,640 --> 03:21:12,740
is done by the React itself.
5107
03:21:12,780 --> 03:21:14,900
Now you might be wondering that why we are actually
5108
03:21:14,900 --> 03:21:18,100
holding the reference into a variable of this method.
5109
03:21:18,100 --> 03:21:19,380
Yes, great question.
5110
03:21:19,380 --> 03:21:22,140
Because only and only one reason,
5111
03:21:22,140 --> 03:21:24,020
as soon as my page renders,
5112
03:21:24,020 --> 03:21:26,500
I want something to generate my password.
5113
03:21:26,500 --> 03:21:29,460
So as soon as the component loads or the page loads,
5114
03:21:29,460 --> 03:21:32,160
I want another hook to execute this method.
5115
03:21:32,160 --> 03:21:33,780
If I don't have a reference of this,
5116
03:21:33,780 --> 03:21:36,240
how will I pass it and say that, hey, run this method?
5117
03:21:36,240 --> 03:21:38,500
So that's exactly what we are doing here.
5118
03:21:38,500 --> 03:21:41,580
All right, so let's go ahead and first take care of this one.
5119
03:21:41,660 --> 03:21:43,460
So in here, what we're going to do is first,
5120
03:21:43,460 --> 03:21:45,740
let's use a pass for password short,
5121
03:21:45,740 --> 03:21:47,580
and we'll be taking it as an empty string.
5122
03:21:47,580 --> 03:21:49,720
Later on, we will use this exact variable
5123
03:21:49,720 --> 03:21:51,380
and push it into this password state,
5124
03:21:51,380 --> 03:21:52,800
so that state updates.
5125
03:21:52,800 --> 03:21:56,300
All right, let's also go ahead and say this is my string.
5126
03:21:56,300 --> 03:21:58,100
And what does the string has?
5127
03:21:58,100 --> 03:21:59,620
Nice suggestion there,
5128
03:21:59,620 --> 03:22:02,300
but we'll be removing some of the elements into it.
5129
03:22:02,300 --> 03:22:06,000
Our string is composed of only the numbers,
5130
03:22:06,000 --> 03:22:09,060
alphabets technically, all uppercase and lowercase,
5131
03:22:09,060 --> 03:22:10,380
that's our string.
5132
03:22:10,420 --> 03:22:12,860
Now conditionally, we have to append this string
5133
03:22:12,860 --> 03:22:15,060
whether to include numbers or not.
5134
03:22:15,060 --> 03:22:17,320
So let's just do a quick check on this one.
5135
03:22:17,320 --> 03:22:20,140
So we'll be checking if, whatever the state,
5136
03:22:20,140 --> 03:22:22,780
if numbers allowed is true,
5137
03:22:22,780 --> 03:22:25,260
then what we're going to do is we can just use a one-liner,
5138
03:22:25,260 --> 03:22:27,940
we can just append this with all the numbers.
5139
03:22:27,940 --> 03:22:30,620
Similarly, if characters are allowed,
5140
03:22:30,620 --> 03:22:32,860
we can just append our string with all the characters
5141
03:22:32,860 --> 03:22:35,660
that you think I want to include in my password.
5142
03:22:35,660 --> 03:22:38,000
Very simple, based on if and else case,
5143
03:22:38,000 --> 03:22:39,860
our string is getting updated.
5144
03:22:39,860 --> 03:22:42,900
The string is consisting of all the uppercase
5145
03:22:42,900 --> 03:22:45,140
and lowercase letters, that's the default.
5146
03:22:45,140 --> 03:22:47,180
If somebody check marks the number allowed,
5147
03:22:47,180 --> 03:22:50,420
we will be adding numbers to the string, appending it.
5148
03:22:50,420 --> 03:22:52,620
If the characters are allowed,
5149
03:22:52,620 --> 03:22:54,340
then we will be appending these characters,
5150
03:22:54,340 --> 03:22:56,260
totally depends on us.
5151
03:22:56,260 --> 03:22:58,660
Now the next thing is we have to loop through
5152
03:22:58,660 --> 03:22:59,500
all of this string.
5153
03:22:59,500 --> 03:23:01,420
Now assume that this all numbers
5154
03:23:01,420 --> 03:23:03,100
and everything are inserted here.
5155
03:23:03,100 --> 03:23:06,180
We just need a loop and this loop will be running
5156
03:23:06,180 --> 03:23:09,340
as many times as the character length is being set.
5157
03:23:09,900 --> 03:23:12,820
Based on this, based on those random numbers,
5158
03:23:12,820 --> 03:23:14,780
I'll be picking up the characters from the string
5159
03:23:14,780 --> 03:23:16,940
and will be inserting into the pass,
5160
03:23:16,940 --> 03:23:18,140
this password that I've added.
5161
03:23:18,140 --> 03:23:19,340
So pretty simple.
5162
03:23:19,340 --> 03:23:22,580
Let's go ahead and use a simple for loop for that.
5163
03:23:22,580 --> 03:23:25,580
Thank you so much, but I'll be writing that again
5164
03:23:25,580 --> 03:23:27,820
because I think that will help a lot of us
5165
03:23:27,820 --> 03:23:30,060
to understand what's going on in here.
5166
03:23:30,060 --> 03:23:32,060
First of all, we just simply had a for loop
5167
03:23:32,060 --> 03:23:34,220
which starts with i equals zero.
5168
03:23:34,220 --> 03:23:36,740
We will not start with zero because I think
5169
03:23:36,740 --> 03:23:39,580
I'll start with one as a character.
5170
03:23:39,580 --> 03:23:41,220
The length will be exactly length.
5171
03:23:41,220 --> 03:23:43,820
This length is actually coming up from our state,
5172
03:23:43,820 --> 03:23:46,420
this length, so that's good, that's nice.
5173
03:23:46,420 --> 03:23:48,300
And we are just increasing this.
5174
03:23:48,300 --> 03:23:49,420
Now once I'm into this,
5175
03:23:49,420 --> 03:23:51,340
I want to generate a random character.
5176
03:23:51,340 --> 03:23:53,860
So I'll be just saying that, hey, I want to generate it.
5177
03:23:53,860 --> 03:23:57,780
So math dot random generates this random string
5178
03:23:57,780 --> 03:23:59,260
and the string that I want to generate
5179
03:23:59,260 --> 03:24:00,740
is going to be string dot length.
5180
03:24:00,740 --> 03:24:02,260
The character I want to generate
5181
03:24:02,260 --> 03:24:05,100
is based on how much my string length is,
5182
03:24:05,100 --> 03:24:06,660
string character length.
5183
03:24:06,740 --> 03:24:10,140
Once I have this, obviously I want to add one to it
5184
03:24:10,140 --> 03:24:11,860
because it might generate a random number
5185
03:24:11,860 --> 03:24:13,420
between zero and to the number.
5186
03:24:13,420 --> 03:24:15,380
I don't want zero, so I'll just shift it to one.
5187
03:24:15,380 --> 03:24:17,900
So that is how we are working in.
5188
03:24:17,900 --> 03:24:20,180
But this actually sometimes generate the number
5189
03:24:20,180 --> 03:24:22,980
which is not in the round digits.
5190
03:24:22,980 --> 03:24:24,780
So we want a natural number.
5191
03:24:24,780 --> 03:24:28,300
We'll be wrapping this up and we'll be saying math dot floor.
5192
03:24:28,300 --> 03:24:31,500
This is a classic technique of generating numbers
5193
03:24:31,500 --> 03:24:34,340
between a range A, range X and Y.
5194
03:24:34,340 --> 03:24:37,340
When you'll be building examples like dice rollers
5195
03:24:37,340 --> 03:24:39,900
or something like that or gambling app maybe,
5196
03:24:39,900 --> 03:24:43,300
then in all those cases, you will be using this quite a lot.
5197
03:24:43,300 --> 03:24:45,420
Let's hold the reference.
5198
03:24:45,420 --> 03:24:47,500
So we'll be saying const char.
5199
03:24:48,820 --> 03:24:50,620
This is just a random number.
5200
03:24:50,620 --> 03:24:51,980
So far we haven't done anything.
5201
03:24:51,980 --> 03:24:54,140
We have just generated a random number
5202
03:24:54,140 --> 03:24:56,900
and that number we are storing at a char variable.
5203
03:24:56,900 --> 03:24:58,780
Simply you can call this one as index as well.
5204
03:24:58,780 --> 03:24:59,980
No problem there.
5205
03:24:59,980 --> 03:25:02,060
Now we'll be taking this pass
5206
03:25:02,060 --> 03:25:04,700
and we will be appending that plus equals.
5207
03:25:04,700 --> 03:25:08,180
And in that string, we have a method known as character at
5208
03:25:08,180 --> 03:25:11,380
which gives me, I can find a character at a position.
5209
03:25:11,380 --> 03:25:13,900
So this char here is acting as an index.
5210
03:25:13,900 --> 03:25:16,460
So index, we are actually having that pretty good.
5211
03:25:16,460 --> 03:25:18,460
Now we can actually pick, let's just say it comes to five.
5212
03:25:18,460 --> 03:25:20,580
So we can start with zero and we can get a five here.
5213
03:25:20,580 --> 03:25:22,540
So pretty simple, pretty easy.
5214
03:25:22,540 --> 03:25:23,940
Now, once we are done with this,
5215
03:25:23,940 --> 03:25:25,260
once we are out of the loop,
5216
03:25:25,260 --> 03:25:27,300
make sure you are out of the loop.
5217
03:25:27,300 --> 03:25:31,540
Then we can just use a method known as set password.
5218
03:25:31,540 --> 03:25:33,460
And this is governing the password.
5219
03:25:33,460 --> 03:25:36,060
So I can pass my password to this one.
5220
03:25:36,060 --> 03:25:39,700
And this will be changing this state here.
5221
03:25:39,700 --> 03:25:42,300
And now we have a fresh password here.
5222
03:25:42,300 --> 03:25:43,140
That's great.
5223
03:25:43,140 --> 03:25:44,620
That's so far fantastic.
5224
03:25:44,620 --> 03:25:46,380
And now we are working everything.
5225
03:25:46,380 --> 03:25:49,140
But there is one more thing attached to this one.
5226
03:25:49,140 --> 03:25:51,880
If you study this use callback hook a little bit,
5227
03:25:51,880 --> 03:25:54,620
you'll notice that this use callback has two parts of it.
5228
03:25:54,620 --> 03:25:56,780
First is this callback, which we have studied.
5229
03:25:56,780 --> 03:25:59,260
And this is a dependency array.
5230
03:25:59,260 --> 03:26:03,460
These dependencies should not change too much,
5231
03:26:03,460 --> 03:26:06,820
but based on if you want to rerun the methods or something,
5232
03:26:06,820 --> 03:26:09,380
you can actually go ahead and just have this
5233
03:26:09,380 --> 03:26:11,780
so that all the optimization are done in this one.
5234
03:26:11,780 --> 03:26:13,740
So we'll be providing some of the dependencies array
5235
03:26:13,740 --> 03:26:16,700
that based on this, make sure all the dependencies are there.
5236
03:26:16,700 --> 03:26:18,380
So obviously if the length is changed,
5237
03:26:18,380 --> 03:26:20,980
make sure the optimization is done with that.
5238
03:26:20,980 --> 03:26:22,580
Numbers allowed, characters allowed.
5239
03:26:22,580 --> 03:26:24,680
So based on all of this, almost kind of a similar,
5240
03:26:24,680 --> 03:26:27,380
you can memoize that and work on with that.
5241
03:26:27,380 --> 03:26:29,300
We don't really get into the nitty-gritties
5242
03:26:29,300 --> 03:26:31,340
of this dependency array.
5243
03:26:31,340 --> 03:26:34,900
We'll talk about again in this in a use effect hook.
5244
03:26:34,900 --> 03:26:37,020
But again, remember, this is really simple.
5245
03:26:37,020 --> 03:26:40,100
As long as these dependencies don't change too often,
5246
03:26:40,100 --> 03:26:41,780
they can change once or twice,
5247
03:26:41,780 --> 03:26:44,100
but they're always exactly same.
5248
03:26:44,100 --> 03:26:46,780
So once you say number is there or number is not there,
5249
03:26:46,780 --> 03:26:48,100
there are only two cases.
5250
03:26:48,100 --> 03:26:50,780
If it keeps on changing the states like that crazily,
5251
03:26:50,780 --> 03:26:53,180
then obviously your code will absolutely burst.
5252
03:26:53,180 --> 03:26:54,800
I'll show you that case as well.
5253
03:26:54,800 --> 03:26:55,880
But the whole idea is,
5254
03:26:55,880 --> 03:26:58,640
as long as they don't change too frequently,
5255
03:26:58,640 --> 03:27:00,360
that is the keyword here.
5256
03:27:00,360 --> 03:27:02,800
Okay, notice here, there are a couple of that.
5257
03:27:02,800 --> 03:27:04,640
Shipping will receive the same props
5258
03:27:04,640 --> 03:27:06,280
and can skip re-rendering and all of that.
5259
03:27:06,280 --> 03:27:07,960
So this is all what is happening.
5260
03:27:07,960 --> 03:27:10,560
Okay, so now that our method is all done,
5261
03:27:10,560 --> 03:27:12,200
that okay, things are great.
5262
03:27:12,200 --> 03:27:14,000
Now what we want to do?
5263
03:27:14,000 --> 03:27:18,500
Based on some of the factors, I want this method to run.
5264
03:27:18,500 --> 03:27:20,240
Okay, what are those factors?
5265
03:27:20,240 --> 03:27:23,760
First of all, if somebody go ahead and touch this length,
5266
03:27:23,760 --> 03:27:25,560
I want to rerun the method.
5267
03:27:25,560 --> 03:27:28,300
As soon as the page loads, I want to run this method.
5268
03:27:28,300 --> 03:27:29,920
As soon as somebody touch this number,
5269
03:27:29,920 --> 03:27:30,960
I want it to rerun.
5270
03:27:30,960 --> 03:27:33,080
As soon as somebody clicks on the characters,
5271
03:27:33,080 --> 03:27:34,400
I want it to rerun.
5272
03:27:34,400 --> 03:27:38,780
In these cases, a hook that we can use here
5273
03:27:38,780 --> 03:27:41,080
and React is all about hooks.
5274
03:27:41,080 --> 03:27:43,680
Another hook that we have is useEffect.
5275
03:27:43,680 --> 03:27:46,020
This is one of the most used hooks
5276
03:27:46,020 --> 03:27:48,000
in the entire React project.
5277
03:27:48,000 --> 03:27:52,200
And this allows you to actually run a piece of code
5278
03:27:52,200 --> 03:27:54,080
based on variety of scenarios,
5279
03:27:54,080 --> 03:27:56,280
like as soon as the component is loading,
5280
03:27:56,280 --> 03:27:57,280
there's offloading as well,
5281
03:27:57,280 --> 03:27:59,200
but right now we'll not go into that much.
5282
03:27:59,200 --> 03:28:00,840
But as soon as you want something to happen,
5283
03:28:00,840 --> 03:28:03,200
as soon as component is loading or mounting,
5284
03:28:03,200 --> 03:28:06,020
then this useEffect hook is being used.
5285
03:28:06,020 --> 03:28:07,820
Using the useEffect hook is pretty simple.
5286
03:28:07,820 --> 03:28:09,560
You just simply go ahead and say useEffect.
5287
03:28:09,560 --> 03:28:10,760
We have imported that.
5288
03:28:10,760 --> 03:28:11,580
That is it.
5289
03:28:11,580 --> 03:28:13,160
That is your useEffect.
5290
03:28:13,160 --> 03:28:15,200
Now inside the useEffect, you get two thing again,
5291
03:28:15,200 --> 03:28:16,040
a callback.
5292
03:28:16,040 --> 03:28:17,520
So we get a callback like this.
5293
03:28:17,520 --> 03:28:19,880
And the second part is the dependency array.
5294
03:28:19,880 --> 03:28:21,480
This time, we don't want things.
5295
03:28:21,480 --> 03:28:23,040
This is opposite of use callback.
5296
03:28:23,040 --> 03:28:24,320
In use callback, we say, hey,
5297
03:28:24,320 --> 03:28:26,320
as long as things don't change too frequently,
5298
03:28:26,320 --> 03:28:28,000
we actually use that.
5299
03:28:28,000 --> 03:28:30,400
But in the useEffect, you want to run the method
5300
03:28:30,400 --> 03:28:32,760
intentionally as soon as something changes.
5301
03:28:32,760 --> 03:28:34,800
So all the methods that you want to give,
5302
03:28:34,800 --> 03:28:36,420
you should give that in the dependency array,
5303
03:28:36,420 --> 03:28:39,680
that hey, if anything changes in these particular things,
5304
03:28:39,680 --> 03:28:43,160
we would like to rerun our entire password generator.
5305
03:28:43,160 --> 03:28:44,040
So what are those things?
5306
03:28:44,040 --> 03:28:46,600
If the length changes, yes, please rerun this.
5307
03:28:46,600 --> 03:28:50,400
If the numbers allowed changes, yes, I want to run this.
5308
03:28:50,440 --> 03:28:53,440
If character allowed changes, yes, I want to run this.
5309
03:28:53,440 --> 03:28:55,840
And as well as if there is any change
5310
03:28:55,840 --> 03:28:58,200
in password generator code or something,
5311
03:28:58,200 --> 03:28:59,120
you can rerun that.
5312
03:28:59,120 --> 03:29:02,040
The good thing is, I don't have to say a single thing
5313
03:29:02,040 --> 03:29:05,240
as soon as the page loads automatically 100%
5314
03:29:05,240 --> 03:29:06,520
the useEffect runs.
5315
03:29:06,520 --> 03:29:08,320
Even if you pass nothing inside that,
5316
03:29:08,320 --> 03:29:10,700
at least one time, all the code that you're mentioning
5317
03:29:10,700 --> 03:29:12,120
in the useEffect hook, it runs.
5318
03:29:12,120 --> 03:29:13,520
That's why it is used.
5319
03:29:13,520 --> 03:29:16,040
So we'll say password generator.
5320
03:29:16,040 --> 03:29:17,600
Where is our password generator?
5321
03:29:17,600 --> 03:29:18,960
Generate password.
5322
03:29:18,960 --> 03:29:20,360
And we'll just execute that.
5323
03:29:21,180 --> 03:29:22,560
So that is how you actually run this.
5324
03:29:22,560 --> 03:29:23,400
Now let's go back.
5325
03:29:23,400 --> 03:29:25,480
As soon as I run this, notice here on the reload,
5326
03:29:25,480 --> 03:29:27,620
it actually generates the password for me.
5327
03:29:27,620 --> 03:29:29,720
As soon as I change this and keep on changing,
5328
03:29:29,720 --> 03:29:31,360
it runs the code.
5329
03:29:31,360 --> 03:29:33,700
If I run this, it still reruns the code.
5330
03:29:33,700 --> 03:29:36,460
And best part is this project is optimized.
5331
03:29:36,460 --> 03:29:39,040
But the statement here, which says,
5332
03:29:39,040 --> 03:29:41,120
as long as these dependencies don't change,
5333
03:29:41,120 --> 03:29:43,320
what happens in that case?
5334
03:29:43,320 --> 03:29:45,320
I know that there is one dependency
5335
03:29:45,320 --> 03:29:49,000
which is going to change like crazy.
5336
03:29:49,000 --> 03:29:52,360
For example, this password is changing.
5337
03:29:52,360 --> 03:29:53,760
This is changing too frequently,
5338
03:29:53,760 --> 03:29:56,880
and there is no way of your storing these state in this,
5339
03:29:56,880 --> 03:29:58,660
because every time it's random.
5340
03:29:58,660 --> 03:30:01,080
So if you somehow give this password here,
5341
03:30:01,080 --> 03:30:02,920
because this is changing quite a lot,
5342
03:30:02,920 --> 03:30:04,880
notice here, if you give this password,
5343
03:30:05,880 --> 03:30:07,880
it will just get all crazy.
5344
03:30:07,880 --> 03:30:10,860
And this is not a way how it should be done.
5345
03:30:10,860 --> 03:30:12,980
So you should not be actually using this one
5346
03:30:12,980 --> 03:30:14,520
as a password in parameter.
5347
03:30:14,520 --> 03:30:16,080
That would not be a great thing.
5348
03:30:16,080 --> 03:30:18,400
So that's why we actually don't use this password here.
5349
03:30:18,400 --> 03:30:20,100
And that's why we omitted that.
5350
03:30:20,100 --> 03:30:22,080
It is not going to help you
5351
03:30:22,080 --> 03:30:23,680
to actually generate all these things.
5352
03:30:23,680 --> 03:30:25,920
So yeah, not a good idea to add a password here,
5353
03:30:25,920 --> 03:30:27,560
because that's always changing.
5354
03:30:27,560 --> 03:30:30,240
And that's why we actually didn't gave it there.
5355
03:30:30,240 --> 03:30:31,920
Okay, almost our job is done,
5356
03:30:31,920 --> 03:30:34,760
but there is one more thing.
5357
03:30:34,760 --> 03:30:36,680
This button is not yet working.
5358
03:30:36,680 --> 03:30:37,800
This button is not working.
5359
03:30:37,800 --> 03:30:39,920
So how we can make this button working?
5360
03:30:39,920 --> 03:30:41,840
Pretty simple, just go to your button.
5361
03:30:41,840 --> 03:30:44,600
If I can find that, give me a second.
5362
03:30:44,600 --> 03:30:45,600
Yes, I'll find it.
5363
03:30:46,480 --> 03:30:48,920
And yeah, here we go.
5364
03:30:48,920 --> 03:30:50,760
Found it, found it.
5365
03:30:50,760 --> 03:30:54,280
So on this, I want to have a simple on click event.
5366
03:30:54,280 --> 03:30:55,360
And on this on click,
5367
03:30:55,360 --> 03:30:59,600
I'll just say copy password to clipboard.
5368
03:31:01,600 --> 03:31:03,240
Clipboard, there we go.
5369
03:31:03,240 --> 03:31:05,620
Now in order to just copy the password,
5370
03:31:05,620 --> 03:31:08,200
there is not too much of the code that I have to write.
5371
03:31:08,200 --> 03:31:12,740
A simple copy password to clipboard, just like that we have.
5372
03:31:12,740 --> 03:31:14,360
And in order to copy the password,
5373
03:31:14,360 --> 03:31:19,360
all I have to do is window.navigator.clipboard.write text
5374
03:31:22,880 --> 03:31:24,040
and password.
5375
03:31:24,040 --> 03:31:27,440
So it's going to just grab the clipboard and write text
5376
03:31:27,440 --> 03:31:29,880
and we'll be grabbing the password just like that.
5377
03:31:29,880 --> 03:31:31,120
So as you can see,
5378
03:31:31,120 --> 03:31:33,940
there is nothing too much going on with this one,
5379
03:31:33,940 --> 03:31:36,720
but hey, what is this write text
5380
03:31:36,720 --> 03:31:39,160
and how you can actually go ahead and find this?
5381
03:31:39,160 --> 03:31:40,760
Yeah, that's an interesting question.
5382
03:31:40,760 --> 03:31:42,360
So let me answer this one first.
5383
03:31:43,300 --> 03:31:46,300
So technically what we are doing in this one is
5384
03:31:46,300 --> 03:31:48,360
there is no access that we are taking
5385
03:31:48,360 --> 03:31:50,740
from the UI or this browser itself.
5386
03:31:50,740 --> 03:31:54,100
So if you go into the browser, if I refresh,
5387
03:31:54,100 --> 03:31:56,360
okay, what happened there?
5388
03:31:56,360 --> 03:31:58,440
And there should be some errors.
5389
03:31:59,500 --> 03:32:01,140
Let me just quickly check that.
5390
03:32:01,140 --> 03:32:03,260
Right click, inspect and console.
5391
03:32:03,260 --> 03:32:06,260
Okay, copy password to clipboard is not defined.
5392
03:32:06,260 --> 03:32:07,940
I defined it.
5393
03:32:07,940 --> 03:32:09,800
Copy password to clipboard.
5394
03:32:09,800 --> 03:32:12,260
Probably I'm making a mistake here.
5395
03:32:12,280 --> 03:32:16,260
Let's go back and paste it, save it.
5396
03:32:16,260 --> 03:32:17,580
Yeah, there we go.
5397
03:32:17,580 --> 03:32:20,060
Hopefully everything is resolved and yep.
5398
03:32:20,060 --> 03:32:23,060
Now we can maybe minor mistake, okay.
5399
03:32:23,060 --> 03:32:26,380
So as I was saying, notice here in this particular method,
5400
03:32:26,380 --> 03:32:28,460
what we're doing is we are not taking access
5401
03:32:28,460 --> 03:32:30,180
to any of this element.
5402
03:32:30,180 --> 03:32:31,960
We know that our final password
5403
03:32:31,960 --> 03:32:34,340
is actually in our state password.
5404
03:32:34,340 --> 03:32:36,140
So why don't just grab it from there?
5405
03:32:36,140 --> 03:32:37,720
That makes more sense.
5406
03:32:37,720 --> 03:32:39,260
So we're using a window object
5407
03:32:39,260 --> 03:32:40,960
in which we always have a navigator
5408
03:32:40,960 --> 03:32:42,760
and this is your clipboard.
5409
03:32:42,760 --> 03:32:44,480
Through the browser, you are actually accessing
5410
03:32:44,480 --> 03:32:45,640
what's there in your clipboard.
5411
03:32:45,640 --> 03:32:47,420
This is exactly how you do copy and paste
5412
03:32:47,420 --> 03:32:48,920
in all of the application.
5413
03:32:48,920 --> 03:32:50,100
It has a couple of methods.
5414
03:32:50,100 --> 03:32:52,360
If you go ahead and just check out this clipboard,
5415
03:32:52,360 --> 03:32:55,720
it has a lot of methods to write and read and whatnot.
5416
03:32:55,720 --> 03:32:58,940
There is even a read method as well.
5417
03:32:58,940 --> 03:33:03,940
A read text, read, read only, there's a lot of methods.
5418
03:33:04,880 --> 03:33:07,000
I don't want to go into too much detail of that.
5419
03:33:07,000 --> 03:33:07,840
There's a read method.
5420
03:33:07,840 --> 03:33:10,360
Yeah, there's a read, you can read the text as well.
5421
03:33:10,360 --> 03:33:13,280
But what I want to do is I want to use the write text
5422
03:33:13,280 --> 03:33:15,160
and inside when I use write text,
5423
03:33:15,160 --> 03:33:17,600
I'm basically writing in your clipboard
5424
03:33:17,600 --> 03:33:20,360
so that whenever you paste that, the text is available.
5425
03:33:20,360 --> 03:33:22,880
So if I can just go ahead and use this
5426
03:33:22,880 --> 03:33:26,080
and if I copy this and I change this again,
5427
03:33:26,080 --> 03:33:27,880
let's just say a really long string,
5428
03:33:27,880 --> 03:33:30,880
it has numbers as well and I copy this
5429
03:33:30,880 --> 03:33:33,080
and I come onto this new tab and I paste this,
5430
03:33:33,080 --> 03:33:34,440
hey, this copies.
5431
03:33:34,440 --> 03:33:35,840
So that means my job is done.
5432
03:33:35,840 --> 03:33:36,980
That means my job is done.
5433
03:33:36,980 --> 03:33:40,620
But you will also find that majority of the time,
5434
03:33:40,620 --> 03:33:42,500
some of the UI, UX guys comes to you that,
5435
03:33:42,500 --> 03:33:45,700
hey, all that was copied, but user needs feedback.
5436
03:33:45,700 --> 03:33:47,260
The feedback's totally dependent on you.
5437
03:33:47,260 --> 03:33:49,420
Maybe once the copy is done,
5438
03:33:49,420 --> 03:33:51,260
you might want to change the text.
5439
03:33:51,260 --> 03:33:53,840
You might want to store the button text
5440
03:33:53,840 --> 03:33:56,620
into some state itself and want to manipulate that
5441
03:33:56,620 --> 03:33:58,940
based on whether the copy text was copied.
5442
03:33:58,940 --> 03:34:00,860
And after some time you want to re-change it,
5443
03:34:00,860 --> 03:34:02,560
there's a lot of ways how it is done.
5444
03:34:02,560 --> 03:34:04,020
What we have decided in this case
5445
03:34:04,020 --> 03:34:06,620
is we are going to actually select this whole thing
5446
03:34:06,620 --> 03:34:09,100
so that user gets, okay, this was copied.
5447
03:34:09,100 --> 03:34:10,580
Now it's not easy to do this.
5448
03:34:10,580 --> 03:34:12,180
That's why we have chosen this.
5449
03:34:12,180 --> 03:34:17,180
In order to do so, we actually need somehow a reference
5450
03:34:17,220 --> 03:34:18,520
of this input field.
5451
03:34:18,520 --> 03:34:19,740
And that's why I told you earlier
5452
03:34:19,740 --> 03:34:22,500
that we'll be using something known as a reference.
5453
03:34:22,500 --> 03:34:24,300
So for this, there is another hook
5454
03:34:24,300 --> 03:34:27,960
that we are going to learn in this one, which is use ref.
5455
03:34:27,960 --> 03:34:30,900
This use ref is a crazy powerful hook
5456
03:34:30,900 --> 03:34:33,380
if you want to grab anything from the windows.
5457
03:34:33,380 --> 03:34:34,580
Not only just this,
5458
03:34:34,580 --> 03:34:36,580
I'll talk probably at the end of the series
5459
03:34:37,420 --> 03:34:38,780
but how crazy this hook can be.
5460
03:34:38,780 --> 03:34:40,420
And we'll go into this one.
5461
03:34:40,420 --> 03:34:42,980
The usage is pretty easy.
5462
03:34:42,980 --> 03:34:44,780
There are multiple users, by the way.
5463
03:34:44,780 --> 03:34:45,900
You can do a lot of things.
5464
03:34:45,900 --> 03:34:48,980
You can even find out how many times your page was loaded,
5465
03:34:48,980 --> 03:34:51,780
reloaded, there's a lot of things that can be done.
5466
03:34:51,780 --> 03:34:53,580
So what we're going to do is in this one,
5467
03:34:53,580 --> 03:34:58,020
we'll be just passing on a simple password ref.
5468
03:34:58,020 --> 03:35:00,820
You can name this anything and just use it like this.
5469
03:35:00,820 --> 03:35:04,540
Now in this, you can pass on any variable, null zero one.
5470
03:35:04,540 --> 03:35:07,280
In this case, we are not much worried about this
5471
03:35:07,280 --> 03:35:08,940
because we have nothing to do
5472
03:35:08,940 --> 03:35:10,380
with what is the value inside here.
5473
03:35:10,380 --> 03:35:12,700
We just need a password reference here.
5474
03:35:12,700 --> 03:35:13,860
Why so?
5475
03:35:13,860 --> 03:35:18,140
Simply to just go into my HTML, which is generating
5476
03:35:18,140 --> 03:35:21,780
and provide a ref tag known as password reference.
5477
03:35:21,780 --> 03:35:23,540
Now, once I actually provide a ref here
5478
03:35:23,540 --> 03:35:24,860
with the password reference,
5479
03:35:24,860 --> 03:35:26,880
now in anywhere in my application,
5480
03:35:26,880 --> 03:35:29,500
I can grab a reference of this input field.
5481
03:35:29,500 --> 03:35:31,080
There are multiple input fields.
5482
03:35:31,080 --> 03:35:32,940
I need to define which one I'm grabbing
5483
03:35:32,940 --> 03:35:34,780
or which one I'm actually talking.
5484
03:35:34,780 --> 03:35:36,960
I need to find the context of it.
5485
03:35:36,960 --> 03:35:38,460
But now that I have this one,
5486
03:35:38,460 --> 03:35:40,140
I can actually use this in my code.
5487
03:35:40,140 --> 03:35:42,260
As soon as user has done the copied,
5488
03:35:42,260 --> 03:35:44,060
let's do some of the fun stuff with him.
5489
03:35:44,060 --> 03:35:46,020
So we'll just take this password reference
5490
03:35:46,020 --> 03:35:47,860
and I can just go ahead and find out that,
5491
03:35:47,860 --> 03:35:49,740
hey, what do we want to select?
5492
03:35:49,740 --> 03:35:50,940
So I can just go ahead and say,
5493
03:35:50,940 --> 03:35:52,660
hey, I want to have a current
5494
03:35:52,660 --> 03:35:54,780
and not the focus in this case.
5495
03:35:54,780 --> 03:35:57,760
But if I have the access to this reference,
5496
03:35:57,760 --> 03:35:59,320
I can, by the way, directly go ahead and say,
5497
03:35:59,320 --> 03:36:00,580
I want to select this.
5498
03:36:01,540 --> 03:36:03,260
There we go, select.
5499
03:36:03,260 --> 03:36:05,100
This is going to do majority of work.
5500
03:36:05,100 --> 03:36:07,780
If I copy this, notice here it selects.
5501
03:36:07,780 --> 03:36:09,460
But it is recommended that sometimes
5502
03:36:09,460 --> 03:36:11,460
you might not have the reference properly.
5503
03:36:11,460 --> 03:36:12,780
Hydration might have not done.
5504
03:36:12,780 --> 03:36:14,340
And there are a couple of cases.
5505
03:36:14,340 --> 03:36:16,720
So if you have the current value there,
5506
03:36:16,720 --> 03:36:18,440
then optionally go ahead and select this.
5507
03:36:18,440 --> 03:36:19,720
This is just a safety net.
5508
03:36:19,720 --> 03:36:20,700
If you put this, great.
5509
03:36:20,700 --> 03:36:23,100
If you don't put it, no worries there at all.
5510
03:36:23,100 --> 03:36:25,380
Now, not only this, actually does our job.
5511
03:36:25,380 --> 03:36:26,660
Our job is actually finished.
5512
03:36:26,660 --> 03:36:28,180
But if you want to learn more about it,
5513
03:36:28,180 --> 03:36:29,660
then you can just learn more about
5514
03:36:29,700 --> 03:36:31,620
how to select the ranges and all of that.
5515
03:36:31,620 --> 03:36:33,600
You can, by the way, work on something like this.
5516
03:36:33,600 --> 03:36:35,260
I have a password reference
5517
03:36:35,260 --> 03:36:38,040
and I can have a set selection range as well
5518
03:36:38,040 --> 03:36:39,620
from zero to all the values.
5519
03:36:39,620 --> 03:36:42,460
Or maybe you want to have a selection range of zero to four.
5520
03:36:42,460 --> 03:36:44,580
For some reasons, I don't know why.
5521
03:36:44,580 --> 03:36:45,780
But maybe that's your use case.
5522
03:36:45,780 --> 03:36:48,100
So you copy that and only four of the values
5523
03:36:48,100 --> 03:36:49,460
will be selected.
5524
03:36:49,460 --> 03:36:51,940
No, not the set selection range.
5525
03:36:51,940 --> 03:36:54,780
Zero to 99 and all of that.
5526
03:36:54,780 --> 03:36:56,300
So it should be all done.
5527
03:36:56,300 --> 03:36:59,420
Okay, so somehow it works like that.
5528
03:36:59,500 --> 03:37:01,420
We are not interested in those selection,
5529
03:37:01,420 --> 03:37:03,180
set selection range as of now.
5530
03:37:03,180 --> 03:37:04,340
We want to select everything.
5531
03:37:04,340 --> 03:37:05,980
So we'll be just going back
5532
03:37:05,980 --> 03:37:07,660
and we'll be working on with this one.
5533
03:37:07,660 --> 03:37:09,740
So this actually gets the job done.
5534
03:37:09,740 --> 03:37:12,660
Majority of our work that we are working on.
5535
03:37:12,660 --> 03:37:14,700
And now we can actually have any characters
5536
03:37:14,700 --> 03:37:15,540
and stuff like that.
5537
03:37:15,540 --> 03:37:17,180
I think 100 is too much.
5538
03:37:17,180 --> 03:37:18,580
But we can just copy this.
5539
03:37:18,580 --> 03:37:21,180
It not only copies, but gives the user a feedback.
5540
03:37:21,180 --> 03:37:24,380
And the only guy which helped us to set this feedback
5541
03:37:24,380 --> 03:37:27,420
is actually this password reference here.
5542
03:37:27,420 --> 03:37:29,540
The use ref hook.
5543
03:37:29,540 --> 03:37:32,980
So in this just one basic project which looked so much easy,
5544
03:37:32,980 --> 03:37:35,100
we actually talked about the use callback.
5545
03:37:35,100 --> 03:37:36,500
We talked about use effect.
5546
03:37:36,500 --> 03:37:38,140
We talked about use ref.
5547
03:37:38,140 --> 03:37:40,700
And probably we can talk about a couple of more
5548
03:37:40,700 --> 03:37:42,860
of these elements as well.
5549
03:37:42,860 --> 03:37:46,060
So yes, things can be really, really complex
5550
03:37:46,060 --> 03:37:48,380
even when they look very basic.
5551
03:37:48,380 --> 03:37:50,860
It's all about the mindset and the approach
5552
03:37:50,860 --> 03:37:53,940
that you are taking to finalize or finish up a project.
5553
03:37:53,940 --> 03:37:56,500
Within just what 40 minute ish,
5554
03:37:56,500 --> 03:37:58,540
we were able to finish this entire project.
5555
03:37:58,540 --> 03:37:59,660
But we learned so much.
5556
03:37:59,660 --> 03:38:02,020
But your job doesn't finish just right here.
5557
03:38:02,020 --> 03:38:04,820
You need to go on your own and study a little bit more
5558
03:38:04,820 --> 03:38:09,220
about use ref hook, use a state hook, use effect hook,
5559
03:38:09,220 --> 03:38:11,540
callback hook, there are too many use.
5560
03:38:11,540 --> 03:38:13,340
But at least you got an introduction to this.
5561
03:38:13,340 --> 03:38:14,940
So spend next two to three days
5562
03:38:14,940 --> 03:38:16,900
in exploring more about these one.
5563
03:38:16,900 --> 03:38:19,260
And definitely I'll be coming back in the next video
5564
03:38:19,260 --> 03:38:20,140
with the next project
5565
03:38:20,140 --> 03:38:22,180
and we'll be having so much more discussion.
5566
03:38:22,180 --> 03:38:24,380
If you haven't hit that subscribe on my channel,
5567
03:38:24,380 --> 03:38:26,020
go ahead, hit that subscribe.
5568
03:38:26,020 --> 03:38:28,140
And I'll be bringing more content to this.
5569
03:38:28,140 --> 03:38:29,860
Show some love in the comment section as well.
5570
03:38:29,860 --> 03:38:33,180
That's right now, really, really, I'm in the need of that.
5571
03:38:33,180 --> 03:38:34,020
That's it for this one.
5572
03:38:34,020 --> 03:38:35,620
Let's catch up in the next video.
5573
03:38:38,300 --> 03:38:41,340
It pretty much amazes me that how much we are going to learn
5574
03:38:41,340 --> 03:38:44,340
within just one project that we're going to finish up
5575
03:38:44,340 --> 03:38:45,180
in this video.
5576
03:38:45,180 --> 03:38:46,740
This is going to be a longer one.
5577
03:38:46,740 --> 03:38:47,580
Hey there, everyone.
5578
03:38:47,580 --> 03:38:49,740
My name is Ateesh and let's get started
5579
03:38:49,740 --> 03:38:52,020
and continue our React journey.
5580
03:38:52,020 --> 03:38:53,740
We are into the world of React journey.
5581
03:38:53,740 --> 03:38:56,000
We are trying to master React concepts,
5582
03:38:56,000 --> 03:38:58,280
one at a time in each of the project.
5583
03:38:58,280 --> 03:39:00,800
This helps us in building our portfolio projects
5584
03:39:00,800 --> 03:39:04,400
so that this shows a constant learning journey that we have.
5585
03:39:04,400 --> 03:39:06,320
We have ample amount of projects
5586
03:39:06,320 --> 03:39:07,560
so that we can showcase them
5587
03:39:07,560 --> 03:39:10,240
as well as can learn them in one go.
5588
03:39:10,240 --> 03:39:12,200
When you build a kind of a big project,
5589
03:39:12,200 --> 03:39:13,920
of course there is a learning there as well.
5590
03:39:13,920 --> 03:39:16,680
But I believe that as a beginner getting started,
5591
03:39:16,680 --> 03:39:18,440
building multiple smaller projects,
5592
03:39:18,440 --> 03:39:21,520
which focuses on each concept one at a time
5593
03:39:21,520 --> 03:39:23,320
is rather a better approach.
5594
03:39:23,320 --> 03:39:26,160
So this is exactly what we'll be doing in this video.
5595
03:39:26,160 --> 03:39:27,520
So let me first walk you through
5596
03:39:27,520 --> 03:39:28,640
what we're going to build
5597
03:39:28,640 --> 03:39:31,560
and this will help you to understand a customized hook.
5598
03:39:31,560 --> 03:39:33,240
You will be able to build your own hooks
5599
03:39:33,240 --> 03:39:37,080
just like we were able to use a state, use effect,
5600
03:39:37,080 --> 03:39:38,820
use callback and whatnot.
5601
03:39:38,820 --> 03:39:41,200
We will be able to design our own custom hooks.
5602
03:39:41,200 --> 03:39:42,920
This will give you so much of confidence
5603
03:39:42,920 --> 03:39:45,480
that hey hooks are not that much complex.
5604
03:39:45,480 --> 03:39:47,680
I can design my own hooks for that.
5605
03:39:47,680 --> 03:39:48,520
As a matter of fact,
5606
03:39:48,520 --> 03:39:51,440
we will learn how we can make the API request
5607
03:39:51,440 --> 03:39:53,140
and get some data from the APIs
5608
03:39:54,140 --> 03:39:55,580
and can utilize this in our application.
5609
03:39:55,580 --> 03:39:59,100
And we will also see that how a component is being designed,
5610
03:39:59,100 --> 03:40:00,340
a reusable component.
5611
03:40:00,340 --> 03:40:03,100
So far we haven't much focused on reusability
5612
03:40:03,100 --> 03:40:03,940
of the component,
5613
03:40:03,940 --> 03:40:05,420
which is one of the core principle
5614
03:40:05,420 --> 03:40:07,460
and core strength of the React itself.
5615
03:40:07,460 --> 03:40:09,660
So we'll be focusing on that part as well.
5616
03:40:09,660 --> 03:40:11,180
So without a further ado,
5617
03:40:11,180 --> 03:40:12,940
let me go ahead and give you an overview.
5618
03:40:12,940 --> 03:40:15,300
Now that you have a list of what we are about to see,
5619
03:40:15,300 --> 03:40:18,740
let's see that what we are going to learn in this project.
5620
03:40:18,740 --> 03:40:20,780
So this is the project that we'll be building.
5621
03:40:20,780 --> 03:40:22,060
Of course, it's on tailwind.
5622
03:40:22,060 --> 03:40:23,900
So we will not be again much focused
5623
03:40:23,900 --> 03:40:25,920
on how this corner radius works on.
5624
03:40:25,920 --> 03:40:27,580
That's not our case.
5625
03:40:27,580 --> 03:40:29,320
The goal is to understand the concept
5626
03:40:29,320 --> 03:40:31,620
of the component reusability.
5627
03:40:31,620 --> 03:40:33,620
The first thing that you can see here is
5628
03:40:33,620 --> 03:40:36,740
that this component uses this top input component,
5629
03:40:36,740 --> 03:40:38,140
which is exactly same.
5630
03:40:38,140 --> 03:40:39,620
Only the data is getting changed,
5631
03:40:39,620 --> 03:40:41,700
like from gets changed to to.
5632
03:40:41,700 --> 03:40:44,860
The value here might change here as well.
5633
03:40:44,860 --> 03:40:46,940
Then the currency type, this is exactly same.
5634
03:40:46,940 --> 03:40:49,060
The dropdown list, this is exactly same here.
5635
03:40:49,060 --> 03:40:50,820
And this is obviously same here as well.
5636
03:40:50,820 --> 03:40:52,540
So no much big deal.
5637
03:40:52,540 --> 03:40:54,500
If we design this component, it makes sense
5638
03:40:54,500 --> 03:40:57,300
so that we can reutilize it later on as well.
5639
03:40:57,300 --> 03:40:58,540
We won't be making any component
5640
03:40:58,540 --> 03:41:00,140
for the button or the swap.
5641
03:41:00,140 --> 03:41:01,060
This is exactly same.
5642
03:41:01,060 --> 03:41:03,300
These are just used to change the to and fro values.
5643
03:41:03,300 --> 03:41:07,340
So very simple basic swapping of the variables that we have.
5644
03:41:07,340 --> 03:41:09,380
What's interesting about it is if you choose,
5645
03:41:09,380 --> 03:41:12,500
like how much is the value for the 10 USD,
5646
03:41:12,500 --> 03:41:15,540
and you convert it, it actually gets you the value.
5647
03:41:15,540 --> 03:41:17,500
And the value that it is bringing up
5648
03:41:17,500 --> 03:41:20,420
is actually coming up from a URL itself.
5649
03:41:20,420 --> 03:41:22,620
And that is very, very interesting of a URL.
5650
03:41:22,620 --> 03:41:25,300
Let me show you what URL we are actually using.
5651
03:41:25,300 --> 03:41:26,820
So this is a URL.
5652
03:41:26,820 --> 03:41:28,260
By the way, you can get this URL
5653
03:41:28,260 --> 03:41:29,820
from the project description.
5654
03:41:29,820 --> 03:41:31,940
So all the projects are available on my GitHub account.
5655
03:41:31,940 --> 03:41:35,620
You can just get into that repository, that file,
5656
03:41:35,620 --> 03:41:38,780
which I'll actually give you, and can grab this URL.
5657
03:41:38,780 --> 03:41:39,980
The good thing about this URL
5658
03:41:39,980 --> 03:41:42,060
is the end portion of this URL.
5659
03:41:42,060 --> 03:41:45,940
At the end of it, you can write something like usd.json.
5660
03:41:45,940 --> 03:41:47,940
And once you write usd.json,
5661
03:41:47,940 --> 03:41:50,420
it gives you a key of usd
5662
03:41:50,420 --> 03:41:52,740
and appropriate conversion of each values,
5663
03:41:52,740 --> 03:41:53,820
like I am from India,
5664
03:41:53,820 --> 03:41:57,620
so INR conversion of each of this is actually available.
5665
03:41:57,620 --> 03:41:59,900
But not only that, I can make the conversion for,
5666
03:41:59,900 --> 03:42:00,980
for example, INR.
5667
03:42:00,980 --> 03:42:04,180
So all the currencies you can pass on in the URL itself,
5668
03:42:04,180 --> 03:42:06,500
and it gives you like INR conversion,
5669
03:42:06,500 --> 03:42:09,220
so how much one INR will be in each of these currency,
5670
03:42:09,220 --> 03:42:11,420
that conversion automatically happens.
5671
03:42:11,420 --> 03:42:12,420
Not a big deal.
5672
03:42:12,420 --> 03:42:14,660
It actually converts a simple API,
5673
03:42:14,660 --> 03:42:16,280
which does the multiplication.
5674
03:42:16,280 --> 03:42:18,520
But this is a little bit complex of an API,
5675
03:42:18,520 --> 03:42:20,440
then rather hitting the basic APIs.
5676
03:42:20,440 --> 03:42:23,520
Like for example, there is this API.github,
5677
03:42:23,520 --> 03:42:24,360
where you get the data.
5678
03:42:24,360 --> 03:42:25,480
This data never changes.
5679
03:42:25,480 --> 03:42:29,800
You get the data, arrange this data into some cards,
5680
03:42:29,800 --> 03:42:31,720
some photos, or something like that,
5681
03:42:31,720 --> 03:42:33,360
and you get happy with that.
5682
03:42:33,360 --> 03:42:35,000
For example, we have another one,
5683
03:42:35,000 --> 03:42:36,480
which is very famous project,
5684
03:42:36,480 --> 03:42:41,480
which is random user, random user me.
5685
03:42:41,840 --> 03:42:43,720
This is also exactly almost same.
5686
03:42:43,720 --> 03:42:45,640
What you see on the data here,
5687
03:42:45,640 --> 03:42:46,960
this is exactly the data.
5688
03:42:46,960 --> 03:42:48,000
Only the data changes.
5689
03:42:48,000 --> 03:42:49,400
The format never changes.
5690
03:42:49,400 --> 03:42:50,240
No such thing.
5691
03:42:50,240 --> 03:42:52,960
So this is exactly kind of a same API that we are handling.
5692
03:42:52,960 --> 03:42:56,200
Here we are handling a tiny bit more than the previous one,
5693
03:42:56,200 --> 03:42:58,160
because the INR changes here.
5694
03:42:58,160 --> 03:42:59,360
We need to make a request here.
5695
03:42:59,360 --> 03:43:01,080
We have to modify the URL,
5696
03:43:01,080 --> 03:43:02,760
and then they get the appropriate things.
5697
03:43:02,760 --> 03:43:03,960
And then the key value pairs,
5698
03:43:03,960 --> 03:43:05,800
we need to actually get all the keys,
5699
03:43:05,800 --> 03:43:08,000
so that we can show these keys all up here.
5700
03:43:08,000 --> 03:43:10,560
So there's a little bit more involved in this one.
5701
03:43:10,560 --> 03:43:13,040
So that will be taken care by the hooks itself.
5702
03:43:13,040 --> 03:43:14,040
Very fun project.
5703
03:43:14,040 --> 03:43:15,800
Initially you thought it would be very basic,
5704
03:43:15,800 --> 03:43:16,800
but now you are realizing,
5705
03:43:16,800 --> 03:43:19,000
oh, there's a lot of work that we need to do.
5706
03:43:19,000 --> 03:43:19,840
And of course,
5707
03:43:19,840 --> 03:43:21,320
Tailwind is going to be our friend for this one.
5708
03:43:21,320 --> 03:43:23,200
So let's go ahead and get started with this one.
5709
03:43:23,200 --> 03:43:24,960
So here's my source code.
5710
03:43:24,960 --> 03:43:26,880
I'll just kill this one.
5711
03:43:26,880 --> 03:43:29,480
So, okay, that's still running.
5712
03:43:29,480 --> 03:43:31,200
I'll destroy this.
5713
03:43:31,200 --> 03:43:33,200
And we have the fifth project being done.
5714
03:43:33,200 --> 03:43:34,800
Now let's go ahead and take down
5715
03:43:34,800 --> 03:43:37,640
the sixth project of this series.
5716
03:43:37,640 --> 03:43:40,720
Again, same NPM create VIT,
5717
03:43:40,720 --> 03:43:42,880
and we'll be using the latest.
5718
03:43:42,880 --> 03:43:43,840
Just go for that.
5719
03:43:43,960 --> 03:43:45,360
We'll be going with the very basics.
5720
03:43:45,360 --> 03:43:47,640
So this is zero six, I guess.
5721
03:43:47,640 --> 03:43:50,060
And this will be currency.
5722
03:43:51,280 --> 03:43:53,480
All lowercase would be good.
5723
03:43:53,480 --> 03:43:54,840
Converter.
5724
03:43:54,840 --> 03:43:57,360
And we'll be, of course, React and JavaScript.
5725
03:43:57,360 --> 03:43:59,000
And I love how easy it is
5726
03:43:59,000 --> 03:44:01,360
to actually go ahead and work on with this one.
5727
03:44:01,360 --> 03:44:04,440
Let's go ahead and open this up into integrated terminal.
5728
03:44:04,440 --> 03:44:06,320
That's much more easier for me.
5729
03:44:06,320 --> 03:44:07,760
NPM install.
5730
03:44:07,760 --> 03:44:10,440
And we need to go ahead and install the Tailwind as well.
5731
03:44:10,440 --> 03:44:11,560
So we can just come up here,
5732
03:44:11,560 --> 03:44:13,160
the same guide of the Tailwind.
5733
03:44:13,200 --> 03:44:15,560
I always come up here because anyways I have to do it.
5734
03:44:15,560 --> 03:44:17,760
There is no point of doing it behind the scene
5735
03:44:17,760 --> 03:44:19,240
and I don't really prefer that.
5736
03:44:19,240 --> 03:44:21,960
So I'll just copy this, go back up here,
5737
03:44:21,960 --> 03:44:25,280
wait for a few seconds till it loads all the things.
5738
03:44:25,280 --> 03:44:27,520
Please don't mind me sipping some lemon water.
5739
03:44:29,680 --> 03:44:30,760
Missing my tea today.
5740
03:44:31,640 --> 03:44:34,240
But there's so much of these long videos
5741
03:44:34,240 --> 03:44:36,240
that I need to grab something to drink.
5742
03:44:37,680 --> 03:44:39,480
Okay, so the Tailwind is here
5743
03:44:39,480 --> 03:44:41,920
and hopefully this will give us the Tailwind file.
5744
03:44:41,920 --> 03:44:42,880
There we go.
5745
03:44:42,880 --> 03:44:44,400
Tailwind config.
5746
03:44:44,400 --> 03:44:45,560
And just like the previous one,
5747
03:44:45,560 --> 03:44:48,120
we'll be just copying and pasting the content part
5748
03:44:48,120 --> 03:44:51,920
since we are in the VIT content part is done.
5749
03:44:51,920 --> 03:44:55,480
Next up is we need these directives.
5750
03:44:56,560 --> 03:44:59,560
Okay, and this needs to go into source.
5751
03:44:59,560 --> 03:45:01,840
Our main index.css.
5752
03:45:01,840 --> 03:45:03,760
Remove everything, paste it up here.
5753
03:45:03,760 --> 03:45:05,000
There we go.
5754
03:45:05,000 --> 03:45:07,440
We also don't need anything from the app.css.
5755
03:45:07,440 --> 03:45:09,520
So we'll be just selecting and removing all of this.
5756
03:45:09,520 --> 03:45:11,180
We don't need it.
5757
03:45:11,180 --> 03:45:12,800
Close all of this, close this.
5758
03:45:13,600 --> 03:45:14,760
And save this and close this.
5759
03:45:14,760 --> 03:45:17,800
Now, technically, in theory, we should have the Tailwind.
5760
03:45:17,800 --> 03:45:19,680
But again, the only way to verify
5761
03:45:19,680 --> 03:45:23,520
is via writing some of the custom CSS.
5762
03:45:23,520 --> 03:45:27,720
Let's go ahead and remove this and simply have an H1.
5763
03:45:27,720 --> 03:45:30,000
And we'll say test for Tailwind.
5764
03:45:30,960 --> 03:45:34,400
All right, let's go up here and we'll be saying class name.
5765
03:45:34,400 --> 03:45:39,400
BG dash red dash 200 should be good enough.
5766
03:45:39,680 --> 03:45:41,280
And let's go back.
5767
03:45:41,320 --> 03:45:42,620
We haven't run this.
5768
03:45:43,720 --> 03:45:47,000
NPM run dev.
5769
03:45:48,440 --> 03:45:49,820
And let's see.
5770
03:45:49,820 --> 03:45:51,580
Okay, this is working.
5771
03:45:52,880 --> 03:45:55,240
Let's go ahead and work on with this one.
5772
03:45:55,240 --> 03:45:58,280
This is not really that much of a complex data
5773
03:45:58,280 --> 03:45:59,440
or a complex project.
5774
03:45:59,440 --> 03:46:01,340
We'll be working with this.
5775
03:46:01,340 --> 03:46:03,360
So let's go ahead and work with this.
5776
03:46:04,220 --> 03:46:05,600
Let's close this one.
5777
03:46:05,600 --> 03:46:07,940
And the first thing that we'll be doing is
5778
03:46:07,940 --> 03:46:10,200
let's just cut out all of this.
5779
03:46:10,200 --> 03:46:12,920
We'll cut this one out, remove this one.
5780
03:46:12,920 --> 03:46:15,960
Instead of this, we'll be having a basic dev.
5781
03:46:15,960 --> 03:46:17,480
Let's have an H1.
5782
03:46:17,480 --> 03:46:20,120
Now, inside this, we'll be having some of the classes.
5783
03:46:20,120 --> 03:46:23,320
So again, the classes will come up from our code files
5784
03:46:23,320 --> 03:46:26,040
that I already have when we build the project.
5785
03:46:26,040 --> 03:46:28,880
So we'll not be talking about the code files at all.
5786
03:46:28,880 --> 03:46:30,880
The only thing that we are going to worry about
5787
03:46:30,880 --> 03:46:33,060
after this is actually one more thing.
5788
03:46:33,060 --> 03:46:35,380
I want to add a style into this one.
5789
03:46:35,380 --> 03:46:38,000
Now, after the style, we would love to have
5790
03:46:38,000 --> 03:46:40,840
a simple background image just like this.
5791
03:46:40,840 --> 03:46:43,520
But instead of the background image going like React logo
5792
03:46:43,520 --> 03:46:45,040
or something, we will be actually getting
5793
03:46:45,040 --> 03:46:46,760
the background image from.
5794
03:46:46,760 --> 03:46:48,440
You can grab it from asset as well,
5795
03:46:48,440 --> 03:46:50,280
but you can directly inject the URL.
5796
03:46:50,280 --> 03:46:53,360
In my case, I'll be just directly pasting a URL.
5797
03:46:53,360 --> 03:46:56,280
And let's go ahead and remove this.
5798
03:46:57,140 --> 03:47:00,220
From where you can grab the URLs of the images,
5799
03:47:00,220 --> 03:47:01,920
I'll show you resources as well.
5800
03:47:01,920 --> 03:47:04,640
One of the resources that I prefer to use a lot is Pexels.
5801
03:47:04,640 --> 03:47:07,280
Yes, I do contribute myself on Pexels quite a lot.
5802
03:47:07,280 --> 03:47:09,220
These are all photos that I click.
5803
03:47:09,220 --> 03:47:11,280
Feel free to choose any photo out of these,
5804
03:47:11,280 --> 03:47:13,140
which makes sense to you.
5805
03:47:14,260 --> 03:47:16,200
And we'll be searching for a photo
5806
03:47:16,200 --> 03:47:19,640
that actually represents money or something like that.
5807
03:47:21,100 --> 03:47:22,180
Okay, which one?
5808
03:47:22,180 --> 03:47:23,140
This one looks good.
5809
03:47:24,200 --> 03:47:28,680
I'll just copy the image address and paste it up here.
5810
03:47:28,680 --> 03:47:31,760
And let's see how does that look.
5811
03:47:31,760 --> 03:47:33,080
In the VIT project, there we go.
5812
03:47:33,080 --> 03:47:36,300
So decent, not the perfect.
5813
03:47:36,300 --> 03:47:38,060
We can definitely change the backgrounds
5814
03:47:38,060 --> 03:47:38,960
and colors and whatnot,
5815
03:47:38,960 --> 03:47:42,300
but I think this is good enough for us as of now.
5816
03:47:42,300 --> 03:47:45,100
We'll be having a couple of more CSS and all these stuffs,
5817
03:47:45,100 --> 03:47:47,700
but first let's talk about the functionality part.
5818
03:47:47,700 --> 03:47:50,180
This is more than enough for us as of now.
5819
03:47:50,180 --> 03:47:52,720
Okay, first of all, we need an input box.
5820
03:47:52,720 --> 03:47:55,500
So the designing of input box is not really something
5821
03:47:55,500 --> 03:47:56,760
which should bother us.
5822
03:47:56,760 --> 03:47:58,580
This is how the input box looks like,
5823
03:47:58,580 --> 03:48:01,420
but how to design the components which are reusable,
5824
03:48:01,420 --> 03:48:02,960
what are the things we need to take care?
5825
03:48:02,960 --> 03:48:04,880
That is what we are going to discuss.
5826
03:48:04,880 --> 03:48:05,800
So inside the source,
5827
03:48:05,800 --> 03:48:07,800
just right-click and create a new folder.
5828
03:48:07,800 --> 03:48:12,560
We are going to call this one as component or components,
5829
03:48:12,560 --> 03:48:13,960
however you like.
5830
03:48:13,960 --> 03:48:17,120
And the only component that we have as of now is input box.
5831
03:48:17,120 --> 03:48:22,120
So let's create a new file, input box.jsx, of course,
5832
03:48:24,280 --> 03:48:29,280
and rfce, rafce, yeah, that actually makes sense.
5833
03:48:30,640 --> 03:48:32,080
Or I'll go for the rfce.
5834
03:48:32,600 --> 03:48:36,960
Okay, rfce, there we go.
5835
03:48:36,960 --> 03:48:39,840
Finally, we have an input box and we are exporting this.
5836
03:48:39,840 --> 03:48:40,960
Now with the input box,
5837
03:48:40,960 --> 03:48:43,680
how many other things you want to accept?
5838
03:48:43,680 --> 03:48:44,680
That's totally up to you.
5839
03:48:44,680 --> 03:48:46,240
I want to accept this label.
5840
03:48:46,240 --> 03:48:48,240
I will be accepting an amount as well
5841
03:48:48,240 --> 03:48:51,700
because I'll be using it from different perspective.
5842
03:48:51,700 --> 03:48:53,840
In some of them, user will give the amount.
5843
03:48:53,840 --> 03:48:55,600
In some of them, I'll be adjusting the amount.
5844
03:48:55,600 --> 03:48:57,320
So obviously I need an amount.
5845
03:48:57,320 --> 03:48:58,960
What happens when the amount change?
5846
03:48:58,960 --> 03:49:01,920
So I need a method which will be responsible
5847
03:49:02,000 --> 03:49:05,280
for changing the amount and that method will be state.
5848
03:49:05,280 --> 03:49:06,720
So how we'll be doing that,
5849
03:49:06,720 --> 03:49:08,860
we'll actually keep this method as it is.
5850
03:49:08,860 --> 03:49:12,000
But in our app.jsx, there we'll be designing
5851
03:49:12,000 --> 03:49:13,960
some of these classes itself
5852
03:49:13,960 --> 03:49:16,240
so that we can have all these basic amounts
5853
03:49:16,240 --> 03:49:17,960
and how the amounts are being set,
5854
03:49:17,960 --> 03:49:19,920
currency, converter and all of that.
5855
03:49:19,920 --> 03:49:22,200
But in order to have that amount,
5856
03:49:22,200 --> 03:49:24,720
we need to have something which can set the amount as well.
5857
03:49:24,720 --> 03:49:26,840
So that's my number one goal.
5858
03:49:26,840 --> 03:49:28,640
What happens when the currency is changed?
5859
03:49:28,640 --> 03:49:30,760
So this is something we need to take care of that.
5860
03:49:30,760 --> 03:49:32,360
What happens when the currency change?
5861
03:49:32,360 --> 03:49:33,720
So there needs to be something
5862
03:49:33,720 --> 03:49:35,480
which is keeping a track of all these states.
5863
03:49:35,480 --> 03:49:37,120
At least there should be a method.
5864
03:49:37,120 --> 03:49:38,360
All the currency options,
5865
03:49:38,360 --> 03:49:39,920
I will obviously be taking this one.
5866
03:49:39,920 --> 03:49:42,280
So this is a input box itself.
5867
03:49:42,280 --> 03:49:44,040
It doesn't do anything on its own.
5868
03:49:44,040 --> 03:49:45,840
The whole idea and the whole job
5869
03:49:45,840 --> 03:49:47,800
is just take the values and display them.
5870
03:49:47,800 --> 03:49:49,520
That is what we have.
5871
03:49:49,520 --> 03:49:51,480
And there might be cases.
5872
03:49:51,480 --> 03:49:53,920
In this case, this is an input box
5873
03:49:53,920 --> 03:49:55,840
or the input value which is disabled.
5874
03:49:55,840 --> 03:49:59,200
So which currency, like you will be obviously reusing this.
5875
03:49:59,200 --> 03:50:01,000
So which one you can enter the data
5876
03:50:01,000 --> 03:50:04,160
and which one you want the component to be disabled.
5877
03:50:04,160 --> 03:50:06,880
So you have to check for that one is amount enabled
5878
03:50:06,880 --> 03:50:09,480
or disabled into that one, currency disabled.
5879
03:50:09,480 --> 03:50:12,600
Like here you can see the currency is disabled in this one.
5880
03:50:12,600 --> 03:50:14,440
And of course, if any additional classes
5881
03:50:14,440 --> 03:50:15,360
that you want to give me.
5882
03:50:15,360 --> 03:50:16,640
So there's a lot of data
5883
03:50:16,640 --> 03:50:18,600
that we are getting through this one.
5884
03:50:18,600 --> 03:50:21,800
And you don't know this data entirely at the first go.
5885
03:50:21,800 --> 03:50:24,560
Eventually, as you want to make your components
5886
03:50:24,560 --> 03:50:26,680
more reusable, you add this one.
5887
03:50:26,680 --> 03:50:28,520
So let's go ahead and work on with this one.
5888
03:50:28,520 --> 03:50:30,240
So first of all, we have this label
5889
03:50:30,240 --> 03:50:32,760
that we'll be taking as a prop into this one.
5890
03:50:32,760 --> 03:50:34,280
We obviously needs to take amount.
5891
03:50:34,280 --> 03:50:35,840
These are obvious one.
5892
03:50:35,840 --> 03:50:38,800
Now next, what we need to take is on amount change.
5893
03:50:38,800 --> 03:50:40,560
What happens when the amount change?
5894
03:50:40,560 --> 03:50:42,520
So something state needs to be there.
5895
03:50:42,520 --> 03:50:45,360
Some method needs to be there, which keeps a track of that.
5896
03:50:45,360 --> 03:50:48,920
And what happens on the on currency change?
5897
03:50:48,920 --> 03:50:50,960
So this on currency change is what happens
5898
03:50:50,960 --> 03:50:52,720
when the user changed the currency.
5899
03:50:52,720 --> 03:50:53,600
How to utilize them?
5900
03:50:53,600 --> 03:50:55,200
I'll walk you through with that as well.
5901
03:50:55,200 --> 03:50:57,120
But these are some of the basics.
5902
03:50:57,120 --> 03:50:59,760
Then obviously you need a currency option.
5903
03:51:01,280 --> 03:51:03,000
Currency options.
5904
03:51:03,000 --> 03:51:05,040
And we'll be setting up some of the default values
5905
03:51:05,040 --> 03:51:06,360
because it will be an array.
5906
03:51:06,360 --> 03:51:07,960
We expect that how we get the array,
5907
03:51:07,960 --> 03:51:10,000
that is not our concern as of now.
5908
03:51:10,000 --> 03:51:13,280
I want to get all these currency as in the format of array
5909
03:51:13,280 --> 03:51:14,720
so that I can just loop through them
5910
03:51:14,720 --> 03:51:16,520
and provide the values there.
5911
03:51:16,520 --> 03:51:19,440
Now, obviously by default, we need to show some currency.
5912
03:51:19,440 --> 03:51:21,960
So that also needs to be taken care of that.
5913
03:51:21,960 --> 03:51:25,440
So we'll be saying we need a selected currency.
5914
03:51:25,440 --> 03:51:27,880
And by default, we'll be going with the USD.
5915
03:51:29,880 --> 03:51:32,680
And no suggestion there.
5916
03:51:32,680 --> 03:51:34,760
Okay, this is my by default currency.
5917
03:51:34,760 --> 03:51:37,440
And do you want this amount to be enabled or disabled?
5918
03:51:37,440 --> 03:51:39,000
That somebody needs to tell to us.
5919
03:51:39,000 --> 03:51:42,160
So we'll be saying amount disabled.
5920
03:51:42,160 --> 03:51:44,280
And by default, we'll be getting a false value
5921
03:51:44,280 --> 03:51:46,920
because we don't want to disable it by default.
5922
03:51:46,920 --> 03:51:49,600
If the user asks us, we will disable that.
5923
03:51:49,600 --> 03:51:51,920
And we'll be also checking the currency disabled.
5924
03:51:51,920 --> 03:51:53,960
So if the currency is enabled, disabled,
5925
03:51:54,000 --> 03:51:56,640
if the user is allowed to change the currency or not,
5926
03:51:56,640 --> 03:51:58,040
it's totally up to you.
5927
03:51:58,040 --> 03:51:59,680
You want to have it, have it.
5928
03:51:59,680 --> 03:52:01,800
If you don't want to have it, that's okay as well.
5929
03:52:01,800 --> 03:52:04,920
So we'll be saying currency disabled.
5930
03:52:04,920 --> 03:52:06,320
By default, that's false.
5931
03:52:06,320 --> 03:52:09,080
We'll also take some of the class name as well.
5932
03:52:09,080 --> 03:52:10,680
This is a very common pattern
5933
03:52:10,680 --> 03:52:12,200
that you'll be taking a lot of class name.
5934
03:52:12,200 --> 03:52:13,920
Of course, you will be designing our component,
5935
03:52:13,920 --> 03:52:16,320
but you will also give the user a chance
5936
03:52:16,320 --> 03:52:18,280
that hey, I'll be allowing you
5937
03:52:18,280 --> 03:52:21,280
so that you can actually get all of these values.
5938
03:52:21,280 --> 03:52:22,600
All right, so now let's go ahead
5939
03:52:22,600 --> 03:52:25,600
and design this input box itself.
5940
03:52:25,600 --> 03:52:28,000
First of all, we'll be having some of the classes as well.
5941
03:52:28,000 --> 03:52:30,920
Classes I'll be copying and pasting from here itself.
5942
03:52:30,920 --> 03:52:33,480
Now we won't be putting the classes just like the strings
5943
03:52:33,480 --> 03:52:36,440
because we'll be taking some of the classes as the props.
5944
03:52:36,440 --> 03:52:38,520
So we need to keep a safe area
5945
03:52:38,520 --> 03:52:41,320
where I can inject the classes which are injected
5946
03:52:41,320 --> 03:52:43,800
by somebody who's using our component.
5947
03:52:43,800 --> 03:52:45,680
So we'll be just removing this one here.
5948
03:52:45,680 --> 03:52:47,920
We'll be injecting our JavaScript here.
5949
03:52:47,920 --> 03:52:50,800
Now in the JavaScript, of course, we can use the backticks.
5950
03:52:50,800 --> 03:52:52,880
Now the advantage of this backtick is
5951
03:52:52,880 --> 03:52:56,400
since I've taken the prop, I can just use my fillers here
5952
03:52:56,400 --> 03:52:58,200
and can add the class name here.
5953
03:52:58,200 --> 03:53:00,400
Now this is something which user is passing,
5954
03:53:00,400 --> 03:53:02,160
but since this is just a string,
5955
03:53:02,160 --> 03:53:06,480
I can just go ahead and copy my CSS classes that we have.
5956
03:53:06,480 --> 03:53:09,360
So there we go, really basic, absolute, nice.
5957
03:53:09,360 --> 03:53:11,880
Okay, let's go ahead and remove this.
5958
03:53:11,880 --> 03:53:15,440
So this is our basic card that it was designed.
5959
03:53:15,440 --> 03:53:18,360
Let's go ahead and design this class.
5960
03:53:19,080 --> 03:53:21,880
This is also going to have some of the class names.
5961
03:53:21,880 --> 03:53:23,120
Let me grab the class name.
5962
03:53:23,120 --> 03:53:26,120
It's simple with, we want to be half of it.
5963
03:53:26,120 --> 03:53:30,240
So we'll be saying one by two, very basic.
5964
03:53:30,240 --> 03:53:32,520
Then we'll be having some of the labels and input.
5965
03:53:32,520 --> 03:53:37,000
So let's first grab a label and label HTML for,
5966
03:53:37,000 --> 03:53:40,000
we will be injecting some of the JavaScript here in a minute.
5967
03:53:40,000 --> 03:53:41,080
Just wait for it right now.
5968
03:53:41,080 --> 03:53:42,840
We don't want to have it
5969
03:53:42,840 --> 03:53:46,480
or let's just remove the entire HTML for a minute.
5970
03:53:46,480 --> 03:53:48,360
Then we'll talk about the usability
5971
03:53:48,360 --> 03:53:52,160
and how we can actually make it more accessible.
5972
03:53:52,160 --> 03:53:54,560
Okay, we have some classes here as well.
5973
03:53:54,560 --> 03:53:56,960
So let's go ahead and add a class name.
5974
03:53:56,960 --> 03:54:01,200
I'll be adding the class name from my notes, copy and paste.
5975
03:54:01,200 --> 03:54:03,200
Classes, we won't be talking even a tiny bit.
5976
03:54:03,200 --> 03:54:05,260
We'll be always getting it like this.
5977
03:54:05,260 --> 03:54:07,440
And this will be adding as a label.
5978
03:54:07,440 --> 03:54:09,280
Remember, we don't want to hard code it
5979
03:54:09,280 --> 03:54:11,160
because user will be using it this label
5980
03:54:11,160 --> 03:54:14,280
for multiple purpose, maybe from, maybe to.
5981
03:54:14,280 --> 03:54:16,640
Okay, this part is all good.
5982
03:54:16,640 --> 03:54:18,720
Now, once we have this label inside this,
5983
03:54:18,720 --> 03:54:20,080
we want to have an input field.
5984
03:54:20,080 --> 03:54:23,000
So we'll be having an input field just like this.
5985
03:54:23,000 --> 03:54:25,320
And let me just break it onto the next line.
5986
03:54:27,120 --> 03:54:28,040
There we go.
5987
03:54:28,040 --> 03:54:31,800
Now this input field will have a type of number
5988
03:54:31,800 --> 03:54:33,840
because that's what we want.
5989
03:54:33,840 --> 03:54:36,360
Number, there we go.
5990
03:54:36,360 --> 03:54:38,680
Now what else do you want to have into this one?
5991
03:54:38,680 --> 03:54:40,960
There are multiple fields that you want to have.
5992
03:54:40,960 --> 03:54:43,320
First of all, let's take down the obvious ones,
5993
03:54:43,320 --> 03:54:45,120
which is the class names.
5994
03:54:45,120 --> 03:54:47,240
And again, the class names goes as it is,
5995
03:54:47,240 --> 03:54:48,520
whatever we have in notes.
5996
03:54:48,520 --> 03:54:49,680
Don't really care about it.
5997
03:54:49,680 --> 03:54:51,520
Don't want to even talk about it.
5998
03:54:51,520 --> 03:54:52,480
Then we have the type.
5999
03:54:52,480 --> 03:54:55,080
Then obviously let's grab a placeholder value.
6000
03:54:55,080 --> 03:54:57,800
You can grab the placeholder value as whatever you like.
6001
03:54:57,800 --> 03:55:00,120
We'll be just saying it as amount.
6002
03:55:00,120 --> 03:55:02,720
Depends if you want to take this input as well
6003
03:55:02,720 --> 03:55:05,000
from the user, you can take it.
6004
03:55:05,000 --> 03:55:07,400
Right now, if I don't enter anything into this one,
6005
03:55:07,400 --> 03:55:09,480
it is, this one is zero.
6006
03:55:09,480 --> 03:55:11,040
This one actually doesn't do anything.
6007
03:55:11,040 --> 03:55:12,800
So it's always zero, totally up to you.
6008
03:55:12,800 --> 03:55:14,280
If you want to put this placeholder,
6009
03:55:14,280 --> 03:55:16,240
any value or something like that.
6010
03:55:16,240 --> 03:55:21,240
Okay, next up is, is the field disabled or not?
6011
03:55:22,240 --> 03:55:24,680
That depends on amount disabled or not,
6012
03:55:24,680 --> 03:55:27,600
whatever the value you have given by using this one.
6013
03:55:27,600 --> 03:55:30,160
The value, the value is going to be amount.
6014
03:55:30,160 --> 03:55:32,400
Whoever is using it is going to give me.
6015
03:55:32,400 --> 03:55:34,200
But the most important thing is
6016
03:55:34,200 --> 03:55:35,640
if you just keep it as it is,
6017
03:55:35,640 --> 03:55:37,800
then obviously we'll be having some amount,
6018
03:55:37,800 --> 03:55:40,160
but there is nothing which is helping you
6019
03:55:40,160 --> 03:55:41,680
to change these values.
6020
03:55:41,680 --> 03:55:45,440
So what you have to do is this method on amount change
6021
03:55:45,440 --> 03:55:48,040
will be responsible for changing the amount.
6022
03:55:48,040 --> 03:55:49,920
So obviously we have to listen for an event
6023
03:55:49,920 --> 03:55:54,800
which is on change, on change.
6024
03:55:54,800 --> 03:55:56,840
And we have to use this on amount change,
6025
03:55:56,840 --> 03:55:58,320
but we cannot just use it like this.
6026
03:55:58,320 --> 03:55:59,880
Otherwise we are never using the method.
6027
03:55:59,880 --> 03:56:02,680
We have no idea about the functionality or anything of that.
6028
03:56:02,680 --> 03:56:03,640
So just cut this out.
6029
03:56:03,640 --> 03:56:05,920
Here we want to use a callback.
6030
03:56:05,920 --> 03:56:07,520
Let's go with this.
6031
03:56:07,520 --> 03:56:09,000
And obviously we'll be tracking an event.
6032
03:56:09,000 --> 03:56:11,560
So let's just call this one as E for an event.
6033
03:56:12,440 --> 03:56:13,880
And then we have to first make sure
6034
03:56:13,880 --> 03:56:16,480
that we have the presence of this on amount change.
6035
03:56:16,480 --> 03:56:18,960
This could actually make or break your application.
6036
03:56:18,960 --> 03:56:20,280
So for the standard practices,
6037
03:56:20,280 --> 03:56:23,640
such values are being checked first.
6038
03:56:23,640 --> 03:56:26,040
So we'll be checking on amount change.
6039
03:56:26,040 --> 03:56:27,720
If this on amount change exists,
6040
03:56:27,720 --> 03:56:31,440
then we go ahead and say that use this on amount change
6041
03:56:31,440 --> 03:56:34,240
and get an E.target.value.
6042
03:56:34,240 --> 03:56:36,920
But again, there is a problem into this one.
6043
03:56:36,920 --> 03:56:38,520
Whenever you grab the values like this,
6044
03:56:38,520 --> 03:56:41,360
you will be grabbing a string and we don't want a string.
6045
03:56:41,400 --> 03:56:43,760
We want actually a number out of it.
6046
03:56:43,760 --> 03:56:45,920
So before we actually grab it,
6047
03:56:45,920 --> 03:56:48,560
we'll cut this out and we'll be casting this one
6048
03:56:48,560 --> 03:56:51,880
as a number and then E.target.value.
6049
03:56:51,880 --> 03:56:54,040
These are just additional safety checks.
6050
03:56:54,040 --> 03:56:56,200
Nothing to be worried too much.
6051
03:56:56,200 --> 03:56:58,040
We are just trying to make sure that our code
6052
03:56:58,040 --> 03:57:00,560
is as standard as possible.
6053
03:57:00,560 --> 03:57:02,720
And these are only, only safety check.
6054
03:57:02,720 --> 03:57:04,480
If you directly come up here and say E
6055
03:57:04,480 --> 03:57:07,880
and then simply say on amount change E.target.value,
6056
03:57:07,880 --> 03:57:09,840
maybe your application might work
6057
03:57:09,840 --> 03:57:11,600
and eventually you might have to debug,
6058
03:57:11,600 --> 03:57:14,320
but this is a good standard practice that we have.
6059
03:57:14,320 --> 03:57:15,720
All right, so this is all good.
6060
03:57:15,720 --> 03:57:18,320
And now we have to go ahead and work on with this one.
6061
03:57:18,320 --> 03:57:21,120
So this is a part of only having this part,
6062
03:57:21,120 --> 03:57:22,960
the currency, the numbers and everything.
6063
03:57:22,960 --> 03:57:25,080
We have to work on this currency type as well.
6064
03:57:25,080 --> 03:57:27,480
So this is the second portion where we'll be working on.
6065
03:57:27,480 --> 03:57:30,080
So let's just go below this div.
6066
03:57:30,080 --> 03:57:32,160
We need to have another div.
6067
03:57:32,160 --> 03:57:35,360
This one obviously will have first the class names.
6068
03:57:35,360 --> 03:57:37,840
And let me just grab all the classes.
6069
03:57:37,840 --> 03:57:40,320
So this is the right portion that we are working on.
6070
03:57:40,320 --> 03:57:42,040
Notice here, the currency type and USD.
6071
03:57:42,040 --> 03:57:44,320
So this is why we have flex and all of that.
6072
03:57:44,320 --> 03:57:46,800
So the next part is all about it.
6073
03:57:46,800 --> 03:57:48,360
Let me go up here.
6074
03:57:48,360 --> 03:57:51,280
First of all, a simple paragraph that says currency type.
6075
03:57:51,280 --> 03:57:54,400
So nothing extraordinary currency type.
6076
03:57:54,400 --> 03:57:55,680
It always is currency type.
6077
03:57:55,680 --> 03:57:57,920
So we are, we are done with that.
6078
03:57:57,920 --> 03:58:00,280
Now comes up the interesting part is how we are going
6079
03:58:00,280 --> 03:58:03,400
to take care of this USD and all these input values.
6080
03:58:03,400 --> 03:58:05,080
Now this is a select field.
6081
03:58:05,080 --> 03:58:06,960
So let's go ahead and grab a first of all,
6082
03:58:06,960 --> 03:58:08,000
a select field.
6083
03:58:08,000 --> 03:58:09,120
There we go.
6084
03:58:09,120 --> 03:58:11,160
Now in this select field, first and foremost,
6085
03:58:11,160 --> 03:58:13,480
let me just grab on to the next lines.
6086
03:58:14,480 --> 03:58:18,080
And here also you go away.
6087
03:58:18,080 --> 03:58:19,200
Okay.
6088
03:58:19,200 --> 03:58:20,480
First of all, class name,
6089
03:58:20,480 --> 03:58:22,560
because there's a styling involved into this one.
6090
03:58:22,560 --> 03:58:24,400
Not worried about styling, even in case,
6091
03:58:24,400 --> 03:58:25,320
I highly recommend you.
6092
03:58:25,320 --> 03:58:26,560
In fact, you change the styling.
6093
03:58:26,560 --> 03:58:29,000
At least you will be contributing something in the project.
6094
03:58:29,000 --> 03:58:30,680
Your hands will work onto the keyboard
6095
03:58:30,680 --> 03:58:32,240
and that's always a good thing.
6096
03:58:32,240 --> 03:58:33,800
Now what should be the value?
6097
03:58:33,800 --> 03:58:36,960
The value should be based on the select currency
6098
03:58:36,960 --> 03:58:39,240
that we have, a selected currency.
6099
03:58:39,240 --> 03:58:41,760
Notice here, we have the selected currency.
6100
03:58:41,760 --> 03:58:44,160
As of now, we are taking this as USD by default,
6101
03:58:44,160 --> 03:58:46,440
but users should be able to allow it and change this one,
6102
03:58:46,440 --> 03:58:49,560
but we are happy with this selected currency as of now.
6103
03:58:49,560 --> 03:58:51,520
What happens with the on change?
6104
03:58:53,560 --> 03:58:54,400
There we go.
6105
03:58:54,400 --> 03:58:57,280
Now again, you might have noticed the exact same pattern
6106
03:58:57,280 --> 03:58:58,120
that we are following.
6107
03:58:58,120 --> 03:59:00,000
We will be following this one as well.
6108
03:59:00,000 --> 03:59:01,520
Here we chose an event.
6109
03:59:01,520 --> 03:59:04,560
We said that whether this on currency change method
6110
03:59:04,560 --> 03:59:07,040
is available to us or not, and based on that will work.
6111
03:59:07,040 --> 03:59:08,600
So very repeatable pattern.
6112
03:59:08,600 --> 03:59:11,320
So yes, we'll be seeing very standardized code
6113
03:59:11,320 --> 03:59:13,160
in this entire series.
6114
03:59:13,160 --> 03:59:14,280
So we have this event.
6115
03:59:14,280 --> 03:59:15,920
After that, we go ahead and check.
6116
03:59:15,920 --> 03:59:18,120
Do we have this on currency change?
6117
03:59:18,120 --> 03:59:19,880
If we have this, then we go ahead
6118
03:59:19,880 --> 03:59:22,200
and use the second part of it,
6119
03:59:22,200 --> 03:59:24,600
which is on currency change,
6120
03:59:24,600 --> 03:59:27,600
and we simply go ahead and grab the e.target.value.
6121
03:59:27,600 --> 03:59:29,840
Here, we don't need any number casting or anything
6122
03:59:29,840 --> 03:59:32,360
because these are just strings, all right.
6123
03:59:32,360 --> 03:59:36,000
Okay, next up, is this field enabled or disabled?
6124
03:59:36,000 --> 03:59:38,840
That maybe you want to design an application
6125
03:59:38,840 --> 03:59:41,640
which is disabled, having these field disabled,
6126
03:59:41,640 --> 03:59:45,280
but in our case, disabled currency disabled is mostly false,
6127
03:59:45,280 --> 03:59:47,720
but maybe you don't want user to change this type.
6128
03:59:47,720 --> 03:59:50,240
It's always USD to INR or INR to USD.
6129
03:59:50,240 --> 03:59:51,400
Maybe that's the case.
6130
03:59:51,400 --> 03:59:53,400
So we are just taking care of that.
6131
03:59:53,400 --> 03:59:55,880
Okay, select field alone doesn't work.
6132
03:59:55,880 --> 03:59:59,160
So we need to have these options getting inside this one.
6133
04:00:00,320 --> 04:00:01,720
For these options,
6134
04:00:01,720 --> 04:00:03,480
we obviously have to loop through the values.
6135
04:00:03,480 --> 04:00:05,400
So we'll be using our JavaScript here,
6136
04:00:05,400 --> 04:00:06,880
and inside this, we'll be saying,
6137
04:00:06,880 --> 04:00:09,840
hey, all the currency options that you are providing to us,
6138
04:00:09,840 --> 04:00:12,840
remember currency options is an array in case you forget.
6139
04:00:12,840 --> 04:00:15,040
This is the currency option, which is an array.
6140
04:00:15,040 --> 04:00:16,720
I want to loop through this value.
6141
04:00:16,720 --> 04:00:18,080
Looping is pretty simple.
6142
04:00:18,080 --> 04:00:21,080
I just have to say .map, and there we go.
6143
04:00:21,080 --> 04:00:21,920
This is my map.
6144
04:00:21,920 --> 04:00:23,360
Inside the map, I'll get a callback.
6145
04:00:23,360 --> 04:00:25,560
So let's go ahead and grab a callback.
6146
04:00:25,560 --> 04:00:27,000
No problem at all.
6147
04:00:27,000 --> 04:00:29,760
And in each of this, you will get a currency.
6148
04:00:29,760 --> 04:00:33,680
So let's just call this one as currency.
6149
04:00:33,680 --> 04:00:35,880
Now with each of the currency, what we'll be doing,
6150
04:00:35,880 --> 04:00:37,320
instead of using curly braces,
6151
04:00:37,320 --> 04:00:38,560
I'll be using parenthesis
6152
04:00:38,560 --> 04:00:40,160
so that I don't have to return anything.
6153
04:00:40,160 --> 04:00:41,560
I'll just go inside this,
6154
04:00:41,560 --> 04:00:44,200
and we'll say that I'll get an option.
6155
04:00:44,200 --> 04:00:46,960
So option and thank you.
6156
04:00:46,960 --> 04:00:48,520
The key is going to be currency
6157
04:00:48,520 --> 04:00:52,960
because we know that our API actually gives us these values.
6158
04:00:52,960 --> 04:00:55,680
And each of these values are actually in itself unique.
6159
04:00:55,680 --> 04:00:57,760
So we don't have to worry about it.
6160
04:00:57,760 --> 04:00:59,800
All the options that we get into the array,
6161
04:00:59,800 --> 04:01:02,480
we will be crafting and designing that in such a way
6162
04:01:02,480 --> 04:01:04,720
that each of the currency is unique in itself.
6163
04:01:04,720 --> 04:01:06,240
The value is going to be currency,
6164
04:01:06,240 --> 04:01:08,960
and this one is also going to be currency, too many currency,
6165
04:01:08,960 --> 04:01:11,520
but this is how exactly options and everything works.
6166
04:01:11,520 --> 04:01:13,680
Remember, a lot of people did the mistake
6167
04:01:13,680 --> 04:01:15,200
when I was teaching it earlier.
6168
04:01:15,200 --> 04:01:17,240
A lot of people just use the curly braces here,
6169
04:01:17,240 --> 04:01:19,240
so make sure you don't do the mistake.
6170
04:01:20,920 --> 04:01:22,760
All right.
6171
04:01:22,760 --> 04:01:25,080
So this seems like a very nice approach
6172
04:01:25,080 --> 04:01:27,920
that we have taken of designing an input.
6173
04:01:27,920 --> 04:01:30,240
One more feature I would like to discuss,
6174
04:01:30,240 --> 04:01:31,960
not a feature but a standard practice
6175
04:01:31,960 --> 04:01:34,040
that is used quite a lot,
6176
04:01:34,040 --> 04:01:35,960
is once you have designed these components,
6177
04:01:35,960 --> 04:01:39,640
you actually have these index file into these components,
6178
04:01:39,640 --> 04:01:42,200
not necessarily, but usually you have.
6179
04:01:42,200 --> 04:01:44,560
All you do in these files is actually you go ahead
6180
04:01:44,560 --> 04:01:47,640
and import these input boxes like this,
6181
04:01:47,640 --> 04:01:52,120
and just go ahead and export like this input box.
6182
04:01:52,120 --> 04:01:54,440
The advantage of this is I don't have to actually go
6183
04:01:54,440 --> 04:01:56,320
individually in each of the component.
6184
04:01:56,320 --> 04:01:59,440
All I have to do is import the components, this index file,
6185
04:01:59,440 --> 04:02:02,600
and I can bring in any component in this one.
6186
04:02:02,600 --> 04:02:04,200
Maybe later on when we'll be designing,
6187
04:02:04,200 --> 04:02:05,680
of course we'll be designing.
6188
04:02:05,680 --> 04:02:08,840
There might be five, 10, 15 components in each one of them.
6189
04:02:08,840 --> 04:02:11,960
Having all of them listed in index is actually a better thing.
6190
04:02:11,960 --> 04:02:13,200
So that's what we'll be using.
6191
04:02:13,200 --> 04:02:14,440
Nothing too much to be worried,
6192
04:02:14,440 --> 04:02:16,960
but yeah, these kinds of things do exist.
6193
04:02:16,960 --> 04:02:18,200
All right.
6194
04:02:18,200 --> 04:02:21,280
Moving on, let's take care of the URL part.
6195
04:02:21,280 --> 04:02:23,880
So we have this URL we'll be working on with this one,
6196
04:02:23,880 --> 04:02:25,880
but the way how we are going to take care of this one
6197
04:02:25,880 --> 04:02:28,120
is via designing our own custom hook.
6198
04:02:28,120 --> 04:02:31,840
You can of course do all of this into your use effect hook,
6199
04:02:31,840 --> 04:02:34,240
into the app.js as well,
6200
04:02:34,240 --> 04:02:37,000
but there's so much of the things that we actually require
6201
04:02:37,000 --> 04:02:38,920
from this that I don't want to do all of this mess
6202
04:02:38,920 --> 04:02:42,560
into app.js, rather I prefer to do all of this
6203
04:02:42,560 --> 04:02:44,760
into a separate customized hook.
6204
04:02:44,760 --> 04:02:47,000
By using that hook, I will return the data,
6205
04:02:47,000 --> 04:02:48,620
whatever is required.
6206
04:02:48,620 --> 04:02:50,520
All right, so let's go ahead, right click,
6207
04:02:50,520 --> 04:02:54,480
create a folder, and we'll be calling this one as hooks.
6208
04:02:54,480 --> 04:02:56,440
It's totally up to you how and what you want
6209
04:02:56,440 --> 04:02:57,920
to name this one.
6210
04:02:57,920 --> 04:03:01,460
The only kind of a standard practice is to use,
6211
04:03:01,460 --> 04:03:04,120
use before hooks, too many use.
6212
04:03:04,120 --> 04:03:07,400
Use, use effect, use callback, whatever that is.
6213
04:03:07,400 --> 04:03:12,080
In this case, we will be using use currency info.
6214
04:03:12,080 --> 04:03:15,440
That is our hook, use currency info.js.
6215
04:03:15,440 --> 04:03:18,800
And now what we have is we'll be, we just write simple,
6216
04:03:18,800 --> 04:03:21,600
this hook is actually nothing more than a function.
6217
04:03:21,600 --> 04:03:25,360
So use your classic react, use your classic JavaScript,
6218
04:03:25,360 --> 04:03:28,080
fetch the API, get the data, and return the value.
6219
04:03:28,080 --> 04:03:31,440
That is it, that is literally your hook.
6220
04:03:31,440 --> 04:03:32,800
So we'll be needing some of the stuff.
6221
04:03:32,800 --> 04:03:35,120
Obviously we'll be needing use effect
6222
04:03:35,120 --> 04:03:37,260
and we'll be needing use a state, of course.
6223
04:03:38,240 --> 04:03:41,400
All right, now let's just go ahead and simply say,
6224
04:03:41,400 --> 04:03:43,360
hey, we'll be having a function.
6225
04:03:43,360 --> 04:03:47,380
That function will be use currency info.
6226
04:03:47,380 --> 04:03:50,140
Nice, all of this is provided to me,
6227
04:03:50,140 --> 04:03:52,180
but I'll be writing that anyways.
6228
04:03:52,180 --> 04:03:54,100
So use currency info is my hook.
6229
04:03:54,100 --> 04:03:56,140
And after that, we'll be saying export default,
6230
04:03:56,140 --> 04:03:57,340
use currency info.
6231
04:03:57,340 --> 04:03:58,500
That is all good.
6232
04:03:58,500 --> 04:04:00,980
Now, how we are going to go ahead and work on with this.
6233
04:04:00,980 --> 04:04:03,860
First of all, whatever the data is I'm getting retrieving
6234
04:04:03,860 --> 04:04:06,020
from the API call, I need to store that.
6235
04:04:06,020 --> 04:04:08,180
So for that, I'll be saying that let's call this one
6236
04:04:08,180 --> 04:04:12,380
as data, set data, and by default, this is not an array.
6237
04:04:12,380 --> 04:04:13,700
That is a wrong suggestion here.
6238
04:04:13,700 --> 04:04:15,620
If you notice, this is an object.
6239
04:04:15,620 --> 04:04:17,540
Notice here, this whole thing is an object
6240
04:04:17,540 --> 04:04:19,340
and I want to store this object up here.
6241
04:04:19,340 --> 04:04:21,340
So we'll be working on with that.
6242
04:04:21,340 --> 04:04:24,500
Okay, now how can I go ahead and fire this up?
6243
04:04:24,500 --> 04:04:26,460
As soon as somebody uses this hook,
6244
04:04:26,460 --> 04:04:28,620
so as soon as this hook will mount.
6245
04:04:28,620 --> 04:04:31,220
So again, this hook is nothing more than just a function,
6246
04:04:31,220 --> 04:04:33,940
just like your app.js is a component it mounts,
6247
04:04:33,940 --> 04:04:35,380
this hook will also mount.
6248
04:04:35,380 --> 04:04:38,180
So I can go ahead and use a use effect here.
6249
04:04:38,180 --> 04:04:40,980
And we use a use effect snippets right now
6250
04:04:40,980 --> 04:04:42,900
on which you are dependent.
6251
04:04:42,900 --> 04:04:44,820
You are dependent on a couple of values,
6252
04:04:44,820 --> 04:04:47,060
but oh, one more thing.
6253
04:04:47,060 --> 04:04:50,260
Whenever whoever is using this use currency info,
6254
04:04:50,260 --> 04:04:52,300
he needs to provide me the currency.
6255
04:04:53,820 --> 04:04:55,980
Otherwise, how will I know that in what currency
6256
04:04:55,980 --> 04:04:56,860
you are looking for data?
6257
04:04:56,860 --> 04:04:59,180
Because my API looks for INR as well,
6258
04:04:59,180 --> 04:05:01,420
it looks for the USD as well.
6259
04:05:01,420 --> 04:05:03,300
So you need to provide me at least one data
6260
04:05:03,300 --> 04:05:05,900
that based on this, I want to call the API.
6261
04:05:05,900 --> 04:05:07,520
So once you have this currency,
6262
04:05:08,460 --> 04:05:10,420
I'll first remove all of this part.
6263
04:05:10,420 --> 04:05:12,620
It's not, it's a boilerplate code.
6264
04:05:12,620 --> 04:05:14,420
And I'll also remove this third,
6265
04:05:14,420 --> 04:05:15,940
which is boilerplate code.
6266
04:05:15,940 --> 04:05:19,620
Now anytime, anything changes INR to let's just say USD,
6267
04:05:19,620 --> 04:05:22,140
I obviously want to refetch the request.
6268
04:05:22,140 --> 04:05:24,020
So the dependency of this use effect
6269
04:05:24,020 --> 04:05:25,260
is obviously the currency.
6270
04:05:25,260 --> 04:05:28,380
Any change in the currency, I want to refire this one.
6271
04:05:28,380 --> 04:05:30,080
For here, I can use XCOs as well.
6272
04:05:30,080 --> 04:05:31,620
I would prefer to use XCOs,
6273
04:05:31,620 --> 04:05:35,020
but in this case, I'll be using just the fetch.
6274
04:05:35,020 --> 04:05:37,140
So I'll be saying fetch just like this.
6275
04:05:37,140 --> 04:05:39,440
You can await, use however you like.
6276
04:05:39,440 --> 04:05:41,180
I'll be using backticks in this one.
6277
04:05:41,180 --> 04:05:44,020
Now just go ahead and copy this data
6278
04:05:44,020 --> 04:05:45,700
and I'll paste this one.
6279
04:05:45,700 --> 04:05:48,860
The only thing that I have to do is just change this USD.
6280
04:05:48,860 --> 04:05:51,600
That's exactly what I was changing in the URL as well.
6281
04:05:51,600 --> 04:05:54,020
So let's just inject our variable just like this,
6282
04:05:54,020 --> 04:05:56,380
absolute basic and just add a currency.
6283
04:05:56,380 --> 04:05:57,620
Whoever is calling this hook
6284
04:05:57,620 --> 04:05:59,280
as actually passing me this variable.
6285
04:05:59,280 --> 04:06:01,220
So no problem at all.
6286
04:06:01,220 --> 04:06:03,900
Now, once we have this, then obviously based on this,
6287
04:06:03,900 --> 04:06:06,940
we'll be having a .then or .catch, whatever.
6288
04:06:06,940 --> 04:06:08,620
So we'll be using a .then.
6289
04:06:08,620 --> 04:06:11,220
Inside the .den, we will be having a callback.
6290
04:06:11,220 --> 04:06:13,180
So just like this, there we go.
6291
04:06:13,180 --> 04:06:15,240
And we will have a response.
6292
04:06:15,240 --> 04:06:17,540
This response needs to be converted into JSON
6293
04:06:17,540 --> 04:06:19,980
because sadly I'm not using an XCOs.
6294
04:06:19,980 --> 04:06:21,420
I'll walk you through with the XCOs as well.
6295
04:06:21,420 --> 04:06:23,180
That's much, much better.
6296
04:06:23,180 --> 04:06:25,860
I don't have to do this JSON conversion and everything.
6297
04:06:25,860 --> 04:06:28,780
After this chaining, we need to further chain on one more
6298
04:06:28,780 --> 04:06:30,820
because that's where we actually get our data.
6299
04:06:30,820 --> 04:06:33,540
So we can call it with any other name as well.
6300
04:06:33,540 --> 04:06:35,580
I'll call this one again as a response.
6301
04:06:35,580 --> 04:06:36,940
And once we have this response,
6302
04:06:36,940 --> 04:06:40,820
we'll be fetching this entire response into the set data,
6303
04:06:40,820 --> 04:06:42,940
the data, the state that we have designed.
6304
04:06:42,940 --> 04:06:46,420
And inside this one, most importantly,
6305
04:06:46,420 --> 04:06:48,820
I cannot just go ahead and say set data like this.
6306
04:06:48,820 --> 04:06:50,980
Of course, this is a method, but what data?
6307
04:06:50,980 --> 04:06:52,900
If you notice here,
6308
04:06:52,900 --> 04:06:55,280
this is exactly I don't want to fetch it entirely
6309
04:06:55,280 --> 04:06:57,980
because this also includes this date component.
6310
04:06:57,980 --> 04:07:02,980
I want to insert only one key there, whose value is USD.
6311
04:07:03,060 --> 04:07:06,260
So I want to insert the data from the key of USD
6312
04:07:06,260 --> 04:07:08,900
and this whole thing I want to inject, not the date.
6313
04:07:08,900 --> 04:07:11,140
So for this, I can actually go ahead and access.
6314
04:07:11,140 --> 04:07:13,980
So all this response, this whole response is.
6315
04:07:13,980 --> 04:07:16,780
So from this response, whatever that is,
6316
04:07:16,780 --> 04:07:19,420
I want to just go ahead and provide this USD.
6317
04:07:19,420 --> 04:07:22,980
So there we go, USD, but this USD changes based on INR.
6318
04:07:22,980 --> 04:07:24,580
If we have INR, this changes.
6319
04:07:24,580 --> 04:07:26,120
So this is exactly the currency.
6320
04:07:26,120 --> 04:07:29,340
I can go ahead and paste this currency, cool.
6321
04:07:29,340 --> 04:07:31,140
Okay, so this one is nice.
6322
04:07:33,380 --> 04:07:34,700
All right.
6323
04:07:34,700 --> 04:07:36,300
So all we have got this one.
6324
04:07:36,300 --> 04:07:39,340
Now, now what we want to do is,
6325
04:07:39,340 --> 04:07:41,060
whoever is using this hook,
6326
04:07:41,060 --> 04:07:43,400
we actually need to return the data to him.
6327
04:07:44,340 --> 04:07:47,100
And what we are returning back, if you notice it closely,
6328
04:07:47,100 --> 04:07:49,820
we are returning all of this guy here.
6329
04:07:49,820 --> 04:07:51,260
So this is again an object,
6330
04:07:51,260 --> 04:07:53,020
but in this object we have key values.
6331
04:07:53,020 --> 04:07:56,540
So 00, Lynch, whatever that currency is.
6332
04:07:56,540 --> 04:07:58,540
I have been to most of these countries
6333
04:07:58,540 --> 04:08:01,620
and trust me, I have traveled around 40 countries.
6334
04:08:01,620 --> 04:08:03,020
A lot of them, I don't know.
6335
04:08:03,060 --> 04:08:04,980
Okay, so this is what we have.
6336
04:08:04,980 --> 04:08:06,300
So as you might have noticed,
6337
04:08:06,300 --> 04:08:09,440
the designing the custom hook is not that much bad.
6338
04:08:09,440 --> 04:08:10,700
It's actually pretty easy.
6339
04:08:10,700 --> 04:08:12,420
This is just a basic function.
6340
04:08:12,420 --> 04:08:15,660
We could have done this all into app.js as well,
6341
04:08:15,660 --> 04:08:18,820
but this would have unnecessarily just complicated the stuff
6342
04:08:18,820 --> 04:08:21,480
into the same file and segregating your logic
6343
04:08:21,480 --> 04:08:23,060
is always a good idea.
6344
04:08:23,060 --> 04:08:24,860
And by the way, in case you want to have this,
6345
04:08:24,860 --> 04:08:29,460
there is absolutely no shame in just console logging the data.
6346
04:08:29,460 --> 04:08:31,100
In fact, when you are learning the things,
6347
04:08:31,100 --> 04:08:33,900
it's a good idea to logging every single thing,
6348
04:08:33,900 --> 04:08:35,980
finding its data type, finding its value.
6349
04:08:35,980 --> 04:08:38,380
I encourage that quite a lot.
6350
04:08:38,380 --> 04:08:41,660
Okay, so, so far all good.
6351
04:08:41,660 --> 04:08:45,180
Now let's go back into the app.jsx.
6352
04:08:45,180 --> 04:08:46,580
Finally, we are in here.
6353
04:08:46,580 --> 04:08:48,860
And now let's take care of a lot of things
6354
04:08:48,860 --> 04:08:51,060
because all the things are actually dependent
6355
04:08:51,060 --> 04:08:53,140
on a lot of the things that we are doing.
6356
04:08:53,140 --> 04:08:54,820
For example, this input box,
6357
04:08:54,820 --> 04:08:56,740
from where you're going to give me this label amount,
6358
04:08:56,740 --> 04:08:59,420
all of that, some place you need to give it to me.
6359
04:08:59,540 --> 04:09:02,060
And that place is basically your app.js.
6360
04:09:02,060 --> 04:09:03,980
So this is where we'll be going through.
6361
04:09:03,980 --> 04:09:05,700
Okay, let's design a lot of states.
6362
04:09:05,700 --> 04:09:10,140
So we'll be getting an amount and set amount.
6363
04:09:10,140 --> 04:09:11,820
Okay, we'll be getting a use state.
6364
04:09:11,820 --> 04:09:13,100
Okay, cool.
6365
04:09:13,100 --> 04:09:15,060
We also need to get a from.
6366
04:09:15,060 --> 04:09:16,740
So we'll be saying from.
6367
04:09:18,140 --> 04:09:21,420
And this one is going to be set from,
6368
04:09:21,420 --> 04:09:23,100
by default it will be USD.
6369
04:09:23,100 --> 04:09:24,780
We also need to have a to.
6370
04:09:24,780 --> 04:09:27,980
So set to, set to is no, not Euro, not Euro.
6371
04:09:27,980 --> 04:09:29,260
That's very expensive.
6372
04:09:30,260 --> 04:09:32,780
Of course, I live in India, I'll go with the INR.
6373
04:09:32,780 --> 04:09:36,260
Then we also need to give the converted amount as well.
6374
04:09:36,260 --> 04:09:41,100
And this will be converted amount.
6375
04:09:41,100 --> 04:09:43,100
And that will be set converted amount.
6376
04:09:43,100 --> 04:09:45,660
By default, it will be Zuri, zero, not Zuri.
6377
04:09:46,580 --> 04:09:48,300
Okay, so this is the converted amount.
6378
04:09:48,300 --> 04:09:50,980
This is what we will be filling the data up here.
6379
04:09:50,980 --> 04:09:53,940
Okay, and a couple of more things.
6380
04:09:53,940 --> 04:09:56,380
Actually, I forgot one thing to actually discuss with you.
6381
04:09:56,380 --> 04:09:57,740
I should have discussed that earlier,
6382
04:09:57,740 --> 04:10:00,260
but let's go back onto the input box.
6383
04:10:00,260 --> 04:10:02,460
Now this is something which is not really necessary,
6384
04:10:02,460 --> 04:10:04,220
but still I'll discuss this.
6385
04:10:04,220 --> 04:10:06,380
I'll talk a tiny bit about it.
6386
04:10:06,380 --> 04:10:08,420
There is one more thing that we can do
6387
04:10:08,420 --> 04:10:10,420
is make it a little bit more accessible.
6388
04:10:10,420 --> 04:10:11,820
Although it is not required,
6389
04:10:11,820 --> 04:10:14,380
but we can actually do a tiny bit more.
6390
04:10:14,380 --> 04:10:17,140
Now we know that we have a lot of options
6391
04:10:17,140 --> 04:10:19,660
that are going on into this one.
6392
04:10:19,660 --> 04:10:21,780
And for all of these options,
6393
04:10:21,780 --> 04:10:24,260
notice here we are having this label as well.
6394
04:10:24,260 --> 04:10:26,420
So this label, if I click on the form,
6395
04:10:26,420 --> 04:10:28,260
it highlights this input field.
6396
04:10:28,260 --> 04:10:29,900
So how can I go ahead and take this one?
6397
04:10:29,900 --> 04:10:33,220
Because right now that's not working in our case.
6398
04:10:33,220 --> 04:10:34,980
In this case, we have a label,
6399
04:10:34,980 --> 04:10:37,020
but it doesn't have an HTML4.
6400
04:10:37,020 --> 04:10:39,340
And in this, we also don't have anything.
6401
04:10:39,340 --> 04:10:41,380
Now there are a couple of ways how we can do it.
6402
04:10:41,380 --> 04:10:45,260
First of all, we can just go ahead and say HTML4.
6403
04:10:46,420 --> 04:10:48,420
Okay, no suggestions.
6404
04:10:48,420 --> 04:10:51,260
And we can just go ahead and design a simple variable,
6405
04:10:51,260 --> 04:10:52,820
or we can just give it a name itself.
6406
04:10:52,820 --> 04:10:57,820
HTML4 is currency like this, of course, in double quotes.
6407
04:11:00,980 --> 04:11:02,100
There we go.
6408
04:11:02,100 --> 04:11:03,820
And similarly in the input also,
6409
04:11:03,820 --> 04:11:06,020
we can give that, hey, what's the ID of this one?
6410
04:11:06,020 --> 04:11:07,980
So HTML4 and this one is ID,
6411
04:11:07,980 --> 04:11:10,180
because these are actually interrelated.
6412
04:11:10,180 --> 04:11:11,700
We can give a currency.
6413
04:11:11,700 --> 04:11:13,460
This will do most of our job.
6414
04:11:13,460 --> 04:11:16,740
We don't need to actually worry too much about it.
6415
04:11:16,740 --> 04:11:19,380
But you will notice in a lot of production grade code,
6416
04:11:19,380 --> 04:11:21,980
especially the fan companies and big shots,
6417
04:11:21,980 --> 04:11:25,620
they actually use something known as use ID.
6418
04:11:25,620 --> 04:11:27,100
Yes, there is another hook.
6419
04:11:27,100 --> 04:11:30,620
The whole idea behind use ID is to generate unique IDs.
6420
04:11:30,620 --> 04:11:33,260
Yes, that is by default in now in React.
6421
04:11:33,260 --> 04:11:35,540
And you'll see a lot of people use it in this format.
6422
04:11:35,540 --> 04:11:38,060
So once I go back in before the return,
6423
04:11:38,060 --> 04:11:40,740
I can just go ahead and say const ID as use ID.
6424
04:11:40,740 --> 04:11:43,260
Now it generates unique ID for me.
6425
04:11:43,260 --> 04:11:45,460
And all I have to do is just inject this ID here
6426
04:11:45,460 --> 04:11:46,300
instead of currency.
6427
04:11:46,300 --> 04:11:47,900
I could have done that with the currency as well,
6428
04:11:47,900 --> 04:11:51,060
but hey, this is how a lot of people does.
6429
04:11:51,060 --> 04:11:52,540
So I just want to show you that yes,
6430
04:11:52,540 --> 04:11:54,820
this is also a good practice.
6431
04:11:54,820 --> 04:11:56,220
How much value does it add?
6432
04:11:56,220 --> 04:11:58,980
I don't know, you decided, but yes, this is a common thing.
6433
04:11:58,980 --> 04:12:00,260
So I just wanted to have it.
6434
04:12:00,260 --> 04:12:02,260
We have it in the notes to be discussed
6435
04:12:02,260 --> 04:12:06,580
in this entire bootcamp, but yeah, pretty good, pretty good.
6436
04:12:06,580 --> 04:12:08,700
Okay, moving back, coming on to this one.
6437
04:12:08,700 --> 04:12:11,060
So we have a lot of converted and all of this.
6438
04:12:11,060 --> 04:12:15,420
Now, coming back onto this use currency info,
6439
04:12:15,420 --> 04:12:17,500
we have designed a hook for this one.
6440
04:12:17,500 --> 04:12:19,540
This hook returns me a data.
6441
04:12:19,540 --> 04:12:22,820
So how can I go ahead and use the value of it?
6442
04:12:22,820 --> 04:12:24,540
Okay, let me show you.
6443
04:12:24,540 --> 04:12:26,460
Almost all of the hooks that you have seen
6444
04:12:26,460 --> 04:12:29,380
is just a function and it returns some values
6445
04:12:29,380 --> 04:12:32,540
and we stored that value into some variables,
6446
04:12:32,540 --> 04:12:34,660
arrays, objects, whatever that is.
6447
04:12:34,660 --> 04:12:37,140
Exactly like this, we'll be having these things.
6448
04:12:37,140 --> 04:12:39,300
So what we'll be saying is
6449
04:12:39,300 --> 04:12:43,740
I want to have this use currency info by the way,
6450
04:12:43,740 --> 04:12:47,660
please import this however you like, I like this one.
6451
04:12:47,660 --> 04:12:49,580
So this is my use currency info.
6452
04:12:49,580 --> 04:12:51,300
This hook requires a default value.
6453
04:12:51,300 --> 04:12:53,740
So I can just go ahead and pass on a USD,
6454
04:12:53,740 --> 04:12:56,020
but why to pass a USD like this
6455
04:12:56,020 --> 04:12:58,300
when we have all of this being set in this from?
6456
04:12:58,300 --> 04:13:00,700
So let's go ahead and remove this instead of hard coding.
6457
04:13:00,700 --> 04:13:03,900
Let's go ahead and do from, no suggestions.
6458
04:13:03,900 --> 04:13:05,700
Thank you, wrong suggestions.
6459
04:13:05,700 --> 04:13:08,180
Now just hold the entire thing into a variable
6460
04:13:08,180 --> 04:13:13,180
and we'll be calling this one as currency data
6461
04:13:13,180 --> 04:13:15,300
or currency info would be good.
6462
04:13:15,300 --> 04:13:17,100
That's it, we have designed a hook
6463
04:13:17,180 --> 04:13:19,060
and you have stored all the information.
6464
04:13:19,060 --> 04:13:22,500
Always remember what information is coming up to your data.
6465
04:13:22,500 --> 04:13:24,340
See, most of the errors actually come up
6466
04:13:24,340 --> 04:13:26,620
even in production grade still, it's been 12 years,
6467
04:13:26,620 --> 04:13:28,060
still most of the errors that I do
6468
04:13:28,060 --> 04:13:31,500
is wrongfully judging what type of data that is coming up.
6469
04:13:31,500 --> 04:13:34,220
Here it looks like that use state is an object and stuff,
6470
04:13:34,220 --> 04:13:36,820
but you need to be 100% sure that the data,
6471
04:13:36,820 --> 04:13:38,340
this data when it comes to here
6472
04:13:38,340 --> 04:13:40,820
and is being called as currency info, what is this?
6473
04:13:40,820 --> 04:13:42,820
This is an object, this is an array, this is a number,
6474
04:13:42,820 --> 04:13:45,820
whatever that is, be 100% sure about it.
6475
04:13:45,980 --> 04:13:48,340
And that is why a lot of people prefer to use TypeScript
6476
04:13:48,340 --> 04:13:50,940
just to be safe that what kind of data
6477
04:13:50,940 --> 04:13:52,300
is coming into the picture.
6478
04:13:52,300 --> 04:13:54,580
All right, enough of the site talks.
6479
04:13:54,580 --> 04:13:55,700
These are experienced talks,
6480
04:13:55,700 --> 04:13:58,540
I think these talks actually add value.
6481
04:13:58,540 --> 04:14:01,060
Okay, now we need to grab options.
6482
04:14:01,060 --> 04:14:01,980
Why options?
6483
04:14:01,980 --> 04:14:03,700
Why are you grabbing options?
6484
04:14:03,700 --> 04:14:07,540
Because if you remember, I have this USD as a long list
6485
04:14:07,540 --> 04:14:11,460
and I need to extract this, just a second,
6486
04:14:11,460 --> 04:14:13,540
I need to extract all these keys from it.
6487
04:14:13,540 --> 04:14:15,260
So these keys are important for me
6488
04:14:15,380 --> 04:14:19,660
and these keys are actually option in my input box.
6489
04:14:19,660 --> 04:14:22,580
Yeah, that's why I'm pulling out all these options.
6490
04:14:22,580 --> 04:14:25,100
And turns out pulling out this one is actually piece of cake
6491
04:14:25,100 --> 04:14:26,820
if you have studied JavaScript.
6492
04:14:26,820 --> 04:14:30,140
So object has a method of .keys and inside this keys,
6493
04:14:30,140 --> 04:14:31,340
I can just go ahead and say,
6494
04:14:31,340 --> 04:14:34,900
hey, I'll grab the keys from currency info.
6495
04:14:34,900 --> 04:14:36,660
No need to add rates or anything like that.
6496
04:14:36,660 --> 04:14:39,380
That is it, I have my keys.
6497
04:14:39,380 --> 04:14:40,300
All right, pretty good.
6498
04:14:40,300 --> 04:14:43,220
Now I have my options and all these values being designed,
6499
04:14:43,220 --> 04:14:45,100
nicely added and all of that.
6500
04:14:45,100 --> 04:14:48,020
Now, what happens when you actually go ahead
6501
04:14:48,020 --> 04:14:49,660
and actually click on convert?
6502
04:14:49,660 --> 04:14:52,460
Actually, to be honest, nothing happens.
6503
04:14:52,460 --> 04:14:54,380
You already have all the information with you,
6504
04:14:54,380 --> 04:14:57,940
you have your amount, you have your currency info as well
6505
04:14:57,940 --> 04:15:01,260
and in whatever the currency you want to convert,
6506
04:15:01,260 --> 04:15:02,300
you can just grab it.
6507
04:15:02,300 --> 04:15:04,820
Now you have all the options available for you.
6508
04:15:04,820 --> 04:15:07,380
So from this entire currency info,
6509
04:15:07,380 --> 04:15:08,900
you want to find out INR,
6510
04:15:08,900 --> 04:15:11,220
how you will find INR from here,
6511
04:15:11,220 --> 04:15:14,220
just by searching for INR.
6512
04:15:14,220 --> 04:15:17,060
So if I search for INR, that's available to me.
6513
04:15:17,060 --> 04:15:20,020
Similarly, if I have to write a function for this,
6514
04:15:20,020 --> 04:15:21,980
it's super, super easy.
6515
04:15:21,980 --> 04:15:24,140
Let's just go ahead and call this one as convert.
6516
04:15:24,140 --> 04:15:25,140
There we go.
6517
04:15:25,140 --> 04:15:26,420
How do I do the conversion?
6518
04:15:26,420 --> 04:15:27,660
It's super simple.
6519
04:15:27,660 --> 04:15:29,580
Use first of all, set converted amount
6520
04:15:29,580 --> 04:15:32,020
because that's what this is, converted amount.
6521
04:15:32,020 --> 04:15:34,420
And all you have to do is take this amount,
6522
04:15:34,420 --> 04:15:36,620
whatever the user has given to you
6523
04:15:36,620 --> 04:15:39,220
and multiply it by the currency info,
6524
04:15:39,220 --> 04:15:41,340
which holds all of these keys
6525
04:15:41,340 --> 04:15:45,580
and multiply by it's whenever we say square brackets true.
6526
04:15:45,580 --> 04:15:46,420
And by the way,
6527
04:15:46,420 --> 04:15:49,500
you can access objects with the dot notation
6528
04:15:49,500 --> 04:15:51,140
as well as with the square notation,
6529
04:15:51,140 --> 04:15:53,260
just giving you too much of information.
6530
04:15:53,260 --> 04:15:55,500
And in this, I'm just setting it to INR.
6531
04:15:55,500 --> 04:15:57,340
So I'll just find this value and this number
6532
04:15:57,340 --> 04:15:58,660
and I'll multiply it by that.
6533
04:15:58,660 --> 04:15:59,820
So that is it.
6534
04:15:59,820 --> 04:16:02,340
Told you, super, super simple.
6535
04:16:02,340 --> 04:16:04,300
By the way, we have this also method.
6536
04:16:04,300 --> 04:16:05,940
Let's design this, which is swap,
6537
04:16:05,940 --> 04:16:07,540
which just swaps the value.
6538
04:16:07,540 --> 04:16:08,980
And you might have already guessed that
6539
04:16:08,980 --> 04:16:10,380
how that actually works.
6540
04:16:10,380 --> 04:16:11,420
Super, super simple.
6541
04:16:11,420 --> 04:16:14,540
We are just exchanging the value of from and to.
6542
04:16:14,540 --> 04:16:15,700
That is it.
6543
04:16:15,700 --> 04:16:17,220
That is it what we are doing.
6544
04:16:17,220 --> 04:16:18,420
Let's go ahead and design this.
6545
04:16:18,420 --> 04:16:20,260
We'll be having a swap
6546
04:16:20,260 --> 04:16:22,620
and the swap is going to look like this.
6547
04:16:22,620 --> 04:16:24,660
So notice here how we are swapping it
6548
04:16:24,660 --> 04:16:28,460
set from to to and set to to from.
6549
04:16:28,460 --> 04:16:31,780
But we also want to change one more thing
6550
04:16:31,780 --> 04:16:34,260
once we actually go ahead and say,
6551
04:16:34,260 --> 04:16:37,300
let's just say there is one here.
6552
04:16:37,300 --> 04:16:40,260
When we swap these, these numbers also get exchanged.
6553
04:16:40,260 --> 04:16:43,020
So notice here, the numbers also get exchanged.
6554
04:16:43,020 --> 04:16:44,020
That is nothing.
6555
04:16:44,020 --> 04:16:46,660
It's just the set converted amount
6556
04:16:46,660 --> 04:16:48,460
getting changed with the set amount.
6557
04:16:48,460 --> 04:16:49,300
That is it.
6558
04:16:49,300 --> 04:16:52,380
If you want to do that, otherwise you just reset them.
6559
04:16:52,380 --> 04:16:53,740
So we'll go ahead and say that,
6560
04:16:53,740 --> 04:16:56,660
hey, I'll have the set converted amount
6561
04:16:56,660 --> 04:16:59,500
to be changed as simply just the amount.
6562
04:17:01,620 --> 04:17:02,700
Amount.
6563
04:17:03,620 --> 04:17:04,740
Yeah, that amount.
6564
04:17:04,740 --> 04:17:05,820
No, no suggestions.
6565
04:17:05,820 --> 04:17:06,860
Thank you.
6566
04:17:06,860 --> 04:17:08,940
And we'll also set amount
6567
04:17:08,940 --> 04:17:10,940
is going to go ahead and change
6568
04:17:11,860 --> 04:17:13,980
with the converted amount.
6569
04:17:13,980 --> 04:17:14,820
There we go.
6570
04:17:14,820 --> 04:17:15,620
That's it.
6571
04:17:15,620 --> 04:17:18,940
Now all the functionality of the swap is all done.
6572
04:17:18,940 --> 04:17:19,980
All right.
6573
04:17:19,980 --> 04:17:22,140
Now that majority of our task is done,
6574
04:17:22,140 --> 04:17:24,980
let's go ahead and add more of the values that we have.
6575
04:17:24,980 --> 04:17:27,580
So we have this test for tailwind.
6576
04:17:27,580 --> 04:17:29,580
We don't need this.
6577
04:17:29,580 --> 04:17:32,540
Let me go ahead and add a couple of divs up here.
6578
04:17:33,620 --> 04:17:35,820
Let's remove this again.
6579
04:17:35,820 --> 04:17:37,620
This is the most boring part,
6580
04:17:37,620 --> 04:17:39,900
but we have to go through with this one as well.
6581
04:17:39,900 --> 04:17:41,900
In the later on projects and application,
6582
04:17:41,900 --> 04:17:44,620
I'll give you the code file, which is helper file,
6583
04:17:44,620 --> 04:17:46,340
which actually gets all these components.
6584
04:17:46,340 --> 04:17:47,700
So they can just copy and paste.
6585
04:17:47,700 --> 04:17:49,540
For rest of them, I have that.
6586
04:17:49,540 --> 04:17:50,500
Don't worry.
6587
04:17:50,500 --> 04:17:52,380
So width is going to be full.
6588
04:17:52,380 --> 04:17:53,220
Okay.
6589
04:17:53,220 --> 04:17:55,220
Once I have this inside this div,
6590
04:17:55,220 --> 04:17:56,580
we will have another div.
6591
04:17:56,580 --> 04:17:58,820
This div also have a class name.
6592
04:17:58,820 --> 04:18:01,740
Let me grab all the classes that we have.
6593
04:18:02,940 --> 04:18:04,980
Copy that, paste it up here.
6594
04:18:04,980 --> 04:18:05,820
There we go.
6595
04:18:05,820 --> 04:18:07,700
Looks decent after this.
6596
04:18:07,700 --> 04:18:09,980
And finally, we'll be having a form
6597
04:18:09,980 --> 04:18:12,380
because this form is actually a submit form.
6598
04:18:12,380 --> 04:18:13,940
So that's what we are using.
6599
04:18:13,940 --> 04:18:15,100
Let's grab a form.
6600
04:18:15,100 --> 04:18:17,340
This form has no action,
6601
04:18:17,340 --> 04:18:20,260
but it has some things known as on submit.
6602
04:18:21,660 --> 04:18:23,380
And what does this on submit does?
6603
04:18:23,380 --> 04:18:25,300
Of course, fires an event.
6604
04:18:25,300 --> 04:18:26,860
That's what all form does.
6605
04:18:26,860 --> 04:18:29,860
And we'll be taking this event and couple of things.
6606
04:18:29,860 --> 04:18:32,180
First of all, stop prevent this form
6607
04:18:32,180 --> 04:18:33,740
from submitting to some URLs.
6608
04:18:33,740 --> 04:18:35,220
So that's pretty easy.
6609
04:18:35,220 --> 04:18:36,860
Event dot prevent default.
6610
04:18:36,860 --> 04:18:37,700
That's classic.
6611
04:18:37,700 --> 04:18:39,620
And then run our simple convert method
6612
04:18:39,620 --> 04:18:41,980
that does all of the magic for us.
6613
04:18:41,980 --> 04:18:44,020
Now inside this form,
6614
04:18:44,020 --> 04:18:46,820
we need to add the input box and all of these things.
6615
04:18:46,820 --> 04:18:48,820
So first of all, we have a div here.
6616
04:18:48,820 --> 04:18:50,500
That div also has some classes.
6617
04:18:50,500 --> 04:18:51,380
Super boring.
6618
04:18:52,500 --> 04:18:53,340
Not too much.
6619
04:18:53,340 --> 04:18:54,180
Not too much.
6620
04:18:54,180 --> 04:18:55,020
Like this.
6621
04:18:55,900 --> 04:18:56,780
Okay.
6622
04:18:56,780 --> 04:18:58,980
And once I'm inside this div,
6623
04:18:58,980 --> 04:19:00,260
we have the first input box.
6624
04:19:00,260 --> 04:19:02,700
So let's grab the input box.
6625
04:19:02,740 --> 04:19:03,980
Let's bring this
6626
04:19:03,980 --> 04:19:06,420
and let's see how it has brought the input box.
6627
04:19:06,420 --> 04:19:09,660
So it has brought the input box from component input box.
6628
04:19:09,660 --> 04:19:12,020
I would rather prefer it to actually grab it
6629
04:19:12,020 --> 04:19:14,580
from index itself.
6630
04:19:14,580 --> 04:19:17,620
Index dot JSX.
6631
04:19:17,620 --> 04:19:18,740
Did I mention?
6632
04:19:18,740 --> 04:19:20,620
No, it's JS.
6633
04:19:20,620 --> 04:19:23,540
So I would prefer to get it JS.
6634
04:19:23,540 --> 04:19:25,940
It's not like wrong to get it from input box,
6635
04:19:25,940 --> 04:19:27,700
but it's better to actually grab it
6636
04:19:27,700 --> 04:19:29,580
because eventually when we'll be having 5.10
6637
04:19:29,580 --> 04:19:30,420
on all of this,
6638
04:19:30,420 --> 04:19:32,820
it's better to actually grab it from here.
6639
04:19:32,820 --> 04:19:34,900
And again, once we are grabbing it from here,
6640
04:19:34,900 --> 04:19:37,820
the reason why we actually need to change this
6641
04:19:37,820 --> 04:19:39,820
because we have exported it like this.
6642
04:19:39,820 --> 04:19:41,420
This is not export default.
6643
04:19:41,420 --> 04:19:43,580
So we need to actually grab this.
6644
04:19:43,580 --> 04:19:44,660
That's it.
6645
04:19:44,660 --> 04:19:45,980
And then if we have more,
6646
04:19:45,980 --> 04:19:48,340
we can just set the comma and just have it.
6647
04:19:48,340 --> 04:19:49,820
So very common,
6648
04:19:49,820 --> 04:19:51,940
but just wanted to show you all the good practices
6649
04:19:51,940 --> 04:19:54,620
out there incorporated into this application.
6650
04:19:55,540 --> 04:19:56,380
Self-closing.
6651
04:19:56,380 --> 04:19:59,140
Now it's time to provide the data to this one.
6652
04:19:59,140 --> 04:20:00,180
So first of all, label.
6653
04:20:00,180 --> 04:20:02,060
This label is just the from.
6654
04:20:02,060 --> 04:20:03,580
So we don't need to do like this.
6655
04:20:03,580 --> 04:20:05,500
We'll be just saying this is a from.
6656
04:20:05,500 --> 04:20:06,460
Amount.
6657
04:20:06,460 --> 04:20:08,580
Amount obviously will be taken care from the amount,
6658
04:20:08,580 --> 04:20:10,300
the state that we have designed.
6659
04:20:10,300 --> 04:20:12,300
Then we have to provide the currency options
6660
04:20:12,300 --> 04:20:14,380
and currency options are in options.
6661
04:20:14,380 --> 04:20:17,580
If you forgot, these are options.
6662
04:20:17,580 --> 04:20:19,180
We derived from all the keys.
6663
04:20:19,180 --> 04:20:20,940
So that's what we are passing.
6664
04:20:20,940 --> 04:20:23,460
Then we have to provide the options of what happens
6665
04:20:23,460 --> 04:20:25,980
on currency change, on amount change and all of that.
6666
04:20:25,980 --> 04:20:29,020
So we'll be first changing on currency change.
6667
04:20:29,020 --> 04:20:31,700
What happens when the currency is being changed?
6668
04:20:31,700 --> 04:20:33,620
When the currency is being changed,
6669
04:20:33,620 --> 04:20:38,060
obviously we are tracking the currency into this from.
6670
04:20:38,060 --> 04:20:38,900
So this is a from.
6671
04:20:38,900 --> 04:20:41,620
So we are tracking the currency from.
6672
04:20:41,620 --> 04:20:43,100
So let's go ahead and fire an event
6673
04:20:43,100 --> 04:20:45,100
and update the states based on that.
6674
04:20:45,100 --> 04:20:47,380
So we'll be going like this.
6675
04:20:47,380 --> 04:20:48,420
And first of all,
6676
04:20:49,260 --> 04:20:52,020
this one is going to take on the currency change.
6677
04:20:52,020 --> 04:20:55,060
It's having a default value of currency.
6678
04:20:56,060 --> 04:20:58,500
Currency, why there is no suggestion.
6679
04:20:59,500 --> 04:21:01,500
Currency, it should be having a currency.
6680
04:21:01,500 --> 04:21:03,500
Let's call this one as currency, whatever the currency.
6681
04:21:03,500 --> 04:21:04,660
Right now it's USD.
6682
04:21:04,660 --> 04:21:07,060
So as soon as somebody changes the currency,
6683
04:21:07,060 --> 04:21:10,060
we can come up here and we can actually remove this
6684
04:21:10,060 --> 04:21:11,820
and can have the set,
6685
04:21:13,020 --> 04:21:14,620
set amount change,
6686
04:21:15,700 --> 04:21:17,260
set from, yep,
6687
04:21:17,260 --> 04:21:19,460
set from and inside that currency will be changed.
6688
04:21:19,460 --> 04:21:22,380
So automatically the new string value of the currency
6689
04:21:22,380 --> 04:21:23,220
comes to us.
6690
04:21:23,220 --> 04:21:24,420
So that's first part.
6691
04:21:24,780 --> 04:21:26,620
Next up is on amount change.
6692
04:21:26,620 --> 04:21:28,660
What happens on the amount change?
6693
04:21:28,660 --> 04:21:31,660
We'll be taking the amount and we will be,
6694
04:21:31,660 --> 04:21:33,380
let's just use this one better.
6695
04:21:35,580 --> 04:21:37,500
On amount change, first of all, grab the amount.
6696
04:21:37,500 --> 04:21:38,940
Okay, I grabbed the amount.
6697
04:21:38,940 --> 04:21:42,180
Then after that, we can actually change the amount.
6698
04:21:42,180 --> 04:21:45,660
So on amount change, we'll be setting up the amount.
6699
04:21:45,660 --> 04:21:47,100
Oops, my bad.
6700
04:21:48,500 --> 04:21:50,700
On amount change, yeah, there we go.
6701
04:21:50,700 --> 04:21:52,940
We'll be setting the amount to the newer amount,
6702
04:21:53,300 --> 04:21:54,540
whatever the amount is being changed.
6703
04:21:54,540 --> 04:21:57,100
So on amount change handles that part.
6704
04:21:57,100 --> 04:21:59,860
And we will also be needing a select currency,
6705
04:21:59,860 --> 04:22:01,820
whatever the select currency is.
6706
04:22:01,820 --> 04:22:05,940
So selected currency is we are going to grab it from.
6707
04:22:05,940 --> 04:22:07,260
So there we go.
6708
04:22:07,260 --> 04:22:09,820
All right, so this is what we have as of now.
6709
04:22:09,820 --> 04:22:11,380
Let's see if our VIT application.
6710
04:22:11,380 --> 04:22:14,180
So notice here we have this all from USD,
6711
04:22:14,180 --> 04:22:16,460
all the values are being properly passed,
6712
04:22:16,460 --> 04:22:18,460
but this is not enough.
6713
04:22:18,460 --> 04:22:21,620
We need to have one more here.
6714
04:22:21,620 --> 04:22:23,060
We'll be having a button here.
6715
04:22:23,060 --> 04:22:26,340
So just outside of this div actually,
6716
04:22:26,340 --> 04:22:29,340
we added another div, yeah, too many divs.
6717
04:22:29,340 --> 04:22:32,500
And class name, very boring.
6718
04:22:33,740 --> 04:22:38,100
And have this currency name, copy this, paste it.
6719
04:22:38,100 --> 04:22:42,260
Inside this, there is a button which has a ton of classes.
6720
04:22:42,260 --> 04:22:44,500
And this one is say swap.
6721
04:22:46,500 --> 04:22:49,380
Okay, the easiest part I know, which is on click,
6722
04:22:49,380 --> 04:22:50,820
and this will work as it is,
6723
04:22:50,820 --> 04:22:53,540
if you just go ahead and do a swap, save this.
6724
04:22:53,540 --> 04:22:56,300
And yeah, it works, but we don't want it to look like this.
6725
04:22:56,300 --> 04:22:58,220
So we'll be just adding some classes.
6726
04:22:59,340 --> 04:23:02,340
Okay, I could have done this entire project without the CSS,
6727
04:23:02,340 --> 04:23:05,500
but again, a lot of people just appreciate the content
6728
04:23:05,500 --> 04:23:06,860
if it looks good.
6729
04:23:06,860 --> 04:23:10,860
That's why we spend extra time in working with this one.
6730
04:23:10,860 --> 04:23:12,380
All right, so button is all good.
6731
04:23:12,380 --> 04:23:13,500
Now we have this div.
6732
04:23:13,500 --> 04:23:17,180
Let's go ahead and just grab all of this,
6733
04:23:18,180 --> 04:23:21,820
copy this and paste it up here.
6734
04:23:21,820 --> 04:23:23,580
So we have the same input box,
6735
04:23:23,580 --> 04:23:26,140
but we need to change the values very carefully.
6736
04:23:26,140 --> 04:23:28,260
In fact, so much carefully that when I actually did it
6737
04:23:28,260 --> 04:23:30,780
on my other channel, yes, I do have other channel as well,
6738
04:23:30,780 --> 04:23:32,140
I actually made a mistake on this.
6739
04:23:32,140 --> 04:23:34,300
So this time I want to do it more cautiously
6740
04:23:34,300 --> 04:23:35,900
so that I don't do the mistake.
6741
04:23:35,900 --> 04:23:37,900
Okay, first of all, label.
6742
04:23:37,900 --> 04:23:41,140
This time I know the label is going to be two.
6743
04:23:41,140 --> 04:23:43,380
All right, what are the currency options?
6744
04:23:43,380 --> 04:23:46,260
Easy peasy, I can give the options all to it.
6745
04:23:46,260 --> 04:23:47,700
Then whatever the amount is,
6746
04:23:47,700 --> 04:23:50,460
amount will be derived from the converted amount.
6747
04:23:50,460 --> 04:23:52,740
This is a read only input field.
6748
04:23:52,740 --> 04:23:57,740
So I will be giving it as amount disabled as true.
6749
04:23:58,420 --> 04:23:59,700
I can give it like this,
6750
04:23:59,700 --> 04:24:01,420
or if you just pass it on like this as well,
6751
04:24:01,420 --> 04:24:03,500
that is also considered as true.
6752
04:24:03,500 --> 04:24:06,380
All right, so that part is being taken care.
6753
04:24:06,380 --> 04:24:08,540
Okay, now let's go up here.
6754
04:24:08,540 --> 04:24:11,540
First of all, what I want to do here is on currency change.
6755
04:24:11,540 --> 04:24:13,860
What happens when the currency changes?
6756
04:24:13,860 --> 04:24:15,580
So when the currency changes,
6757
04:24:15,580 --> 04:24:17,540
I need to first grab the currency,
6758
04:24:17,540 --> 04:24:18,740
whatever the currency is.
6759
04:24:18,740 --> 04:24:20,260
So I'll just grab it.
6760
04:24:20,260 --> 04:24:25,220
Okay, and then I'll this time change the set to currency,
6761
04:24:25,220 --> 04:24:27,820
and I'll change it to whatever the currency is.
6762
04:24:27,820 --> 04:24:30,500
So set currency, set to and currency.
6763
04:24:30,500 --> 04:24:32,460
I think that should be all.
6764
04:24:32,460 --> 04:24:34,980
Now we also need to provide a selected currency,
6765
04:24:34,980 --> 04:24:37,340
whatever the selected currency is.
6766
04:24:37,340 --> 04:24:38,620
And in the selected currency,
6767
04:24:38,620 --> 04:24:40,620
I can just go ahead and give an INR,
6768
04:24:40,620 --> 04:24:43,020
but that would be bad because that's hard coded.
6769
04:24:43,020 --> 04:24:45,620
So let's derive the value from the state itself.
6770
04:24:45,620 --> 04:24:48,300
We're tracking this into a state known as two.
6771
04:24:48,300 --> 04:24:51,460
And that's why we actually created this to,
6772
04:24:51,460 --> 04:24:52,700
here it is, to and from.
6773
04:24:52,700 --> 04:24:53,980
So this is what we have.
6774
04:24:53,980 --> 04:24:57,060
Now, hopefully in the previous we did mistake,
6775
04:24:57,060 --> 04:24:58,220
now this is working.
6776
04:24:58,220 --> 04:24:59,580
Previously, if I change one state,
6777
04:24:59,580 --> 04:25:00,500
it changes another state.
6778
04:25:00,500 --> 04:25:02,540
Probably I did some mistake or something like that.
6779
04:25:02,540 --> 04:25:04,940
Okay, anyways, let's go ahead and finally add
6780
04:25:04,940 --> 04:25:06,620
the last button that we have.
6781
04:25:06,620 --> 04:25:08,100
Very long video, but it's fun.
6782
04:25:08,100 --> 04:25:09,020
It's fun, I hope.
6783
04:25:09,020 --> 04:25:09,940
I hope it is.
6784
04:25:09,940 --> 04:25:11,740
Just let me know in the comment section.
6785
04:25:11,740 --> 04:25:14,260
I desperately read all the comment section
6786
04:25:14,260 --> 04:25:15,860
and feedback from the students.
6787
04:25:15,860 --> 04:25:17,140
That's my fun.
6788
04:25:17,140 --> 04:25:19,380
Okay, we'll be saying convert
6789
04:25:19,380 --> 04:25:21,060
and the button needs an on click.
6790
04:25:21,060 --> 04:25:23,380
Obviously, we don't need on click actually.
6791
04:25:23,380 --> 04:25:26,060
We need on, we don't need on.
6792
04:25:26,060 --> 04:25:28,700
We need just the type of submit, that's submit.
6793
04:25:28,700 --> 04:25:30,540
So it automatically submits.
6794
04:25:30,540 --> 04:25:32,700
And obviously we don't want to convert to look like this.
6795
04:25:32,700 --> 04:25:35,860
So you get that, we'll be adding the classes.
6796
04:25:35,860 --> 04:25:38,100
Our classic classes.
6797
04:25:38,100 --> 04:25:40,220
Copy that and paste it.
6798
04:25:40,220 --> 04:25:41,420
Hopefully it looks good.
6799
04:25:41,580 --> 04:25:42,900
There we go, looks good.
6800
04:25:42,900 --> 04:25:44,860
And we can actually go ahead and try this.
6801
04:25:44,860 --> 04:25:46,900
So let's just go ahead and USD.
6802
04:25:46,900 --> 04:25:51,020
How much is five USD and we'll convert this.
6803
04:25:51,020 --> 04:25:53,580
It's good amount, it's good amount in India.
6804
04:25:53,580 --> 04:25:57,140
Okay, you can go ahead and remove this long string.
6805
04:25:57,140 --> 04:25:58,900
So when the conversion is being done,
6806
04:25:58,900 --> 04:26:01,380
you can actually use your JavaScript skills
6807
04:26:01,380 --> 04:26:03,820
and stop this to just two numbers.
6808
04:26:03,820 --> 04:26:06,460
I'll keep this one as up to you.
6809
04:26:06,460 --> 04:26:08,340
But if you'll notice into our original app,
6810
04:26:08,340 --> 04:26:10,340
we actually say it convert USD to INR.
6811
04:26:10,340 --> 04:26:12,460
And when we change something to INV or something,
6812
04:26:12,460 --> 04:26:14,060
it changes, so how we can do that.
6813
04:26:14,060 --> 04:26:15,780
Super easy peasy, nothing.
6814
04:26:15,780 --> 04:26:18,500
Just start your JavaScript and then just say that,
6815
04:26:18,500 --> 04:26:22,020
hey, I want to use from and to
6816
04:26:23,220 --> 04:26:25,980
and start your JavaScript and we'll be just saying to.
6817
04:26:25,980 --> 04:26:27,140
And that's it.
6818
04:26:27,140 --> 04:26:31,220
So if I go back here, it says USD to INR.
6819
04:26:31,220 --> 04:26:33,500
Maybe you won't have to all uppercase.
6820
04:26:33,500 --> 04:26:36,980
So it's also super easy because I know these are strings.
6821
04:26:36,980 --> 04:26:39,380
I can go ahead and use to uppercase.
6822
04:26:39,380 --> 04:26:41,300
It's a method.
6823
04:26:41,300 --> 04:26:46,100
And similarly here to uppercase, this is also a method.
6824
04:26:46,100 --> 04:26:47,220
And there we go.
6825
04:26:47,220 --> 04:26:50,420
Easy peasy JavaScript, there is absolutely nothing.
6826
04:26:50,420 --> 04:26:51,980
But if you look at this code base,
6827
04:26:51,980 --> 04:26:53,540
let me give you a summary of this
6828
04:26:53,540 --> 04:26:54,460
that all what we have done
6829
04:26:54,460 --> 04:26:56,260
because there's so much into this video
6830
04:26:56,260 --> 04:26:57,580
and I know this is a long video,
6831
04:26:57,580 --> 04:27:01,820
how long almost are 40, 50 minutes.
6832
04:27:01,820 --> 04:27:04,700
So we started by building our components.
6833
04:27:04,700 --> 04:27:06,820
We studied the component and there is no way
6834
04:27:06,820 --> 04:27:09,160
that you'll be designing a component this perfect
6835
04:27:09,800 --> 04:27:10,640
when you'll be designing.
6836
04:27:10,640 --> 04:27:11,920
Eventually you'll be keep on adding the data
6837
04:27:11,920 --> 04:27:12,760
to the component.
6838
04:27:12,760 --> 04:27:15,840
Maybe initially you start with label amount, that's it.
6839
04:27:15,840 --> 04:27:17,840
Then eventually you add a currency options
6840
04:27:17,840 --> 04:27:20,480
that I want to make my component more reusable.
6841
04:27:20,480 --> 04:27:22,640
So it's not like on the day one, we designed it like that.
6842
04:27:22,640 --> 04:27:23,920
Eventually we upgraded it.
6843
04:27:23,920 --> 04:27:25,760
And that's a thing with the tutorial
6844
04:27:25,760 --> 04:27:28,240
because you don't want me to sit here for six hours
6845
04:27:28,240 --> 04:27:29,640
for building this kind of application.
6846
04:27:29,640 --> 04:27:32,000
So obviously tutorials are more polished.
6847
04:27:32,000 --> 04:27:34,200
So eventually you'll be building all these things.
6848
04:27:34,200 --> 04:27:36,200
Don't worry, when you'll be designing the components,
6849
04:27:36,200 --> 04:27:38,360
you'll be not designing this as perfect.
6850
04:27:38,520 --> 04:27:40,320
Then we studied that how we can actually
6851
04:27:40,320 --> 04:27:41,920
just simply take the values
6852
04:27:41,920 --> 04:27:45,560
and ultimately what we did is just have an input field.
6853
04:27:45,560 --> 04:27:47,960
And here we just had a select option field.
6854
04:27:47,960 --> 04:27:50,120
So we just studied about how we can add
6855
04:27:50,120 --> 04:27:51,760
an options field just like this.
6856
04:27:51,760 --> 04:27:53,120
That's all what we did.
6857
04:27:53,120 --> 04:27:56,120
Optionally we studied a little bit about the use ID hook,
6858
04:27:56,120 --> 04:27:58,900
not very much used, not very highly implemented,
6859
04:27:58,900 --> 04:28:00,040
but a lot of people use it.
6860
04:28:00,040 --> 04:28:02,560
So I just thought to have a discussion over it.
6861
04:28:02,560 --> 04:28:05,160
Then we studied a little bit about the index way
6862
04:28:05,160 --> 04:28:06,600
of importing the component.
6863
04:28:06,600 --> 04:28:08,880
Again, there is nothing, nothing wrong
6864
04:28:08,880 --> 04:28:11,840
in importing the component from the component file itself.
6865
04:28:11,840 --> 04:28:13,080
But eventually in the long run,
6866
04:28:13,080 --> 04:28:16,080
this will make your code more scalable.
6867
04:28:16,080 --> 04:28:18,200
That is always a good idea.
6868
04:28:18,200 --> 04:28:21,360
And then we went into learning about the customized hook.
6869
04:28:21,360 --> 04:28:22,680
This customized hook, as we learned,
6870
04:28:22,680 --> 04:28:25,360
is nothing, absolutely ignore these X4X.
6871
04:28:25,360 --> 04:28:28,560
These are coming up from one of my plugin that I have, sorry.
6872
04:28:28,560 --> 04:28:31,860
This helps me to design the application faster.
6873
04:28:31,860 --> 04:28:34,040
So we learned about the hooks as well.
6874
04:28:34,040 --> 04:28:35,920
In the hooks, we saw that it's just a function,
6875
04:28:36,080 --> 04:28:37,120
nothing else at all.
6876
04:28:37,120 --> 04:28:38,800
This function requires a currency.
6877
04:28:38,800 --> 04:28:41,800
And as soon as this function loads, whenever you call it,
6878
04:28:41,800 --> 04:28:43,320
then it will fire a use effect.
6879
04:28:43,320 --> 04:28:44,400
So at that point of time,
6880
04:28:44,400 --> 04:28:46,480
a hook is automatically being called.
6881
04:28:46,480 --> 04:28:48,480
This hook is fetching onto a URL.
6882
04:28:48,480 --> 04:28:50,560
This URL you can grab from my GitHub account
6883
04:28:50,560 --> 04:28:51,840
onto that React.
6884
04:28:51,840 --> 04:28:54,680
I'm actually pushing this all the code on the GitHub as well.
6885
04:28:54,680 --> 04:28:55,800
You can grab this URL.
6886
04:28:55,800 --> 04:28:58,280
The only thing that we are changing is the currency.
6887
04:28:58,280 --> 04:29:00,880
So we crafted the URL according to us.
6888
04:29:00,880 --> 04:29:03,040
Then we simply taken the response into JSON
6889
04:29:03,040 --> 04:29:05,560
and then we simply extracted some values out of it.
6890
04:29:05,560 --> 04:29:09,840
We studied a little bit about properly looking at the URL
6891
04:29:09,840 --> 04:29:11,160
and what the data we are receiving.
6892
04:29:11,160 --> 04:29:13,800
So we studied that in this data, we don't want everything.
6893
04:29:13,800 --> 04:29:16,280
We just need this INR and this whole thing.
6894
04:29:16,280 --> 04:29:19,100
So we actually derived that value out of it.
6895
04:29:19,100 --> 04:29:21,160
So we simply said, hey, I don't want all of this.
6896
04:29:21,160 --> 04:29:23,480
I want just the currency part.
6897
04:29:23,480 --> 04:29:26,360
So that currency part is obviously this whole thing.
6898
04:29:26,360 --> 04:29:27,720
So this whole thing we extracted.
6899
04:29:27,720 --> 04:29:29,480
Very basic data nitpicking.
6900
04:29:29,480 --> 04:29:31,560
You'll be doing this quite a lot.
6901
04:29:31,560 --> 04:29:33,560
And then we console log this
6902
04:29:33,560 --> 04:29:35,420
and we actually returned the data.
6903
04:29:35,420 --> 04:29:36,260
That's it.
6904
04:29:36,260 --> 04:29:37,140
That's our hook.
6905
04:29:37,140 --> 04:29:40,440
Now inside this app.jsx, we used the state
6906
04:29:40,440 --> 04:29:43,280
to track all the values that were required for us.
6907
04:29:43,280 --> 04:29:45,680
And in this portion, we use the hooks as well,
6908
04:29:45,680 --> 04:29:47,400
our own custom design hook.
6909
04:29:47,400 --> 04:29:49,720
This hook gives us the entire object.
6910
04:29:49,720 --> 04:29:51,680
Out of this object, we extracted the keys
6911
04:29:51,680 --> 04:29:54,120
because that is something we want to pass on.
6912
04:29:54,120 --> 04:29:57,280
Classic JavaScript, nothing reactive about it.
6913
04:29:57,280 --> 04:29:59,280
Then we studied how we can do the swap.
6914
04:29:59,280 --> 04:30:01,080
Absolutely basic function.
6915
04:30:01,080 --> 04:30:02,600
Converted was absolutely basic.
6916
04:30:02,600 --> 04:30:03,880
This is just one liner code.
6917
04:30:03,880 --> 04:30:05,320
And that's why a lot of people hate.
6918
04:30:05,320 --> 04:30:08,400
I don't want to build a currency converter, just one liner.
6919
04:30:08,400 --> 04:30:09,320
But ours is not.
6920
04:30:09,320 --> 04:30:12,720
Ours is way more complex and way more scalable as well.
6921
04:30:12,720 --> 04:30:14,360
Then we simply did all here.
6922
04:30:14,360 --> 04:30:16,160
Here it was all boring, the input field.
6923
04:30:16,160 --> 04:30:18,400
But hey, cautiously add your data
6924
04:30:18,400 --> 04:30:20,680
because I did a mistake when I was teaching it
6925
04:30:20,680 --> 04:30:21,600
on my other channel.
6926
04:30:21,600 --> 04:30:22,200
But it's good.
6927
04:30:22,200 --> 04:30:22,640
It's good.
6928
04:30:22,640 --> 04:30:23,880
You learn from your mistake.
6929
04:30:23,880 --> 04:30:25,080
It's no big deal.
6930
04:30:25,080 --> 04:30:27,040
It takes just a couple of hours of debugging.
6931
04:30:27,040 --> 04:30:28,760
Nothing more than that.
6932
04:30:28,760 --> 04:30:31,200
So that is all what we have as of now.
6933
04:30:31,200 --> 04:30:33,160
And I think this video has helped
6934
04:30:33,160 --> 04:30:36,440
you a lot in understanding how the React works,
6935
04:30:36,440 --> 04:30:39,400
how the big scalable projects are being taken up,
6936
04:30:39,400 --> 04:30:42,080
and how we constantly move on further.
6937
04:30:42,080 --> 04:30:44,800
Concepts are pretty easy when you're with me, of course.
6938
04:30:44,800 --> 04:30:45,800
Leave down a comment.
6939
04:30:45,800 --> 04:30:47,400
It really, really helps me.
6940
04:30:47,400 --> 04:30:49,000
If you're watching the content, I
6941
04:30:49,000 --> 04:30:50,600
know a lot of people are watching.
6942
04:30:50,600 --> 04:30:52,400
And when they don't leave, just a thank note
6943
04:30:52,400 --> 04:30:54,280
in the comment section.
6944
04:30:54,280 --> 04:30:56,600
I'm always somebody who's looking in the comment section
6945
04:30:56,600 --> 04:30:57,680
and finds it empty.
6946
04:30:57,680 --> 04:30:58,800
It's disheartening.
6947
04:30:58,800 --> 04:30:59,960
So please leave the comment.
6948
04:30:59,960 --> 04:31:02,000
And I'll be thankful to you as well.
6949
04:31:02,000 --> 04:31:03,040
That's it for this video.
6950
04:31:03,040 --> 04:31:06,120
And let's go ahead and catch up in next, another such project.
6951
04:31:09,320 --> 04:31:10,000
All right.
6952
04:31:10,000 --> 04:31:13,800
Moving our journey further into the React ecosystem.
6953
04:31:13,800 --> 04:31:14,760
Hey there, everyone.
6954
04:31:14,760 --> 04:31:15,560
My name is Ateesh.
6955
04:31:15,560 --> 04:31:17,160
And welcome back to another video.
6956
04:31:17,160 --> 04:31:19,960
This one is also going to be a bit relaxed, chill out,
6957
04:31:19,960 --> 04:31:24,280
enjoyable, slower guide on exploring another concept
6958
04:31:24,280 --> 04:31:25,720
in the React world.
6959
04:31:25,720 --> 04:31:27,320
Now, well, the concept in the React
6960
04:31:27,320 --> 04:31:29,000
is single page application.
6961
04:31:29,000 --> 04:31:32,120
That means there is no pages in these applications.
6962
04:31:32,120 --> 04:31:33,560
It's just one page.
6963
04:31:33,560 --> 04:31:35,160
And the whole idea of the React is
6964
04:31:35,160 --> 04:31:37,680
I'll take the component, unmount it in place of this.
6965
04:31:37,680 --> 04:31:38,880
I'll mount this one.
6966
04:31:38,880 --> 04:31:40,920
So the whole idea is to manipulate the DOM
6967
04:31:40,920 --> 04:31:42,040
as much as possible.
6968
04:31:42,040 --> 04:31:44,840
When you actually say I want to go into register page,
6969
04:31:44,840 --> 04:31:46,400
React never goes anywhere.
6970
04:31:46,400 --> 04:31:48,760
It's a single page application.
6971
04:31:48,760 --> 04:31:51,240
It removes some of the elements from your home page
6972
04:31:51,240 --> 04:31:54,880
and injects some of the React register page on there.
6973
04:31:54,880 --> 04:31:57,760
It removes the register page and injects the login component.
6974
04:31:57,760 --> 04:31:59,600
And once you are successfully logged in,
6975
04:31:59,600 --> 04:32:02,400
then it removes that and gives you a dashboard just right
6976
04:32:02,400 --> 04:32:02,900
there.
6977
04:32:02,900 --> 04:32:05,160
And your page never, ever refreshed.
6978
04:32:05,160 --> 04:32:09,320
But this is not ideal for a regular user.
6979
04:32:09,320 --> 04:32:11,600
A regular user doesn't really understand.
6980
04:32:11,600 --> 04:32:14,320
And we cannot train the entire world population
6981
04:32:14,320 --> 04:32:16,800
how to reuse the internet just because we have designed
6982
04:32:16,800 --> 04:32:18,840
a new framework or a library.
6983
04:32:18,840 --> 04:32:22,240
So the concept of moving users onto different URLs,
6984
04:32:22,240 --> 04:32:24,160
like register page login, is so common
6985
04:32:24,160 --> 04:32:25,800
that if you don't do this, people
6986
04:32:25,800 --> 04:32:27,800
might think that it's very suspicious
6987
04:32:27,800 --> 04:32:30,600
and it's not really a great thing for the URLs
6988
04:32:30,600 --> 04:32:32,680
and the safety precautions.
6989
04:32:32,680 --> 04:32:35,840
And that is why we need to figure out a way that how we
6990
04:32:35,840 --> 04:32:39,440
can artificially inject the routing so that the URL looks
6991
04:32:39,440 --> 04:32:41,400
great and user feels like they are moving
6992
04:32:41,400 --> 04:32:43,360
onto a different page, although it's just
6993
04:32:43,360 --> 04:32:44,600
react at the behind the scene.
6994
04:32:44,600 --> 04:32:48,160
It's just a single page application.
6995
04:32:48,160 --> 04:32:50,120
And yes, everything happens artificially.
6996
04:32:50,120 --> 04:32:52,000
That is just a simulation being done
6997
04:32:52,000 --> 04:32:53,840
that you are onto different URLs.
6998
04:32:53,840 --> 04:32:56,480
Your page will never refresh, still the React concepts,
6999
04:32:56,480 --> 04:32:58,800
bringing in the components, injecting the components,
7000
04:32:58,800 --> 04:33:00,160
and all of that.
7001
04:33:00,160 --> 04:33:02,600
So we'll be learning one such way of doing that.
7002
04:33:02,600 --> 04:33:05,200
By the way, this is a core React course.
7003
04:33:05,200 --> 04:33:07,599
That is why we are discussing about the routings.
7004
04:33:07,599 --> 04:33:09,399
By the way, on my channel, you will
7005
04:33:09,400 --> 04:33:11,759
find there is a Next.js playlist separately available.
7006
04:33:11,759 --> 04:33:13,799
So in that we don't discuss too much of routing.
7007
04:33:13,800 --> 04:33:15,200
That routing is different.
7008
04:33:15,200 --> 04:33:17,599
And by the way, in case you are just interested,
7009
04:33:17,599 --> 04:33:19,999
I do have a separate video on my channel
7010
04:33:20,000 --> 04:33:22,680
in which I have showed you that how the Next.js routing can
7011
04:33:22,680 --> 04:33:24,160
be designed customizably.
7012
04:33:24,160 --> 04:33:27,240
Yep, your JavaScript, how the React router works.
7013
04:33:27,240 --> 04:33:28,480
Anyways, let's move back.
7014
04:33:28,480 --> 04:33:30,160
So in this video, first let me show you
7015
04:33:30,160 --> 04:33:31,200
what we are going to build.
7016
04:33:31,200 --> 04:33:33,400
And then I'll give you some of the concept
7017
04:33:33,400 --> 04:33:35,279
of how to study the documentation
7018
04:33:35,279 --> 04:33:38,919
and figure out things on your own with the React router DOM.
7019
04:33:38,919 --> 04:33:41,239
That is the library which we'll be studying.
7020
04:33:41,240 --> 04:33:43,680
So let me first take you onto the screen.
7021
04:33:43,680 --> 04:33:44,320
There we go.
7022
04:33:44,320 --> 04:33:46,720
Sorry we don't have any dark mode for this one.
7023
04:33:46,720 --> 04:33:49,040
But this is the application that we'll be building.
7024
04:33:49,040 --> 04:33:51,240
Luckily, you don't have to worry about CSS.
7025
04:33:51,240 --> 04:33:52,640
I'll be giving you some of the files.
7026
04:33:52,640 --> 04:33:54,360
I'll show you that as well.
7027
04:33:54,360 --> 04:33:55,640
So this is our home page.
7028
04:33:55,640 --> 04:33:58,240
And I recommend you to notice the URL.
7029
04:33:58,240 --> 04:33:59,080
This is the home page.
7030
04:33:59,080 --> 04:34:01,800
When I go onto about page, this is slash about.
7031
04:34:01,800 --> 04:34:04,520
So this is simulating that you are moving on to the next page.
7032
04:34:04,520 --> 04:34:06,560
But end of the day, this is just React.
7033
04:34:06,560 --> 04:34:08,279
Our navigation bar never changes.
7034
04:34:08,279 --> 04:34:09,839
Our footer also never changes.
7035
04:34:09,840 --> 04:34:11,960
They stay exactly the same.
7036
04:34:11,960 --> 04:34:13,840
So if I go back to the home, navigation bar
7037
04:34:13,840 --> 04:34:14,880
remains exactly same.
7038
04:34:14,880 --> 04:34:17,119
But our URL changes a little bit.
7039
04:34:17,119 --> 04:34:19,999
So we have a home page, about page, and a contact page
7040
04:34:20,000 --> 04:34:21,040
that we have.
7041
04:34:21,040 --> 04:34:23,439
And similarly, we will be having a GitHub page.
7042
04:34:23,439 --> 04:34:26,439
But the GitHub page additionally will do something different.
7043
04:34:26,439 --> 04:34:29,839
The GitHub page will show my photo as well as my GitHub
7044
04:34:29,840 --> 04:34:30,520
count.
7045
04:34:30,520 --> 04:34:32,840
And we'll see that how we can optimize it
7046
04:34:32,840 --> 04:34:34,840
through the React router DOM, which
7047
04:34:34,840 --> 04:34:36,400
is the library we are using.
7048
04:34:36,400 --> 04:34:39,240
And for every single time, we have these applications going
7049
04:34:39,240 --> 04:34:40,960
on like this, GitHub and About.
7050
04:34:40,960 --> 04:34:44,599
We'll also see how we can grab some of the URLs and whatnot.
7051
04:34:44,599 --> 04:34:47,039
There's a lot more that we'll be studying than just being
7052
04:34:47,040 --> 04:34:49,759
shown on the website itself.
7053
04:34:49,759 --> 04:34:53,559
And the package that we'll be studying is React router DOM.
7054
04:34:53,560 --> 04:34:55,400
It's available on reactrouter.com.
7055
04:34:55,400 --> 04:34:58,759
It's by the Remix team made by Remix.
7056
04:34:58,759 --> 04:35:01,239
And what we'll be doing is there are a lot of ways
7057
04:35:01,240 --> 04:35:03,840
how router actually evolves, and especially the version 6,
7058
04:35:03,840 --> 04:35:05,880
which we are at the time of the recording video.
7059
04:35:05,880 --> 04:35:06,840
This is the newest one.
7060
04:35:06,840 --> 04:35:08,279
We'll be using that one only.
7061
04:35:08,279 --> 04:35:09,599
But I'll walk you through how you can actually
7062
04:35:09,599 --> 04:35:10,919
explore the documentation.
7063
04:35:10,919 --> 04:35:14,079
Otherwise, my channel is always available for you to help.
7064
04:35:14,080 --> 04:35:16,480
But we'll be seeing that how we can use the 6 version.
7065
04:35:16,480 --> 04:35:18,840
We won't be talking about the 5 at all.
7066
04:35:18,840 --> 04:35:21,240
We'll be seeing that how we can pick up different variations
7067
04:35:21,240 --> 04:35:21,840
of the router.
7068
04:35:21,840 --> 04:35:24,119
We'll be using the Create Browser router.
7069
04:35:24,119 --> 04:35:27,639
And the whole idea is to study this piece of code
7070
04:35:27,640 --> 04:35:29,520
so that we can load things on our own
7071
04:35:29,520 --> 04:35:31,919
and can design the routing for this application,
7072
04:35:31,919 --> 04:35:33,999
this sample application, which will give us
7073
04:35:34,000 --> 04:35:36,360
the entire idea of how the application is built
7074
04:35:36,360 --> 04:35:38,240
or should be built and all of that.
7075
04:35:38,240 --> 04:35:40,800
We'll see some of the optimization tasks and techniques
7076
04:35:40,800 --> 04:35:41,360
and whatnot.
7077
04:35:41,360 --> 04:35:43,759
So everything will be pretty nice up there.
7078
04:35:43,759 --> 04:35:46,719
All right, enough of the talk.
7079
04:35:46,720 --> 04:35:48,680
Let's go back on to this one.
7080
04:35:48,680 --> 04:35:50,279
And by the way, one more thing.
7081
04:35:50,279 --> 04:35:54,479
If you'll go on to this one, so I have a repo on my GitHub
7082
04:35:54,480 --> 04:35:56,360
account, github.com slash at the chaudry.
7083
04:35:56,360 --> 04:35:59,320
You can find a repo with the name of React English
7084
04:35:59,320 --> 04:36:01,439
because these videos are in English.
7085
04:36:01,439 --> 04:36:06,399
And you can see that there is a React router notes.md.
7086
04:36:06,400 --> 04:36:08,119
The file is available for you.
7087
04:36:08,119 --> 04:36:10,919
This is a markdown file which will help you to actually grab
7088
04:36:10,919 --> 04:36:11,559
the components.
7089
04:36:11,560 --> 04:36:14,439
Like, for example, for the header part or the navigation
7090
04:36:14,439 --> 04:36:16,879
bar, this is all the code which has nothing
7091
04:36:16,880 --> 04:36:18,640
to do with the React routing majorly.
7092
04:36:19,200 --> 04:36:20,200
It's just a CSS.
7093
04:36:20,200 --> 04:36:22,400
Similarly, in the footer, if you check out the footer,
7094
04:36:22,400 --> 04:36:23,800
this is just a static footer.
7095
04:36:23,800 --> 04:36:25,840
We just need it to understand a few concepts.
7096
04:36:25,840 --> 04:36:28,360
It could be just one liner, but nobody gets
7097
04:36:28,360 --> 04:36:30,360
impressed with the one liner text.
7098
04:36:30,360 --> 04:36:32,919
That's why we are actually giving it to you.
7099
04:36:32,919 --> 04:36:35,319
So you can find the footer component, just copy and paste
7100
04:36:35,320 --> 04:36:36,000
it.
7101
04:36:36,000 --> 04:36:41,200
And then similarly, we can have home component and contact us
7102
04:36:41,200 --> 04:36:42,200
page.
7103
04:36:42,200 --> 04:36:42,919
That's it.
7104
04:36:42,919 --> 04:36:44,439
GitHub will be designing on our own.
7105
04:36:44,439 --> 04:36:48,599
So that's the basic part of it.
7106
04:36:49,599 --> 04:36:53,559
So let's go ahead and create a fresh new project and work
7107
04:36:53,560 --> 04:36:54,759
with it.
7108
04:36:54,759 --> 04:36:59,079
OK, let's grab and there we go.
7109
04:36:59,080 --> 04:37:01,240
OK, so first of all, let's kill this.
7110
04:37:01,240 --> 04:37:03,000
We don't need you.
7111
04:37:03,000 --> 04:37:06,520
And let's go ahead and work on with this.
7112
04:37:06,520 --> 04:37:07,599
Just give me a second.
7113
04:37:07,599 --> 04:37:12,319
I'll align the things and remove this one.
7114
04:37:12,320 --> 04:37:14,320
Let's start a fresh one.
7115
04:37:14,439 --> 04:37:18,719
And we'll say npm create wheat, not react.
7116
04:37:21,919 --> 04:37:24,399
And this one is going to be an introduction
7117
04:37:24,400 --> 04:37:25,599
to just the routing.
7118
04:37:25,599 --> 04:37:28,079
So we'll be calling this one, I guess, the seventh
7119
04:37:28,080 --> 04:37:29,960
application that we have.
7120
04:37:29,960 --> 04:37:32,720
So 07.
7121
04:37:32,720 --> 04:37:34,320
And we'll be saying react router.
7122
04:37:37,200 --> 04:37:38,680
Package name is same.
7123
04:37:38,680 --> 04:37:42,600
We'll go with react and JavaScript.
7124
04:37:42,640 --> 04:37:45,160
All right, so this seems good.
7125
04:37:45,160 --> 04:37:47,560
Now we need to go inside the folder.
7126
04:37:47,560 --> 04:37:50,919
But as you know, I prefer to actually right click and open
7127
04:37:50,919 --> 04:37:52,479
the integrated terminal.
7128
04:37:52,480 --> 04:37:54,160
That way, I'm always into the root.
7129
04:37:54,160 --> 04:37:58,720
So I can just run npm i to install the application.
7130
04:37:58,720 --> 04:38:04,400
And we can actually go ahead and move on to the browser
7131
04:38:04,400 --> 04:38:04,960
itself.
7132
04:38:04,960 --> 04:38:08,000
Let me go ahead and get into the browser.
7133
04:38:08,000 --> 04:38:09,840
And how we can actually install this.
7134
04:38:09,840 --> 04:38:13,640
So there are main concept, migrating, all of this.
7135
04:38:13,640 --> 04:38:17,720
Let's go on to getting started.
7136
04:38:17,720 --> 04:38:22,000
And there should be getting started guide tutorials.
7137
04:38:25,000 --> 04:38:27,520
Yep, the project install.
7138
04:38:27,520 --> 04:38:32,439
Just get me the npm install command, or I'll do it myself.
7139
04:38:32,439 --> 04:38:35,279
OK, no examples.
7140
04:38:35,279 --> 04:38:36,919
FAQ main concept.
7141
04:38:36,919 --> 04:38:38,679
OK, I understand the main concept.
7142
04:38:38,720 --> 04:38:41,279
Just give me that path.
7143
04:38:41,279 --> 04:38:43,319
OK, probably it's not going to be.
7144
04:38:43,320 --> 04:38:44,680
Nothing, it's a React router DOM.
7145
04:38:44,680 --> 04:38:45,880
So I'll just install it.
7146
04:38:45,880 --> 04:38:47,560
So npm install, it's React.
7147
04:38:47,560 --> 04:38:49,480
Somewhere it is, I'm not able to find it.
7148
04:38:49,480 --> 04:38:52,960
React router DOM, a very famous package.
7149
04:38:52,960 --> 04:38:54,840
If you are any time working on the React,
7150
04:38:54,840 --> 04:38:57,560
this is the package you will be dealing up with that.
7151
04:38:57,560 --> 04:39:00,000
Now, in this package entirely, all you have to do
7152
04:39:00,000 --> 04:39:02,360
is go with the main concept.
7153
04:39:02,360 --> 04:39:05,320
This is really the essence of how
7154
04:39:05,320 --> 04:39:07,480
to understand the React router DOM, what happens,
7155
04:39:07,480 --> 04:39:10,240
how it happens, and a lot of essential things
7156
04:39:10,240 --> 04:39:11,680
are mentioned in this one.
7157
04:39:11,680 --> 04:39:14,320
So how you track the URL, how you track the location,
7158
04:39:14,320 --> 04:39:17,599
forceful, although we'll be studying a lot of it,
7159
04:39:17,599 --> 04:39:19,239
especially the router inside when
7160
04:39:19,240 --> 04:39:22,279
we'll be building a mega project finally in this series.
7161
04:39:22,279 --> 04:39:24,719
So all these things like client-side routing,
7162
04:39:24,720 --> 04:39:27,800
the location state, and all of that will be taken care there.
7163
04:39:27,800 --> 04:39:30,360
But if you have time, go ahead and go with the main concept.
7164
04:39:30,360 --> 04:39:32,840
Some of them we'll be studying here, like the path patterns,
7165
04:39:32,840 --> 04:39:36,560
what this is, how to grab the URL params, dynamic routing.
7166
04:39:36,560 --> 04:39:38,640
We will be studying in this one.
7167
04:39:38,640 --> 04:39:42,520
But definitely, this is a very rich guide.
7168
04:39:42,520 --> 04:39:44,040
These kinds of concepts, these all
7169
04:39:44,040 --> 04:39:45,880
will be taking care of this.
7170
04:39:45,880 --> 04:39:47,960
But it is always a good idea to actually go
7171
04:39:47,960 --> 04:39:49,600
with the main concept documentation.
7172
04:39:49,600 --> 04:39:53,120
This is the part where you study and you read out the stuff.
7173
04:39:53,120 --> 04:39:55,440
Moving back, so now everything is installed.
7174
04:39:55,440 --> 04:39:57,120
Let's first go ahead.
7175
04:39:57,120 --> 04:39:59,400
We'll be needing tailwind as well,
7176
04:39:59,400 --> 04:40:01,840
because if you look out the classes and all of that,
7177
04:40:01,840 --> 04:40:03,440
yes, there is a lot of tailwind.
7178
04:40:03,440 --> 04:40:05,720
So let's go ahead and install the tailwind as well.
7179
04:40:05,720 --> 04:40:09,080
One more time, in fact, a lot more time
7180
04:40:09,080 --> 04:40:11,040
will be coming up in the future as well.
7181
04:40:11,040 --> 04:40:14,040
OK, so this is what we have as a tailwind.
7182
04:40:14,040 --> 04:40:16,320
And we need to actually copy the content.
7183
04:40:16,320 --> 04:40:19,400
I'm pretty sure you might be just kind of memorizing this
7184
04:40:19,400 --> 04:40:21,360
at this point of time.
7185
04:40:21,360 --> 04:40:24,200
OK, the content will be replaced.
7186
04:40:24,200 --> 04:40:28,840
Save that and go into main.jsx.
7187
04:40:28,840 --> 04:40:31,280
No, index.css, remove everything,
7188
04:40:31,280 --> 04:40:33,760
and we'll be grabbing these ones.
7189
04:40:33,760 --> 04:40:35,680
Copy them and paste them up here.
7190
04:40:35,680 --> 04:40:37,040
Save that.
7191
04:40:37,040 --> 04:40:39,960
We don't need anything into the app.css as well.
7192
04:40:39,960 --> 04:40:41,160
Just remove everything.
7193
04:40:41,160 --> 04:40:44,440
We won't be using actually the app itself.
7194
04:40:44,440 --> 04:40:53,360
OK, further, let's go ahead and run npm install, npm run dev,
7195
04:40:53,360 --> 04:40:56,600
npm run dev.
7196
04:40:56,600 --> 04:40:59,680
And that should be up and running on my system.
7197
04:40:59,680 --> 04:41:01,560
There we go, basic.
7198
04:41:01,560 --> 04:41:04,960
Since the app.jsx is anyways getting loaded,
7199
04:41:04,960 --> 04:41:08,160
let's go ahead and at least grab some of the values out of it.
7200
04:41:08,160 --> 04:41:16,920
So we'll be saying h1 of React Router, React Router DOM.
7201
04:41:16,920 --> 04:41:19,320
And we'll be saying, let's add a class name.
7202
04:41:19,320 --> 04:41:23,440
And we'll be saying bg dash what?
7203
04:41:23,440 --> 04:41:25,000
Green.
7204
04:41:25,000 --> 04:41:27,920
Suggestions, yes, bg green 300.
7205
04:41:27,920 --> 04:41:31,160
Let's see, yeah, at least our tailwind is working.
7206
04:41:31,160 --> 04:41:33,400
All right, we won't be touching this thing here.
7207
04:41:33,400 --> 04:41:36,000
We'll be getting started with a couple of routes and folders
7208
04:41:36,000 --> 04:41:41,120
and basically trying to get a feel of how the entire thing actually works.
7209
04:41:41,120 --> 04:41:44,840
So first thing that we are going to do is there is always components
7210
04:41:44,840 --> 04:41:46,800
or some people call it as pages.
7211
04:41:46,800 --> 04:41:48,920
Totally depends on you how you want to call it.
7212
04:41:48,920 --> 04:41:51,080
We'll start by calling this one as component.
7213
04:41:51,080 --> 04:41:52,920
Eventually, as we go into the mega projects,
7214
04:41:52,920 --> 04:41:54,800
we'll be designing components and pages as well.
7215
04:41:54,800 --> 04:41:56,120
But these are just file names.
7216
04:41:56,120 --> 04:41:58,400
Nothing really bothers us.
7217
04:41:58,400 --> 04:42:01,160
So we'll be calling this one as components.
7218
04:42:01,160 --> 04:42:03,080
And this is just a directory structure.
7219
04:42:03,960 --> 04:42:05,840
Each instructor is going to give you their best
7220
04:42:05,840 --> 04:42:09,240
or their practices, which is being used in their company.
7221
04:42:09,240 --> 04:42:11,240
We'll be creating a couple of folders first,
7222
04:42:11,240 --> 04:42:12,760
and then we'll be going through with that.
7223
04:42:12,760 --> 04:42:15,520
First of all, let's go ahead and call this one as header.
7224
04:42:15,520 --> 04:42:18,080
Inside the header, I will have a new file.
7225
04:42:18,080 --> 04:42:22,920
And I'll call this one obviously as header.jsx.
7226
04:42:22,920 --> 04:42:24,600
Now, nothing much in this file.
7227
04:42:24,600 --> 04:42:27,560
I'll just say this is a div, which says header.
7228
04:42:27,560 --> 04:42:28,360
That is it.
7229
04:42:28,360 --> 04:42:29,800
Absolutely that.
7230
04:42:29,800 --> 04:42:31,400
Nothing more than that.
7231
04:42:31,480 --> 04:42:34,160
Now similarly, in the component, there will be a new folder
7232
04:42:34,160 --> 04:42:36,600
and we'll be calling this one as footer.
7233
04:42:36,600 --> 04:42:39,040
Inside the footer, we'll be having a new file,
7234
04:42:39,040 --> 04:42:42,640
which we are going to call footer.jsx.
7235
04:42:42,640 --> 04:42:45,720
There we go, rfce, we have just footer.
7236
04:42:45,720 --> 04:42:48,520
This will help us to understand some of the main concepts
7237
04:42:48,520 --> 04:42:50,080
of how things are actually being done
7238
04:42:50,080 --> 04:42:52,160
or how things are being laid out.
7239
04:42:52,160 --> 04:42:53,360
All right.
7240
04:42:53,360 --> 04:42:55,200
Now, the next thing that we are going to do
7241
04:42:55,200 --> 04:42:57,720
is once we have these headers and footers,
7242
04:42:57,720 --> 04:43:00,160
we will be replacing them with the notes that we have,
7243
04:43:00,160 --> 04:43:01,600
because if you remember,
7244
04:43:01,600 --> 04:43:03,720
this is where actually our component comes up.
7245
04:43:03,720 --> 04:43:05,280
This is where the header goes.
7246
04:43:05,280 --> 04:43:06,960
This is where the footer component goes
7247
04:43:06,960 --> 04:43:08,480
and we'll be talking about them as well.
7248
04:43:08,480 --> 04:43:11,280
But right now, this is all what we have.
7249
04:43:11,280 --> 04:43:13,600
Now, after this, what we're going to do is,
7250
04:43:13,600 --> 04:43:15,720
this component will be closing it down.
7251
04:43:15,720 --> 04:43:17,960
In our main directory, what we're going to do is,
7252
04:43:17,960 --> 04:43:20,000
we won't be using this app.jsx,
7253
04:43:20,000 --> 04:43:22,400
although you can, no big deal there.
7254
04:43:22,400 --> 04:43:25,640
But I'll be creating one more file inside this,
7255
04:43:25,640 --> 04:43:28,200
which will be directly known as layout.
7256
04:43:28,200 --> 04:43:30,560
And this is a common practice.
7257
04:43:30,560 --> 04:43:32,800
The reason for creating this file is,
7258
04:43:32,800 --> 04:43:35,640
in our application, you will see that,
7259
04:43:35,640 --> 04:43:39,080
especially in this one, that the header always remains same,
7260
04:43:39,080 --> 04:43:40,560
the footer always remains same,
7261
04:43:40,560 --> 04:43:42,240
only the inner content changes
7262
04:43:42,240 --> 04:43:44,320
from home to about and all of that.
7263
04:43:44,320 --> 04:43:46,080
So we need to figure out a way
7264
04:43:46,080 --> 04:43:48,320
that we don't have to repeat ourselves that often.
7265
04:43:48,320 --> 04:43:51,080
We just want to grab a header should always be there,
7266
04:43:51,080 --> 04:43:52,400
footer should always be there,
7267
04:43:52,400 --> 04:43:54,680
and we'll be just injecting the content in between.
7268
04:43:54,680 --> 04:43:56,480
That is a common practice.
7269
04:43:56,480 --> 04:43:58,760
You'll find this exactly same pattern
7270
04:43:58,760 --> 04:44:01,440
being used in the Next.js and a lot more stuff.
7271
04:44:01,440 --> 04:44:03,400
So we'll be using that practice exactly here.
7272
04:44:03,400 --> 04:44:06,360
So again, rfce, React functional component,
7273
04:44:06,360 --> 04:44:09,000
which gives me a layout, export it, that's it.
7274
04:44:09,000 --> 04:44:11,480
But what additionally we can actually go ahead and use,
7275
04:44:11,480 --> 04:44:14,680
the first concept about this, which you'll be using,
7276
04:44:14,680 --> 04:44:16,800
is known as outlet.
7277
04:44:16,800 --> 04:44:18,360
This outlet is a special thing,
7278
04:44:18,360 --> 04:44:21,040
which is coming up from React Router DOM.
7279
04:44:21,040 --> 04:44:23,320
Remember, so far we have been using just the React
7280
04:44:23,320 --> 04:44:24,840
or the React DOM,
7281
04:44:24,840 --> 04:44:27,360
but this actually comes from React Router DOM.
7282
04:44:27,360 --> 04:44:30,080
The advantage of this is that I can go ahead
7283
04:44:30,080 --> 04:44:31,640
and return some special things.
7284
04:44:31,640 --> 04:44:33,600
First of all, let me import them.
7285
04:44:33,600 --> 04:44:35,800
I'll go ahead and say I need a header.
7286
04:44:35,800 --> 04:44:38,000
Let's just say header comes up like this.
7287
04:44:38,000 --> 04:44:41,720
I also need footer, footer also comes up like this.
7288
04:44:41,720 --> 04:44:43,640
By the way, we can export these components
7289
04:44:43,640 --> 04:44:44,760
into index file as well.
7290
04:44:44,760 --> 04:44:46,840
That's totally your call.
7291
04:44:46,840 --> 04:44:48,320
You can go ahead and do this.
7292
04:44:48,320 --> 04:44:50,280
Now here, what I'll do is I'll remove this.
7293
04:44:50,280 --> 04:44:52,960
I'll inject just the fragments, just like this.
7294
04:44:52,960 --> 04:44:56,640
And I'll say there should always be a header, all right.
7295
04:44:56,640 --> 04:44:58,840
And there should always be a footer.
7296
04:45:00,200 --> 04:45:01,440
So there we go.
7297
04:45:01,440 --> 04:45:04,400
And now what I'll do is I'll inject a special element
7298
04:45:04,400 --> 04:45:07,680
that is given to me by the React Router DOM
7299
04:45:07,680 --> 04:45:09,480
and call this one as outlet.
7300
04:45:09,480 --> 04:45:11,240
It needs to be always called as outlet.
7301
04:45:11,240 --> 04:45:12,880
There is no other name for it.
7302
04:45:12,880 --> 04:45:15,040
And this is something which actually gives us
7303
04:45:15,040 --> 04:45:16,320
this capability that, hey,
7304
04:45:16,320 --> 04:45:18,600
this will always be on all the pages.
7305
04:45:18,600 --> 04:45:20,120
This one will be in all the pages.
7306
04:45:20,120 --> 04:45:22,680
This is designing the layout of the application.
7307
04:45:22,680 --> 04:45:23,840
Now what's inside the header?
7308
04:45:23,840 --> 04:45:24,840
What's inside the footer?
7309
04:45:24,840 --> 04:45:28,240
That's not our call, but they will always be there.
7310
04:45:28,240 --> 04:45:30,600
And whatever the information that you are using,
7311
04:45:30,600 --> 04:45:32,080
you can actually go ahead and use that.
7312
04:45:32,080 --> 04:45:34,680
But the main question that we have is
7313
04:45:34,680 --> 04:45:37,840
that how it will know that we are actually doing this.
7314
04:45:37,840 --> 04:45:40,640
Because right now, if I just open the application
7315
04:45:40,640 --> 04:45:43,240
and I run this, this is not going to work.
7316
04:45:43,240 --> 04:45:44,320
So it's already running.
7317
04:45:44,320 --> 04:45:46,280
We don't need to worry on that part.
7318
04:45:46,280 --> 04:45:49,480
If I go ahead and open this up in the VIT,
7319
04:45:50,560 --> 04:45:51,880
it doesn't take place.
7320
04:45:51,880 --> 04:45:54,120
It doesn't actually does anything.
7321
04:45:54,120 --> 04:45:56,440
The reason for that is in the main.jsx,
7322
04:45:56,440 --> 04:45:58,000
or whatever your file is in your case,
7323
04:45:58,000 --> 04:45:59,240
whatever you're using,
7324
04:45:59,240 --> 04:46:00,880
you are actually still serving app.
7325
04:46:00,880 --> 04:46:04,400
It doesn't have the configuration which is required
7326
04:46:04,400 --> 04:46:06,800
to actually have this router.
7327
04:46:06,800 --> 04:46:08,320
And this router has a couple of ways
7328
04:46:08,320 --> 04:46:09,800
of how you can actually do the things.
7329
04:46:09,800 --> 04:46:10,960
I'll show you both the ways
7330
04:46:10,960 --> 04:46:13,520
which are actually mentioned in the documentation.
7331
04:46:13,520 --> 04:46:15,160
So the first thing that we are going to do
7332
04:46:15,160 --> 04:46:16,400
is keep this as it is.
7333
04:46:16,400 --> 04:46:18,160
We don't want to touch it initially,
7334
04:46:18,160 --> 04:46:20,000
but we want to create a router.
7335
04:46:20,000 --> 04:46:22,600
And this is the router which I showed you initially
7336
04:46:22,600 --> 04:46:25,120
that comes up from this create browser router.
7337
04:46:25,120 --> 04:46:27,600
There are multiple types of router that you can use,
7338
04:46:27,600 --> 04:46:30,080
but we'll be using this create browser router.
7339
04:46:30,080 --> 04:46:32,000
And we'll try to create a path like this.
7340
04:46:32,000 --> 04:46:33,120
I'll show you this syntax
7341
04:46:33,120 --> 04:46:34,960
and there's another syntax as well.
7342
04:46:34,960 --> 04:46:36,160
I'll show you the both.
7343
04:46:36,160 --> 04:46:38,160
You can pick up whichever you like.
7344
04:46:38,160 --> 04:46:40,800
So we can go ahead and create a router.
7345
04:46:40,800 --> 04:46:44,160
So router and that router will be created
7346
04:46:44,160 --> 04:46:47,160
by create browser router.
7347
04:46:47,160 --> 04:46:48,640
So again, create browser router
7348
04:46:48,640 --> 04:46:50,680
comes from the React router DOM.
7349
04:46:50,680 --> 04:46:52,480
It's nothing, it's a function.
7350
04:46:52,480 --> 04:46:55,080
But this is a function which doesn't work alone.
7351
04:46:55,080 --> 04:46:57,000
If you look at the documentation,
7352
04:46:57,000 --> 04:47:00,200
this function actually needs a route provider as well.
7353
04:47:00,200 --> 04:47:02,000
But it's not just the route provider.
7354
04:47:02,000 --> 04:47:03,600
You can see there are lots of ways
7355
04:47:03,600 --> 04:47:05,880
of how you can actually have the route provider,
7356
04:47:05,880 --> 04:47:09,360
static route provider, create a static handler.
7357
04:47:09,360 --> 04:47:11,720
There are a lot of ways browser router.
7358
04:47:11,720 --> 04:47:14,500
So this documentation is quite in depth
7359
04:47:14,500 --> 04:47:17,200
and there are multiple use cases for each one of them.
7360
04:47:17,200 --> 04:47:18,720
I'll show you the most easiest one
7361
04:47:18,720 --> 04:47:22,200
that what accompanied you need to create this one.
7362
04:47:22,200 --> 04:47:26,280
And what we'll be doing is simply we'll come here
7363
04:47:26,280 --> 04:47:31,280
and we'll take this one as create browser router.
7364
04:47:32,520 --> 04:47:34,720
Oops, create browser router is already there.
7365
04:47:34,720 --> 04:47:39,580
And we need create route elements.
7366
04:47:40,920 --> 04:47:43,520
Yeah, create route from elements, yep.
7367
04:47:43,520 --> 04:47:45,160
It's a little bit difficult to remember this one
7368
04:47:45,160 --> 04:47:47,180
but as you will do a couple of more projects,
7369
04:47:48,000 --> 04:47:49,360
you will be familiar with that.
7370
04:47:49,360 --> 04:47:51,280
So once we have this create browser router,
7371
04:47:51,280 --> 04:47:53,720
then inside this, you can go ahead and use this
7372
04:47:53,720 --> 04:47:58,720
which is create browser, create routes, my bad.
7373
04:47:59,720 --> 04:48:01,480
Create routes from element.
7374
04:48:01,480 --> 04:48:02,600
This is again a method.
7375
04:48:02,600 --> 04:48:04,960
This is again a method, no big deal there.
7376
04:48:04,960 --> 04:48:07,960
Now inside this, there's a syntax that you have to follow.
7377
04:48:07,960 --> 04:48:09,260
So I'll come back here.
7378
04:48:09,260 --> 04:48:13,280
You need a special element known as route.
7379
04:48:13,280 --> 04:48:16,040
And this route is obviously going to come
7380
04:48:16,060 --> 04:48:17,720
from the React router DOM.
7381
04:48:17,720 --> 04:48:20,860
And this route actually works like component itself.
7382
04:48:20,860 --> 04:48:24,140
So just like we saw that our empty components
7383
04:48:24,140 --> 04:48:25,560
can have headers and footers.
7384
04:48:25,560 --> 04:48:27,640
And we also saw that headers could wrap up
7385
04:48:27,640 --> 04:48:29,440
inside footers and all these elements.
7386
04:48:29,440 --> 04:48:32,600
So just like this route is nothing, it's just a component.
7387
04:48:32,600 --> 04:48:34,300
So notice like this is how it works.
7388
04:48:34,300 --> 04:48:38,120
So just a basic element, nothing more than that, a component.
7389
04:48:38,120 --> 04:48:41,680
But this route actually takes a couple of parameters
7390
04:48:41,680 --> 04:48:43,140
and based on this, how it works.
7391
04:48:43,140 --> 04:48:46,040
It works on this kind of a sandwich model that we have.
7392
04:48:46,040 --> 04:48:47,560
So we'll first of all say that, hey,
7393
04:48:47,560 --> 04:48:50,240
everything will go inside the path of a slash.
7394
04:48:50,240 --> 04:48:52,480
And what is the element that you want to load?
7395
04:48:52,480 --> 04:48:54,480
Every single time you have to follow the same syntax,
7396
04:48:54,480 --> 04:48:55,480
you have to tell it a path
7397
04:48:55,480 --> 04:48:57,520
and what element to load in that path.
7398
04:48:57,520 --> 04:49:00,800
Element simply means what components you want to load.
7399
04:49:00,800 --> 04:49:03,480
In my case, I'll just say, hey, element that I want to load
7400
04:49:03,480 --> 04:49:05,600
in this one, I'll give it like this.
7401
04:49:05,600 --> 04:49:09,000
I want to load an element known as layout.
7402
04:49:09,000 --> 04:49:12,120
And there we go, self-closing of course, there we go.
7403
04:49:12,120 --> 04:49:13,400
Now, once I've done this,
7404
04:49:13,400 --> 04:49:15,380
now things will actually take place
7405
04:49:15,380 --> 04:49:17,060
and instead of having this app,
7406
04:49:17,060 --> 04:49:19,860
we want to use this router inside one here.
7407
04:49:19,860 --> 04:49:21,420
So there's again a syntax,
7408
04:49:21,420 --> 04:49:24,020
a little bit syntax for this one as well.
7409
04:49:24,020 --> 04:49:25,860
We now don't want to use this app,
7410
04:49:25,860 --> 04:49:27,400
we want to use our layout
7411
04:49:27,400 --> 04:49:28,820
and want to load everything inside it.
7412
04:49:28,820 --> 04:49:30,980
In fact, if we have the app,
7413
04:49:30,980 --> 04:49:33,140
we want to load this inside the layout itself
7414
04:49:33,140 --> 04:49:35,540
so that the header and footer always remains.
7415
04:49:35,540 --> 04:49:38,420
So we have to remove this here, this one goes away,
7416
04:49:38,420 --> 04:49:40,220
this one doesn't load directly.
7417
04:49:40,220 --> 04:49:43,760
In fact, we go ahead and use a router provider here.
7418
04:49:43,760 --> 04:49:47,320
Again, router provider comes up from the React router.
7419
04:49:47,320 --> 04:49:48,640
And the whole idea behind that,
7420
04:49:48,640 --> 04:49:49,760
it's a self-closing element,
7421
04:49:49,760 --> 04:49:52,480
you don't need to just have the ending one.
7422
04:49:52,480 --> 04:49:55,640
And inside this, you provide just one param router,
7423
04:49:55,640 --> 04:49:57,240
which is the router.
7424
04:49:57,240 --> 04:49:58,480
A router is the property
7425
04:49:58,480 --> 04:50:00,720
and is the router which we are creating.
7426
04:50:00,720 --> 04:50:04,560
Make sure the router provider is getting operated
7427
04:50:04,560 --> 04:50:06,100
and is being taken care.
7428
04:50:06,100 --> 04:50:08,600
Once we have this, now what you'll notice is
7429
04:50:08,600 --> 04:50:10,380
we have this header and footer.
7430
04:50:10,380 --> 04:50:13,280
Since we haven't provided any outlet to this one,
7431
04:50:13,280 --> 04:50:16,760
that's why only thing that's loading is header and footer.
7432
04:50:16,760 --> 04:50:20,080
Now in this one, you can add as much as you like.
7433
04:50:20,080 --> 04:50:22,160
Now let's take care of this one here a little bit
7434
04:50:22,160 --> 04:50:25,160
since we have a couple of paths to work on with this one.
7435
04:50:25,160 --> 04:50:27,440
So we have this route element and I told you,
7436
04:50:27,440 --> 04:50:30,140
this is like an element, like a sandwich that we have.
7437
04:50:30,140 --> 04:50:32,280
We saw the sandwich kind of a thing here as well
7438
04:50:32,280 --> 04:50:33,560
and we can actually use that.
7439
04:50:33,560 --> 04:50:35,680
You might have seen that this is an opening,
7440
04:50:35,680 --> 04:50:36,680
this is a closing one,
7441
04:50:36,680 --> 04:50:39,000
inside this you can add as many as you like.
7442
04:50:39,000 --> 04:50:41,180
Similar to this, we have this one,
7443
04:50:41,180 --> 04:50:43,840
but right now the path that we are serving is this one.
7444
04:50:43,840 --> 04:50:46,000
So inside this, you can have as many routes
7445
04:50:46,000 --> 04:50:47,420
as you wish for them.
7446
04:50:47,420 --> 04:50:50,240
So these routes could be self-closing
7447
04:50:50,240 --> 04:50:53,020
or could be the sandwiching one like this one,
7448
04:50:53,020 --> 04:50:56,780
or you can have these ones as like this self-closing.
7449
04:50:56,780 --> 04:50:59,400
Now here's the interesting path.
7450
04:50:59,400 --> 04:51:02,360
First of all, what path do you want to load?
7451
04:51:02,360 --> 04:51:04,080
In this case, I want to load a path.
7452
04:51:04,080 --> 04:51:06,380
I'll tell you in a minute what path to load.
7453
04:51:06,420 --> 04:51:08,300
Single codes, double codes, whatever,
7454
04:51:08,300 --> 04:51:10,720
but I don't have an element in this one to load.
7455
04:51:10,720 --> 04:51:12,540
So what I'll do is I'll quickly go ahead
7456
04:51:12,540 --> 04:51:15,040
and create another component in this one.
7457
04:51:15,040 --> 04:51:18,340
So right click and we'll be creating a new folder.
7458
04:51:18,340 --> 04:51:20,220
Let's call this one as home.
7459
04:51:20,220 --> 04:51:23,380
Doesn't really matter, we'll be using the boilerplate code
7460
04:51:23,380 --> 04:51:26,060
and we'll be saying home.jsx.
7461
04:51:26,060 --> 04:51:27,980
And again, rfce, that's it.
7462
04:51:27,980 --> 04:51:31,420
All what we have is a home text being literally written.
7463
04:51:31,420 --> 04:51:33,540
Now inside this, I don't say anything.
7464
04:51:33,540 --> 04:51:35,180
I don't say a slash or anything further
7465
04:51:35,180 --> 04:51:37,960
because everything now happening is after the slash.
7466
04:51:37,960 --> 04:51:39,820
That's what the meaning of this first route
7467
04:51:39,820 --> 04:51:41,460
at line number 10 is.
7468
04:51:41,460 --> 04:51:43,260
Now what element do you want to load?
7469
04:51:43,260 --> 04:51:45,580
I want to load an element which is home.
7470
04:51:45,580 --> 04:51:46,780
So I'll just go ahead and say,
7471
04:51:46,780 --> 04:51:51,740
hey, give me an element which is home and self-closing.
7472
04:51:51,740 --> 04:51:53,380
Now when I go back, notice here,
7473
04:51:53,380 --> 04:51:54,820
the home element gets loaded.
7474
04:51:54,820 --> 04:51:57,120
So that is the advantage of this one.
7475
04:51:57,120 --> 04:51:58,740
In the basic layout, notice here,
7476
04:51:58,740 --> 04:51:59,820
I'm actually at the slash.
7477
04:51:59,820 --> 04:52:01,220
So this is technically slash,
7478
04:52:01,220 --> 04:52:03,300
which is where I'm home is loading.
7479
04:52:03,300 --> 04:52:05,380
Now let's just say, for an example sake,
7480
04:52:05,380 --> 04:52:08,740
you want to have a router which says about.
7481
04:52:08,740 --> 04:52:11,340
So again, first create that component itself.
7482
04:52:11,340 --> 04:52:13,120
So we'll create a new folder.
7483
04:52:13,120 --> 04:52:15,620
We'll call this one as about
7484
04:52:15,620 --> 04:52:17,860
and right click and create a new file.
7485
04:52:17,860 --> 04:52:22,860
Let's call this one as about.jsx, of course,
7486
04:52:23,440 --> 04:52:25,260
and rfce, nothing.
7487
04:52:25,260 --> 04:52:27,720
It just says about literally nothing else.
7488
04:52:27,720 --> 04:52:29,080
You guessed it right.
7489
04:52:29,080 --> 04:52:31,620
Now after the slash on the home route, this works,
7490
04:52:31,620 --> 04:52:34,460
but I want slash about to load that component.
7491
04:52:34,460 --> 04:52:37,020
Again, go back here and simply say route.
7492
04:52:37,020 --> 04:52:39,420
Again, this will be a component.
7493
04:52:39,420 --> 04:52:42,400
So route, self-closing could be fine here.
7494
04:52:42,400 --> 04:52:45,140
And then simply we will have a path
7495
04:52:45,140 --> 04:52:47,140
which is going to be like this.
7496
04:52:47,140 --> 04:52:49,220
This one is going to be saying at this time,
7497
04:52:49,220 --> 04:52:50,980
we need to change it as about.
7498
04:52:50,980 --> 04:52:52,940
Remember, we are saying about here,
7499
04:52:52,940 --> 04:52:54,700
but this about is after the slash
7500
04:52:54,700 --> 04:52:56,140
because it is sandwiching that one.
7501
04:52:56,140 --> 04:52:58,040
So sandwiching concept comes up here.
7502
04:52:58,040 --> 04:53:02,280
So on the homepage, we have given a layout,
7503
04:53:02,280 --> 04:53:04,680
a layout, a route here.
7504
04:53:04,680 --> 04:53:06,880
This is too much difficult to spell.
7505
04:53:06,880 --> 04:53:09,280
Here, we are saying that on the same level,
7506
04:53:09,280 --> 04:53:11,220
on the same hierarchies after the slash,
7507
04:53:11,220 --> 04:53:14,200
if I write about, remember, I don't say slash about,
7508
04:53:14,200 --> 04:53:15,760
otherwise it will be twice.
7509
04:53:15,760 --> 04:53:18,940
I just say about, what element do you want to load?
7510
04:53:18,940 --> 04:53:22,080
The element that I want to load is going to be like this.
7511
04:53:22,080 --> 04:53:25,080
And this one is definitely going to be about.
7512
04:53:25,080 --> 04:53:26,800
And there we go, self-closing.
7513
04:53:26,800 --> 04:53:29,800
So now technically I can go on to slash
7514
04:53:30,680 --> 04:53:32,560
and I can just go ahead and say about.
7515
04:53:32,560 --> 04:53:34,600
Notice here header and footer remains same,
7516
04:53:34,600 --> 04:53:36,720
but my about changes.
7517
04:53:36,720 --> 04:53:38,600
So I can go back, this is home.
7518
04:53:38,600 --> 04:53:41,060
So this is the whole idea, whole concept.
7519
04:53:41,060 --> 04:53:43,680
If you want to go further into this that I want about,
7520
04:53:43,680 --> 04:53:46,880
and then after that some slash or something like that,
7521
04:53:46,880 --> 04:53:48,480
then obviously you can go ahead and say that,
7522
04:53:48,480 --> 04:53:49,980
hey, this is my about and slash,
7523
04:53:49,980 --> 04:53:51,480
this is where I'll be loading this one.
7524
04:53:51,480 --> 04:53:54,960
So notice here, I can still go on to slash about
7525
04:53:54,960 --> 04:53:56,480
and it still works.
7526
04:53:56,480 --> 04:53:57,920
If you want to have it like this,
7527
04:53:57,920 --> 04:53:59,480
again, use the sandwiching concepts.
7528
04:53:59,480 --> 04:54:03,560
So in this case, I'll just go ahead and say a route.
7529
04:54:03,560 --> 04:54:04,760
There we go.
7530
04:54:04,760 --> 04:54:06,680
And we'll end this one.
7531
04:54:06,680 --> 04:54:07,720
Oops, my bad.
7532
04:54:07,720 --> 04:54:10,000
This one needs to go like this.
7533
04:54:10,000 --> 04:54:12,680
And we don't need this one, my bad.
7534
04:54:14,360 --> 04:54:15,200
There we go.
7535
04:54:15,200 --> 04:54:18,560
So now we have a closing one, closing partner of this one.
7536
04:54:18,560 --> 04:54:21,760
Now I can go back and again start writing the elements,
7537
04:54:21,760 --> 04:54:23,440
whatever that element is.
7538
04:54:23,440 --> 04:54:26,840
This could be about, and this could be company.
7539
04:54:28,800 --> 04:54:30,640
And I can load any element, whatever I want.
7540
04:54:30,640 --> 04:54:32,960
So just remember the concept of the sandwiching.
7541
04:54:32,960 --> 04:54:34,280
So one things can be inside it.
7542
04:54:34,280 --> 04:54:35,960
Whenever you need a further drill down path,
7543
04:54:35,960 --> 04:54:36,880
you can do this.
7544
04:54:36,880 --> 04:54:38,280
If you don't want to do this,
7545
04:54:38,280 --> 04:54:40,720
just use a self-closing one, that's also the same.
7546
04:54:40,720 --> 04:54:43,960
So you get the idea how the concept actually works.
7547
04:54:43,960 --> 04:54:46,800
All right, so now we know the basic principle
7548
04:54:46,800 --> 04:54:48,240
of how the things are there.
7549
04:54:48,240 --> 04:54:49,620
There are a couple of more principle
7550
04:54:49,620 --> 04:54:52,000
that we need to actually go ahead and work on with this.
7551
04:54:52,000 --> 04:54:54,760
And we need to have a small discussion on this one.
7552
04:54:54,760 --> 04:54:58,960
Let's go on to the home, not home header, header.
7553
04:54:58,960 --> 04:55:00,600
This is where we'll be working on.
7554
04:55:01,600 --> 04:55:03,640
So again, we need to copy paste some of the CSS
7555
04:55:03,640 --> 04:55:04,800
for this one.
7556
04:55:04,800 --> 04:55:05,800
So we'll be grabbing all the,
7557
04:55:05,800 --> 04:55:08,040
we can just go ahead and grab directly all of this.
7558
04:55:08,040 --> 04:55:10,720
We have the header at the very top, we'll be doing that.
7559
04:55:10,720 --> 04:55:13,120
But there are some elements which actually requires
7560
04:55:13,120 --> 04:55:15,320
your attention into this part.
7561
04:55:15,320 --> 04:55:18,040
So let's go ahead and grab, remove this one.
7562
04:55:18,040 --> 04:55:21,000
And we'll be having a simple header, just like this.
7563
04:55:21,000 --> 04:55:23,240
It will have a class name,
7564
04:55:23,240 --> 04:55:26,160
and I'll obviously copy and paste the class names.
7565
04:55:26,160 --> 04:55:28,280
This is the part where it's a little boring,
7566
04:55:28,280 --> 04:55:30,760
but don't worry, there are some interesting features here,
7567
04:55:30,760 --> 04:55:32,200
which we want to discuss.
7568
04:55:32,200 --> 04:55:35,500
Then we have a nav, which we are writing again, plus name.
7569
04:55:36,840 --> 04:55:39,180
And again, the class name will remain same.
7570
04:55:39,180 --> 04:55:40,840
So copy and paste that.
7571
04:55:40,840 --> 04:55:43,540
So now that we have nav, inside the nav,
7572
04:55:43,540 --> 04:55:45,720
we will be writing variety of links.
7573
04:55:45,720 --> 04:55:48,500
Now your first intention would be just to use a tag.
7574
04:55:48,500 --> 04:55:51,380
This is where things can go actually wrong.
7575
04:55:51,380 --> 04:55:53,220
So I'll just have a div, another one here,
7576
04:55:53,220 --> 04:55:55,900
because that's how we laid out while designing this.
7577
04:55:55,900 --> 04:55:59,260
So I'll just have the class names, copy that,
7578
04:55:59,260 --> 04:56:00,420
paste that up here.
7579
04:56:00,420 --> 04:56:02,300
And inside this div, we have all the links.
7580
04:56:02,300 --> 04:56:05,580
What you saw earlier on the webpage, like here,
7581
04:56:06,620 --> 04:56:07,780
home about and all of that.
7582
04:56:07,780 --> 04:56:09,020
So they are just obviously,
7583
04:56:09,020 --> 04:56:11,940
they are just links all inside this one.
7584
04:56:11,940 --> 04:56:13,300
So we'll be using that.
7585
04:56:13,300 --> 04:56:17,180
Now the first intention is always go and use the A tag
7586
04:56:17,180 --> 04:56:18,480
and just write this.
7587
04:56:19,320 --> 04:56:21,920
Remember the A tag, the whole idea behind using the anchor
7588
04:56:21,920 --> 04:56:24,520
tag is to move on to different resources.
7589
04:56:24,520 --> 04:56:26,900
When you use A tag, the page actually reloads.
7590
04:56:26,900 --> 04:56:29,960
It remounts because the control is given to the browser
7591
04:56:29,960 --> 04:56:31,760
and the DOM, which is in the browser itself.
7592
04:56:31,760 --> 04:56:33,880
We don't want that because page should not reload.
7593
04:56:33,880 --> 04:56:35,480
It's a single page application.
7594
04:56:35,480 --> 04:56:37,720
And that is why every single router,
7595
04:56:37,720 --> 04:56:40,740
no matter it's in Next year's or React or wherever it is,
7596
04:56:40,740 --> 04:56:43,220
it is giving you some ways of navigating things.
7597
04:56:43,220 --> 04:56:45,460
Because remember, this is all a facade.
7598
04:56:45,460 --> 04:56:46,800
This is not real.
7599
04:56:46,800 --> 04:56:50,040
This is just a simulation of moving to slash about
7600
04:56:50,040 --> 04:56:53,120
and wherever it actually never goes there.
7601
04:56:53,120 --> 04:56:55,800
So that is why in every single time you'll find something
7602
04:56:55,800 --> 04:56:58,280
known as link or somewhat similar to that,
7603
04:56:58,280 --> 04:57:01,320
which is actually coming up from, as you noticed here,
7604
04:57:01,320 --> 04:57:02,160
React router DOM.
7605
04:57:02,160 --> 04:57:04,320
Remember it always comes from React router DOM
7606
04:57:04,320 --> 04:57:05,600
or somewhat like that.
7607
04:57:05,600 --> 04:57:07,200
And we work through that.
7608
04:57:07,200 --> 04:57:09,240
So in this case, we'll be just saying that,
7609
04:57:09,240 --> 04:57:12,040
hey, we'll be having a link.
7610
04:57:12,040 --> 04:57:13,880
And again, this could be a self-closing one,
7611
04:57:13,880 --> 04:57:15,880
or you can just go ahead and close it like this.
7612
04:57:15,880 --> 04:57:19,240
So I can just go ahead and say slash link like this.
7613
04:57:19,240 --> 04:57:20,520
Again, it could be self-closing.
7614
04:57:20,520 --> 04:57:22,520
It could be like this, totally up to you.
7615
04:57:22,520 --> 04:57:24,480
Now in this link, what do you want to have?
7616
04:57:24,480 --> 04:57:27,000
We have just an image with the logo or something like this.
7617
04:57:27,000 --> 04:57:29,800
So in the image part, we are not talking that much,
7618
04:57:29,800 --> 04:57:32,400
but yeah, we just added an image or something like this.
7619
04:57:32,400 --> 04:57:34,660
But notice here, this link is pretty interesting.
7620
04:57:34,660 --> 04:57:37,080
This is not your A tag.
7621
04:57:37,080 --> 04:57:38,280
It doesn't have an href.
7622
04:57:38,280 --> 04:57:40,400
It has rather a tag of known as two,
7623
04:57:40,400 --> 04:57:43,120
and this too will take you wherever you like to go.
7624
04:57:43,120 --> 04:57:44,840
So this is the interesting part
7625
04:57:44,840 --> 04:57:45,960
where you should pay attention.
7626
04:57:45,960 --> 04:57:47,520
So if I go back up here,
7627
04:57:47,520 --> 04:57:49,840
notice here, this logo comes up here.
7628
04:57:49,840 --> 04:57:51,620
So simply go ahead and works on with that.
7629
04:57:51,620 --> 04:57:53,640
We just found this random logo on the internet
7630
04:57:53,640 --> 04:57:55,160
and we worked on with that.
7631
04:57:55,160 --> 04:57:57,920
Now, similar to this, you can actually have more of this.
7632
04:57:57,920 --> 04:57:59,200
In fact, now I can go ahead
7633
04:57:59,200 --> 04:58:01,960
and bring all of this header component up here.
7634
04:58:01,960 --> 04:58:06,600
So if I just go back here, copy this, exactly same thing.
7635
04:58:06,600 --> 04:58:09,360
So I can just now replace and talk about it.
7636
04:58:09,360 --> 04:58:12,780
Paste this, and we have exported default all of this.
7637
04:58:12,780 --> 04:58:14,680
But the only thing that is still required
7638
04:58:14,840 --> 04:58:16,280
is to import the links and all of that.
7639
04:58:16,280 --> 04:58:17,840
Otherwise it will yell at you.
7640
04:58:17,840 --> 04:58:20,680
So go ahead and import React.
7641
04:58:20,680 --> 04:58:21,960
Do we need React?
7642
04:58:21,960 --> 04:58:23,300
I don't think so, we need React,
7643
04:58:23,300 --> 04:58:25,600
but still if it is saying, I'll just grab it.
7644
04:58:25,600 --> 04:58:29,040
We need link definitely because we discussed about it.
7645
04:58:29,040 --> 04:58:32,040
And the link is going to come from React Router DOM.
7646
04:58:32,040 --> 04:58:35,700
And not only link, let me show you a couple of more stuff.
7647
04:58:35,700 --> 04:58:38,240
So the link is actually one way of navigating
7648
04:58:38,240 --> 04:58:40,000
from one place to another place.
7649
04:58:40,000 --> 04:58:42,280
So notice here, mostly the link is used,
7650
04:58:42,280 --> 04:58:44,680
but there is also a nav link being used.
7651
04:58:44,680 --> 04:58:48,280
So nav link is also a part like that, so navigation link.
7652
04:58:48,280 --> 04:58:50,280
Right now we are just using it as a basic,
7653
04:58:50,280 --> 04:58:52,800
but nav link actually gives you a couple of more features
7654
04:58:52,800 --> 04:58:54,000
like on what page you are
7655
04:58:54,000 --> 04:58:55,880
and what values you can actually use.
7656
04:58:55,880 --> 04:58:57,720
So we'll see some of the variations
7657
04:58:57,720 --> 04:58:59,040
and versions of that as well.
7658
04:58:59,040 --> 04:59:01,360
But right now we'll just import that and leave it.
7659
04:59:01,360 --> 04:59:04,160
Remember, link is not the only way of navigating.
7660
04:59:04,160 --> 04:59:05,800
We have the nav link as well.
7661
04:59:05,800 --> 04:59:08,160
And we can read about the documentation of this one
7662
04:59:08,160 --> 04:59:10,560
if they have any global search.
7663
04:59:10,600 --> 04:59:11,900
I don't think so.
7664
04:59:13,640 --> 04:59:14,760
Let's just say components.
7665
04:59:14,760 --> 04:59:16,280
You can see the nav link here.
7666
04:59:16,280 --> 04:59:18,400
And what you'll see in the nav link,
7667
04:59:18,400 --> 04:59:20,920
you can find out pretty easily what class is active
7668
04:59:20,920 --> 04:59:22,520
and what ends and all of that.
7669
04:59:22,520 --> 04:59:25,120
So notice here, it says two messages.
7670
04:59:25,120 --> 04:59:27,120
So the link and nav link almost same,
7671
04:59:27,120 --> 04:59:30,000
the two section and everything is almost same.
7672
04:59:30,000 --> 04:59:32,160
The only thing additional with the nav link is
7673
04:59:32,160 --> 04:59:33,960
you actually get this is active
7674
04:59:33,960 --> 04:59:35,580
and is pending and all of that.
7675
04:59:35,580 --> 04:59:37,840
So why are using this is active,
7676
04:59:37,840 --> 04:59:39,280
which whenever you use any class name
7677
04:59:39,280 --> 04:59:40,720
or any arrow functions like this,
7678
04:59:40,720 --> 04:59:42,320
it is available to you directly.
7679
04:59:43,600 --> 04:59:45,160
And notice here, they also say this,
7680
04:59:45,160 --> 04:59:46,760
a nav link is a special kind of link
7681
04:59:46,760 --> 04:59:48,440
that knows whether it is active or not.
7682
04:59:48,440 --> 04:59:51,400
So when you go up onto the applications like this,
7683
04:59:51,400 --> 04:59:54,180
and when you say that, hey, this page is active
7684
04:59:54,180 --> 04:59:56,280
or this page is active, just like that,
7685
04:59:56,280 --> 04:59:59,520
that whole functionality can be done via the nav link.
7686
04:59:59,520 --> 05:00:02,020
So that's why we have this nav link.
7687
05:00:02,020 --> 05:00:04,200
All right, by the way, notice here,
7688
05:00:04,200 --> 05:00:05,840
this is exactly what we are doing,
7689
05:00:05,840 --> 05:00:08,480
whatever the values are active and all of that.
7690
05:00:08,480 --> 05:00:11,400
We'll talk about that later on in the some sections
7691
05:00:11,400 --> 05:00:12,560
where we'll be having.
7692
05:00:12,560 --> 05:00:17,240
In fact, we can actually talk about this into about whatnot.
7693
05:00:17,240 --> 05:00:19,120
So this is get started.
7694
05:00:19,120 --> 05:00:21,280
Then we have couple of nav links on the home.
7695
05:00:21,280 --> 05:00:23,360
Actually, we have just one on the home.
7696
05:00:23,360 --> 05:00:25,580
We can design it right now itself.
7697
05:00:25,580 --> 05:00:27,440
So let's just say on the home,
7698
05:00:27,440 --> 05:00:30,600
what you can do is you can just add a couple
7699
05:00:30,600 --> 05:00:33,720
of more practices and what the text you want.
7700
05:00:33,720 --> 05:00:35,640
So for example, now we are in the nav link
7701
05:00:35,640 --> 05:00:38,140
in the class name itself, since we are using a callback,
7702
05:00:38,140 --> 05:00:40,540
this is the syntax exactly, they are also mentioning it.
7703
05:00:40,540 --> 05:00:42,540
So we are not doing anything special.
7704
05:00:42,540 --> 05:00:43,980
In the class name property,
7705
05:00:43,980 --> 05:00:45,780
we have the access of this callback
7706
05:00:45,780 --> 05:00:46,940
and then we can write all this.
7707
05:00:46,940 --> 05:00:49,920
So this is exactly what we'll be also doing.
7708
05:00:49,920 --> 05:00:54,880
So in this one, we have the access to this is active.
7709
05:00:54,880 --> 05:00:57,340
Remember, this needs to be exactly as is active
7710
05:00:57,340 --> 05:00:58,180
or is pending.
7711
05:00:58,180 --> 05:01:01,220
So we don't decide the variable name in here.
7712
05:01:01,220 --> 05:01:02,680
So we have this is active.
7713
05:01:02,680 --> 05:01:04,060
And by the way, one more thing,
7714
05:01:04,060 --> 05:01:05,900
which usually I also forget,
7715
05:01:05,900 --> 05:01:07,620
this is active needs to be extracted
7716
05:01:07,620 --> 05:01:08,900
as a property like this.
7717
05:01:08,900 --> 05:01:12,540
So yeah, I also make sometimes this mistake.
7718
05:01:12,540 --> 05:01:16,580
So let's go ahead and keep it up like this.
7719
05:01:16,580 --> 05:01:18,820
And now you have access to is active.
7720
05:01:18,820 --> 05:01:20,060
Now based on is active,
7721
05:01:20,060 --> 05:01:22,580
we can decide whether the color is going to be gray
7722
05:01:22,580 --> 05:01:23,420
or this one.
7723
05:01:23,420 --> 05:01:25,220
So we'll just actually cut this out.
7724
05:01:25,220 --> 05:01:27,220
We want to cut this one out.
7725
05:01:27,220 --> 05:01:29,940
And once we are cutting this out,
7726
05:01:29,940 --> 05:01:32,300
we can inject the JavaScript again.
7727
05:01:32,340 --> 05:01:34,600
And by the way,
7728
05:01:36,100 --> 05:01:38,020
dollar sign is missing.
7729
05:01:38,020 --> 05:01:39,340
Yeah, now we are happy.
7730
05:01:39,340 --> 05:01:41,620
Okay, now based on is active,
7731
05:01:41,620 --> 05:01:45,180
we can do a question mark and a ternary operator here.
7732
05:01:45,180 --> 05:01:49,740
If it is active, then we can go ahead and use a text of,
7733
05:01:50,580 --> 05:01:52,080
not this one, text orange.
7734
05:01:52,080 --> 05:01:55,820
So we'll just say text dash orange.
7735
05:01:55,820 --> 05:01:58,100
We'll be probably using 700 version of it.
7736
05:01:58,100 --> 05:01:59,460
That's what we used.
7737
05:01:59,460 --> 05:02:02,780
And here we can use a text dash gray 700.
7738
05:02:04,940 --> 05:02:08,700
Gray 700, no suggestions.
7739
05:02:08,700 --> 05:02:09,540
There we go.
7740
05:02:11,340 --> 05:02:13,540
No suggestions, strange.
7741
05:02:13,540 --> 05:02:15,300
Anyways, we can just find it out later on
7742
05:02:15,300 --> 05:02:16,300
if we are doing any mistake.
7743
05:02:16,300 --> 05:02:19,340
And by the way, this needs to be wrapped inside the quotes
7744
05:02:19,340 --> 05:02:22,540
because it's a class, not a variable.
7745
05:02:22,540 --> 05:02:26,620
Class I mean to say tailwind class.
7746
05:02:26,620 --> 05:02:28,260
So that is all what we have.
7747
05:02:28,260 --> 05:02:30,180
And based on this, we can have a nav link
7748
05:02:30,180 --> 05:02:31,820
which can provide you whether you are active
7749
05:02:31,820 --> 05:02:33,380
or not onto this one.
7750
05:02:33,380 --> 05:02:35,140
So nav link should be refined.
7751
05:02:35,140 --> 05:02:39,340
So now we have our own home, but if I go on to about,
7752
05:02:39,340 --> 05:02:41,300
so we have the home.
7753
05:02:42,220 --> 05:02:45,280
And if I go on to slash about,
7754
05:02:46,220 --> 05:02:47,860
this should be technically going away.
7755
05:02:47,860 --> 05:02:51,300
We shouldn't be having this link as,
7756
05:02:51,300 --> 05:02:53,620
if it is true, then it's 700.
7757
05:02:53,620 --> 05:02:57,180
If it is false, it goes like this.
7758
05:02:57,180 --> 05:02:59,860
But okay, we'll see that how this actually works
7759
05:02:59,860 --> 05:03:03,260
and how we can actually have more links onto this one.
7760
05:03:03,260 --> 05:03:05,780
This one is nav link.
7761
05:03:05,780 --> 05:03:08,380
We haven't mentioned the two, we have to mention that.
7762
05:03:08,380 --> 05:03:10,180
Otherwise how it will work.
7763
05:03:10,180 --> 05:03:12,820
And we'll be saying that, hey, you will be on slash.
7764
05:03:12,820 --> 05:03:15,200
So now it will keep a track of, there we go.
7765
05:03:15,200 --> 05:03:17,140
Now, if I go back to home, it's orange.
7766
05:03:17,140 --> 05:03:21,340
But if I go back to slash about, we are not active.
7767
05:03:21,340 --> 05:03:23,220
There we go, told you, simple.
7768
05:03:23,220 --> 05:03:25,780
Okay, now we can have multiple of these allies
7769
05:03:25,780 --> 05:03:28,760
and can define a home about whatever you wish.
7770
05:03:28,760 --> 05:03:31,060
So I'll just copy and paste from ally.
7771
05:03:31,060 --> 05:03:33,600
I'll just duplicate this.
7772
05:03:33,600 --> 05:03:38,480
And this one is going to be slash about.
7773
05:03:38,480 --> 05:03:41,560
And there we go, now I forgot to change the text.
7774
05:03:42,940 --> 05:03:44,300
About, save that.
7775
05:03:44,300 --> 05:03:46,800
Now we can travel to home, we can travel to about.
7776
05:03:46,800 --> 05:03:49,460
And similarly, we can have more of these.
7777
05:03:49,460 --> 05:03:51,040
So if I remember, we have home about,
7778
05:03:51,040 --> 05:03:52,940
and we will also have the contact.
7779
05:03:52,940 --> 05:03:55,060
So I'll just duplicate this one.
7780
05:03:55,100 --> 05:03:57,940
I hope you remember the shortcut for duplicating in VS code.
7781
05:03:57,940 --> 05:04:00,760
If not, right now is a good time to find it out about.
7782
05:04:00,760 --> 05:04:03,200
Okay, home, contact.
7783
05:04:04,880 --> 05:04:09,480
Contact, this one is going to be contact.
7784
05:04:10,460 --> 05:04:13,180
We also will have probably GitHub as well.
7785
05:04:13,180 --> 05:04:15,980
We'll be having some fun with GitHub as well.
7786
05:04:15,980 --> 05:04:18,120
All right, copy and paste that.
7787
05:04:19,460 --> 05:04:22,060
This one will say, I'll go to GitHub component
7788
05:04:22,060 --> 05:04:23,040
wherever that is.
7789
05:04:25,100 --> 05:04:28,260
All right, so now we have home, we have about,
7790
05:04:28,260 --> 05:04:30,460
although there is nothing inside the contact.
7791
05:04:30,460 --> 05:04:33,200
So this route doesn't, is there.
7792
05:04:33,200 --> 05:04:35,500
So we need to actually define our 404 route as well.
7793
05:04:35,500 --> 05:04:36,800
We can work on with that.
7794
05:04:36,800 --> 05:04:39,460
But at least our home and about component are there.
7795
05:04:39,460 --> 05:04:41,220
And we now know about the nav link,
7796
05:04:41,220 --> 05:04:42,580
which is a special kind of a link
7797
05:04:42,580 --> 05:04:44,780
and we are aware of how things are there.
7798
05:04:44,780 --> 05:04:46,820
Now with this, we can actually go ahead and move on
7799
05:04:46,820 --> 05:04:48,860
and work with the footer, which is super easy.
7800
05:04:48,860 --> 05:04:50,620
Now you can go onto my notes.
7801
05:04:50,620 --> 05:04:51,460
And this is the footer,
7802
05:04:51,460 --> 05:04:53,620
just scroll it all the way to the right.
7803
05:04:53,620 --> 05:04:55,140
And you will find this copy button
7804
05:04:55,140 --> 05:04:57,380
or you can manually copy and paste that.
7805
05:04:57,380 --> 05:05:00,780
And all we have to do is paste this all here.
7806
05:05:00,780 --> 05:05:02,820
Since we have link in this one,
7807
05:05:02,820 --> 05:05:04,980
so just go ahead and fix the errors.
7808
05:05:04,980 --> 05:05:09,100
Let's first import the React, import React,
7809
05:05:09,100 --> 05:05:11,220
and then we'll be importing the link.
7810
05:05:13,580 --> 05:05:15,820
And that link is from React Router DOM.
7811
05:05:15,820 --> 05:05:17,980
Technically, we should be all good now.
7812
05:05:17,980 --> 05:05:19,860
So we can see at least a home and about,
7813
05:05:19,860 --> 05:05:20,860
but our footer is coming.
7814
05:05:20,860 --> 05:05:22,500
So it's looking nice as well.
7815
05:05:22,500 --> 05:05:24,620
Apart from this, there is no big deal
7816
05:05:24,620 --> 05:05:26,540
and no facade about it.
7817
05:05:27,420 --> 05:05:30,420
Similarly, we have a home component as well.
7818
05:05:30,420 --> 05:05:32,620
We can go back and replace it with the home.
7819
05:05:32,620 --> 05:05:34,940
So again, it will look just a little bit beautiful,
7820
05:05:34,940 --> 05:05:36,700
nothing more than that.
7821
05:05:36,700 --> 05:05:41,540
And home, select all, replace it.
7822
05:05:41,540 --> 05:05:42,380
I don't think so.
7823
05:05:42,380 --> 05:05:44,980
We have anything in this required.
7824
05:05:44,980 --> 05:05:46,420
Let's just try this.
7825
05:05:46,420 --> 05:05:49,380
Save this and go back.
7826
05:05:49,380 --> 05:05:50,980
And do we have some links?
7827
05:05:50,980 --> 05:05:53,540
Yep, we have some links in the home as well.
7828
05:05:53,540 --> 05:05:55,260
So let's import that, no big deal.
7829
05:05:55,260 --> 05:06:00,260
In fact, we can actually copy, paste footer here.
7830
05:06:00,340 --> 05:06:02,580
And let's just copy and paste.
7831
05:06:02,580 --> 05:06:04,100
All right, let's come here.
7832
05:06:05,860 --> 05:06:06,900
And there we go.
7833
05:06:06,900 --> 05:06:08,460
Should be all okay now.
7834
05:06:08,460 --> 05:06:09,300
There we go.
7835
05:06:09,300 --> 05:06:10,140
So we have home page.
7836
05:06:10,140 --> 05:06:12,420
So we have learned how we can design that home about
7837
05:06:12,420 --> 05:06:13,540
and whatnot.
7838
05:06:13,540 --> 05:06:15,540
So I'm leaving this contact page to you
7839
05:06:15,540 --> 05:06:16,580
as a simple exercise.
7840
05:06:16,580 --> 05:06:18,700
All you have to do is go up here.
7841
05:06:18,700 --> 05:06:20,540
We have the contact us page as well
7842
05:06:20,540 --> 05:06:22,780
and go ahead and work on with the contact us page,
7843
05:06:22,780 --> 05:06:24,100
about us page.
7844
05:06:24,100 --> 05:06:26,940
About, I can do this for you.
7845
05:06:26,940 --> 05:06:29,420
Okay, so about is here.
7846
05:06:29,420 --> 05:06:31,340
We'll be replacing it with here
7847
05:06:31,340 --> 05:06:32,700
and we'll be importing the link.
7848
05:06:32,700 --> 05:06:33,940
If we have, I don't think so.
7849
05:06:33,940 --> 05:06:38,940
We have link from React router down.
7850
05:06:39,900 --> 05:06:40,740
Let's see.
7851
05:06:40,740 --> 05:06:42,580
If we have about, yep, home is looking good.
7852
05:06:42,580 --> 05:06:43,420
About is looking good.
7853
05:06:43,420 --> 05:06:45,500
Contact is for your exercise.
7854
05:06:45,500 --> 05:06:47,060
Maybe, maybe, I don't know.
7855
05:06:47,060 --> 05:06:48,460
We'll try to have some of the work
7856
05:06:48,460 --> 05:06:50,820
with the contact and user and whatnot.
7857
05:06:50,820 --> 05:06:52,820
Okay, one more thing that we'll be doing
7858
05:06:52,820 --> 05:06:56,020
is we'll be creating another component.
7859
05:06:56,940 --> 05:06:59,060
Let's go back onto the code side of it
7860
05:07:00,340 --> 05:07:02,340
and we'll be creating another component.
7861
05:07:02,340 --> 05:07:03,540
Let's call this one as user
7862
05:07:03,540 --> 05:07:06,180
because I want to show you some more ideas
7863
05:07:06,180 --> 05:07:07,500
that you'll be using.
7864
05:07:07,500 --> 05:07:09,180
Let's call this one as simple user
7865
05:07:10,300 --> 05:07:14,900
and we'll be having a simple layout here, new file.
7866
05:07:14,900 --> 05:07:18,780
That will be user.jsx
7867
05:07:18,780 --> 05:07:21,500
and just the basic RFC.
7868
05:07:21,500 --> 05:07:22,340
So we have a user.
7869
05:07:22,340 --> 05:07:25,460
Now, in order to make sure that this component loads
7870
05:07:25,460 --> 05:07:27,460
somewhere, we have too many files opened up.
7871
05:07:27,460 --> 05:07:29,540
I would love to close that.
7872
05:07:29,540 --> 05:07:32,340
In order to make sure that I have a really huge code base
7873
05:07:32,340 --> 05:07:33,980
into the user, in order to load this,
7874
05:07:33,980 --> 05:07:35,980
I need to go into main.jsx
7875
05:07:35,980 --> 05:07:39,740
and how can I load a route which actually loads this one?
7876
05:07:39,740 --> 05:07:41,860
So I can just go ahead and say that,
7877
05:07:41,860 --> 05:07:44,140
hey, I want to have a route
7878
05:07:44,140 --> 05:07:46,540
and this route will be on going to
7879
05:07:46,540 --> 05:07:48,820
whatever the path you ask me to do so.
7880
05:07:48,820 --> 05:07:51,540
I'll just say, hey, go on to user
7881
05:07:51,540 --> 05:07:54,100
and the component or the element that I'll be loading here
7882
05:07:54,100 --> 05:07:57,060
is going to be a user.
7883
05:07:57,060 --> 05:08:01,380
User, it doesn't suggest me user.
7884
05:08:02,580 --> 05:08:04,100
Okay, I'll write that again.
7885
05:08:04,100 --> 05:08:06,260
I want suggestions.
7886
05:08:06,260 --> 05:08:07,300
Okay, there we go.
7887
05:08:07,300 --> 05:08:10,460
And here we'll be saying, hey, give me user.
7888
05:08:10,460 --> 05:08:11,940
It doesn't give me user.
7889
05:08:11,940 --> 05:08:15,420
Save that and probably this will give us issues.
7890
05:08:16,740 --> 05:08:17,860
It surely will.
7891
05:08:17,860 --> 05:08:19,540
I will just first remove this about
7892
05:08:19,540 --> 05:08:21,260
because we don't want that.
7893
05:08:21,260 --> 05:08:22,780
The element should be user.
7894
05:08:24,460 --> 05:08:26,860
It should be auto importing that.
7895
05:08:26,860 --> 05:08:28,500
And we'll be saying import user
7896
05:08:28,500 --> 05:08:31,220
from component user user JSX.
7897
05:08:31,220 --> 05:08:32,940
Okay, all happy.
7898
05:08:32,940 --> 05:08:36,900
Now, can we have another link for the user itself?
7899
05:08:36,900 --> 05:08:37,740
Probably yes.
7900
05:08:37,740 --> 05:08:39,620
Let's go into the header.
7901
05:08:40,140 --> 05:08:45,140
And can we have another LI for the user itself?
7902
05:08:45,740 --> 05:08:47,700
Let's try this.
7903
05:08:47,700 --> 05:08:51,180
Link, go ahead, copy and duplicate that.
7904
05:08:51,180 --> 05:08:54,780
This will be going to a user
7905
05:08:54,780 --> 05:08:58,180
and we'll be calling this one as user, how easy that was.
7906
05:08:58,180 --> 05:09:02,220
Okay, now if I go back to the user, okay, I get the user.
7907
05:09:02,220 --> 05:09:03,900
Now in this user, first of all,
7908
05:09:03,900 --> 05:09:06,580
let's just central line some of the stuff.
7909
05:09:06,580 --> 05:09:07,900
We don't want it like that.
7910
05:09:07,900 --> 05:09:09,740
So we'll be adding some of the class name,
7911
05:09:09,740 --> 05:09:11,980
we'll be adding some of the background,
7912
05:09:11,980 --> 05:09:15,620
BG dash orange suggestions.
7913
05:09:15,620 --> 05:09:17,380
We'll be using orange like this
7914
05:09:18,340 --> 05:09:21,460
and we'll be saying text dash black
7915
05:09:21,460 --> 05:09:26,060
and text dash three X, three XL,
7916
05:09:26,060 --> 05:09:29,620
text dash three command suggestions,
7917
05:09:29,620 --> 05:09:32,780
three X, no suggestions.
7918
05:09:32,780 --> 05:09:34,260
Yeah, text three XL.
7919
05:09:34,260 --> 05:09:35,660
And we'll be saying text center
7920
05:09:35,660 --> 05:09:37,500
just to make sure things are all good
7921
05:09:37,980 --> 05:09:39,540
and okay, at least they are visible.
7922
05:09:39,540 --> 05:09:44,020
We can even add a padding on Y axis of five.
7923
05:09:44,020 --> 05:09:45,220
Yeah, better.
7924
05:09:45,220 --> 05:09:46,820
Okay, so far we are all good
7925
05:09:46,820 --> 05:09:48,340
and we understand this part is there,
7926
05:09:48,340 --> 05:09:50,940
but there will be cases in your situation
7927
05:09:50,940 --> 05:09:53,460
where the user will be dynamic.
7928
05:09:53,460 --> 05:09:55,380
So dynamic routing is a very common scenario.
7929
05:09:55,380 --> 05:09:58,060
So for example, the user ID is,
7930
05:09:58,060 --> 05:09:59,420
I cannot write it here,
7931
05:10:00,300 --> 05:10:01,460
something like one, two, three,
7932
05:10:01,460 --> 05:10:04,500
or maybe username with a username of Ateesh.
7933
05:10:04,500 --> 05:10:07,380
So I want to grab this path and this URL.
7934
05:10:08,100 --> 05:10:10,140
So that dynamic capturing is one of the core essence
7935
05:10:10,140 --> 05:10:12,060
of how you will be using the route.
7936
05:10:12,060 --> 05:10:14,700
The way how we use it is actually simply go ahead
7937
05:10:14,700 --> 05:10:16,260
and simply write something here,
7938
05:10:16,260 --> 05:10:19,220
which is slash and then the colon is important.
7939
05:10:19,220 --> 05:10:23,300
This is how you capture anything out after the user slash,
7940
05:10:23,300 --> 05:10:24,420
whatever comes next to it,
7941
05:10:24,420 --> 05:10:25,980
you'll be able to capture that.
7942
05:10:25,980 --> 05:10:29,340
And then carefully name this parameter.
7943
05:10:29,340 --> 05:10:31,380
This is a placeholder user ID.
7944
05:10:31,380 --> 05:10:34,300
This could be just ID, this could be product ID,
7945
05:10:34,300 --> 05:10:36,980
whatever you want, this could be anything like that.
7946
05:10:36,980 --> 05:10:39,780
But this is not job done because if you go back up here,
7947
05:10:39,780 --> 05:10:42,540
user definitely that's all good.
7948
05:10:42,540 --> 05:10:45,660
But if I go back, so notice here the user,
7949
05:10:45,660 --> 05:10:47,820
now we are saying, hey, this is not happening
7950
05:10:47,820 --> 05:10:50,420
because I don't know what to do with this.
7951
05:10:50,420 --> 05:10:51,780
This obviously will give us error.
7952
05:10:51,780 --> 05:10:54,100
Now we need to go into the user and figure out a way
7953
05:10:54,100 --> 05:10:56,220
that we accept all these things.
7954
05:10:56,220 --> 05:10:57,940
Now, in order to make sure that we have defined
7955
05:10:57,940 --> 05:11:00,100
that this path is actually accepting the parameters
7956
05:11:00,100 --> 05:11:03,180
and whatnot, we have to use the params.
7957
05:11:03,180 --> 05:11:05,140
And yes, this is literally the name.
7958
05:11:05,140 --> 05:11:10,140
And we call this one as use params, no suggestions.
7959
05:11:11,260 --> 05:11:14,860
Use params, no suggestions.
7960
05:11:14,860 --> 05:11:16,220
Yeah, that's bad.
7961
05:11:16,220 --> 05:11:19,340
And that actually comes from react router DOM.
7962
05:11:20,460 --> 05:11:23,180
Okay, and why are you having issues?
7963
05:11:23,180 --> 05:11:27,020
Because I wrote const import, there we go.
7964
05:11:27,020 --> 05:11:30,540
Now all you have to do in this case is this use param
7965
05:11:30,540 --> 05:11:33,340
is actually a hook, we studied hook quite a lot.
7966
05:11:33,340 --> 05:11:34,980
And this is a hook, that means it's a function,
7967
05:11:35,700 --> 05:11:36,540
nothing more than that.
7968
05:11:36,540 --> 05:11:37,780
But what this function gives us back,
7969
05:11:37,780 --> 05:11:38,900
that is important for us.
7970
05:11:38,900 --> 05:11:40,220
So it gives us a lot of things,
7971
05:11:40,220 --> 05:11:42,500
we can extract some information out of it.
7972
05:11:42,500 --> 05:11:44,020
What information to extract?
7973
05:11:44,020 --> 05:11:45,860
Yes, exactly, user ID.
7974
05:11:45,860 --> 05:11:46,900
Why user ID?
7975
05:11:46,900 --> 05:11:50,500
Because we call this as a user ID in this place.
7976
05:11:50,500 --> 05:11:52,740
And after the colon, the colon is a symbol
7977
05:11:52,740 --> 05:11:54,580
that, hey, this will be going into use param
7978
05:11:54,580 --> 05:11:55,980
and you'll be able to extract this
7979
05:11:55,980 --> 05:11:58,580
with a key ID of user ID just right here.
7980
05:11:58,580 --> 05:12:00,240
Now let's just go back what happens.
7981
05:12:00,240 --> 05:12:02,500
If I go ahead and get back, it says,
7982
05:12:02,540 --> 05:12:04,740
hey, prop and route, error boundary.
7983
05:12:05,700 --> 05:12:07,980
Okay, looks like this one is okay,
7984
05:12:07,980 --> 05:12:11,100
but my main.gsx is having some of the issues.
7985
05:12:11,100 --> 05:12:14,660
Let's go back onto main.gsx.
7986
05:12:14,660 --> 05:12:18,220
This one user path element is all okay,
7987
05:12:19,500 --> 05:12:20,700
should be all okay.
7988
05:12:21,700 --> 05:12:23,180
And let's also check the user,
7989
05:12:23,180 --> 05:12:27,140
I'll be exporting that export default user,
7990
05:12:27,140 --> 05:12:28,620
we are exporting that.
7991
05:12:28,620 --> 05:12:31,220
Let me quickly check that why this is yelling at me.
7992
05:12:32,100 --> 05:12:35,300
All right, so found the bug, a pretty easy one,
7993
05:12:35,300 --> 05:12:36,500
probably because it's late night,
7994
05:12:36,500 --> 05:12:38,040
sometimes these things happens.
7995
05:12:38,040 --> 05:12:41,820
So again, we are actually good in this case already.
7996
05:12:41,820 --> 05:12:44,980
The issue that we are facing is pretty easy actually.
7997
05:12:44,980 --> 05:12:47,780
If I go ahead and refresh this, this page works,
7998
05:12:47,780 --> 05:12:50,780
but if I go onto the slash user or this one,
7999
05:12:50,780 --> 05:12:53,540
this doesn't work because we never defined the route
8000
05:12:53,540 --> 05:12:56,140
that what happens when the slash user only comes.
8001
05:12:56,140 --> 05:12:58,260
We are only defining and are talking about
8002
05:12:58,260 --> 05:12:59,740
what happens when the user slash
8003
05:12:59,780 --> 05:13:02,540
and some parameters comes into that picture.
8004
05:13:02,540 --> 05:13:05,220
So the easy way to fix it is actually to remove this,
8005
05:13:05,220 --> 05:13:06,540
let's cut this out.
8006
05:13:06,540 --> 05:13:09,100
And let's not make this one a self-closing,
8007
05:13:09,100 --> 05:13:12,860
use the sandwich of concept that we studied about.
8008
05:13:12,860 --> 05:13:13,820
So we'll be saying that,
8009
05:13:13,820 --> 05:13:15,860
hey, let's just go ahead and close this route.
8010
05:13:15,860 --> 05:13:17,940
Now we can use the sandwiching concept.
8011
05:13:17,940 --> 05:13:20,980
And then I can use the inside the sandwich route,
8012
05:13:20,980 --> 05:13:22,960
which obviously will make it as slash,
8013
05:13:22,960 --> 05:13:25,420
everything is inside slash, then we have user,
8014
05:13:25,420 --> 05:13:27,940
on the user will load the element user.
8015
05:13:27,940 --> 05:13:29,500
And after that, if there is a colon,
8016
05:13:30,140 --> 05:13:32,860
which technically makes user slash colon user ID,
8017
05:13:32,860 --> 05:13:34,460
we will load again the user element.
8018
05:13:34,460 --> 05:13:36,740
So very basic, but again,
8019
05:13:36,740 --> 05:13:40,100
sometimes these things do take some time to debugging.
8020
05:13:40,100 --> 05:13:41,660
So there we go, we have this user.
8021
05:13:41,660 --> 05:13:44,780
And additionally, what we did is inside the user one,
8022
05:13:44,780 --> 05:13:47,700
since we extracted this user ID, I just placed it here.
8023
05:13:47,700 --> 05:13:48,540
It just available.
8024
05:13:48,540 --> 05:13:50,460
I'm displaying a variable in JavaScript.
8025
05:13:50,460 --> 05:13:52,400
I'm not doing any magic here.
8026
05:13:52,400 --> 05:13:54,860
So when I go back here, the advantage of this is now,
8027
05:13:54,860 --> 05:13:57,420
anything that comes up here in the URL after this,
8028
05:13:57,420 --> 05:13:58,900
whatever the dynamic route,
8029
05:13:58,940 --> 05:14:01,580
I will be able to catch this dynamic route.
8030
05:14:01,580 --> 05:14:03,940
For example, if I just have something like Hitesh here,
8031
05:14:03,940 --> 05:14:05,300
I can grab this.
8032
05:14:05,300 --> 05:14:07,900
Maybe this is something on the user page
8033
05:14:07,900 --> 05:14:09,620
where you have some clickable elements.
8034
05:14:09,620 --> 05:14:10,860
And while clickable elements,
8035
05:14:10,860 --> 05:14:13,540
you are coming on to some GitHub user ID,
8036
05:14:13,540 --> 05:14:15,580
some blog or anything.
8037
05:14:15,580 --> 05:14:18,020
So I can grab elements from the URL itself,
8038
05:14:18,020 --> 05:14:19,860
make a fetch request and get the data.
8039
05:14:19,860 --> 05:14:23,100
So this is the whole idea of doing everything
8040
05:14:23,100 --> 05:14:24,900
that we are doing up here.
8041
05:14:24,900 --> 05:14:27,300
All right, so now let's go ahead and work on
8042
05:14:27,340 --> 05:14:30,260
with some more stuff, which is also pretty interesting
8043
05:14:30,260 --> 05:14:31,780
and a new concept into this one.
8044
05:14:31,780 --> 05:14:34,680
Actually, Next.js also uses this same concept.
8045
05:14:34,680 --> 05:14:35,920
So we'll be working on with this one.
8046
05:14:35,920 --> 05:14:38,480
I hope the center element of this one,
8047
05:14:38,480 --> 05:14:41,580
how the routers and the dynamic parameter comes up,
8048
05:14:41,580 --> 05:14:43,080
this is all clear to you.
8049
05:14:43,080 --> 05:14:45,100
And by the way, even if you don't put this one
8050
05:14:45,100 --> 05:14:46,240
and directly put up this,
8051
05:14:46,240 --> 05:14:47,860
then the user route will not work,
8052
05:14:47,860 --> 05:14:50,880
but user slash whatever something will also work.
8053
05:14:50,880 --> 05:14:53,620
Okay, going back, we need one more route
8054
05:14:53,620 --> 05:14:54,760
to work on with this one.
8055
05:14:54,760 --> 05:14:56,420
So we'll go out of the sandwiching.
8056
05:14:56,420 --> 05:14:58,340
We are not interested in this one.
8057
05:14:58,340 --> 05:15:00,180
First, let's create a new component.
8058
05:15:00,180 --> 05:15:02,740
That component will be again, very basic,
8059
05:15:02,740 --> 05:15:04,580
but very interesting one actually.
8060
05:15:04,580 --> 05:15:06,740
Let's go ahead and call this one as GitHub.
8061
05:15:06,740 --> 05:15:09,420
And inside this, we'll be creating a component
8062
05:15:09,420 --> 05:15:14,420
known as GitHub.jsx of course, .jsx, again, RFCE, that is it.
8063
05:15:17,060 --> 05:15:20,740
Now in this GitHub and all of this,
8064
05:15:20,740 --> 05:15:24,800
what we want to do this here is just simply show some data
8065
05:15:24,800 --> 05:15:25,640
into this one.
8066
05:15:25,640 --> 05:15:28,040
First, let's go ahead and create this route
8067
05:15:28,040 --> 05:15:30,320
that would be super beneficial for us.
8068
05:15:30,320 --> 05:15:35,320
So we'll be having a route, route, and there we go.
8069
05:15:36,200 --> 05:15:38,040
And we don't want this path a strict.
8070
05:15:38,040 --> 05:15:39,520
This simply means when you have a strict,
8071
05:15:39,520 --> 05:15:41,800
that means all the 404 found,
8072
05:15:41,800 --> 05:15:43,560
just load this element up here.
8073
05:15:43,560 --> 05:15:45,120
So now if we have this element,
8074
05:15:45,120 --> 05:15:46,760
make sure this is at the very end of it
8075
05:15:46,760 --> 05:15:49,500
because they are evaluated on case by case basis.
8076
05:15:49,500 --> 05:15:54,200
Now, if we reach out to something like contact,
8077
05:15:54,440 --> 05:15:57,360
which we don't have defined, it just says not found GitHub,
8078
05:15:57,360 --> 05:15:59,840
which is not yet defined, so it says not found.
8079
05:15:59,840 --> 05:16:03,480
So this is a classic example of if nothing cases.
8080
05:16:03,480 --> 05:16:05,440
So have you studied switching cases?
8081
05:16:05,440 --> 05:16:07,160
Yeah, this is almost like that.
8082
05:16:07,160 --> 05:16:09,320
But before that, make sure it is always at the end.
8083
05:16:09,320 --> 05:16:11,480
We also want to have this GitHub.
8084
05:16:11,480 --> 05:16:15,040
So we'll be having a route path will be GitHub.
8085
05:16:15,040 --> 05:16:18,840
And the element that we'll be loading is going to be GitHub.
8086
05:16:18,840 --> 05:16:21,180
Yep, bring this one in here.
8087
05:16:21,180 --> 05:16:22,640
And now we have this GitHub
8088
05:16:22,640 --> 05:16:26,080
and let's modify this a little bit, not too much,
8089
05:16:26,080 --> 05:16:28,280
but at least bearable.
8090
05:16:28,280 --> 05:16:29,820
So we'll have some of the class name.
8091
05:16:29,820 --> 05:16:33,000
Let's grab first of all, text to the center.
8092
05:16:33,000 --> 05:16:35,720
We'll be having a margin of four on all the sides.
8093
05:16:35,720 --> 05:16:37,960
Background will be gray.
8094
05:16:37,960 --> 05:16:38,920
How much gray?
8095
05:16:38,920 --> 05:16:40,960
600 is good enough.
8096
05:16:40,960 --> 05:16:42,960
Text can be white.
8097
05:16:42,960 --> 05:16:44,320
And what else?
8098
05:16:44,320 --> 05:16:46,280
Padding would be four on all the side
8099
05:16:46,280 --> 05:16:47,800
and text would be large.
8100
05:16:47,800 --> 05:16:50,000
So 3XL would be good.
8101
05:16:50,000 --> 05:16:50,960
And there we go.
8102
05:16:50,960 --> 05:16:53,880
And we have decent stuff coming up in here.
8103
05:16:53,880 --> 05:16:54,960
Now we have this one.
8104
05:16:54,960 --> 05:16:58,320
Now I want to fetch some data from the API itself.
8105
05:16:58,320 --> 05:17:01,920
And if you remember, fetching the data is not that hard.
8106
05:17:01,920 --> 05:17:04,800
And I can just visit this URL and grab some of the data.
8107
05:17:04,800 --> 05:17:07,080
And it's an object that is being thrown at me.
8108
05:17:07,080 --> 05:17:08,280
It's a public URL.
8109
05:17:08,280 --> 05:17:11,400
You can also go ahead and make a fetch request there.
8110
05:17:11,400 --> 05:17:13,400
So as soon as this component mounts,
8111
05:17:13,400 --> 05:17:16,120
I want this request to be fetched up to me.
8112
05:17:16,120 --> 05:17:17,320
And I want to use that.
8113
05:17:17,520 --> 05:17:24,000
One easy way of doing that is have a simple data as my state.
8114
05:17:24,000 --> 05:17:25,280
So set data.
8115
05:17:25,280 --> 05:17:27,440
And we'll be using react.useState.
8116
05:17:27,440 --> 05:17:32,360
By default, it will be an empty array object.
8117
05:17:32,360 --> 05:17:36,160
Whatever you like to have, we'll just have an empty null.
8118
05:17:36,160 --> 05:17:38,080
We'll have an array or maybe an object.
8119
05:17:38,080 --> 05:17:39,840
We'll figure it out.
8120
05:17:39,840 --> 05:17:42,120
Now I can use a useEffect hook.
8121
05:17:42,120 --> 05:17:45,240
So useEffect in this.
8122
05:17:45,240 --> 05:17:46,240
And there we go.
8123
05:17:46,240 --> 05:17:47,400
We have a useEffect.
8124
05:17:47,400 --> 05:17:49,680
It has no dependency array.
8125
05:17:49,680 --> 05:17:51,360
So there we go.
8126
05:17:51,360 --> 05:17:52,960
And now what will I do here?
8127
05:17:52,960 --> 05:17:53,960
I'll fetch.
8128
05:17:53,960 --> 05:17:57,160
So I'll say fetch.
8129
05:17:57,160 --> 05:17:58,720
This is a nice boilerplate.
8130
05:17:58,720 --> 05:18:00,440
But I'll write my own.
8131
05:18:00,440 --> 05:18:03,320
I'll simply say we want to fetch this URL.
8132
05:18:03,320 --> 05:18:06,800
If this URL gets a success, so we'll say dot then.
8133
05:18:06,800 --> 05:18:08,480
It will give me a callback.
8134
05:18:08,480 --> 05:18:10,840
I'll say let's call this one as response.
8135
05:18:10,840 --> 05:18:12,960
But response is in the string format.
8136
05:18:12,960 --> 05:18:15,000
I need to convert it into JSON.
8137
05:18:15,000 --> 05:18:18,280
So let's have the response.json.
8138
05:18:18,280 --> 05:18:21,000
Then chain on one more then, because that will actually
8139
05:18:21,000 --> 05:18:22,960
extract the data.
8140
05:18:22,960 --> 05:18:24,720
And we'll be having, again, a callback.
8141
05:18:24,720 --> 05:18:26,000
Let's call this one as data.
8142
05:18:26,000 --> 05:18:28,440
There we go, callback, just like this.
8143
05:18:28,440 --> 05:18:30,640
And we can console log the data, as well as set the
8144
05:18:30,640 --> 05:18:32,400
data into the data.
8145
05:18:32,400 --> 05:18:33,320
So there we go.
8146
05:18:33,320 --> 05:18:36,240
Now the data is being set into this one.
8147
05:18:36,240 --> 05:18:41,000
And now we can extract some of the data out of this one.
8148
05:18:41,000 --> 05:18:44,480
Let's first console log and see if this is all coming up when
8149
05:18:44,480 --> 05:18:46,400
we hit this particular route.
8150
05:18:46,400 --> 05:18:50,000
Right click, inspect, and console.
8151
05:18:50,000 --> 05:18:51,600
OK, too much.
8152
05:18:51,600 --> 05:18:57,160
And we will expand this a little bit.
8153
05:18:57,160 --> 05:18:57,560
There we go.
8154
05:18:57,560 --> 05:19:01,720
So if I go back to contact and load the GitHub, it gets
8155
05:19:01,720 --> 05:19:04,160
nothing as of now, because we are not
8156
05:19:04,160 --> 05:19:06,040
using it technically.
8157
05:19:06,040 --> 05:19:10,240
OK, time to actually use this data itself.
8158
05:19:10,240 --> 05:19:11,320
Interesting.
8159
05:19:11,320 --> 05:19:13,040
How we can use this?
8160
05:19:13,120 --> 05:19:15,480
Once the data is actually being set, as soon as the
8161
05:19:15,480 --> 05:19:18,160
component mounts, save this, go back.
8162
05:19:18,160 --> 05:19:22,320
And now I can see I have this object.
8163
05:19:22,320 --> 05:19:24,080
Let's reload this one more time.
8164
05:19:24,080 --> 05:19:26,000
Probably I didn't save that.
8165
05:19:26,000 --> 05:19:27,760
OK, fill rule.
8166
05:19:27,760 --> 05:19:28,840
Did you mean fill rule?
8167
05:19:28,840 --> 05:19:30,720
No, all these.
8168
05:19:30,720 --> 05:19:33,680
OK, these are just the CSS and DOM properties, not
8169
05:19:33,680 --> 05:19:35,040
interested in them.
8170
05:19:35,040 --> 05:19:36,960
Contact, GitHub, there we go.
8171
05:19:36,960 --> 05:19:40,040
Now I have this object, which has a lot of data, and
8172
05:19:40,040 --> 05:19:42,240
probably out of this data, because I'm console
8173
05:19:42,240 --> 05:19:45,800
logging the data, and I'm console logging this.
8174
05:19:45,800 --> 05:19:48,320
So let's extract some values out of it.
8175
05:19:48,320 --> 05:19:50,920
So what values can I grab?
8176
05:19:50,920 --> 05:19:52,680
First of all, the followers count maybe.
8177
05:19:56,560 --> 05:20:00,040
Followers, there we go.
8178
05:20:00,040 --> 05:20:02,360
And let's inject the variable since I have access to this
8179
05:20:02,360 --> 05:20:06,120
data, and if you have studied this, you know that I've
8180
05:20:06,120 --> 05:20:07,320
actually gone through many times.
8181
05:20:07,320 --> 05:20:08,880
You can just extract what do you want.
8182
05:20:08,880 --> 05:20:10,960
I want just the followers count here.
8183
05:20:11,040 --> 05:20:12,840
That's why I just mentioned this, and there we go.
8184
05:20:12,840 --> 05:20:14,440
I get the followers count.
8185
05:20:14,440 --> 05:20:17,160
So notice here, we can grab the image as well.
8186
05:20:17,160 --> 05:20:17,800
Should we?
8187
05:20:17,800 --> 05:20:20,040
Yeah, let's grab the image.
8188
05:20:20,040 --> 05:20:22,600
And I'll say I'll be needing an image.
8189
05:20:22,600 --> 05:20:23,280
There we go.
8190
05:20:23,280 --> 05:20:25,360
What is the source?
8191
05:20:25,360 --> 05:20:30,440
Source will come up from data if the data has avatar
8192
05:20:30,440 --> 05:20:38,040
underscore URL, and we'll also need to give a width of 300.
8193
05:20:38,040 --> 05:20:40,760
All right, so we have this image as well as all the
8194
05:20:40,840 --> 05:20:41,240
data.
8195
05:20:41,240 --> 05:20:43,840
Now here comes the interesting part where things will get a
8196
05:20:43,840 --> 05:20:47,080
little bit more interesting towards the router.
8197
05:20:47,080 --> 05:20:48,360
I go into about.
8198
05:20:48,360 --> 05:20:49,840
I go into contact.
8199
05:20:49,840 --> 05:20:52,160
When I go into GitHub, that is where the
8200
05:20:52,160 --> 05:20:53,840
request is being sent.
8201
05:20:53,840 --> 05:20:54,640
We cannot simulate.
8202
05:20:54,640 --> 05:20:57,160
This one has to come up after a few seconds.
8203
05:20:57,160 --> 05:20:59,800
But what you'll notice is the use effect will only take
8204
05:20:59,800 --> 05:21:03,080
place when this component particularly loads up on the
8205
05:21:03,080 --> 05:21:04,280
page, so contact.
8206
05:21:04,280 --> 05:21:07,160
When I go up here, so this will make a fetch request.
8207
05:21:07,160 --> 05:21:10,760
Now what if we could have done this a little bit better?
8208
05:21:10,760 --> 05:21:11,720
Can we optimize this?
8209
05:21:11,720 --> 05:21:13,040
This is already very optimized.
8210
05:21:13,040 --> 05:21:17,480
But what if there could be advance stage of this one?
8211
05:21:17,480 --> 05:21:19,080
Like for example, I'm going into contact.
8212
05:21:19,080 --> 05:21:22,520
Before clicking on this, I keep my mouse over for probably a
8213
05:21:22,520 --> 05:21:25,800
fraction of second milliseconds, but then I click on it.
8214
05:21:25,800 --> 05:21:27,920
The same thing can be used for the advantage.
8215
05:21:27,920 --> 05:21:29,360
Next year's does exactly same.
8216
05:21:29,360 --> 05:21:32,600
When you actually pull your mouse over over this one, it
8217
05:21:32,600 --> 05:21:35,520
automatically sends a network request to load all the
8218
05:21:35,520 --> 05:21:36,960
resources that you require.
8219
05:21:36,960 --> 05:21:38,800
And then when you click on it, the things are
8220
05:21:38,800 --> 05:21:40,520
already available for you.
8221
05:21:40,520 --> 05:21:43,480
Now how can we do this in this scenario with the React
8222
05:21:43,480 --> 05:21:44,040
Router DOM?
8223
05:21:44,040 --> 05:21:45,880
In the next years, it happens automatically
8224
05:21:45,880 --> 05:21:46,920
behind the scene.
8225
05:21:46,920 --> 05:21:49,600
But how we can actually do this one up here?
8226
05:21:49,600 --> 05:21:53,240
Now doing all of this thing is actually super, super easy.
8227
05:21:53,240 --> 05:21:54,440
Let me show you how this is done.
8228
05:21:54,440 --> 05:21:56,480
First of all, we don't need this data and all of that.
8229
05:21:56,480 --> 05:21:59,560
This was just to show you that how regularly we do this.
8230
05:21:59,560 --> 05:22:01,800
Again, a good example exercise.
8231
05:22:01,800 --> 05:22:03,440
We'll just come in this one out.
8232
05:22:03,440 --> 05:22:05,200
And we'll write this thing again.
8233
05:22:05,880 --> 05:22:10,000
Usually there's a case where people write these kinds of
8234
05:22:10,000 --> 05:22:11,520
methods in the component itself.
8235
05:22:11,520 --> 05:22:13,920
But if you wish, you can separate that out as well.
8236
05:22:13,920 --> 05:22:17,520
All you have to do is export a kind of a method.
8237
05:22:17,520 --> 05:22:22,120
We'll call this one as GitHub info loader.
8238
05:22:22,120 --> 05:22:24,400
And this one is going to be a simple callback just like
8239
05:22:24,400 --> 05:22:28,240
this, but the only advantage we want to take care of here is
8240
05:22:28,240 --> 05:22:30,320
we want to make this request as a sink.
8241
05:22:30,320 --> 05:22:35,200
Previously, we were using the fetch in the .then syntax.
8242
05:22:35,200 --> 05:22:36,160
You can use that as well.
8243
05:22:36,160 --> 05:22:38,320
But I want a sink here as well.
8244
05:22:38,320 --> 05:22:41,080
So what we'll do is we'll obviously await and we'll do
8245
05:22:41,080 --> 05:22:43,720
the fetch because I don't want to continue if this is not
8246
05:22:43,720 --> 05:22:44,560
there.
8247
05:22:44,560 --> 05:22:47,160
And the fetch is going to fetch the same URL.
8248
05:22:47,160 --> 05:22:49,440
No changes there.
8249
05:22:49,440 --> 05:22:51,120
We know that this works.
8250
05:22:51,120 --> 05:22:53,520
And let's hold the response into a variable.
8251
05:22:53,520 --> 05:22:56,960
So let's call this one as response.
8252
05:22:56,960 --> 05:22:58,120
So there we go.
8253
05:22:58,120 --> 05:23:05,280
And now all we have to do is return this response.
8254
05:23:05,280 --> 05:23:09,280
We don't need to await this here, response.json.
8255
05:23:09,280 --> 05:23:13,960
OK, now notice here we are just returning this response.
8256
05:23:13,960 --> 05:23:16,880
We are not having this data and whatever that is.
8257
05:23:16,880 --> 05:23:19,560
The good thing is I can return this as it is.
8258
05:23:19,560 --> 05:23:22,400
Now, once you are returning this, then the next step
8259
05:23:22,400 --> 05:23:25,440
actually is almost in this file, but we don't do this
8260
05:23:25,440 --> 05:23:27,520
here because this is not the data flow.
8261
05:23:27,560 --> 05:23:29,640
Understanding the data flow is important.
8262
05:23:29,640 --> 05:23:32,080
Once you are done with this, this method actually first
8263
05:23:32,080 --> 05:23:34,600
gets loaded into main.jsx where you're actually
8264
05:23:34,600 --> 05:23:35,920
having this routing.
8265
05:23:35,920 --> 05:23:37,640
So this method needs to come up here.
8266
05:23:37,640 --> 05:23:38,320
Let's go ahead.
8267
05:23:38,320 --> 05:23:40,640
And since the method actually exists in the same component,
8268
05:23:40,640 --> 05:23:43,000
that is why a lot of people prefer to have this here.
8269
05:23:43,000 --> 05:23:45,160
We can just go ahead and say this one
8270
05:23:45,160 --> 05:23:48,280
is going to be GitHub info loader, whatever the name is.
8271
05:23:48,280 --> 05:23:51,080
And then once we are done with this,
8272
05:23:51,080 --> 05:23:53,640
we don't actually load the GitHub just like this.
8273
05:23:53,640 --> 05:23:55,600
We actually provide additional property.
8274
05:23:55,600 --> 05:23:57,160
We don't need to use the sandwiching,
8275
05:23:57,160 --> 05:23:58,960
but we need to provide additional.
8276
05:23:58,960 --> 05:24:01,120
The path will be same, the element will be same,
8277
05:24:01,120 --> 05:24:04,240
but there is one more element or prop,
8278
05:24:04,240 --> 05:24:06,000
which is known as loader.
8279
05:24:06,000 --> 05:24:08,440
This loader actually takes a method that whatever
8280
05:24:08,440 --> 05:24:10,640
the information you need to fetch, calculate,
8281
05:24:10,640 --> 05:24:13,320
whatever you need to do, just get me that method first
8282
05:24:13,320 --> 05:24:16,120
so that if somebody is trying to load this route,
8283
05:24:16,120 --> 05:24:19,600
I can do some of my advanced pre-processing on it.
8284
05:24:19,600 --> 05:24:21,400
Once you are done with this, the next question
8285
05:24:21,400 --> 05:24:23,600
in your mind would be, okay, we created a method
8286
05:24:23,600 --> 05:24:26,440
in this file, we exported, gave this method to this guy,
8287
05:24:26,440 --> 05:24:30,280
but how can I get the data from this whole method?
8288
05:24:30,280 --> 05:24:33,320
I have returned the response, but I need this.
8289
05:24:33,320 --> 05:24:35,600
This is a common mistake that a lot of people do this.
8290
05:24:35,600 --> 05:24:37,120
Hey, since you have exported this here,
8291
05:24:37,120 --> 05:24:38,760
let's use this method and grab the data.
8292
05:24:38,760 --> 05:24:39,880
No, no, you don't do that.
8293
05:24:39,880 --> 05:24:42,280
That's not a proper way of doing the things.
8294
05:24:42,280 --> 05:24:44,160
In this case, when you want to have this,
8295
05:24:44,160 --> 05:24:46,760
you actually use a hook which is given to you
8296
05:24:46,760 --> 05:24:48,360
by React Router DOM.
8297
05:24:48,360 --> 05:24:49,880
So let's go ahead and use this.
8298
05:24:49,880 --> 05:24:54,160
And this one is going to come up from React Router DOM.
8299
05:24:54,200 --> 05:24:56,760
The name of the hook is pretty simple.
8300
05:24:56,760 --> 05:24:59,880
You can guess that, use loader data.
8301
05:24:59,880 --> 05:25:03,120
Yeah, the property name there is loader.
8302
05:25:03,120 --> 05:25:05,240
And here is the use loader data.
8303
05:25:05,240 --> 05:25:08,560
Since this is a hook, you obviously know how to use the hook.
8304
05:25:08,560 --> 05:25:12,680
So it's a simple use loader, just like this.
8305
05:25:12,680 --> 05:25:13,960
It's a method, there we go.
8306
05:25:13,960 --> 05:25:15,480
And you can extract data from it.
8307
05:25:15,480 --> 05:25:17,080
So call this one as data.
8308
05:25:17,080 --> 05:25:19,120
Since all the variables that we named them
8309
05:25:19,120 --> 05:25:21,960
as a data.follower, so this will have that object
8310
05:25:21,960 --> 05:25:23,840
and you can extract the information.
8311
05:25:23,840 --> 05:25:26,000
So now technically it looks same
8312
05:25:26,000 --> 05:25:27,840
that hey, we have contact about.
8313
05:25:27,840 --> 05:25:30,960
Now if I go to GitHub, it technically looks same,
8314
05:25:30,960 --> 05:25:34,520
but it's actually doing a lot of pre-processing for you.
8315
05:25:34,520 --> 05:25:36,320
In the smaller application like this,
8316
05:25:36,320 --> 05:25:38,180
it is a little bit difficult to find
8317
05:25:38,180 --> 05:25:40,760
that it is adding some value for us, but trust me,
8318
05:25:40,760 --> 05:25:43,280
it is adding a lot, lots of value.
8319
05:25:43,280 --> 05:25:45,040
And this exact same pattern,
8320
05:25:45,040 --> 05:25:46,960
you don't have to use that much of hooks and stuff
8321
05:25:46,960 --> 05:25:49,080
is used in the next JS as well.
8322
05:25:49,080 --> 05:25:50,880
They also do a lot of pre-loading
8323
05:25:50,880 --> 05:25:53,120
and pre-processing of data.
8324
05:25:53,160 --> 05:25:54,360
A lot of fun stuff is there.
8325
05:25:54,360 --> 05:25:57,000
But by the way, this whole thing is actually available
8326
05:25:57,000 --> 05:25:59,200
in case you want to use classic react
8327
05:25:59,200 --> 05:26:00,960
in some of the applications,
8328
05:26:00,960 --> 05:26:02,340
you can actually go ahead and use that.
8329
05:26:02,340 --> 05:26:03,600
By the way, there's a lot of things
8330
05:26:03,600 --> 05:26:05,280
you can go ahead and work on with this one.
8331
05:26:05,280 --> 05:26:07,320
There's so much of routes available.
8332
05:26:07,320 --> 05:26:09,040
A one that we studied is use params.
8333
05:26:09,040 --> 05:26:10,640
So user ID, use params.
8334
05:26:10,640 --> 05:26:12,560
This is exactly what we studied.
8335
05:26:12,560 --> 05:26:15,360
We have so much more use submit, use route.
8336
05:26:15,360 --> 05:26:16,920
There's so much of advancement.
8337
05:26:16,920 --> 05:26:18,560
In fact, there could be a separate course
8338
05:26:18,560 --> 05:26:19,800
on this in itself.
8339
05:26:19,800 --> 05:26:22,200
I'll try probably in the future to create one search.
8340
05:26:23,080 --> 05:26:24,760
If you really want this one to happen,
8341
05:26:24,760 --> 05:26:26,020
let me know in the comment section.
8342
05:26:26,020 --> 05:26:29,460
I would love to do this as a course in itself.
8343
05:26:29,460 --> 05:26:32,880
So this is pretty good of one crash course
8344
05:26:32,880 --> 05:26:34,440
on the React router.
8345
05:26:34,440 --> 05:26:35,760
All the advanced things
8346
05:26:35,760 --> 05:26:38,000
which you probably are going to need are covered up.
8347
05:26:38,000 --> 05:26:39,600
Yes, there are still more.
8348
05:26:39,600 --> 05:26:42,720
Something like forcefully pushing the user onto some page
8349
05:26:42,720 --> 05:26:43,560
once we have logged in.
8350
05:26:43,560 --> 05:26:45,680
And all of this will be covered up later on
8351
05:26:45,680 --> 05:26:47,280
when we'll do some of the mega project.
8352
05:26:47,280 --> 05:26:48,280
But I think that is enough.
8353
05:26:48,280 --> 05:26:49,700
That is more than enough for you
8354
05:26:49,700 --> 05:26:51,560
as a React router crash course.
8355
05:26:52,440 --> 05:26:53,560
That's it for this one.
8356
05:26:53,560 --> 05:26:55,640
Make sure to leave a comment in the comment section.
8357
05:26:55,640 --> 05:26:57,800
I would be really, really appreciating that.
8358
05:26:57,800 --> 05:26:59,040
That's it for this video
8359
05:26:59,040 --> 05:27:00,840
and let's catch up in the next one.
8360
05:27:02,960 --> 05:27:04,640
Hey there everyone, Hitesh here
8361
05:27:04,640 --> 05:27:06,280
back again with another video
8362
05:27:06,280 --> 05:27:09,080
and welcome to our ongoing React series.
8363
05:27:09,080 --> 05:27:10,320
I hope you are enjoying this series
8364
05:27:10,320 --> 05:27:13,520
because I'm enjoying it so much teaching this series.
8365
05:27:13,520 --> 05:27:15,600
First of all, a very basic target for you
8366
05:27:15,600 --> 05:27:17,760
to hit that comment section.
8367
05:27:17,760 --> 05:27:21,200
We're expecting just a hundred comments if you can.
8368
05:27:21,200 --> 05:27:22,520
That would be great.
8369
05:27:22,520 --> 05:27:24,800
So just hit that comment section first.
8370
05:27:24,800 --> 05:27:26,680
Just do the comment, some appreciation
8371
05:27:26,680 --> 05:27:29,120
or maybe I'm just watching it on this date.
8372
05:27:29,120 --> 05:27:31,320
And let's continue the journey of React.
8373
05:27:31,320 --> 05:27:32,920
And now we'll take our journey.
8374
05:27:32,920 --> 05:27:35,400
Now we are pretty much comfortable with the loops,
8375
05:27:35,400 --> 05:27:38,280
with the hooks, pretty much looping the things,
8376
05:27:38,280 --> 05:27:42,320
variable fetch, API fetching and all of these things.
8377
05:27:42,320 --> 05:27:45,000
It's time that we explore a more advanced feature
8378
05:27:45,000 --> 05:27:46,000
in the React.
8379
05:27:46,000 --> 05:27:49,380
Now, one of that feature is how do we handle the data?
8380
05:27:49,380 --> 05:27:51,380
Now, one of the primary job of the React
8381
05:27:51,380 --> 05:27:53,140
is to handle the reactions
8382
05:27:53,140 --> 05:27:55,140
and that's why we called it as a React.
8383
05:27:55,140 --> 05:27:57,900
The reactions happens basically on two major factor.
8384
05:27:57,900 --> 05:28:00,740
The first one is the props and the second one is the state.
8385
05:28:00,740 --> 05:28:02,620
And you will be passing on this data
8386
05:28:02,620 --> 05:28:04,500
into various of these components.
8387
05:28:04,500 --> 05:28:06,400
Let me show you, we have already seen that
8388
05:28:06,400 --> 05:28:08,100
by creating a card component
8389
05:28:08,100 --> 05:28:10,260
that you provide some data to that card component,
8390
05:28:10,260 --> 05:28:13,060
whether fetching it from an API or just generating the data.
8391
05:28:13,060 --> 05:28:14,780
However you pass that data,
8392
05:28:14,780 --> 05:28:17,500
that data passing is very common.
8393
05:28:17,540 --> 05:28:19,700
And let me show you one such example
8394
05:28:19,700 --> 05:28:20,540
that is pretty common.
8395
05:28:20,540 --> 05:28:22,600
So let me share the screen first.
8396
05:28:22,600 --> 05:28:25,180
So this is the diagram.
8397
05:28:25,180 --> 05:28:28,720
Let's just say this is our dashboard, a main component.
8398
05:28:28,720 --> 05:28:30,940
And inside this we have divided the pages,
8399
05:28:30,940 --> 05:28:32,740
just like previously we have divided
8400
05:28:32,740 --> 05:28:35,580
into navigation bar, footers and whatnot.
8401
05:28:35,580 --> 05:28:37,940
This time, let's just say this is our home dashboard.
8402
05:28:37,940 --> 05:28:41,460
Inside the dashboard, there is another second component.
8403
05:28:41,460 --> 05:28:43,540
Then inside that there is one more component.
8404
05:28:43,540 --> 05:28:44,940
And finally, this is the component
8405
05:28:44,940 --> 05:28:46,980
which is showing some of the data
8406
05:28:46,980 --> 05:28:50,420
like displaying how many people have watched your video.
8407
05:28:50,420 --> 05:28:53,160
And if you look at the current perspective,
8408
05:28:53,160 --> 05:28:54,420
this is very troublesome
8409
05:28:54,420 --> 05:28:57,380
because this inner component is actually called
8410
05:28:57,380 --> 05:28:59,500
inside this component and this component
8411
05:28:59,500 --> 05:29:01,220
is getting called inside this component
8412
05:29:01,220 --> 05:29:03,700
and this component gets called to this component.
8413
05:29:03,700 --> 05:29:07,100
Right now we have no way, absolute zero way
8414
05:29:07,100 --> 05:29:08,980
that we can actually pass on data
8415
05:29:08,980 --> 05:29:11,700
from this outer component to this component.
8416
05:29:11,700 --> 05:29:15,300
In order to do so that, hey, if I want to pass on this,
8417
05:29:15,300 --> 05:29:19,540
I have to first from this element or from this component,
8418
05:29:19,540 --> 05:29:22,020
I have to pass on data to this component.
8419
05:29:22,020 --> 05:29:24,260
This component will further on pass on data
8420
05:29:24,260 --> 05:29:25,220
to this component.
8421
05:29:25,220 --> 05:29:27,300
And finally, this component will pass on data
8422
05:29:27,300 --> 05:29:28,580
to this component.
8423
05:29:28,580 --> 05:29:32,260
So you can see here that we are passing props
8424
05:29:32,260 --> 05:29:33,800
into these component.
8425
05:29:33,800 --> 05:29:36,540
And all of this is not really bad,
8426
05:29:36,540 --> 05:29:38,580
but one thing that is bad here is
8427
05:29:38,580 --> 05:29:40,620
this component is not using any data.
8428
05:29:40,620 --> 05:29:44,540
Still, it has to just access the data just to pass it on.
8429
05:29:44,540 --> 05:29:47,100
And for one level, it's okay.
8430
05:29:47,100 --> 05:29:48,660
But if you can see here,
8431
05:29:48,660 --> 05:29:51,540
the moment it goes on to second level or third level,
8432
05:29:51,540 --> 05:29:53,580
you can see where the problem comes up.
8433
05:29:53,580 --> 05:29:56,140
Some of the components which don't need this data
8434
05:29:56,140 --> 05:29:58,980
also have to access this unnecessary data.
8435
05:29:58,980 --> 05:30:00,660
And based on this have to evaluate
8436
05:30:00,660 --> 05:30:03,100
whether should I render, re-render and whatnot,
8437
05:30:03,100 --> 05:30:04,500
but they're not using this data.
8438
05:30:04,500 --> 05:30:07,380
Ultimately, this inner component is using that data.
8439
05:30:07,380 --> 05:30:09,660
So how can we resolve this problem?
8440
05:30:09,660 --> 05:30:12,820
This problem can be resolved by just one simple solution,
8441
05:30:12,820 --> 05:30:16,460
which is also termed known as state management.
8442
05:30:16,460 --> 05:30:18,500
Now there are lots of state management libraries.
8443
05:30:18,500 --> 05:30:22,380
Some are inbuilt into React, some only one.
8444
05:30:22,380 --> 05:30:24,860
And there are other third party libraries,
8445
05:30:24,860 --> 05:30:27,140
which you can study and we will study them.
8446
05:30:27,140 --> 05:30:29,500
So one easiest of the solution is,
8447
05:30:29,500 --> 05:30:33,660
let's just say we have this global variable,
8448
05:30:33,660 --> 05:30:35,060
that would be a good name.
8449
05:30:35,060 --> 05:30:37,220
And somehow we start a mechanism
8450
05:30:37,220 --> 05:30:39,580
that if anybody wants to access the data
8451
05:30:40,380 --> 05:30:42,620
all he has to do every single time is just go up
8452
05:30:42,620 --> 05:30:45,580
and ask this guy that, hey, I want to access this data.
8453
05:30:45,580 --> 05:30:47,420
If anybody else wants to access any data,
8454
05:30:47,420 --> 05:30:48,540
let's just say this element,
8455
05:30:48,540 --> 05:30:51,260
then he has to go and just go for this guy
8456
05:30:51,260 --> 05:30:52,740
and ask data to this guy.
8457
05:30:52,740 --> 05:30:54,060
There is no other way.
8458
05:30:54,060 --> 05:30:55,420
If you want to update anything,
8459
05:30:55,420 --> 05:30:59,980
if you want to access any information, you ask this guy.
8460
05:30:59,980 --> 05:31:02,420
If this is the central source of truth,
8461
05:31:02,420 --> 05:31:04,220
that's what it is happening here.
8462
05:31:04,220 --> 05:31:08,900
And this global variable is known as a store
8463
05:31:08,900 --> 05:31:10,940
in some languages or some frameworks,
8464
05:31:10,940 --> 05:31:13,140
not languages in some frameworks.
8465
05:31:13,140 --> 05:31:15,900
Every single framework will call it as a different one.
8466
05:31:15,900 --> 05:31:18,820
The one that we are going to study is known as context API.
8467
05:31:18,820 --> 05:31:21,540
So this global is known as context.
8468
05:31:21,540 --> 05:31:22,820
I'll show you more of that.
8469
05:31:22,820 --> 05:31:23,900
The idea is really simple.
8470
05:31:23,900 --> 05:31:26,020
We will have a separate strategy.
8471
05:31:26,020 --> 05:31:28,540
And the only thing is that all of these components
8472
05:31:28,540 --> 05:31:30,940
are aware of this global state.
8473
05:31:30,940 --> 05:31:32,980
That is all, that is all it is.
8474
05:31:32,980 --> 05:31:35,580
Now this concept can be a little bit tricky to understand
8475
05:31:35,580 --> 05:31:38,540
because of the code issues, not the concept issue,
8476
05:31:38,540 --> 05:31:41,980
the concept is this much that we have a central place
8477
05:31:41,980 --> 05:31:44,500
from where we can access the data whenever we want.
8478
05:31:44,500 --> 05:31:47,220
We can update any data in that central repository
8479
05:31:47,220 --> 05:31:49,060
from whatever the component we want.
8480
05:31:49,060 --> 05:31:51,500
This is the centralized concept.
8481
05:31:51,500 --> 05:31:53,940
But just because there are so many ways
8482
05:31:53,940 --> 05:31:55,860
of writing this exact same code,
8483
05:31:55,860 --> 05:31:57,820
there are multiple iterations of that,
8484
05:31:57,820 --> 05:32:00,900
that makes people confused that, okay, what is the syntax?
8485
05:32:00,900 --> 05:32:02,540
So understanding the data flow is easy,
8486
05:32:02,540 --> 05:32:04,700
but writing the syntax is a little bit tricky.
8487
05:32:04,700 --> 05:32:05,820
And that's why I'll walk you through
8488
05:32:05,820 --> 05:32:08,380
with a couple of syntaxes so that you can know,
8489
05:32:09,100 --> 05:32:11,060
okay, this one is exactly same, this one is exactly same,
8490
05:32:11,060 --> 05:32:12,860
and this one is also exactly same.
8491
05:32:12,860 --> 05:32:14,500
So we'll be working on with that.
8492
05:32:14,500 --> 05:32:16,940
So I have a small flow diagram for you.
8493
05:32:16,940 --> 05:32:19,940
So what we'll be doing is we'll start the project
8494
05:32:19,940 --> 05:32:22,380
and we'll create a React app, YVIT or whatever,
8495
05:32:22,380 --> 05:32:23,720
however we do that.
8496
05:32:23,720 --> 05:32:25,860
Then we're going to create a context.
8497
05:32:25,860 --> 05:32:28,220
The context, nothing, this is the context,
8498
05:32:28,220 --> 05:32:29,380
this separate thing.
8499
05:32:29,380 --> 05:32:31,940
Then we simply create a provide the context
8500
05:32:31,940 --> 05:32:34,000
or also known as context provider.
8501
05:32:34,000 --> 05:32:35,960
What do I mean by context provider?
8502
05:32:35,960 --> 05:32:38,720
Making sure that all of my components that I have
8503
05:32:38,720 --> 05:32:40,280
is aware of it.
8504
05:32:40,280 --> 05:32:43,080
They are not gonna be aware of them automatically.
8505
05:32:43,080 --> 05:32:45,520
There is a mechanism, there is a flow of the data that,
8506
05:32:45,520 --> 05:32:48,000
hey, all the components now are aware
8507
05:32:48,000 --> 05:32:50,960
that there is a global state so that I can access my data.
8508
05:32:50,960 --> 05:32:53,400
So this next step is this one, provide the context.
8509
05:32:53,400 --> 05:32:56,360
And the third step is consume it wherever you want,
8510
05:32:56,360 --> 05:32:58,360
however you want, you just consume it.
8511
05:32:58,360 --> 05:33:01,480
So this is exactly what we are going to do in this video.
8512
05:33:01,480 --> 05:33:02,920
And in the next video itself,
8513
05:33:02,920 --> 05:33:04,600
I'll walk you through one more iteration
8514
05:33:04,600 --> 05:33:06,040
of this exact same process,
8515
05:33:06,040 --> 05:33:09,000
but with a different minor tweaking in the code itself.
8516
05:33:09,000 --> 05:33:10,400
So you get the multiple idea
8517
05:33:10,400 --> 05:33:12,120
of how the code is being written.
8518
05:33:12,120 --> 05:33:13,860
So we'll just close this one
8519
05:33:13,860 --> 05:33:15,560
and we'll just get started with this one.
8520
05:33:15,560 --> 05:33:17,820
This is absolutely easy, nothing to be worried.
8521
05:33:17,820 --> 05:33:21,600
I'll just open up my, oh, there's something already running.
8522
05:33:21,600 --> 05:33:23,500
All right, so we'll close this
8523
05:33:23,500 --> 05:33:25,500
and let's go ahead and start this one.
8524
05:33:25,500 --> 05:33:28,700
So this one will be our new project, probably eight.
8525
05:33:28,700 --> 05:33:31,640
So we'll just call this one as create,
8526
05:33:31,680 --> 05:33:35,780
no, not create, my bad, npm create wheat.
8527
05:33:36,720 --> 05:33:40,080
And we'll be going with the latest, yep.
8528
05:33:40,080 --> 05:33:42,080
And we will be starting project names.
8529
05:33:42,080 --> 05:33:45,560
So this one is 08 and we are talking about mini context.
8530
05:33:45,560 --> 05:33:48,400
So let's just call this one as mini context.
8531
05:33:48,400 --> 05:33:50,880
Context API, that's exactly what we are studying.
8532
05:33:50,880 --> 05:33:53,080
And the best part about the context API
8533
05:33:53,080 --> 05:33:55,340
is you don't need to install anything else.
8534
05:33:55,340 --> 05:33:57,600
That's the best part about it.
8535
05:33:57,600 --> 05:33:59,440
Let me just dump this,
8536
05:33:59,440 --> 05:34:01,760
open this up in integrated terminal
8537
05:34:01,760 --> 05:34:06,360
and we'll just say npm install should be fairly faster.
8538
05:34:06,360 --> 05:34:07,780
The best thing which I love about it
8539
05:34:07,780 --> 05:34:10,240
is we don't need any third-party resources.
8540
05:34:10,240 --> 05:34:14,280
The context API is directly cooked in inside the React.
8541
05:34:14,280 --> 05:34:16,200
It was not there in the earlier version,
8542
05:34:16,200 --> 05:34:20,200
but as the React evolved as a library, it got this one.
8543
05:34:20,200 --> 05:34:24,440
And then we can say npm run dev, that should be easy.
8544
05:34:24,440 --> 05:34:26,560
And this is how the basic looks like.
8545
05:34:26,560 --> 05:34:28,760
We won't be even installing anything into it.
8546
05:34:29,000 --> 05:34:29,840
No tailwind, nothing.
8547
05:34:29,840 --> 05:34:32,160
We just want to go absolute basics.
8548
05:34:32,160 --> 05:34:34,440
Now first, let's try to create a problem.
8549
05:34:34,440 --> 05:34:35,600
That is the major thing
8550
05:34:35,600 --> 05:34:38,360
that how we are going to create this a problem first.
8551
05:34:38,360 --> 05:34:40,120
So let's just say inside the source,
8552
05:34:40,120 --> 05:34:43,580
we'll right-click and we'll create a new folder first.
8553
05:34:43,580 --> 05:34:46,840
Let's place everything inside the components.
8554
05:34:46,840 --> 05:34:49,420
And this is a legit problem that we'll have.
8555
05:34:49,420 --> 05:34:51,080
And new file.
8556
05:34:51,080 --> 05:34:53,760
The first file is going to be simple login.
8557
05:34:53,760 --> 05:34:55,640
We won't be doing too much into the login.
8558
05:34:55,640 --> 05:34:59,000
So rfce react, oh, nothing.
8559
05:34:59,000 --> 05:34:59,840
Oh, my bad.
8560
05:34:59,840 --> 05:35:01,400
It should not be login.
8561
05:35:01,400 --> 05:35:03,200
It should be login.jsx.
8562
05:35:03,200 --> 05:35:06,960
Rename login.jsx.
8563
05:35:06,960 --> 05:35:09,480
And now we can say rfce.
8564
05:35:09,480 --> 05:35:11,600
Come on, rfce.
8565
05:35:11,600 --> 05:35:12,800
There we go.
8566
05:35:12,800 --> 05:35:13,920
We can close this down.
8567
05:35:13,920 --> 05:35:18,000
So this one is not going to be too much of a problematic.
8568
05:35:18,000 --> 05:35:21,440
I'll just be writing the basic boilerplate code.
8569
05:35:21,440 --> 05:35:22,640
You can also write along with me.
8570
05:35:22,640 --> 05:35:24,380
That would be really, really helpful.
8571
05:35:24,380 --> 05:35:26,080
So first of all, what I'm trying to create,
8572
05:35:26,080 --> 05:35:27,380
this is a basic login.
8573
05:35:27,380 --> 05:35:29,740
So login has a username and a password.
8574
05:35:29,740 --> 05:35:31,820
It doesn't connect with any database.
8575
05:35:31,820 --> 05:35:34,060
It's absolute basic raw one here.
8576
05:35:34,060 --> 05:35:37,000
So let's go ahead and say that I will have a username
8577
05:35:37,000 --> 05:35:39,040
and that will be a set username.
8578
05:35:39,040 --> 05:35:40,580
By default, it's empty.
8579
05:35:40,580 --> 05:35:42,340
We'll also have a password field.
8580
05:35:42,340 --> 05:35:43,800
Let's just say the password field.
8581
05:35:43,800 --> 05:35:44,740
Nothing else.
8582
05:35:44,740 --> 05:35:46,460
It's not doing anything.
8583
05:35:46,460 --> 05:35:48,140
Now, once we have this,
8584
05:35:48,140 --> 05:35:50,980
we'll need that something that needs to handle
8585
05:35:50,980 --> 05:35:53,100
that we'll obviously have a login field,
8586
05:35:53,140 --> 05:35:54,740
the password field and a button.
8587
05:35:54,740 --> 05:35:57,340
So let's just go ahead and call this one as handle submit.
8588
05:35:57,340 --> 05:35:59,140
That's okay for me.
8589
05:35:59,140 --> 05:36:01,340
And inside this, we are not going to do anything.
8590
05:36:01,340 --> 05:36:03,960
So we'll just write empty slashes,
8591
05:36:03,960 --> 05:36:05,260
prevent the page from refreshing.
8592
05:36:05,260 --> 05:36:06,540
Yeah, whatever that is.
8593
05:36:06,540 --> 05:36:09,380
I'm not really bothered or much worried about this one.
8594
05:36:09,380 --> 05:36:12,020
In this one, let's go ahead and add those fields.
8595
05:36:12,020 --> 05:36:15,480
So first of all, we'll have a simple H2 which says login.
8596
05:36:15,480 --> 05:36:17,420
This is my login component so that I know
8597
05:36:17,420 --> 05:36:18,700
and aware about it.
8598
05:36:18,700 --> 05:36:22,080
Then we are going to have an input with the type of text.
8599
05:36:23,940 --> 05:36:25,780
Text, there we go.
8600
05:36:25,780 --> 05:36:27,420
We don't need this name or ID.
8601
05:36:27,420 --> 05:36:29,180
So I'll be just removing this.
8602
05:36:30,460 --> 05:36:31,300
And there we go.
8603
05:36:31,300 --> 05:36:32,500
Let's move it to the next line.
8604
05:36:32,500 --> 05:36:34,920
We'll be adding couple of fields onto this one.
8605
05:36:34,920 --> 05:36:35,980
Not too many.
8606
05:36:35,980 --> 05:36:37,960
Just the basic, however, we do that all the time.
8607
05:36:37,960 --> 05:36:40,260
So on change is going to be,
8608
05:36:40,260 --> 05:36:41,620
first of all, we need the value one,
8609
05:36:41,620 --> 05:36:43,220
but yeah, on change is also good
8610
05:36:43,220 --> 05:36:45,040
that at the time of changing,
8611
05:36:45,040 --> 05:36:47,100
this is the input field for username.
8612
05:36:47,100 --> 05:36:49,320
So let's go ahead and add the value as well
8613
05:36:49,320 --> 05:36:51,700
that you get the value from the username.
8614
05:36:51,700 --> 05:36:52,940
Once you have all of this,
8615
05:36:53,660 --> 05:36:56,580
let's also add a placeholder, the value of username
8616
05:36:56,580 --> 05:36:57,980
and what else?
8617
05:36:57,980 --> 05:36:59,660
I think that's it.
8618
05:36:59,660 --> 05:37:00,580
Okay.
8619
05:37:00,580 --> 05:37:03,100
Another input field that we are going to need
8620
05:37:03,100 --> 05:37:05,620
is first I'll add some of the spaces.
8621
05:37:05,620 --> 05:37:08,140
So line break there, space.
8622
05:37:08,140 --> 05:37:11,420
And then we'll be having an input of type password.
8623
05:37:12,340 --> 05:37:13,180
There we go.
8624
05:37:13,180 --> 05:37:15,260
And there we go.
8625
05:37:15,260 --> 05:37:16,740
My bad.
8626
05:37:16,740 --> 05:37:18,100
What is happening there?
8627
05:37:18,100 --> 05:37:18,940
Okay.
8628
05:37:18,940 --> 05:37:23,620
This is input type password, this one.
8629
05:37:23,620 --> 05:37:24,460
Okay.
8630
05:37:24,460 --> 05:37:26,080
We don't need this ID or this stuff.
8631
05:37:27,340 --> 05:37:28,920
Let's move it to the next line.
8632
05:37:28,920 --> 05:37:31,660
This one is also going to move the next line.
8633
05:37:31,660 --> 05:37:33,740
And again, really basic.
8634
05:37:33,740 --> 05:37:35,060
First of all, the value,
8635
05:37:35,060 --> 05:37:37,180
the value will be derived by password.
8636
05:37:37,180 --> 05:37:38,980
Let me scroll this.
8637
05:37:38,980 --> 05:37:40,920
And then we have on change.
8638
05:37:41,860 --> 05:37:44,380
On change, the value is going to be governed
8639
05:37:44,380 --> 05:37:45,940
by the set password that we have.
8640
05:37:45,940 --> 05:37:47,740
Let's add a placeholder
8641
05:37:47,740 --> 05:37:49,860
and that will say password.
8642
05:37:49,860 --> 05:37:51,860
And after this, we will be having a button.
8643
05:37:51,860 --> 05:37:54,100
Let's add a simple button as well.
8644
05:37:55,860 --> 05:37:58,220
Button, there we go.
8645
05:37:58,220 --> 05:38:00,860
This button is going to say simply submit.
8646
05:38:01,740 --> 05:38:03,900
And we'll be having an on click event on this one
8647
05:38:03,900 --> 05:38:05,740
since we didn't create it any form.
8648
05:38:05,740 --> 05:38:08,380
So we're going to say on click.
8649
05:38:08,380 --> 05:38:11,300
And on the on click, this is handled by the handle submit.
8650
05:38:11,300 --> 05:38:13,820
So this kind of a component you have always built.
8651
05:38:13,820 --> 05:38:15,540
Now we have a simple value.
8652
05:38:15,540 --> 05:38:17,360
How it is handling, we'll talk about that.
8653
05:38:17,360 --> 05:38:20,000
First, let's create what the problem, what we have.
8654
05:38:20,000 --> 05:38:21,400
Now, similar to this component,
8655
05:38:21,400 --> 05:38:22,920
you will also be dealing with this
8656
05:38:22,920 --> 05:38:24,480
in the real world application as well,
8657
05:38:24,480 --> 05:38:26,400
which is going to be profile.
8658
05:38:27,280 --> 05:38:31,040
Profile, if I can write that.jsx.
8659
05:38:31,040 --> 05:38:33,880
And let's go RFCE, very basic.
8660
05:38:33,880 --> 05:38:36,720
And in the profile, all what I want to do is,
8661
05:38:36,720 --> 05:38:40,680
let's put a space, is I want to display a username.
8662
05:38:40,680 --> 05:38:42,880
Right now, I don't have a username,
8663
05:38:42,880 --> 05:38:45,300
but somehow I want to display the username.
8664
05:38:45,300 --> 05:38:46,720
So how can I do it?
8665
05:38:46,720 --> 05:38:48,920
And I am pretty sure you are not understanding
8666
05:38:48,920 --> 05:38:51,300
the gravity of the situation right now.
8667
05:38:51,300 --> 05:38:53,480
This is so much of a big problem.
8668
05:38:53,480 --> 05:38:55,780
And you might be saying, hey, what's the deal with that?
8669
05:38:55,780 --> 05:38:57,860
Why is it so much of problematic?
8670
05:38:57,860 --> 05:39:01,880
I can go simply into my app.jsx or main.jsx
8671
05:39:01,880 --> 05:39:03,160
or any place at all.
8672
05:39:03,160 --> 05:39:05,240
And I can just go ahead and load this up.
8673
05:39:05,240 --> 05:39:07,360
Like for example, in the app.jsx,
8674
05:39:07,360 --> 05:39:11,360
I can go and remove all of this content that I have.
8675
05:39:11,360 --> 05:39:14,720
So let's just go ahead and remove all of this.
8676
05:39:14,720 --> 05:39:16,680
And I can load these component here.
8677
05:39:17,500 --> 05:39:18,760
For example, I'll just say H1 here
8678
05:39:18,760 --> 05:39:23,760
and I'll say React course or React video would be good.
8679
05:39:25,120 --> 05:39:28,360
React video for context API.
8680
05:39:29,680 --> 05:39:31,400
And then here at this place,
8681
05:39:31,400 --> 05:39:35,240
I can load the login component, just like this.
8682
05:39:35,240 --> 05:39:38,600
And I can go ahead and load the user component,
8683
05:39:38,600 --> 05:39:39,720
not user profile.
8684
05:39:40,700 --> 05:39:43,160
Profile, here you go.
8685
05:39:43,160 --> 05:39:45,880
And the profile component, is there any issue with that?
8686
05:39:45,880 --> 05:39:48,100
If I reload this, there shouldn't be any issue.
8687
05:39:48,100 --> 05:39:49,480
Let's go ahead and inspect this.
8688
05:39:49,480 --> 05:39:50,700
This should be loading up.
8689
05:39:51,800 --> 05:39:54,140
Use state is not defined.
8690
05:39:54,140 --> 05:39:55,360
My bad.
8691
05:39:55,360 --> 05:39:56,640
We're using state here.
8692
05:39:56,640 --> 05:40:00,320
So this one is going to give us use state.
8693
05:40:00,320 --> 05:40:02,040
I don't like to edit out these problems
8694
05:40:02,040 --> 05:40:04,640
because these problems are something which teach you stuff.
8695
05:40:04,640 --> 05:40:06,780
So as we can see, there is nothing wrong with this one.
8696
05:40:06,780 --> 05:40:08,440
We are able to load this one.
8697
05:40:08,440 --> 05:40:11,780
Now your first initial reaction would be
8698
05:40:11,780 --> 05:40:13,480
that if I can load all of this,
8699
05:40:13,480 --> 05:40:16,000
probably I can just pass on data of the login
8700
05:40:16,000 --> 05:40:19,480
and all in the app.js and from here I can pass on this.
8701
05:40:19,480 --> 05:40:22,820
But imagine the situation that from the profile,
8702
05:40:22,820 --> 05:40:25,880
this data actually goes to other third component
8703
05:40:25,880 --> 05:40:27,880
which are loaded inside the profile.
8704
05:40:27,880 --> 05:40:29,760
Just like here, I can add more things.
8705
05:40:29,760 --> 05:40:32,840
Just like I was able to load in my app.js,
8706
05:40:32,840 --> 05:40:36,120
this profile thing, I can also go ahead and load more stuff.
8707
05:40:36,120 --> 05:40:39,600
So I can just go ahead and literally say more component.
8708
05:40:39,600 --> 05:40:42,200
So what's stopping you to have more component here?
8709
05:40:42,240 --> 05:40:43,960
Maybe you are having a dashboard.
8710
05:40:43,960 --> 05:40:45,440
If I can write that component,
8711
05:40:45,440 --> 05:40:48,220
it's hard to type and talk at the same time.
8712
05:40:48,220 --> 05:40:50,600
So imagine that this is a dashboard.
8713
05:40:50,600 --> 05:40:52,960
On the dashboard, you have left pane and right pane.
8714
05:40:52,960 --> 05:40:54,680
You want to display the data on the right pane,
8715
05:40:54,680 --> 05:40:56,260
but right pane is not alone.
8716
05:40:56,260 --> 05:40:58,560
For that, there is a top section and bottom section.
8717
05:40:58,560 --> 05:41:00,560
So two more components.
8718
05:41:00,560 --> 05:41:02,820
In the top section, you want to display this data,
8719
05:41:02,820 --> 05:41:04,600
profile username, but the top section
8720
05:41:04,600 --> 05:41:06,480
is also composed of smaller components.
8721
05:41:06,480 --> 05:41:08,720
So how long you're going to be passing
8722
05:41:08,720 --> 05:41:11,600
these components back and forth, you get the idea.
8723
05:41:11,600 --> 05:41:14,080
Now you get the point that we need some better solution.
8724
05:41:14,080 --> 05:41:17,360
And this is exactly why we have the solution up here,
8725
05:41:17,360 --> 05:41:20,000
that we want to create a simple global state
8726
05:41:20,000 --> 05:41:21,480
where we can add all of these things.
8727
05:41:21,480 --> 05:41:24,320
And this is known as context in the context API
8728
05:41:24,320 --> 05:41:25,760
and the context provider.
8729
05:41:25,760 --> 05:41:29,120
But in the case of Redux, I have that video as well.
8730
05:41:29,120 --> 05:41:30,240
We will be talking about that.
8731
05:41:30,240 --> 05:41:32,400
You'll find that video in the playlist as well.
8732
05:41:32,400 --> 05:41:34,900
So you can see that there we call it as store.
8733
05:41:34,900 --> 05:41:36,640
So call it store, call it context.
8734
05:41:36,640 --> 05:41:37,900
The concept is exactly same.
8735
05:41:37,900 --> 05:41:40,000
We need a centralized repository,
8736
05:41:40,000 --> 05:41:44,000
centralized store where we can have all of this data.
8737
05:41:44,000 --> 05:41:45,200
This is exactly what we're doing.
8738
05:41:45,200 --> 05:41:46,760
So now it's time that we understand
8739
05:41:46,760 --> 05:41:49,000
that how we can actually implement the context.
8740
05:41:49,000 --> 05:41:50,480
No extra library needed.
8741
05:41:50,480 --> 05:41:52,060
The step one is to create a context
8742
05:41:52,060 --> 05:41:54,000
and then to create a provider.
8743
05:41:54,000 --> 05:41:55,680
So first of all, let's understand
8744
05:41:55,680 --> 05:41:57,200
that how we create this context.
8745
05:41:57,200 --> 05:41:58,120
It's a simple step.
8746
05:41:58,120 --> 05:42:00,760
If you're taking the notes, you can take them as well.
8747
05:42:00,760 --> 05:42:02,980
All right, so we'll come back onto these logins
8748
05:42:02,980 --> 05:42:03,980
and profile in a minute.
8749
05:42:03,980 --> 05:42:06,220
First of all, let's close this one.
8750
05:42:06,220 --> 05:42:08,600
Inside this, let's create a new folder
8751
05:42:08,600 --> 05:42:11,360
and let's call this one as context.
8752
05:42:11,360 --> 05:42:13,300
Creation of the context has two parts.
8753
05:42:13,300 --> 05:42:14,260
Some people do that.
8754
05:42:14,260 --> 05:42:15,840
These two parts into separate files.
8755
05:42:15,840 --> 05:42:17,360
Some people do that in one file.
8756
05:42:17,360 --> 05:42:18,320
Doesn't really matter.
8757
05:42:18,320 --> 05:42:20,080
I'll walk you through with both scenarios.
8758
05:42:20,080 --> 05:42:21,560
First one here, the basic.
8759
05:42:21,560 --> 05:42:23,760
The second one will be a little bit more advanced.
8760
05:42:23,760 --> 05:42:26,000
Not advanced, but yeah, easier.
8761
05:42:26,000 --> 05:42:27,120
So let's create a new file.
8762
05:42:27,120 --> 05:42:30,120
And first we are going to call this one as user context.
8763
05:42:30,120 --> 05:42:32,320
By the way, you can have multiple contexts.
8764
05:42:32,320 --> 05:42:34,720
Since this is not going to return any JSX,
8765
05:42:34,720 --> 05:42:36,980
I'll just call this one as just the JS.
8766
05:42:36,980 --> 05:42:39,900
Now this context could be for multiple reasons
8767
05:42:39,900 --> 05:42:41,060
or multiple resources.
8768
05:42:41,060 --> 05:42:42,940
This one is for user context.
8769
05:42:42,940 --> 05:42:46,140
Another thing could be for product context.
8770
05:42:46,140 --> 05:42:48,580
Another thing could be tweets context.
8771
05:42:48,580 --> 05:42:51,020
So just like everything needs a context.
8772
05:42:51,020 --> 05:42:53,180
In the real world, this is exactly where it comes from.
8773
05:42:53,180 --> 05:42:54,460
For example, fan.
8774
05:42:54,460 --> 05:42:56,060
You don't understand anything with the fan.
8775
05:42:56,060 --> 05:42:57,140
It could be a ceiling fan.
8776
05:42:57,140 --> 05:42:58,380
It could be a table fan.
8777
05:42:58,380 --> 05:43:00,980
It could be a fan in terms of a Bollywood fan,
8778
05:43:00,980 --> 05:43:03,420
Hollywood fan, a YouTubers fan.
8779
05:43:03,420 --> 05:43:04,260
It has a context.
8780
05:43:04,260 --> 05:43:05,140
It needs a context.
8781
05:43:05,140 --> 05:43:06,660
That's exactly what we have.
8782
05:43:06,660 --> 05:43:08,540
So we're going to go ahead and say, hey, React,
8783
05:43:08,540 --> 05:43:09,380
let's come React.
8784
05:43:09,380 --> 05:43:11,860
And React directly gives you this context.
8785
05:43:11,860 --> 05:43:15,980
So all we have to do is user context, react.create context.
8786
05:43:15,980 --> 05:43:18,020
Just like you import use state and all of that,
8787
05:43:18,020 --> 05:43:19,900
we have the create context as well.
8788
05:43:19,900 --> 05:43:22,860
And after that, all you do is export user context.
8789
05:43:22,860 --> 05:43:27,300
So your question might be, okay, we have that empty repo,
8790
05:43:27,300 --> 05:43:30,380
the store which will be holding all of this related
8791
05:43:30,380 --> 05:43:32,220
to the user, but where is the data?
8792
05:43:32,220 --> 05:43:33,440
There is no data.
8793
05:43:33,440 --> 05:43:34,500
You are absolutely correct.
8794
05:43:34,500 --> 05:43:37,100
There is no data when you create the context.
8795
05:43:37,100 --> 05:43:38,540
That's the step one.
8796
05:43:38,540 --> 05:43:40,140
Now, once the context is created,
8797
05:43:40,140 --> 05:43:43,200
the step two is actually to create a provider
8798
05:43:43,200 --> 05:43:44,980
or the context provider,
8799
05:43:44,980 --> 05:43:46,580
because right now it is not usable.
8800
05:43:46,580 --> 05:43:49,820
So something needs to be a central man
8801
05:43:49,820 --> 05:43:52,220
which can allow me to access the data
8802
05:43:52,220 --> 05:43:54,900
as well as feed the data into that.
8803
05:43:54,900 --> 05:43:58,380
So let's go ahead, right click and create a new file.
8804
05:43:58,380 --> 05:44:02,680
And we'll be calling this one as user context provider.
8805
05:44:04,660 --> 05:44:08,820
And this one is actually .jsx because this is a wrapper.
8806
05:44:08,820 --> 05:44:11,420
As I told you, we need a wrapper.
8807
05:44:11,420 --> 05:44:14,660
This whole thing, everybody should be aware of it.
8808
05:44:14,660 --> 05:44:17,300
The way how we do it in React is we create a wrapper.
8809
05:44:17,300 --> 05:44:19,780
Just like for example, in this case,
8810
05:44:19,780 --> 05:44:23,580
if I go into main.jsx, you can see that this React strict
8811
05:44:23,580 --> 05:44:26,820
mode is a wrapper for all of my component that I'm creating
8812
05:44:26,820 --> 05:44:29,380
because the app further down the road,
8813
05:44:29,380 --> 05:44:30,780
app actually loads these guys.
8814
05:44:30,780 --> 05:44:33,420
So all these guys are actually also loading
8815
05:44:33,420 --> 05:44:34,360
in the strict mode.
8816
05:44:35,180 --> 05:44:36,020
Why?
8817
05:44:36,020 --> 05:44:36,860
Just because of this one.
8818
05:44:36,860 --> 05:44:38,760
This one is wrapping the entire application.
8819
05:44:38,760 --> 05:44:40,600
So we need to create a context provider
8820
05:44:40,600 --> 05:44:43,080
and we need to learn that how these sandwiching rule
8821
05:44:43,080 --> 05:44:43,920
actually applies.
8822
05:44:43,920 --> 05:44:45,500
So it's actually not really that bad.
8823
05:44:45,500 --> 05:44:46,360
It's actually simple.
8824
05:44:46,360 --> 05:44:48,800
So we'll be having first, let's just say React
8825
05:44:49,880 --> 05:44:54,040
and we'll be using, are we going to use a use state?
8826
05:44:54,040 --> 05:44:54,920
Probably not.
8827
05:44:54,920 --> 05:44:56,320
Okay.
8828
05:44:56,320 --> 05:44:57,660
But we'll see that in a minute.
8829
05:44:57,660 --> 05:44:59,320
And we need to import the context.
8830
05:44:59,320 --> 05:45:01,000
That is the most important part.
8831
05:45:01,000 --> 05:45:02,720
So now you have access to the context
8832
05:45:02,720 --> 05:45:04,000
which you just created.
8833
05:45:04,000 --> 05:45:05,960
And now we'll be using that.
8834
05:45:05,960 --> 05:45:08,320
So the first thing that we are going to do in this case
8835
05:45:08,320 --> 05:45:10,960
is how to create this context.
8836
05:45:10,960 --> 05:45:12,400
We have this and this.
8837
05:45:12,400 --> 05:45:17,160
Now let's go ahead and create the user context provider.
8838
05:45:17,160 --> 05:45:18,720
Yeah, that's a good name.
8839
05:45:18,720 --> 05:45:19,920
User context provider.
8840
05:45:19,920 --> 05:45:23,000
This is nothing just a simple method, just like that.
8841
05:45:23,000 --> 05:45:24,920
A simple arrow method, just like that.
8842
05:45:24,920 --> 05:45:25,760
Okay.
8843
05:45:25,760 --> 05:45:26,580
So far it's good.
8844
05:45:26,580 --> 05:45:28,440
Now this next step is to export this.
8845
05:45:28,440 --> 05:45:31,680
So go ahead and export default user context provider.
8846
05:45:31,680 --> 05:45:33,840
Now this is where the functionality goes.
8847
05:45:33,960 --> 05:45:35,160
The first thing that you should know
8848
05:45:35,160 --> 05:45:36,840
or you should be aware of this
8849
05:45:36,840 --> 05:45:38,700
is that there will be more components
8850
05:45:38,700 --> 05:45:40,240
which will be coming inside you.
8851
05:45:40,240 --> 05:45:42,000
Just like we use the outlet.
8852
05:45:42,000 --> 05:45:44,640
Yeah, exactly same concept, almost exactly.
8853
05:45:44,640 --> 05:45:47,200
So first thing is, as a prop, what you'll be getting?
8854
05:45:47,200 --> 05:45:49,020
You'll be getting children's.
8855
05:45:49,020 --> 05:45:52,440
So just write children, if I can write that correct.
8856
05:45:52,440 --> 05:45:54,560
You have to actually return that children back.
8857
05:45:54,560 --> 05:45:57,000
But before that, we need to actually say that
8858
05:45:57,000 --> 05:45:58,960
what is the data that you'll be using
8859
05:45:58,960 --> 05:45:59,800
or something like that?
8860
05:45:59,800 --> 05:46:02,680
So I'll be saying that, hey, I'm having a state.
8861
05:46:02,680 --> 05:46:05,440
So I'll be just calling this one as user
8862
05:46:05,440 --> 05:46:07,480
and then I'll be having a set user.
8863
05:46:07,480 --> 05:46:09,720
This is right now an empty object.
8864
05:46:09,720 --> 05:46:10,760
That is also good.
8865
05:46:10,760 --> 05:46:12,200
But right now we don't have any users
8866
05:46:12,200 --> 05:46:13,880
or rather having an empty object.
8867
05:46:13,880 --> 05:46:14,720
I'll just say null.
8868
05:46:14,720 --> 05:46:17,200
I have nothing as of now.
8869
05:46:17,200 --> 05:46:19,360
After that, I'll just go ahead and use the return
8870
05:46:19,360 --> 05:46:20,800
with the parenthesis.
8871
05:46:20,800 --> 05:46:25,800
And what I'll do is I'll be using this user context dot provider.
8872
05:46:27,120 --> 05:46:28,520
And yes, this is a syntax.
8873
05:46:28,520 --> 05:46:30,440
We cannot do anything for that.
8874
05:46:30,440 --> 05:46:35,000
Come on, user context dot provider.
8875
05:46:35,000 --> 05:46:38,080
And this is how it looks like, user context provider.
8876
05:46:38,080 --> 05:46:41,040
This is something which is given to you by default.
8877
05:46:41,040 --> 05:46:43,200
The moment you use the user context,
8878
05:46:43,200 --> 05:46:46,440
it automatically gives you the access to provider.
8879
05:46:46,440 --> 05:46:49,240
The reason for that is React gives us this create context.
8880
05:46:49,240 --> 05:46:50,200
The moment you have used this,
8881
05:46:50,200 --> 05:46:52,560
this was given to you by the React itself.
8882
05:46:52,560 --> 05:46:54,920
Now inside this, you actually do nothing
8883
05:46:54,920 --> 05:46:56,280
and you just add a children.
8884
05:46:56,280 --> 05:46:57,800
This is the syntax.
8885
05:46:57,800 --> 05:46:59,960
But alone, this is not useful
8886
05:46:59,960 --> 05:47:02,320
because now your entire application
8887
05:47:02,320 --> 05:47:04,800
will be aware after one second.
8888
05:47:04,800 --> 05:47:07,800
We will use it exactly just like we use this strict mode.
8889
05:47:07,800 --> 05:47:10,400
We will be using it exactly almost that.
8890
05:47:10,400 --> 05:47:14,000
But right now it is having the access of it.
8891
05:47:14,000 --> 05:47:16,440
But the reason why we created this user state
8892
05:47:16,440 --> 05:47:20,240
so that this data should be accessible to all the children.
8893
05:47:20,240 --> 05:47:21,320
That's the goal.
8894
05:47:21,320 --> 05:47:23,680
If you have more data, add more things here,
8895
05:47:23,680 --> 05:47:24,720
add more calculation.
8896
05:47:24,720 --> 05:47:26,560
Maybe you want to have a fetch request
8897
05:47:26,560 --> 05:47:28,120
and whatever comes back from the fetch,
8898
05:47:28,120 --> 05:47:31,920
you want to give the access of it to all the components,
8899
05:47:31,920 --> 05:47:33,560
you do exactly like this.
8900
05:47:33,560 --> 05:47:36,840
But right now I have a variable
8901
05:47:36,840 --> 05:47:38,800
through which I can access the data.
8902
05:47:38,800 --> 05:47:41,360
I have a method through which I can set any data
8903
05:47:41,360 --> 05:47:42,200
into this user.
8904
05:47:42,200 --> 05:47:43,760
So I have access to all of this.
8905
05:47:43,760 --> 05:47:45,160
Now I want to pass on this.
8906
05:47:45,160 --> 05:47:47,560
So the way how you do it is simply add a value
8907
05:47:47,560 --> 05:47:49,440
and you simply say as an object
8908
05:47:49,440 --> 05:47:51,400
that I want to give you access of this user,
8909
05:47:51,400 --> 05:47:53,680
I also want to give you access of the set user
8910
05:47:53,680 --> 05:47:55,440
so that you can read the data
8911
05:47:55,440 --> 05:47:58,280
as well as write the data in this state.
8912
05:47:58,280 --> 05:47:59,880
All right, so that's the next step
8913
05:47:59,880 --> 05:48:02,080
or the step two of having all of this.
8914
05:48:02,080 --> 05:48:06,360
But now I know that my entire app.jsx
8915
05:48:06,360 --> 05:48:08,040
is actually loading all of this.
8916
05:48:08,040 --> 05:48:12,080
So somehow whole of the things which are inside the app.js
8917
05:48:12,080 --> 05:48:13,720
should be aware of this,
8918
05:48:13,720 --> 05:48:15,280
how that's going to happen.
8919
05:48:15,280 --> 05:48:16,680
Very, very simple.
8920
05:48:16,680 --> 05:48:19,400
Instead of wrapping it into this fragments,
8921
05:48:19,400 --> 05:48:20,920
I can just go ahead and say,
8922
05:48:20,920 --> 05:48:22,880
hey user context provider
8923
05:48:22,880 --> 05:48:25,480
and it actually imports it from the perfect place.
8924
05:48:25,480 --> 05:48:26,800
I'm happy with this.
8925
05:48:26,800 --> 05:48:29,320
A user context provider and we wrap this up
8926
05:48:29,320 --> 05:48:31,920
just like that here and there we go.
8927
05:48:31,920 --> 05:48:33,920
The moment you added this, that is it.
8928
05:48:33,920 --> 05:48:36,680
Now all of these components which are wrapped inside it
8929
05:48:36,680 --> 05:48:38,880
are aware of that data.
8930
05:48:38,880 --> 05:48:40,760
Now you could have technically,
8931
05:48:40,760 --> 05:48:43,400
you could have gone into app at this main.js
8932
05:48:43,400 --> 05:48:44,640
and could have added here.
8933
05:48:44,640 --> 05:48:45,600
That's okay.
8934
05:48:45,600 --> 05:48:48,680
Now your app is aware of it inside any component of the app.
8935
05:48:48,680 --> 05:48:49,720
He's also aware of it.
8936
05:48:49,720 --> 05:48:51,760
He or she, whatever you want to term it as.
8937
05:48:51,760 --> 05:48:53,440
So this is really nice.
8938
05:48:53,440 --> 05:48:56,360
Now we have actually set up the boilerplate code.
8939
05:48:56,360 --> 05:48:58,800
And this is exactly the same syntax that you'll be using.
8940
05:48:58,800 --> 05:49:01,960
Your data might be tremendous amount in the smaller amount,
8941
05:49:01,960 --> 05:49:04,800
doesn't really matter, but now you have set up the stage.
8942
05:49:04,800 --> 05:49:07,840
So this is a boilerplate every single time you have to do.
8943
05:49:07,840 --> 05:49:11,160
Now what's important is how do we actually send data
8944
05:49:11,160 --> 05:49:13,440
into this state and retrieve the state data
8945
05:49:13,440 --> 05:49:14,680
from back from it.
8946
05:49:14,680 --> 05:49:16,600
So obviously we have already set up the stage for it.
8947
05:49:16,600 --> 05:49:19,440
Login will be responsible for setting the data
8948
05:49:19,440 --> 05:49:20,560
into this one.
8949
05:49:20,560 --> 05:49:21,800
So how do we use it?
8950
05:49:21,800 --> 05:49:23,360
That's where hooks comes up.
8951
05:49:23,360 --> 05:49:26,120
And hooks obviously comes from this one,
8952
05:49:26,120 --> 05:49:27,640
just like we have used a state,
8953
05:49:27,640 --> 05:49:29,920
we have a hook known as use context.
8954
05:49:29,920 --> 05:49:32,920
So far, all the hooks that we have used,
8955
05:49:32,920 --> 05:49:34,760
they don't have this much of boilerplate work,
8956
05:49:34,760 --> 05:49:35,720
but this one has.
8957
05:49:35,720 --> 05:49:38,200
And it has its own advantage, you can say.
8958
05:49:38,200 --> 05:49:39,600
Now we have this use context.
8959
05:49:39,600 --> 05:49:41,320
So what can I do with the use context
8960
05:49:41,320 --> 05:49:44,800
is you can actually extract values from it.
8961
05:49:44,800 --> 05:49:46,200
Remember the values?
8962
05:49:46,200 --> 05:49:48,240
Yeah, these values, these are props.
8963
05:49:48,240 --> 05:49:49,840
You can extract this data.
8964
05:49:49,840 --> 05:49:52,160
So in the login, I don't need a whole of data.
8965
05:49:52,160 --> 05:49:53,520
I just need a selective data
8966
05:49:53,520 --> 05:49:56,440
because I'll be just adding value to this state.
8967
05:49:56,440 --> 05:49:59,120
So I'll be saying give me that set user,
8968
05:49:59,120 --> 05:50:00,920
set user that you have thrown it
8969
05:50:00,920 --> 05:50:04,040
and how you have thrown it just by saying use context.
8970
05:50:04,040 --> 05:50:05,560
And inside this use context,
8971
05:50:05,560 --> 05:50:07,080
you cannot just go ahead and use it.
8972
05:50:07,080 --> 05:50:08,600
You have to provide a context
8973
05:50:08,600 --> 05:50:10,560
that what context I'm talking about.
8974
05:50:10,560 --> 05:50:12,280
I'm talking about the user context
8975
05:50:12,280 --> 05:50:14,320
or the products context, I have to.
8976
05:50:14,320 --> 05:50:15,840
For this, I have to bring in this.
8977
05:50:15,840 --> 05:50:18,240
So I'll be just saying user context,
8978
05:50:18,240 --> 05:50:20,240
bring it that in and provide that
8979
05:50:20,240 --> 05:50:21,840
because you can have multiple contexts.
8980
05:50:21,840 --> 05:50:24,800
Context for authentication, for user, for products,
8981
05:50:24,800 --> 05:50:27,000
different contexts for different things.
8982
05:50:27,000 --> 05:50:28,560
Once I have this one,
8983
05:50:28,560 --> 05:50:31,200
then all I have to do here in the handle submit,
8984
05:50:31,200 --> 05:50:32,960
once the submit button is click,
8985
05:50:32,960 --> 05:50:35,080
I'll just update the user with that data.
8986
05:50:35,080 --> 05:50:38,440
So first of all, just take this event and prevent default.
8987
05:50:38,440 --> 05:50:41,000
Once you have done this, just use the set user.
8988
05:50:41,000 --> 05:50:45,120
And inside this, the set user will be adding an object
8989
05:50:45,120 --> 05:50:47,080
which will have the access to user name and password,
8990
05:50:47,080 --> 05:50:49,240
whatever you are entering, it has that.
8991
05:50:49,240 --> 05:50:51,240
Now inside the central store,
8992
05:50:51,240 --> 05:50:52,800
I literally have the access to this.
8993
05:50:52,800 --> 05:50:55,640
So this one is now finally having this value
8994
05:50:55,640 --> 05:50:59,320
and we have the user name and the password access here.
8995
05:50:59,320 --> 05:51:01,280
Once I have access of this variable
8996
05:51:01,280 --> 05:51:02,920
and all these things in here,
8997
05:51:02,920 --> 05:51:06,360
any of my component can go and ask for this data.
8998
05:51:06,360 --> 05:51:07,560
How can it ask?
8999
05:51:07,560 --> 05:51:10,280
Yeah, it's really exactly same process.
9000
05:51:10,280 --> 05:51:11,960
If you have noticed here,
9001
05:51:11,960 --> 05:51:13,800
the way how we extract the set user,
9002
05:51:13,800 --> 05:51:16,760
which is a method responsible for setting the data,
9003
05:51:16,760 --> 05:51:18,520
I can extract the other thing as well.
9004
05:51:18,520 --> 05:51:19,720
So let's go ahead and do this.
9005
05:51:19,720 --> 05:51:21,760
I'm pretty sure now you can do this as well.
9006
05:51:21,760 --> 05:51:25,440
So const will be saying, hey, let's grab the user
9007
05:51:25,440 --> 05:51:27,280
because don't want to access set user,
9008
05:51:27,280 --> 05:51:28,400
I want to access the user
9009
05:51:28,400 --> 05:51:30,680
and use context provide the use context.
9010
05:51:30,680 --> 05:51:32,840
Again, this is not how you should write it
9011
05:51:32,840 --> 05:51:34,280
because it didn't imported that.
9012
05:51:34,280 --> 05:51:36,960
So I would love to grab it, there we go,
9013
05:51:36,960 --> 05:51:40,440
and now write it use context, user context basically.
9014
05:51:40,440 --> 05:51:43,120
Now, since I have access to this, I have to do nothing.
9015
05:51:43,120 --> 05:51:45,600
I have to just say, hey, this is going to be a user,
9016
05:51:45,600 --> 05:51:48,720
but there might be a case that there is no value
9017
05:51:48,720 --> 05:51:49,560
into this one.
9018
05:51:49,560 --> 05:51:53,120
So I can just do some kind of optional rendering as well,
9019
05:51:53,120 --> 05:51:54,840
conditional rendering as well.
9020
05:51:54,840 --> 05:51:58,840
So I can say if there is nothing inside the user,
9021
05:51:58,840 --> 05:52:00,240
basically it's null,
9022
05:52:00,240 --> 05:52:05,240
then go ahead and return a simple H1 that says not logged in.
9023
05:52:05,960 --> 05:52:08,680
And why are you having this issue?
9024
05:52:09,560 --> 05:52:11,280
Not logged in.
9025
05:52:11,280 --> 05:52:12,120
Oh, my bad.
9026
05:52:13,120 --> 05:52:14,400
Yeah, there we go.
9027
05:52:14,400 --> 05:52:16,720
So if we have the user, there we go.
9028
05:52:16,720 --> 05:52:18,760
So very basic, very basic code.
9029
05:52:18,760 --> 05:52:22,120
So if we go back here and hit a reload,
9030
05:52:22,120 --> 05:52:26,320
and it might be that I have missed some of the stuff.
9031
05:52:26,320 --> 05:52:29,240
Okay, use context is not, okay.
9032
05:52:29,240 --> 05:52:32,040
Here we are using use context, we don't have it.
9033
05:52:32,040 --> 05:52:34,760
Really basic, we can go ahead and say use context.
9034
05:52:34,760 --> 05:52:37,200
There we go, should be all happy, there we go.
9035
05:52:37,200 --> 05:52:39,280
Just for the sake, let's reload.
9036
05:52:39,280 --> 05:52:42,640
It says not logged in as soon as I do a Hitesh here,
9037
05:52:42,640 --> 05:52:44,360
the password field is just a dummy field,
9038
05:52:44,360 --> 05:52:45,600
doesn't really bother us much.
9039
05:52:45,600 --> 05:52:48,400
So if I submit this, okay, we have some of the issues.
9040
05:52:48,400 --> 05:52:50,920
Let's say where we are having this issue.
9041
05:52:50,920 --> 05:52:53,920
It says objects are not valid react child,
9042
05:52:53,920 --> 05:52:57,000
find object with the keys, username and password.
9043
05:52:57,000 --> 05:52:58,800
Ah, yeah, my bad.
9044
05:52:58,800 --> 05:53:01,440
This needs to be fixed, let me go ahead and fix this.
9045
05:53:02,480 --> 05:53:05,240
So the error says not a valid react child,
9046
05:53:05,240 --> 05:53:08,400
username, so I'm pretty sure I know where the error is.
9047
05:53:08,400 --> 05:53:09,840
This is actually in the profile.
9048
05:53:09,840 --> 05:53:11,120
This user is an object
9049
05:53:11,120 --> 05:53:13,240
because that's what we actually added.
9050
05:53:13,240 --> 05:53:15,080
If you remember in this one,
9051
05:53:15,080 --> 05:53:16,960
we actually added an entire object
9052
05:53:16,960 --> 05:53:19,280
and we cannot display the entire object just like this.
9053
05:53:19,280 --> 05:53:20,280
Hey, dump all the object.
9054
05:53:20,280 --> 05:53:22,600
We need to extract the properties out of it.
9055
05:53:22,600 --> 05:53:27,000
So user.username, in this case, that should fix the error.
9056
05:53:27,000 --> 05:53:31,720
Let's go back and I think it should, let's see, no worries.
9057
05:53:31,720 --> 05:53:34,840
I just go ahead and say again, Hitesh, not logged in,
9058
05:53:34,840 --> 05:53:38,160
submit, okay, it works,
9059
05:53:38,160 --> 05:53:40,200
but the more component should be much smaller
9060
05:53:40,200 --> 05:53:45,200
and the profile Hitesh should be bigger, okay, no big deal.
9061
05:53:45,360 --> 05:53:47,680
We can actually just cut this out
9062
05:53:48,680 --> 05:53:50,920
and just replace it here.
9063
05:53:50,920 --> 05:53:54,040
That is better, yeah, there we go.
9064
05:53:54,040 --> 05:53:56,200
So we have this one and by the way,
9065
05:53:56,200 --> 05:53:58,760
if I go ahead and remove everything up here
9066
05:53:59,600 --> 05:54:02,360
and there we go and submit it, it says profile
9067
05:54:02,360 --> 05:54:04,600
because hey, we are still submitting the data.
9068
05:54:04,600 --> 05:54:06,520
It's like empty strings are getting submitted.
9069
05:54:06,520 --> 05:54:09,560
It's not null yet, but if I refresh this, it's not logged in.
9070
05:54:09,560 --> 05:54:12,000
So again, we have to do much more check,
9071
05:54:12,000 --> 05:54:14,000
but the idea is not about checking.
9072
05:54:14,000 --> 05:54:15,920
We'll do that in the later on videos.
9073
05:54:15,920 --> 05:54:18,920
The idea is that how any of the component was,
9074
05:54:18,920 --> 05:54:20,640
right now the components were in the same page,
9075
05:54:20,640 --> 05:54:21,800
doesn't really matter,
9076
05:54:21,800 --> 05:54:24,320
but every single component can now access
9077
05:54:24,320 --> 05:54:26,320
without actually doing a prop drilling,
9078
05:54:26,320 --> 05:54:29,760
which is considered as a pretty bad practice in React.
9079
05:54:29,760 --> 05:54:32,480
My login component is not aware of the profile.
9080
05:54:32,480 --> 05:54:33,960
I don't really care about it.
9081
05:54:33,960 --> 05:54:36,760
It just can set the data into this global store
9082
05:54:36,760 --> 05:54:39,520
or the global context from wherever it likes.
9083
05:54:40,360 --> 05:54:42,360
It just needs those methods to set the data.
9084
05:54:42,360 --> 05:54:43,640
The profile on the other hand,
9085
05:54:43,640 --> 05:54:45,480
it doesn't really care who's passing the data.
9086
05:54:45,480 --> 05:54:47,040
We are literally passing nothing.
9087
05:54:47,040 --> 05:54:50,600
It can extract the data from that global store directly.
9088
05:54:50,600 --> 05:54:53,380
And all I have to do is set up those boilerplate codes.
9089
05:54:53,380 --> 05:54:55,120
And after that, all I have to do is make sure
9090
05:54:55,120 --> 05:54:57,200
all of my components are aware of it.
9091
05:54:57,200 --> 05:54:59,760
Either you can do it in app.js if it makes sense.
9092
05:54:59,760 --> 05:55:02,440
Otherwise you can take literally this exact same code,
9093
05:55:02,440 --> 05:55:06,040
take it into the main.js and wrap your app with it.
9094
05:55:06,040 --> 05:55:09,240
That's exactly all the components should be aware of it.
9095
05:55:09,240 --> 05:55:10,880
That is the whole idea.
9096
05:55:10,880 --> 05:55:14,560
So I told you it's really not that of a bad situation
9097
05:55:14,560 --> 05:55:16,120
or a bad issue itself.
9098
05:55:17,000 --> 05:55:19,280
It's just like, it takes a little bit time
9099
05:55:19,280 --> 05:55:20,380
to adjust with these.
9100
05:55:20,380 --> 05:55:22,040
Like I have to create a context,
9101
05:55:22,040 --> 05:55:24,680
then the context needs a context provider and all of that.
9102
05:55:24,680 --> 05:55:26,360
So basically the step is simple.
9103
05:55:26,360 --> 05:55:27,960
Create context, create provider,
9104
05:55:27,960 --> 05:55:30,400
make sure all of the people are aware of that
9105
05:55:30,400 --> 05:55:32,160
there is a context so that I can take the data
9106
05:55:32,160 --> 05:55:33,320
and send the data.
9107
05:55:33,320 --> 05:55:34,240
That is it.
9108
05:55:34,240 --> 05:55:36,780
That is your introduction to the context.
9109
05:55:36,780 --> 05:55:38,720
I'm pretty sure I have dumped it down enough
9110
05:55:38,720 --> 05:55:41,480
so that anybody and everybody can understand it.
9111
05:55:41,480 --> 05:55:42,720
If you enjoy these videos,
9112
05:55:42,720 --> 05:55:45,000
definitely do leave a subscribe to my channel
9113
05:55:45,000 --> 05:55:47,420
or hit that like button.
9114
05:55:47,420 --> 05:55:48,440
That really means a lot.
9115
05:55:48,440 --> 05:55:51,200
If you drop a comment taking out of your valuable time,
9116
05:55:51,200 --> 05:55:54,400
it really, really motivates me to make more such video.
9117
05:55:54,400 --> 05:55:56,520
It really takes a lot of effort.
9118
05:55:56,520 --> 05:55:58,040
All right, so that's it for this video.
9119
05:55:58,040 --> 05:56:00,240
Let's go ahead and catch up in the next one.
9120
05:56:02,660 --> 05:56:03,500
Hey there, everyone.
9121
05:56:03,500 --> 05:56:04,400
Hithai Sheer.
9122
05:56:04,400 --> 05:56:07,060
Welcome to another video in our React journey.
9123
05:56:07,060 --> 05:56:08,820
I hope you are following this journey along.
9124
05:56:08,820 --> 05:56:11,540
And if you're watching this in a long one-shot video,
9125
05:56:11,540 --> 05:56:12,700
that's cool even.
9126
05:56:12,700 --> 05:56:15,500
But don't forget to leave a comment in the comment section.
9127
05:56:15,500 --> 05:56:18,140
It's my motivation driving factor.
9128
05:56:18,140 --> 05:56:20,500
So hit that subscribe if you haven't already
9129
05:56:20,500 --> 05:56:22,960
and it's a humble request, leave a comment.
9130
05:56:22,960 --> 05:56:26,980
Just a hurt emoji, anything will do, just leave a comment.
9131
05:56:26,980 --> 05:56:29,140
So let's continue our journey of the React
9132
05:56:29,140 --> 05:56:32,140
in the same format, the context API.
9133
05:56:32,140 --> 05:56:33,660
I'm pretty sure after watching the video
9134
05:56:33,660 --> 05:56:36,640
probably more than once, you now have a particular idea
9135
05:56:36,640 --> 05:56:38,080
of how the context API work.
9136
05:56:38,080 --> 05:56:39,260
It's pretty simple.
9137
05:56:39,260 --> 05:56:41,840
Create a context, create a provider, and that's it.
9138
05:56:41,840 --> 05:56:44,280
And make sure all of your components are aware of it.
9139
05:56:44,280 --> 05:56:45,320
We will take this journey
9140
05:56:45,320 --> 05:56:47,080
into a little bit different perspective
9141
05:56:47,080 --> 05:56:48,120
so that you get the idea,
9142
05:56:48,120 --> 05:56:50,520
okay, this is how things are designed.
9143
05:56:50,520 --> 05:56:52,560
And in this one, we will follow another way
9144
05:56:52,560 --> 05:56:55,600
of writing the context, which is by using a custom hook.
9145
05:56:55,600 --> 05:56:56,880
This custom hook is nothing,
9146
05:56:56,880 --> 05:56:59,880
just like we were always using the thing,
9147
05:56:59,880 --> 05:57:03,200
use context every single time at every single place.
9148
05:57:03,200 --> 05:57:04,600
And we have to, every single time,
9149
05:57:04,600 --> 05:57:06,760
provide that, okay, I'm talking about this context.
9150
05:57:06,760 --> 05:57:09,000
I'm talking about this context.
9151
05:57:09,000 --> 05:57:11,320
We'll just do everything all in one place.
9152
05:57:11,320 --> 05:57:13,480
This is also another style of writing code.
9153
05:57:13,480 --> 05:57:16,360
And since people use these different style of writing code,
9154
05:57:16,360 --> 05:57:18,840
that is exactly the reason why the context API
9155
05:57:18,840 --> 05:57:20,240
looks a little bit difficult.
9156
05:57:20,240 --> 05:57:21,960
But now we have gone through the previous video,
9157
05:57:21,960 --> 05:57:24,080
this one is going to make so much sense.
9158
05:57:24,080 --> 05:57:26,200
Again, you don't have to worry about the CSS part.
9159
05:57:26,200 --> 05:57:27,440
Yes, we have the tailwind.
9160
05:57:27,440 --> 05:57:29,800
Yes, we have a couple of good, nice looking stuff,
9161
05:57:29,800 --> 05:57:32,040
but you can just grab them from my GitHub repository,
9162
05:57:32,040 --> 05:57:33,840
copy, paste, nothing to be worried there.
9163
05:57:33,960 --> 05:57:36,480
We'll only talk about the code part itself.
9164
05:57:36,480 --> 05:57:39,600
So this is what we'll be designing, a simple theme toggler.
9165
05:57:39,600 --> 05:57:40,440
It looks simple,
9166
05:57:40,440 --> 05:57:43,040
but it will be a good exercise to practice the stuff.
9167
05:57:43,040 --> 05:57:44,320
So notice we have a theme toggler,
9168
05:57:44,320 --> 05:57:46,360
which toggles the theme only for the card.
9169
05:57:46,360 --> 05:57:47,880
That's what we are going to be designing,
9170
05:57:47,880 --> 05:57:50,320
because this component will be aware
9171
05:57:50,320 --> 05:57:52,360
of what the theme toggler value is.
9172
05:57:52,360 --> 05:57:54,200
It is off or is it on.
9173
05:57:54,200 --> 05:57:56,200
Based on this, we'll be changing this.
9174
05:57:56,200 --> 05:57:58,440
Now we're not gonna be writing too much of the CSS.
9175
05:57:58,440 --> 05:57:59,920
We are dependent on the tailwind,
9176
05:57:59,920 --> 05:58:03,080
because tailwind allows us to have these dark mode classes
9177
05:58:03,080 --> 05:58:06,040
directly cooked in from the CSS team itself.
9178
05:58:06,040 --> 05:58:07,920
The way how they do it actually is,
9179
05:58:07,920 --> 05:58:09,280
if you check out their playground,
9180
05:58:09,280 --> 05:58:11,080
they actually mentioned this on their playground.
9181
05:58:11,080 --> 05:58:14,000
There's a right button here, which says this toggle.
9182
05:58:14,000 --> 05:58:16,640
If you right click and inspect this,
9183
05:58:16,640 --> 05:58:19,440
the way how they do it is actually,
9184
05:58:19,440 --> 05:58:22,440
if you toggle this one, this one is here.
9185
05:58:22,440 --> 05:58:24,560
Let me just go back at the body.
9186
05:58:24,560 --> 05:58:27,480
So this is here.
9187
05:58:27,480 --> 05:58:31,200
So notice here in the, not in the HTML,
9188
05:58:31,200 --> 05:58:34,800
actually this is a part of the header itself.
9189
05:58:34,800 --> 05:58:36,800
So let me just search this.
9190
05:58:36,800 --> 05:58:39,040
If I can search it here somewhere,
9191
05:58:39,960 --> 05:58:44,960
search this and I'll just say dark, it should be dark.
9192
05:58:45,000 --> 05:58:45,960
So there we go.
9193
05:58:45,960 --> 05:58:48,720
So in the top here, in the HTML portion itself,
9194
05:58:48,720 --> 05:58:50,880
we can see in the top HTML,
9195
05:58:50,880 --> 05:58:53,280
they are actually naming this class itself.
9196
05:58:53,280 --> 05:58:56,800
The moment I do a toggle, this dark actually goes away.
9197
05:58:56,800 --> 05:58:58,560
It's actually light by default.
9198
05:58:58,560 --> 05:59:00,080
And when I toggle this on,
9199
05:59:00,080 --> 05:59:02,160
they actually manually inject this dark.
9200
05:59:02,160 --> 05:59:03,920
Once I have this dark theme,
9201
05:59:03,920 --> 05:59:06,080
now you can notice here that the dark classes
9202
05:59:06,080 --> 05:59:07,080
are written and baked in.
9203
05:59:07,080 --> 05:59:09,120
So if I go ahead and zoom into this one,
9204
05:59:09,120 --> 05:59:10,800
notice here, this is the dark.
9205
05:59:10,800 --> 05:59:13,200
So the dark class automatically takes in place
9206
05:59:13,200 --> 05:59:15,520
when the HTML automatically marks you as a dark.
9207
05:59:15,520 --> 05:59:17,600
So this is exactly what we'll be doing.
9208
05:59:17,600 --> 05:59:19,120
This is our working functionality
9209
05:59:19,120 --> 05:59:21,200
inspired by the tailwind itself.
9210
05:59:21,200 --> 05:59:24,040
So let's go back and try to have a simple tailwind.
9211
05:59:24,040 --> 05:59:25,800
We'll create a fresh new project.
9212
05:59:25,800 --> 05:59:27,960
And with this project, we'll install the tailwind.
9213
05:59:27,960 --> 05:59:31,760
So let's go back and close this one.
9214
05:59:31,760 --> 05:59:33,720
Wheat is our way to go.
9215
05:59:33,720 --> 05:59:35,400
So let's just copy this
9216
05:59:35,400 --> 05:59:38,520
and we'll be installing the wheat into a fresh new project.
9217
05:59:38,520 --> 05:59:41,920
So let's go ahead and first, let's just stop this.
9218
05:59:43,240 --> 05:59:46,640
Okay, let's open this up.
9219
05:59:46,640 --> 05:59:49,680
Control C, stop this, remove this,
9220
05:59:49,680 --> 05:59:52,360
and we need one fresh one.
9221
05:59:52,360 --> 05:59:53,560
And we'll be saying, first of all,
9222
05:59:53,560 --> 05:59:54,480
let's remove all of this
9223
05:59:54,480 --> 05:59:57,640
because we don't need all of this data context.
9224
05:59:57,640 --> 06:00:01,160
I can right click and close to the right, yep.
9225
06:00:01,160 --> 06:00:03,600
Now we just need to create a fresh new project.
9226
06:00:03,600 --> 06:00:07,280
So for that NPM create wheat,
9227
06:00:07,280 --> 06:00:11,120
and we'll be using the latest and yeah, that's it.
9228
06:00:11,120 --> 06:00:12,960
Let's name this one as zero nine.
9229
06:00:12,960 --> 06:00:16,000
And this one is a theme switcher project
9230
06:00:16,000 --> 06:00:17,640
that we have this one.
9231
06:00:17,640 --> 06:00:19,320
Totally depends on you, what do you want to call it?
9232
06:00:19,320 --> 06:00:22,040
I'm going to call it as theme switcher.
9233
06:00:23,840 --> 06:00:26,240
Theme switcher, and we'll be saying,
9234
06:00:26,240 --> 06:00:29,280
we'll be using react for this one, again, JavaScript.
9235
06:00:29,280 --> 06:00:33,800
And let's open this theme switcher into my terminal
9236
06:00:33,800 --> 06:00:35,560
and remove the old one.
9237
06:00:35,560 --> 06:00:37,340
We have to say NPM install.
9238
06:00:38,480 --> 06:00:41,000
This is probably going to take some time.
9239
06:00:41,000 --> 06:00:43,640
Depends on how much my internet is doing.
9240
06:00:43,640 --> 06:00:46,480
And then we have to actually install the tailwind
9241
06:00:47,680 --> 06:00:49,240
and let's install this.
9242
06:00:49,240 --> 06:00:53,000
After this, we have to change the content just like this,
9243
06:00:53,000 --> 06:00:55,920
copy and open this up.
9244
06:00:56,440 --> 06:00:59,800
Inside the tailwind config, we'll change the content.
9245
06:00:59,800 --> 06:01:00,840
There we go.
9246
06:01:00,840 --> 06:01:03,280
The next step is to bring in the CSS.
9247
06:01:03,280 --> 06:01:07,960
We can copy this, go back, source, index.css,
9248
06:01:07,960 --> 06:01:10,580
remove everything, paste it up here, save that.
9249
06:01:10,580 --> 06:01:14,040
And probably we don't need into app.jsx as well.
9250
06:01:14,040 --> 06:01:16,320
App.css, my bad.
9251
06:01:16,320 --> 06:01:19,200
App.css, we probably don't need anything inside this.
9252
06:01:19,200 --> 06:01:20,420
Anyways, we are not much worried
9253
06:01:20,420 --> 06:01:21,640
about how things are going on.
9254
06:01:21,640 --> 06:01:22,960
We just want to have these things
9255
06:01:22,960 --> 06:01:24,960
and practice our context API.
9256
06:01:25,000 --> 06:01:27,800
NPM run dev should actually run the project.
9257
06:01:27,800 --> 06:01:30,960
And there we go, very basic, nothing to be worried.
9258
06:01:30,960 --> 06:01:33,200
All right, so let's close everything.
9259
06:01:33,200 --> 06:01:35,440
And now let's talk about them one by one.
9260
06:01:35,440 --> 06:01:38,560
The first step is to grab our basic boilerplate card
9261
06:01:38,560 --> 06:01:40,040
and how does it look and all of that.
9262
06:01:40,040 --> 06:01:43,960
So first of all, I'll just remove, I'll add a folder
9263
06:01:43,960 --> 06:01:46,300
and I'll call this one as components.
9264
06:01:49,480 --> 06:01:52,320
Components and the components will have basically
9265
06:01:52,320 --> 06:01:53,720
two component in itself.
9266
06:01:53,720 --> 06:01:56,160
The first one being a new file.
9267
06:01:56,160 --> 06:01:57,480
This one is just basic card.
9268
06:01:57,480 --> 06:02:01,100
So let's call this one as card.jsx.
9269
06:02:01,100 --> 06:02:03,000
And all we have to do into this one,
9270
06:02:03,000 --> 06:02:06,520
I'll just directly bring the card from my notes itself.
9271
06:02:06,520 --> 06:02:09,480
Nothing, just the basic boilerplate card, as you can see,
9272
06:02:09,480 --> 06:02:11,900
there is nothing reactish about it.
9273
06:02:11,900 --> 06:02:16,900
Plain vanilla react, or not react even, just the tailwind.
9274
06:02:17,120 --> 06:02:19,040
Too much of the classes, some images
9275
06:02:19,040 --> 06:02:21,120
that we are borrowing from Pexels,
9276
06:02:21,120 --> 06:02:23,120
some of the Apple Watch and stuff, so that is it.
9277
06:02:23,200 --> 06:02:24,520
That is your card.
9278
06:02:24,520 --> 06:02:26,480
Now let me go ahead and create another component
9279
06:02:26,480 --> 06:02:27,720
which is the top part of it,
9280
06:02:27,720 --> 06:02:30,140
in case you saw this, this top theme toggler.
9281
06:02:30,140 --> 06:02:32,840
You can also have your own input button for this one.
9282
06:02:32,840 --> 06:02:34,440
Nothing is going to bother you,
9283
06:02:34,440 --> 06:02:36,440
but we are just making it a little bit stylish
9284
06:02:36,440 --> 06:02:38,160
so that it looks good.
9285
06:02:38,160 --> 06:02:40,560
Right click new file and we'll be calling this one
9286
06:02:40,560 --> 06:02:44,720
as theme button.jsx.
9287
06:02:45,880 --> 06:02:48,700
And again, our FCE, react functional component
9288
06:02:48,700 --> 06:02:49,540
for theme button.
9289
06:02:49,540 --> 06:02:52,840
And all I'm going to do is just replace this return
9290
06:02:52,880 --> 06:02:55,640
with whatever the return I have in my notes.
9291
06:02:55,640 --> 06:02:57,680
And let's replace this, there we go.
9292
06:02:57,680 --> 06:02:59,920
As you can see, this is nothing more than input button
9293
06:02:59,920 --> 06:03:02,680
which has some of these values, like value is nothing.
9294
06:03:02,680 --> 06:03:04,920
On change, we need an on change button here as well.
9295
06:03:04,920 --> 06:03:07,280
We don't have that, so let's go ahead and create that.
9296
06:03:07,280 --> 06:03:08,400
That is all.
9297
06:03:08,400 --> 06:03:09,560
Now theme mode and everything,
9298
06:03:09,560 --> 06:03:11,120
we will work on to this one.
9299
06:03:11,120 --> 06:03:13,020
First, let's have just the on change button
9300
06:03:13,020 --> 06:03:14,440
so that it doesn't crash.
9301
06:03:14,440 --> 06:03:15,920
And in fact, the theme mode,
9302
06:03:15,920 --> 06:03:17,460
we'll be just removing this,
9303
06:03:17,460 --> 06:03:20,100
this check dent entirely will be removing this
9304
06:03:20,100 --> 06:03:22,480
so that we can later on work on this one.
9305
06:03:22,560 --> 06:03:24,540
Right now, this is all good and okay.
9306
06:03:24,540 --> 06:03:27,320
The only thing that's bothering is this on change button.
9307
06:03:27,320 --> 06:03:28,860
So let's go ahead and have it.
9308
06:03:29,900 --> 06:03:33,120
And we'll be saying on change button does nothing
9309
06:03:33,120 --> 06:03:34,920
but we are having this one.
9310
06:03:34,920 --> 06:03:37,360
Okay, so both of our components are ready.
9311
06:03:37,360 --> 06:03:39,520
Now the idea is these components
9312
06:03:39,520 --> 06:03:40,860
are not aware of each other.
9313
06:03:40,860 --> 06:03:45,160
I want to create a centralized repo store or a context
9314
06:03:45,160 --> 06:03:46,640
so that both can be aware of this.
9315
06:03:46,640 --> 06:03:48,700
So for this, we already are aware of this
9316
06:03:48,700 --> 06:03:50,900
that how we create the context.
9317
06:03:50,900 --> 06:03:51,860
So in the last video,
9318
06:03:51,860 --> 06:03:54,580
I showed you that we simply go ahead and create a new folder.
9319
06:03:54,580 --> 06:03:55,980
You want to keep it in the folder or not,
9320
06:03:55,980 --> 06:03:57,340
that's your choice.
9321
06:03:57,340 --> 06:04:01,260
I'll just say context, context, yeah, that's good.
9322
06:04:01,260 --> 06:04:04,340
Or context, there might be other context as well.
9323
06:04:04,340 --> 06:04:06,340
Now what you'll notice is in the last video,
9324
06:04:06,340 --> 06:04:07,660
we worked through with the context
9325
06:04:07,660 --> 06:04:08,980
almost similar to this one.
9326
06:04:08,980 --> 06:04:10,260
So we have this context.
9327
06:04:10,260 --> 06:04:11,420
We have two files here.
9328
06:04:11,420 --> 06:04:12,860
First one is user context,
9329
06:04:12,860 --> 06:04:15,100
but technically we didn't do anything inside this.
9330
06:04:15,100 --> 06:04:17,260
It was just creating a user context.
9331
06:04:17,260 --> 06:04:18,860
The meet part of the information
9332
06:04:18,900 --> 06:04:22,120
was this user provider where we created the provider.
9333
06:04:22,120 --> 06:04:23,500
So we have this provider.
9334
06:04:23,500 --> 06:04:25,940
Now this provider should be available to every single place.
9335
06:04:25,940 --> 06:04:27,780
That's why we call this one here.
9336
06:04:27,780 --> 06:04:29,400
But another thing we saw that,
9337
06:04:29,400 --> 06:04:31,820
that every single time we have to do this
9338
06:04:31,820 --> 06:04:34,940
inside the component, like for example, in the login,
9339
06:04:34,940 --> 06:04:37,020
I have to do this kind of a stuff.
9340
06:04:37,020 --> 06:04:40,300
Use context and then have to provide the context inside it.
9341
06:04:40,300 --> 06:04:42,620
Here also in the profile, we have to repeat this.
9342
06:04:42,620 --> 06:04:45,460
Use context and provide the context to it.
9343
06:04:45,460 --> 06:04:49,720
So how about if we actually accumulate all of this stuff?
9344
06:04:49,720 --> 06:04:50,700
Is that possible?
9345
06:04:50,700 --> 06:04:53,260
Yes, it will save us a lot of time in later on.
9346
06:04:53,260 --> 06:04:55,900
So we can actually improve our boilerplate code.
9347
06:04:55,900 --> 06:04:57,900
And this is exactly what we'll be doing.
9348
06:04:57,900 --> 06:05:00,220
So in this case, what we're going to do is
9349
06:05:00,220 --> 06:05:04,260
we'll be just simply saying that, okay,
9350
06:05:04,260 --> 06:05:07,100
we will be saying context, create a new file,
9351
06:05:07,100 --> 06:05:12,220
and we'll be calling this one as theme.js.
9352
06:05:12,220 --> 06:05:14,780
All right, so how we actually use this one,
9353
06:05:14,780 --> 06:05:15,740
this is pretty interesting.
9354
06:05:15,740 --> 06:05:18,060
First of all, let's go ahead and import two major things
9355
06:05:18,060 --> 06:05:19,060
which we'll be using.
9356
06:05:19,060 --> 06:05:21,580
The first one is create context that we use there as well,
9357
06:05:21,580 --> 06:05:24,460
as well as we were all the time using this use context.
9358
06:05:24,460 --> 06:05:26,300
Two things in the components,
9359
06:05:26,300 --> 06:05:28,060
use context was getting used.
9360
06:05:28,060 --> 06:05:29,900
The create context for creating the context.
9361
06:05:29,900 --> 06:05:32,540
So these two things, now we are bringing them all together.
9362
06:05:32,540 --> 06:05:35,340
The first step was to create a context
9363
06:05:35,340 --> 06:05:37,340
where we were having all these things.
9364
06:05:37,340 --> 06:05:38,740
So previously, if you remember,
9365
06:05:38,740 --> 06:05:40,820
I'll just open this and compare it again and again
9366
06:05:40,820 --> 06:05:42,820
so that you don't get confused with this.
9367
06:05:43,780 --> 06:05:45,420
It's a good comparison here.
9368
06:05:45,420 --> 06:05:47,100
So if I open up this context,
9369
06:05:47,100 --> 06:05:49,660
so this part has nothing at all.
9370
06:05:49,660 --> 06:05:53,020
This thing is having some of the interesting stuff.
9371
06:05:53,020 --> 06:05:55,140
So if you remember, this was our state
9372
06:05:55,140 --> 06:05:57,220
and technically what we were doing is
9373
06:05:57,220 --> 06:05:59,940
we were providing this data inside this.
9374
06:05:59,940 --> 06:06:01,540
There is another way of doing this
9375
06:06:01,540 --> 06:06:03,540
much more easier than this
9376
06:06:03,540 --> 06:06:05,500
because ultimately everything is going inside this.
9377
06:06:05,500 --> 06:06:08,140
So when you're creating this context,
9378
06:06:08,140 --> 06:06:10,300
while creating this, you can make it aware
9379
06:06:10,300 --> 06:06:12,060
that what are the default option
9380
06:06:12,060 --> 06:06:14,380
or what are the data which is available to you.
9381
06:06:14,380 --> 06:06:16,700
So you'll see the syntax almost similar to this
9382
06:06:16,700 --> 06:06:20,780
where somebody says, hey, theme context and create context.
9383
06:06:20,780 --> 06:06:22,540
While creating the context,
9384
06:06:22,540 --> 06:06:25,060
you can actually provide an object in here
9385
06:06:25,060 --> 06:06:27,180
directly with the information.
9386
06:06:27,180 --> 06:06:30,060
Previously, we were actually providing this
9387
06:06:30,060 --> 06:06:32,620
into a later stage when we were creating the context
9388
06:06:32,620 --> 06:06:34,060
and provider and all of that.
9389
06:06:34,060 --> 06:06:36,740
But this create context is also perfectly capable
9390
06:06:36,740 --> 06:06:38,060
of taking the data.
9391
06:06:38,060 --> 06:06:39,900
Now we don't define the data here.
9392
06:06:39,900 --> 06:06:43,140
We actually provide just a general information about it.
9393
06:06:43,140 --> 06:06:45,140
What do you mean by general information?
9394
06:06:45,140 --> 06:06:47,460
Let's just say we have this theme mode.
9395
06:06:47,460 --> 06:06:51,300
So by default, this is just a variable whose value is light.
9396
06:06:51,300 --> 06:06:55,180
But I also want this ability to toggle the theme as well.
9397
06:06:55,180 --> 06:06:58,620
I can just go ahead and work on with this one toggle theme,
9398
06:06:58,620 --> 06:07:01,780
but I'll show you what happens when there are multiple values
9399
06:07:01,780 --> 06:07:05,620
like there is a dark theme, which is just a method.
9400
06:07:05,620 --> 06:07:07,860
I don't know what this method does or how it function
9401
06:07:07,940 --> 06:07:08,780
or how it works.
9402
06:07:08,780 --> 06:07:10,140
It just is a method.
9403
06:07:10,140 --> 06:07:12,860
Similarly, we have a light theme, which is also a method.
9404
06:07:12,860 --> 06:07:14,140
How does it function work?
9405
06:07:14,140 --> 06:07:15,780
I have no idea at all.
9406
06:07:15,780 --> 06:07:16,780
Okay.
9407
06:07:16,780 --> 06:07:20,460
Now we also saw that every single time we were using
9408
06:07:20,460 --> 06:07:23,700
in the main.js, like theme provider is the context.
9409
06:07:23,700 --> 06:07:25,820
So theme provider dot provider.
9410
06:07:25,820 --> 06:07:28,180
So this was going a lot.
9411
06:07:28,180 --> 06:07:31,180
And in the previous one, we saw in the app.jsx,
9412
06:07:31,180 --> 06:07:34,140
we have to use this user context provider.
9413
06:07:34,140 --> 06:07:36,460
And if you remember this one, yeah,
9414
06:07:36,460 --> 06:07:40,060
we have to use this like this user context dot provider.
9415
06:07:40,060 --> 06:07:42,100
How about we don't do it like this,
9416
06:07:42,100 --> 06:07:43,700
we actually change the syntax.
9417
06:07:43,700 --> 06:07:46,420
And again, this is the reason why people sometimes
9418
06:07:46,420 --> 06:07:48,460
don't understand because there are different ways
9419
06:07:48,460 --> 06:07:49,620
of writing a different version.
9420
06:07:49,620 --> 06:07:51,860
If you're comfortable with that version, that's okay.
9421
06:07:51,860 --> 06:07:54,540
If you're comfortable with this version, that's okay too.
9422
06:07:54,540 --> 06:07:56,820
So in this one, we go ahead and say export const.
9423
06:07:56,820 --> 06:08:01,820
And we simply go ahead and say, this is my theme provider.
9424
06:08:02,500 --> 06:08:04,740
And instead of saying all these children and stuff,
9425
06:08:04,740 --> 06:08:09,740
I'm just saying that, hey, this is theme context dot provider.
9426
06:08:11,380 --> 06:08:13,420
So that I don't have to say literally,
9427
06:08:13,420 --> 06:08:16,620
I'm actually literally exporting a variable
9428
06:08:16,620 --> 06:08:20,460
whose ultimately value is theme provider dot provider.
9429
06:08:20,460 --> 06:08:22,940
And that is it, that is all what we are doing.
9430
06:08:22,940 --> 06:08:25,820
Okay, so anywhere, instead of using theme,
9431
06:08:27,220 --> 06:08:30,020
like theme provider dot provider or theme dot provider,
9432
06:08:30,020 --> 06:08:31,820
I can just simply say now theme provider.
9433
06:08:31,820 --> 06:08:33,900
That is it, that's the meaning of it.
9434
06:08:33,900 --> 06:08:35,820
Now we will also create a hook
9435
06:08:35,820 --> 06:08:37,660
so that we can use it in all of that.
9436
06:08:37,660 --> 06:08:42,020
So let me go ahead and work on with this export default.
9437
06:08:42,020 --> 06:08:44,540
And in this one, we'll be creating a function
9438
06:08:44,540 --> 06:08:46,700
and that will be used theme.
9439
06:08:46,700 --> 06:08:50,540
And what we're doing in this is use context theme context.
9440
06:08:50,540 --> 06:08:52,300
So theme context is already available to me.
9441
06:08:52,300 --> 06:08:54,420
So I don't have to import or export it.
9442
06:08:54,420 --> 06:08:56,540
I can just directly use this.
9443
06:08:56,540 --> 06:09:00,140
Now anybody who uses this hook, which is used theme,
9444
06:09:00,140 --> 06:09:02,020
he don't have to pass on this context.
9445
06:09:02,020 --> 06:09:03,900
Like previously we were saying use context,
9446
06:09:03,900 --> 06:09:06,820
then bring in the context and add value to it.
9447
06:09:06,820 --> 06:09:10,220
And literally what that was doing is when we do this,
9448
06:09:10,220 --> 06:09:12,500
this create context get all of that value.
9449
06:09:12,500 --> 06:09:15,860
That is how the store is being created internally.
9450
06:09:15,860 --> 06:09:17,980
So this is also alternative version.
9451
06:09:17,980 --> 06:09:18,940
Let me summarize this
9452
06:09:18,940 --> 06:09:20,660
because I know this can be a little bit confusing.
9453
06:09:20,660 --> 06:09:22,580
Previously, we were creating a context
9454
06:09:22,580 --> 06:09:25,300
that context was doing nothing, nothing at all.
9455
06:09:25,300 --> 06:09:27,620
We were just having this user context, okay.
9456
06:09:27,620 --> 06:09:30,460
Step two, we were using this user context.
9457
06:09:30,460 --> 06:09:31,680
Now, if you remember from this,
9458
06:09:32,160 --> 06:09:35,080
we were creating a provider, which was wrapping.
9459
06:09:35,080 --> 06:09:36,960
And the reason why we were having this,
9460
06:09:36,960 --> 06:09:41,040
so that wherever we use this user context provider,
9461
06:09:41,040 --> 06:09:45,360
ultimately what the code runs is user context dot provider,
9462
06:09:45,360 --> 06:09:46,720
which actually accepts the children.
9463
06:09:46,720 --> 06:09:48,560
So all prop goes inside it.
9464
06:09:48,560 --> 06:09:50,720
Now in the newer version, what we are doing is
9465
06:09:50,720 --> 06:09:52,880
we are actually merging them together
9466
06:09:52,880 --> 06:09:55,280
so that we don't have to create this context separately
9467
06:09:55,280 --> 06:09:57,880
and have this one separately and provide the values.
9468
06:09:57,880 --> 06:10:00,980
What we can do is just simply create the context
9469
06:10:00,980 --> 06:10:02,660
and whatever the value functionality,
9470
06:10:02,660 --> 06:10:04,400
whatever you want to incorporate,
9471
06:10:04,400 --> 06:10:08,520
you just directly give it directly inside the create context.
9472
06:10:08,520 --> 06:10:10,940
Definitely, we don't incorporate the functionality
9473
06:10:10,940 --> 06:10:13,580
in this one because that needs to go separately.
9474
06:10:13,580 --> 06:10:17,360
And what we do is theme provider directly gets available.
9475
06:10:17,360 --> 06:10:19,340
We don't have to extract this every single time,
9476
06:10:19,340 --> 06:10:21,780
just like we do it here, user context and children wrapping.
9477
06:10:21,780 --> 06:10:23,700
No, we are aware of it.
9478
06:10:23,700 --> 06:10:25,620
We simply directly use it like this.
9479
06:10:25,620 --> 06:10:26,660
And again, one more hook,
9480
06:10:26,660 --> 06:10:29,100
which actually helps us each of the component
9481
06:10:29,100 --> 06:10:32,180
to not have the import statement and all of that,
9482
06:10:32,180 --> 06:10:34,460
just use the hook directly, hook is aware of it.
9483
06:10:34,460 --> 06:10:35,780
And I know which one I'm using.
9484
06:10:35,780 --> 06:10:38,420
So one file consists of everything.
9485
06:10:38,420 --> 06:10:40,720
Okay, yeah, little bit different,
9486
06:10:40,720 --> 06:10:42,940
but how the usage of this works
9487
06:10:42,940 --> 06:10:44,660
and most of the tutorials and everything
9488
06:10:44,660 --> 06:10:47,780
that you're going to see, this is the way how they use it.
9489
06:10:47,780 --> 06:10:50,300
The way how I showed you to you in the previous one
9490
06:10:50,300 --> 06:10:51,740
is so that you understand, okay,
9491
06:10:51,740 --> 06:10:54,180
these are the pieces that I need to do.
9492
06:10:54,180 --> 06:10:56,820
In this one also, these are the exact pieces I'm doing,
9493
06:10:56,820 --> 06:10:59,220
creating a context and making everyone aware
9494
06:10:59,220 --> 06:11:01,940
that the context exists, that's all.
9495
06:11:01,940 --> 06:11:04,900
And this portion is literally for everybody
9496
06:11:04,900 --> 06:11:08,380
so that every component can directly use my store.
9497
06:11:08,380 --> 06:11:12,020
So three parts, first, the second one and the third one.
9498
06:11:12,020 --> 06:11:16,260
That's exactly still onto the same page, okay.
9499
06:11:16,260 --> 06:11:18,740
Now we are actually onto this one,
9500
06:11:18,740 --> 06:11:20,860
how we can actually use this one.
9501
06:11:20,860 --> 06:11:22,440
Now we'll be using theme provider.
9502
06:11:22,440 --> 06:11:23,940
Previously what we were using,
9503
06:11:23,940 --> 06:11:26,820
previously we were using this user context provider.
9504
06:11:26,820 --> 06:11:27,960
If you don't remember this,
9505
06:11:27,960 --> 06:11:31,180
in the app.jsx user context provider.
9506
06:11:31,180 --> 06:11:32,540
Ultimately it's a theme provider,
9507
06:11:32,540 --> 06:11:33,980
so that's what we'll be using.
9508
06:11:33,980 --> 06:11:35,020
Let's close all of this
9509
06:11:35,020 --> 06:11:36,600
and enough of the previous discussion.
9510
06:11:36,600 --> 06:11:39,080
Now let's go ahead and continue with the newer one.
9511
06:11:39,080 --> 06:11:41,660
So now I'll go into app.jsx
9512
06:11:41,660 --> 06:11:44,700
and this app.jsx has a couple of values and stuff
9513
06:11:44,700 --> 06:11:47,020
that we have to actually work on with this one.
9514
06:11:47,020 --> 06:11:50,220
Now what I can do here is inside this app.js,
9515
06:11:50,220 --> 06:11:51,940
I can have couple of states
9516
06:11:51,940 --> 06:11:53,740
and their modes and stuff like that,
9517
06:11:53,740 --> 06:11:54,780
but first and foremost,
9518
06:11:54,780 --> 06:11:58,080
what we have to do is remove everything from here.
9519
06:11:58,080 --> 06:11:59,520
This is our app.jsx.
9520
06:11:59,520 --> 06:12:01,460
Let's just go ahead and remove this.
9521
06:12:01,460 --> 06:12:04,660
And I do have some of the values up here.
9522
06:12:04,660 --> 06:12:07,780
So let me just go ahead and grab those values
9523
06:12:07,780 --> 06:12:09,660
and we'll be just copying and pasting.
9524
06:12:10,660 --> 06:12:13,340
So this is my div and what I'm doing is
9525
06:12:13,340 --> 06:12:15,220
I'm bringing in the theme button and the card,
9526
06:12:15,220 --> 06:12:16,700
which it didn't auto-import it.
9527
06:12:16,700 --> 06:12:18,700
So let's go ahead and write this again.
9528
06:12:19,900 --> 06:12:22,860
So theme button.
9529
06:12:22,860 --> 06:12:24,620
Did we wrote that in the lower case?
9530
06:12:25,700 --> 06:12:27,300
No, theme button should be there.
9531
06:12:29,140 --> 06:12:31,120
Theme button.
9532
06:12:32,580 --> 06:12:34,620
No, no suggestion.
9533
06:12:34,620 --> 06:12:37,820
Okay, anyways, let's go ahead and bring them up manually
9534
06:12:37,820 --> 06:12:39,020
in case it doesn't.
9535
06:12:39,020 --> 06:12:42,340
Import card from component card
9536
06:12:42,340 --> 06:12:44,580
and import theme button from components.
9537
06:12:44,580 --> 06:12:45,420
There we go.
9538
06:12:45,420 --> 06:12:46,900
We should have used the index file here.
9539
06:12:46,900 --> 06:12:48,340
Let's see how does it look?
9540
06:12:48,340 --> 06:12:49,740
And there we go, we can have this,
9541
06:12:49,740 --> 06:12:52,420
but it has no effect or impact on this one
9542
06:12:52,420 --> 06:12:54,580
because they are not linked together.
9543
06:12:54,580 --> 06:12:57,740
Now comes up the advantage is we only need one file
9544
06:12:57,740 --> 06:13:00,460
to be there, which is just the theme provider.
9545
06:13:00,460 --> 06:13:02,900
Remember, theme provider is not an export default.
9546
06:13:02,900 --> 06:13:04,140
So you can now just go ahead and say,
9547
06:13:04,140 --> 06:13:06,260
we have to say in the curly braces.
9548
06:13:06,260 --> 06:13:11,260
And then we have to say this one is theme provider.
9549
06:13:11,940 --> 06:13:12,780
There we go.
9550
06:13:12,780 --> 06:13:15,220
And it comes from the context theme.
9551
06:13:15,220 --> 06:13:16,460
Now wrap this up.
9552
06:13:16,460 --> 06:13:18,700
So every component is aware of it.
9553
06:13:18,700 --> 06:13:21,060
You wrap this up in the app.js or wherever you like,
9554
06:13:21,060 --> 06:13:22,660
you can just wrap this up.
9555
06:13:22,660 --> 06:13:26,980
Okay, now everybody's aware of it, but not like this.
9556
06:13:26,980 --> 06:13:28,780
Everybody's not aware of this.
9557
06:13:29,780 --> 06:13:31,700
The way how we were extracting the value,
9558
06:13:31,700 --> 06:13:34,340
this is exactly how you extract the value from it.
9559
06:13:34,340 --> 06:13:36,100
So in this theme provider,
9560
06:13:36,100 --> 06:13:37,540
previously we were saying just one word,
9561
06:13:37,540 --> 06:13:40,100
now we have a parameter known as a value.
9562
06:13:40,100 --> 06:13:42,140
And this can grab all the values
9563
06:13:42,140 --> 06:13:43,660
that you have mentioned in your theme.
9564
06:13:43,660 --> 06:13:47,020
The values like this, theme mode, dark theme, light theme,
9565
06:13:47,020 --> 06:13:47,980
this is all.
9566
06:13:47,980 --> 06:13:49,940
So I will actually bring this one here.
9567
06:13:49,940 --> 06:13:54,700
So I'll just say, hey, give me the object of theme,
9568
06:13:54,700 --> 06:13:56,180
theme mode actually.
9569
06:13:56,180 --> 06:13:58,380
And then we have dark mode.
9570
06:13:58,380 --> 06:14:00,220
I'll just copy this.
9571
06:14:00,220 --> 06:14:02,820
Otherwise I'll make it, it's a dark theme.
9572
06:14:02,820 --> 06:14:05,380
Copy that and paste it.
9573
06:14:05,380 --> 06:14:08,180
And the first one is actually theme mode.
9574
06:14:08,180 --> 06:14:10,780
Copy that, paste it, dark theme,
9575
06:14:10,780 --> 06:14:12,340
and we do have a light theme.
9576
06:14:13,900 --> 06:14:16,580
Okay, so all the functionalities here.
9577
06:14:16,580 --> 06:14:18,180
Now right now they are empty.
9578
06:14:18,180 --> 06:14:20,540
They have no idea how this functionality will work
9579
06:14:20,540 --> 06:14:21,700
and all of that.
9580
06:14:21,700 --> 06:14:24,340
But we'll actually work with the state here a little bit.
9581
06:14:24,340 --> 06:14:25,860
So let me show you how the functionality,
9582
06:14:25,860 --> 06:14:27,500
now we are writing the functionality part.
9583
06:14:27,500 --> 06:14:29,900
So it's super easy and nothing to be worried on.
9584
06:14:29,900 --> 06:14:33,580
First of all, let's go ahead and have a simple theme mode,
9585
06:14:33,580 --> 06:14:35,620
set theme mode, and we'll be setting this
9586
06:14:35,620 --> 06:14:37,260
as a light by default.
9587
06:14:37,260 --> 06:14:39,060
Remember, this is exactly the theme mode.
9588
06:14:39,060 --> 06:14:40,980
Now we have a value of it.
9589
06:14:40,980 --> 06:14:42,260
So previously it was just empty.
9590
06:14:42,260 --> 06:14:44,620
It could have been empty right now it's a default value,
9591
06:14:44,620 --> 06:14:46,500
but it could be empty, it's a variable.
9592
06:14:46,500 --> 06:14:48,220
These two are functions.
9593
06:14:48,220 --> 06:14:50,420
So what this function actually does
9594
06:14:51,260 --> 06:14:52,660
is these are functionalities.
9595
06:14:52,660 --> 06:14:55,660
So what I can say is let's declare these functionalities.
9596
06:14:55,660 --> 06:14:58,420
So these are functions, dark theme, just like this.
9597
06:14:58,420 --> 06:15:01,180
And we'll be having an arrow function just like this.
9598
06:15:01,180 --> 06:15:04,940
All it does is when you call it, it changes dark theme.
9599
06:15:04,940 --> 06:15:06,980
We'll check the values to the dark.
9600
06:15:06,980 --> 06:15:08,960
Similarly, we have a light theme,
9601
06:15:08,960 --> 06:15:11,420
which go ahead and set the theme to light.
9602
06:15:11,420 --> 06:15:12,420
That is it.
9603
06:15:12,420 --> 06:15:15,160
All we are doing is changing the state value.
9604
06:15:15,160 --> 06:15:18,460
But changing just the state value is not enough.
9605
06:15:19,320 --> 06:15:22,180
First of all, you are just changing the state.
9606
06:15:22,180 --> 06:15:25,540
This has no effect into your webpage.
9607
06:15:25,540 --> 06:15:26,760
So how does it work?
9608
06:15:26,760 --> 06:15:29,520
If you want any event in the webpage,
9609
06:15:29,520 --> 06:15:32,660
then you have to either make it happen on some events
9610
06:15:32,660 --> 06:15:34,840
like clicks or on change or all of that.
9611
06:15:34,840 --> 06:15:37,900
If you want to happen it based on some state change,
9612
06:15:37,900 --> 06:15:42,020
then you have to use use effect, a simple hook here.
9613
06:15:42,020 --> 06:15:44,080
And the way how it works is really simple.
9614
06:15:44,080 --> 06:15:46,520
You provide a dependency array to this one.
9615
06:15:46,520 --> 06:15:49,760
And in this case, the dependency of the theme mode.
9616
06:15:49,760 --> 06:15:52,920
The use effect hook simply says that if any value
9617
06:15:52,920 --> 06:15:54,320
in the dependency array change,
9618
06:15:54,320 --> 06:15:56,360
I will re-render this component.
9619
06:15:56,360 --> 06:15:58,120
And when you re-render this component,
9620
06:15:58,120 --> 06:15:59,840
I will actually want to change that.
9621
06:15:59,840 --> 06:16:01,160
I want to run some piece of code.
9622
06:16:01,160 --> 06:16:02,420
What that piece of code,
9623
06:16:02,420 --> 06:16:04,320
this is where your classic JavaScript comes
9624
06:16:04,320 --> 06:16:05,160
into the picture.
9625
06:16:05,160 --> 06:16:08,040
I'll just go ahead and say, hey, I want the document.
9626
06:16:08,040 --> 06:16:11,280
This document will be able to run a query selector.
9627
06:16:11,280 --> 06:16:14,840
I want to find an element, which is known as HTML.
9628
06:16:14,840 --> 06:16:17,180
And inside this, I do have the classes,
9629
06:16:17,180 --> 06:16:18,560
a lot of class list.
9630
06:16:18,560 --> 06:16:20,320
And first of all, I want to remove.
9631
06:16:20,320 --> 06:16:22,360
So remove everything that's there.
9632
06:16:22,360 --> 06:16:24,640
Not just the dark, even if you have light,
9633
06:16:24,640 --> 06:16:26,600
just remove everything.
9634
06:16:26,600 --> 06:16:29,520
And again, this needs to go into double quotes.
9635
06:16:29,520 --> 06:16:32,200
Otherwise it will not able to find this or single quotes.
9636
06:16:32,200 --> 06:16:33,560
It needs to be a string.
9637
06:16:33,560 --> 06:16:34,800
Once that is being done,
9638
06:16:34,800 --> 06:16:37,880
then I want to again run the same query.
9639
06:16:37,880 --> 06:16:40,260
But this time I want to add a theme to it,
9640
06:16:40,260 --> 06:16:41,660
which is theme mode.
9641
06:16:41,660 --> 06:16:44,460
Whatever is the theme mode value, just add this.
9642
06:16:44,460 --> 06:16:45,900
So based on this.
9643
06:16:45,900 --> 06:16:48,100
So we have defined the functionality yet.
9644
06:16:48,100 --> 06:16:51,040
So functionality resides in app.js.
9645
06:16:51,040 --> 06:16:54,340
But since this functionality I was able to set inside this,
9646
06:16:54,340 --> 06:16:55,780
remember theme mode is the value.
9647
06:16:55,780 --> 06:17:00,780
So now my card actually can grab this theme mode value.
9648
06:17:00,940 --> 06:17:03,900
And this theme mode value can be manipulated
9649
06:17:03,900 --> 06:17:04,980
by the theme button.
9650
06:17:04,980 --> 06:17:07,980
And the value can be grabbed by the card itself.
9651
06:17:07,980 --> 06:17:08,820
So first of all,
9652
06:17:08,820 --> 06:17:10,780
let's take down that the how the card
9653
06:17:10,780 --> 06:17:12,500
is actually going to grab it.
9654
06:17:12,500 --> 06:17:14,940
Do you really think card need to grab the value?
9655
06:17:14,940 --> 06:17:15,940
No, not at all.
9656
06:17:15,940 --> 06:17:16,800
Not at all.
9657
06:17:16,800 --> 06:17:18,080
This was a trick question.
9658
06:17:18,080 --> 06:17:19,900
Your card don't need to grab the value
9659
06:17:19,900 --> 06:17:21,140
because in the app.js,
9660
06:17:21,140 --> 06:17:25,580
the whole thing is actually being governed by the HTML.
9661
06:17:25,580 --> 06:17:27,840
Tailwind feature, not to us.
9662
06:17:27,840 --> 06:17:29,460
I hope you understand that.
9663
06:17:29,460 --> 06:17:30,340
Okay.
9664
06:17:30,340 --> 06:17:33,220
So the functionality part of grabbing the values
9665
06:17:33,220 --> 06:17:36,780
also are taken care of for me by the tailwind.
9666
06:17:36,780 --> 06:17:39,100
Does my theme button need some work?
9667
06:17:39,100 --> 06:17:40,980
Yes, your theme button needs some work
9668
06:17:40,980 --> 06:17:42,100
because this theme button,
9669
06:17:42,100 --> 06:17:45,340
first of all need to grab some value from the context.
9670
06:17:45,340 --> 06:17:46,820
And then based on this,
9671
06:17:46,820 --> 06:17:48,900
it will be able to change that value.
9672
06:17:48,900 --> 06:17:51,940
So first of all, what you have to do is grab the value.
9673
06:17:51,940 --> 06:17:53,460
So how we can go ahead and do this,
9674
06:17:53,460 --> 06:17:55,840
we can go ahead and have some values.
9675
06:17:55,840 --> 06:17:58,200
And this time I'll be directly grabbing the value
9676
06:17:58,200 --> 06:17:59,620
from use theme.
9677
06:17:59,620 --> 06:18:02,900
Remember use theme is my custom hook that I've designed.
9678
06:18:02,900 --> 06:18:04,540
What all the values you have inside it,
9679
06:18:04,540 --> 06:18:06,700
you can just go ahead and grab those values.
9680
06:18:07,460 --> 06:18:09,540
So for example, I have this theme mode,
9681
06:18:09,540 --> 06:18:11,580
I have this light theme,
9682
06:18:11,580 --> 06:18:12,940
and I have this dark theme,
9683
06:18:12,940 --> 06:18:14,180
whatever the name of your function,
9684
06:18:14,180 --> 06:18:16,320
I have all the access to this one.
9685
06:18:16,320 --> 06:18:20,780
Now, the next step is that I have to just based
9686
06:18:20,780 --> 06:18:22,500
on some on change button.
9687
06:18:22,500 --> 06:18:24,000
So if there's a change in the button,
9688
06:18:24,000 --> 06:18:26,420
I have to do all of this.
9689
06:18:26,420 --> 06:18:28,980
So let's go ahead and work on with this.
9690
06:18:30,100 --> 06:18:32,980
And I'll just go ahead and say if the value is checked,
9691
06:18:32,980 --> 06:18:35,140
what should happen if the value is checked,
9692
06:18:35,140 --> 06:18:37,620
then the theme mode means it's dark.
9693
06:18:37,620 --> 06:18:42,260
So if it is checked, it means it is on the dark.
9694
06:18:42,260 --> 06:18:44,180
Now, what happens when the on change button?
9695
06:18:44,180 --> 06:18:46,580
So on change, you just toggle the value into it.
9696
06:18:46,580 --> 06:18:49,180
So really couldn't be much more simpler than this.
9697
06:18:49,180 --> 06:18:52,860
So, oh, we have already written the on change button.
9698
06:18:52,860 --> 06:18:54,620
All we have to do is now just get the value.
9699
06:18:54,620 --> 06:18:56,920
So if the theme mode is dark,
9700
06:18:56,920 --> 06:18:59,980
it's change it to a light theme or dark theme
9701
06:18:59,980 --> 06:19:01,340
or whatever it is.
9702
06:19:01,340 --> 06:19:04,020
I think we can actually write a better code than this one,
9703
06:19:04,020 --> 06:19:06,220
although this will also work, I hope so.
9704
06:19:06,220 --> 06:19:07,620
First of all, let's grab the value.
9705
06:19:07,620 --> 06:19:12,240
So we'll just go ahead and say dark mode status.
9706
06:19:13,180 --> 06:19:18,180
I'll grab the status from E and we haven't got the E yet.
9707
06:19:18,220 --> 06:19:22,140
So this will give us the event and the event from that,
9708
06:19:22,140 --> 06:19:27,140
we can just go ahead and grab the current target dot checked.
9709
06:19:28,020 --> 06:19:30,220
This is how you grab the value from the checked,
9710
06:19:30,220 --> 06:19:31,980
whatever is your value.
9711
06:19:31,980 --> 06:19:35,300
So right now the value is empty.
9712
06:19:35,300 --> 06:19:38,180
Yes, there could be a chance the value could be empty,
9713
06:19:38,180 --> 06:19:39,620
but we'll set the value.
9714
06:19:39,620 --> 06:19:41,860
So we'll checked it.
9715
06:19:42,780 --> 06:19:44,820
And we're going to go ahead and say now
9716
06:19:44,820 --> 06:19:48,180
if the dark mode status, then run the dark theme
9717
06:19:48,180 --> 06:19:50,260
else just run the light theme.
9718
06:19:50,260 --> 06:19:53,800
So light theme methods will actually grab,
9719
06:19:53,800 --> 06:19:55,980
we have grabbed these methods from here.
9720
06:19:55,980 --> 06:19:57,800
And now what will happen?
9721
06:19:57,800 --> 06:20:01,180
This dark theme will be going up here
9722
06:20:01,180 --> 06:20:04,920
and we will be able to set the theme mode into the dark.
9723
06:20:04,920 --> 06:20:06,520
And then that's it.
9724
06:20:06,520 --> 06:20:08,060
And similarly here else,
9725
06:20:08,060 --> 06:20:09,620
just go ahead and use the light theme.
9726
06:20:09,620 --> 06:20:10,900
We brought the light theme.
9727
06:20:10,900 --> 06:20:12,900
The functionality will come from here
9728
06:20:12,900 --> 06:20:16,660
and then the value will be rerun by the use effect
9729
06:20:16,660 --> 06:20:18,620
and we'll be able to change the value.
9730
06:20:18,620 --> 06:20:19,820
So I think that is it.
9731
06:20:19,820 --> 06:20:21,820
We need to just save the value and let's see.
9732
06:20:21,820 --> 06:20:23,380
Now we have a toggle.
9733
06:20:23,380 --> 06:20:24,600
It still doesn't work.
9734
06:20:24,600 --> 06:20:28,660
Let me just check what happened and console.
9735
06:20:28,660 --> 06:20:31,580
It says the value prop is required for the context provider.
9736
06:20:31,580 --> 06:20:33,620
Did you miss a spell, forget to pass it?
9737
06:20:33,620 --> 06:20:36,580
Okay, I didn't forget it.
9738
06:20:36,580 --> 06:20:39,840
I actually pass the value.
9739
06:20:39,840 --> 06:20:42,380
Yes, it looks like I have passed the value
9740
06:20:42,380 --> 06:20:44,000
and should be all good.
9741
06:20:44,000 --> 06:20:45,820
Theme provider value.
9742
06:20:45,820 --> 06:20:48,700
Let's check our provider theme as well.
9743
06:20:48,700 --> 06:20:52,220
So if we missed out some value into our theme as well.
9744
06:20:52,220 --> 06:20:53,380
No, it looks like all good.
9745
06:20:53,380 --> 06:20:56,780
Let me quickly check that where I'm missing that value.
9746
06:20:56,780 --> 06:20:57,620
Oh, my bad.
9747
06:20:57,740 --> 06:21:01,180
I actually forgot this in the previous teaching class as well.
9748
06:21:01,180 --> 06:21:02,060
This is not an issue.
9749
06:21:02,060 --> 06:21:03,100
I didn't forgot the value.
9750
06:21:03,100 --> 06:21:06,300
I just needed to refresh it, but it doesn't work still.
9751
06:21:06,300 --> 06:21:08,980
The reason for not working is actually not
9752
06:21:08,980 --> 06:21:10,700
based on some of our mistake.
9753
06:21:10,700 --> 06:21:12,580
It's actually a configuration we forgot to do.
9754
06:21:12,580 --> 06:21:14,500
So go into the tailwind config.
9755
06:21:14,500 --> 06:21:15,900
And the tailwind config, you have
9756
06:21:15,900 --> 06:21:18,500
to actually mention that how the dark mode is actually
9757
06:21:18,500 --> 06:21:20,220
getting used.
9758
06:21:20,220 --> 06:21:21,940
So here the dark mode is actually
9759
06:21:21,940 --> 06:21:24,060
based on the class itself.
9760
06:21:24,060 --> 06:21:26,060
Yes, literally you have to say that.
9761
06:21:26,100 --> 06:21:29,220
Once you actually do this, now your theme toggler will work.
9762
06:21:29,220 --> 06:21:30,700
So there we go.
9763
06:21:30,700 --> 06:21:32,260
So really great, great example.
9764
06:21:32,260 --> 06:21:35,100
But again, I find it, first of all,
9765
06:21:35,100 --> 06:21:37,220
when I studied about this, I found it a little bit
9766
06:21:37,220 --> 06:21:40,580
difficult to grab my head that how this is all is working.
9767
06:21:40,580 --> 06:21:43,340
Again, remember there are always three steps onto this one,
9768
06:21:43,340 --> 06:21:45,840
no matter what or how the code is being written,
9769
06:21:45,840 --> 06:21:47,620
because you'll be working with other programmers
9770
06:21:47,620 --> 06:21:48,940
as well in your company.
9771
06:21:48,940 --> 06:21:50,180
Some of them use this syntax.
9772
06:21:50,180 --> 06:21:51,140
Some of use that syntax.
9773
06:21:51,140 --> 06:21:53,340
But the process always remains same.
9774
06:21:53,340 --> 06:21:55,100
First of all, you create the context.
9775
06:21:55,140 --> 06:21:57,700
Then you make sure everybody's aware of the context.
9776
06:21:57,700 --> 06:22:00,940
And then if any component want to consume the state,
9777
06:22:00,940 --> 06:22:03,260
add values, get the values, whatever,
9778
06:22:03,260 --> 06:22:05,660
that's where you use the use context.
9779
06:22:05,660 --> 06:22:07,300
Now some people use the use context
9780
06:22:07,300 --> 06:22:08,740
within the component itself.
9781
06:22:08,740 --> 06:22:09,620
It's good for them.
9782
06:22:09,620 --> 06:22:12,840
And they always, always have to provide the context to it.
9783
06:22:12,840 --> 06:22:14,620
Some people prefer that all of the things,
9784
06:22:14,620 --> 06:22:16,260
the logic should be written in one file.
9785
06:22:16,260 --> 06:22:19,100
So this portion should be now very clear to you.
9786
06:22:19,100 --> 06:22:20,620
That hey, we have the use context.
9787
06:22:20,620 --> 06:22:21,460
Let's have it.
9788
06:22:21,460 --> 06:22:23,740
Let's create a customized hook so that people can grab
9789
06:22:23,740 --> 06:22:26,660
directly whatever the values are there.
9790
06:22:26,660 --> 06:22:29,260
And the next step is, this one is pretty easy.
9791
06:22:29,260 --> 06:22:32,460
You have this, don't have this, doesn't really bother you,
9792
06:22:32,460 --> 06:22:35,020
because instead of writing theme context.provider here,
9793
06:22:35,020 --> 06:22:38,660
you could have just written it into our app.jsx as well,
9794
06:22:38,660 --> 06:22:40,300
the theme provider.provider.
9795
06:22:40,300 --> 06:22:42,420
Doesn't really add any additional value,
9796
06:22:42,420 --> 06:22:44,580
but you'll see this happening quite a lot.
9797
06:22:44,580 --> 06:22:45,420
So I don't think so.
9798
06:22:45,420 --> 06:22:46,780
This is bothering you.
9799
06:22:46,780 --> 06:22:50,100
Write it here or write it into the awareness file
9800
06:22:50,100 --> 06:22:52,900
I call it as app.js, totally okay.
9801
06:22:52,940 --> 06:22:55,660
What bothers some people is this portion,
9802
06:22:55,660 --> 06:22:58,060
that hey, how we are doing all of this,
9803
06:22:58,060 --> 06:23:00,340
because this is the create context.
9804
06:23:00,340 --> 06:23:02,780
Now, since we have the ability that create context
9805
06:23:02,780 --> 06:23:04,740
can directly have the context,
9806
06:23:04,740 --> 06:23:07,300
whatever the data and everything you want to pass it,
9807
06:23:07,300 --> 06:23:08,940
some people find it much more easier
9808
06:23:08,940 --> 06:23:11,780
that I don't have to bother about children's and whatnot.
9809
06:23:11,780 --> 06:23:13,740
I just add my data here, that's it.
9810
06:23:13,740 --> 06:23:16,460
It's purely a JS file, not the JSX file.
9811
06:23:16,460 --> 06:23:18,100
That's why some people love it.
9812
06:23:18,100 --> 06:23:20,100
Coming back onto the previous example,
9813
06:23:20,100 --> 06:23:22,720
now you will be able to understand it much more better.
9814
06:23:22,840 --> 06:23:24,840
In this example, this file is a pure JS,
9815
06:23:24,840 --> 06:23:25,920
but it doesn't do anything.
9816
06:23:25,920 --> 06:23:27,400
It doesn't take any context.
9817
06:23:27,400 --> 06:23:30,280
It just is literally you are exporting the user context.
9818
06:23:30,280 --> 06:23:31,600
That is it.
9819
06:23:31,600 --> 06:23:35,080
And in this file, we create the separation of the JSX
9820
06:23:35,080 --> 06:23:37,640
because literally you are passing some JSX.
9821
06:23:37,640 --> 06:23:38,800
The thing which should be done
9822
06:23:38,800 --> 06:23:40,520
like value of the user and stuff,
9823
06:23:40,520 --> 06:23:44,120
which can also be done in the app.js or main.js,
9824
06:23:44,120 --> 06:23:46,240
we are actually doing this here itself.
9825
06:23:46,240 --> 06:23:48,920
That is the whole reason for the confusion.
9826
06:23:48,920 --> 06:23:51,440
And again, previously we were exporting
9827
06:23:51,480 --> 06:23:52,960
this user context provider.
9828
06:23:52,960 --> 06:23:54,920
This user context.provider goes here.
9829
06:23:54,920 --> 06:23:57,280
In that file, we are just exporting it directly.
9830
06:23:57,280 --> 06:23:59,640
So again, it's up to the choice.
9831
06:23:59,640 --> 06:24:01,600
If you ask me, what is my choice
9832
06:24:01,600 --> 06:24:03,740
and what do I use professionally?
9833
06:24:03,740 --> 06:24:05,680
I use this one where I have just one file
9834
06:24:05,680 --> 06:24:09,520
because in this portion, I think clarity is much more.
9835
06:24:09,520 --> 06:24:10,780
I don't have to worry too much.
9836
06:24:10,780 --> 06:24:13,100
It's a pure JS file, not JSX.
9837
06:24:13,100 --> 06:24:16,040
I can write all my data in that context as well.
9838
06:24:16,040 --> 06:24:17,760
I can create a simple hook,
9839
06:24:17,760 --> 06:24:19,060
which actually is aware of it.
9840
06:24:19,060 --> 06:24:21,060
So one file for one context,
9841
06:24:21,060 --> 06:24:22,580
much, much simpler.
9842
06:24:22,580 --> 06:24:23,940
And as your application grows,
9843
06:24:23,940 --> 06:24:26,160
you have much more of the context,
9844
06:24:26,160 --> 06:24:28,900
then this approach is much, much better.
9845
06:24:28,900 --> 06:24:31,540
And to be honest, in most of the complex project
9846
06:24:31,540 --> 06:24:34,180
that I work, context doesn't make it up.
9847
06:24:34,180 --> 06:24:36,100
I most of the time use Redux,
9848
06:24:36,100 --> 06:24:37,940
these days Redux toolkit.
9849
06:24:37,940 --> 06:24:41,180
So I have to use some kind of a bigger library
9850
06:24:41,180 --> 06:24:42,660
for handling these kinds of state.
9851
06:24:42,660 --> 06:24:45,420
But yes, for the interview perspective
9852
06:24:45,420 --> 06:24:47,260
or the purposes of many projects,
9853
06:24:47,260 --> 06:24:48,620
internal company projects,
9854
06:24:48,900 --> 06:24:51,780
the awareness and the knowledge of context API
9855
06:24:51,780 --> 06:24:53,380
is much, much needed.
9856
06:24:53,380 --> 06:24:54,820
So I've shown you both of the ways
9857
06:24:54,820 --> 06:24:56,860
and I'm pretty sure this will take a little bit time
9858
06:24:56,860 --> 06:24:57,700
to digest.
9859
06:24:57,700 --> 06:24:59,420
So don't be in a hurry, take your time,
9860
06:24:59,420 --> 06:25:02,300
go through the videos, both of the sections again.
9861
06:25:02,300 --> 06:25:05,020
And once you'll write the code manually,
9862
06:25:05,020 --> 06:25:07,180
then it will make much more sense, much more clarity.
9863
06:25:07,180 --> 06:25:09,380
I've tried my best to slow down the pace.
9864
06:25:09,380 --> 06:25:11,340
Each line should make sense to you.
9865
06:25:11,340 --> 06:25:12,660
Yes, it takes a lot of effort.
9866
06:25:12,660 --> 06:25:15,040
That's why saying one comment in the comment section,
9867
06:25:15,040 --> 06:25:17,180
just a heart would mean a lot.
9868
06:25:17,180 --> 06:25:18,380
So that's it for this video.
9869
06:25:18,460 --> 06:25:20,300
And let's catch up in the next one.
9870
06:25:22,300 --> 06:25:23,260
Hey there, everyone.
9871
06:25:23,260 --> 06:25:25,300
Hittai Sheer back again with another video.
9872
06:25:25,300 --> 06:25:28,060
And yes, I was gone for a little while.
9873
06:25:28,060 --> 06:25:29,100
I hope you missed me.
9874
06:25:29,100 --> 06:25:31,340
If you're watching it one go, then it doesn't make sense.
9875
06:25:31,340 --> 06:25:33,500
But anyways, finally, I'm back
9876
06:25:33,500 --> 06:25:37,820
and I'm trying to put as much as content as I can possibly
9877
06:25:37,820 --> 06:25:40,540
with a given free time apart from my job.
9878
06:25:40,540 --> 06:25:42,500
In this video, I'll be continuing the journey
9879
06:25:42,500 --> 06:25:43,660
of our React.
9880
06:25:43,660 --> 06:25:45,740
We have been into the course of the React,
9881
06:25:45,740 --> 06:25:47,600
which is a project-based course.
9882
06:25:47,680 --> 06:25:49,080
We have built so many projects
9883
06:25:49,080 --> 06:25:51,720
and now we are kind of brushing up our skills
9884
06:25:51,720 --> 06:25:53,440
on the context API.
9885
06:25:53,440 --> 06:25:55,600
The context API is pretty nice to have
9886
06:25:55,600 --> 06:25:57,280
and it gives you a great foundation
9887
06:25:57,280 --> 06:26:00,360
to even further understand other state management libraries
9888
06:26:00,360 --> 06:26:02,880
like Redux, Zostan and whatnot.
9889
06:26:02,880 --> 06:26:05,840
So I thought let's give one more shot of understanding it
9890
06:26:05,840 --> 06:26:07,640
by building another cool project
9891
06:26:07,640 --> 06:26:09,680
and then we can move on to our mega project
9892
06:26:09,680 --> 06:26:10,920
which is building up a blog.
9893
06:26:10,920 --> 06:26:12,960
I'll talk about that one in the next video
9894
06:26:12,960 --> 06:26:15,440
or probably next video, whatever that video is.
9895
06:26:15,440 --> 06:26:17,280
But in this one, we will be walking you
9896
06:26:17,280 --> 06:26:18,760
through with the context API
9897
06:26:18,760 --> 06:26:20,960
and how you can build a full-fledged project.
9898
06:26:20,960 --> 06:26:23,360
Not only just context API, I'll also walk you through
9899
06:26:23,360 --> 06:26:25,440
with how you can use the context API
9900
06:26:25,440 --> 06:26:28,400
to store something into the local storage
9901
06:26:28,400 --> 06:26:30,040
of your browser as well.
9902
06:26:30,040 --> 06:26:33,760
Now, these context API or Redux, they're just state managers
9903
06:26:33,760 --> 06:26:36,840
and they just allow you to perform certain actions
9904
06:26:36,840 --> 06:26:38,640
or tasks in a certain way.
9905
06:26:38,640 --> 06:26:40,560
It doesn't really care what you are performing
9906
06:26:40,560 --> 06:26:41,600
or how you are performing.
9907
06:26:41,600 --> 06:26:43,880
It just allows you to give a streamlined part
9908
06:26:43,880 --> 06:26:46,680
that this is only how things should go and come back.
9909
06:26:46,680 --> 06:26:49,320
It's a kind of a data streamline for us.
9910
06:26:49,320 --> 06:26:51,080
It doesn't really care if you are putting things
9911
06:26:51,080 --> 06:26:53,440
into the local storage or a database online
9912
06:26:53,440 --> 06:26:55,080
or however you are dealing with the things.
9913
06:26:55,080 --> 06:26:57,360
This is just pure functionality part.
9914
06:26:57,360 --> 06:26:59,160
So without a further ado, let me walk you through
9915
06:26:59,160 --> 06:27:01,400
that what we are about to build, let me share the screen.
9916
06:27:01,400 --> 06:27:03,900
So this is where we are.
9917
06:27:03,900 --> 06:27:05,320
So this is what we'll be building.
9918
06:27:05,320 --> 06:27:07,000
So this is just a simple to do.
9919
06:27:07,000 --> 06:27:10,200
It looks simple, but there is so much of intricacies in that
9920
06:27:10,200 --> 06:27:13,040
and so much of the knowledge about how the code base
9921
06:27:13,040 --> 06:27:14,760
or the code structure should look like,
9922
06:27:14,760 --> 06:27:16,600
how a program flow works through
9923
06:27:16,600 --> 06:27:18,240
and we'll be walking it through.
9924
06:27:18,240 --> 06:27:21,000
So in this one, what we'll be doing is
9925
06:27:22,360 --> 06:27:24,280
we'll be simply having this right to do
9926
06:27:24,280 --> 06:27:26,960
which will be a component on its own itself
9927
06:27:26,960 --> 06:27:28,640
and we'll be walking it through.
9928
06:27:28,640 --> 06:27:30,800
Apart from this, we have this simple thing
9929
06:27:30,800 --> 06:27:32,400
which can be toggled on and off.
9930
06:27:32,400 --> 06:27:33,240
That's nice.
9931
06:27:33,240 --> 06:27:35,240
And as we toggle on, now you cannot edit it
9932
06:27:35,240 --> 06:27:36,160
because it's done.
9933
06:27:36,160 --> 06:27:38,480
So what's the point of having it?
9934
06:27:38,480 --> 06:27:40,020
And apart from this, you can actually click
9935
06:27:40,020 --> 06:27:41,000
on this edit button.
9936
06:27:41,000 --> 06:27:43,200
And as soon as you click on the edit button,
9937
06:27:43,200 --> 06:27:44,720
this gets as editable.
9938
06:27:45,560 --> 06:27:48,040
So this actually, this whole text thing,
9939
06:27:48,040 --> 06:27:49,640
if I save this, this is a text thing.
9940
06:27:49,640 --> 06:27:52,400
If I click on this one, it loads an input field.
9941
06:27:52,400 --> 06:27:54,280
In the input field, we loads a value
9942
06:27:54,280 --> 06:27:56,960
and then thus it makes it more of an editable
9943
06:27:56,960 --> 06:27:58,680
on its own place itself.
9944
06:27:58,680 --> 06:28:00,520
And thus after that, you can save that.
9945
06:28:00,520 --> 06:28:02,840
Once it's in the edit mode, we give the save button.
9946
06:28:02,840 --> 06:28:05,300
Otherwise we get the edit button, we can delete that.
9947
06:28:05,300 --> 06:28:07,880
We can add more to-dos, obviously.
9948
06:28:07,880 --> 06:28:09,840
The most interesting part is if I right click
9949
06:28:09,840 --> 06:28:14,320
and inspect onto this one, I need to go into application
9950
06:28:14,320 --> 06:28:16,880
and in the application, I can see the local storage.
9951
06:28:16,880 --> 06:28:19,560
There's a lot of things here, session storage and whatnot.
9952
06:28:19,560 --> 06:28:22,600
In the local storage, I can see all of my applications are,
9953
06:28:22,600 --> 06:28:25,300
or whatever my to-dos are actually stored in this one.
9954
06:28:25,300 --> 06:28:27,040
This whole applications looks simple,
9955
06:28:27,040 --> 06:28:29,520
but it will give you a rock solid foundation
9956
06:28:29,520 --> 06:28:32,760
of how applications are being built using the context API,
9957
06:28:32,760 --> 06:28:34,280
what thought process goes into that
9958
06:28:34,280 --> 06:28:35,820
and entire credit operation.
9959
06:28:35,820 --> 06:28:38,080
This will be super helpful for you for later on
9960
06:28:38,080 --> 06:28:39,620
as we build our mega project,
9961
06:28:39,620 --> 06:28:41,920
this would be a good practice for you.
9962
06:28:41,920 --> 06:28:43,960
So again, let's go ahead and get started
9963
06:28:43,960 --> 06:28:45,800
and try to build this project.
9964
06:28:45,800 --> 06:28:47,240
I think that would be a pretty,
9965
06:28:47,240 --> 06:28:48,960
pretty cool exercise for all of us.
9966
06:28:48,960 --> 06:28:49,920
We'll be using Tailwind.
9967
06:28:49,920 --> 06:28:51,640
We are not worried about the CSS part.
9968
06:28:51,640 --> 06:28:53,640
This is not a CSS tutorial.
9969
06:28:53,640 --> 06:28:54,780
We'll be skipping that part.
9970
06:28:54,780 --> 06:28:56,920
I'll be giving you the copy paste, class names,
9971
06:28:56,920 --> 06:28:57,760
just add that.
9972
06:28:57,760 --> 06:28:59,400
Otherwise, if you don't even give any class name,
9973
06:28:59,400 --> 06:29:00,720
that's fine too.
9974
06:29:00,720 --> 06:29:03,240
We are more focused on the functionality part.
9975
06:29:03,240 --> 06:29:05,720
And for this, we'll be using the Tailwind CSS,
9976
06:29:05,720 --> 06:29:07,860
our trusty old friend for always that.
9977
06:29:07,860 --> 06:29:09,920
Let's go into the docs part of it.
9978
06:29:09,920 --> 06:29:11,960
And we will be framework guides
9979
06:29:11,960 --> 06:29:14,040
and we'll be going through the VIT guide.
9980
06:29:14,040 --> 06:29:16,720
All right, so let's go ahead and create a fresh project.
9981
06:29:16,720 --> 06:29:19,000
So let me go ahead and open up my VS code.
9982
06:29:19,000 --> 06:29:22,120
This is where we'll be creating a fresh new project.
9983
06:29:22,120 --> 06:29:23,400
Let me open this up
9984
06:29:23,400 --> 06:29:25,600
and we'll be creating our new project.
9985
06:29:25,600 --> 06:29:29,320
So NPM create VIT
9986
06:29:29,320 --> 06:29:31,360
and we'll be going for the latest.
9987
06:29:31,360 --> 06:29:33,060
So let's go with the latest.
9988
06:29:33,060 --> 06:29:36,000
And what should be the name of this project?
9989
06:29:36,000 --> 06:29:37,280
That's an interesting question.
9990
06:29:37,280 --> 06:29:38,680
So we'll be going with the 10
9991
06:29:38,680 --> 06:29:40,520
and then with the name of Todo.
9992
06:29:41,520 --> 06:29:42,940
Todo context.
9993
06:29:44,200 --> 06:29:45,960
Context and we are also using local.
9994
06:29:45,960 --> 06:29:47,800
So I'll just say local for the local storage.
9995
06:29:47,800 --> 06:29:50,200
So I'll just hit that package name is same.
9996
06:29:50,200 --> 06:29:51,680
We'll be obviously using React
9997
06:29:51,680 --> 06:29:53,280
and we'll be going with the JavaScript,
9998
06:29:53,280 --> 06:29:54,960
not the TypeScript at least in this one.
9999
06:29:54,960 --> 06:29:56,080
So let's go there.
10000
06:29:56,080 --> 06:29:56,920
And there we go.
10001
06:29:56,920 --> 06:29:58,840
We have this application up and running.
10002
06:29:58,840 --> 06:30:01,200
Now what I'll do is I'll close this one.
10003
06:30:01,200 --> 06:30:03,520
I'll open this up in my integrated terminal
10004
06:30:03,520 --> 06:30:06,040
so that we are directly into the folder itself.
10005
06:30:06,040 --> 06:30:07,800
And we'll be saying NPM install
10006
06:30:07,800 --> 06:30:09,960
to install all the dependencies what we have,
10007
06:30:10,000 --> 06:30:12,660
just like the boiler basics.
10008
06:30:13,560 --> 06:30:14,400
All right.
10009
06:30:14,400 --> 06:30:17,160
Now in the meantime, let's go into the Tailwind CSS
10010
06:30:17,160 --> 06:30:18,500
and we need this whole thing.
10011
06:30:18,500 --> 06:30:20,880
So let's just go ahead and copy this.
10012
06:30:20,880 --> 06:30:22,480
And there we go.
10013
06:30:22,480 --> 06:30:26,400
Your cache folder, previous version since addressed.
10014
06:30:26,400 --> 06:30:29,040
Oh, there's so much of the bugs.
10015
06:30:29,040 --> 06:30:30,680
Sys call.
10016
06:30:30,680 --> 06:30:33,240
Oh, seems like there are some issues into this one.
10017
06:30:33,240 --> 06:30:34,400
I didn't expected that,
10018
06:30:34,400 --> 06:30:36,520
but let me just go ahead and remove this.
10019
06:30:36,520 --> 06:30:37,720
Try it one more time.
10020
06:30:37,720 --> 06:30:41,120
It shouldn't be happening in this phase at least,
10021
06:30:41,120 --> 06:30:44,040
but let's just go NPM install.
10022
06:30:45,000 --> 06:30:47,720
Let me first do a quick LS if I'm able to see that.
10023
06:30:47,720 --> 06:30:49,800
Yes, package.json is here.
10024
06:30:49,800 --> 06:30:50,940
NPM install.
10025
06:30:52,480 --> 06:30:54,440
Oh, there's some issues.
10026
06:30:54,440 --> 06:30:55,960
Your cache folder contains root.
10027
06:30:55,960 --> 06:30:57,280
Oh, I need to fix this one.
10028
06:30:57,280 --> 06:30:58,400
So just give me a second.
10029
06:30:58,400 --> 06:31:00,560
I'll quickly go ahead and fix this one.
10030
06:31:00,560 --> 06:31:01,980
Weird error, don't know why.
10031
06:31:03,240 --> 06:31:04,600
All right, so fixed it.
10032
06:31:04,600 --> 06:31:06,280
Usually these kinds of things happen
10033
06:31:06,280 --> 06:31:07,420
when you update your system.
10034
06:31:07,440 --> 06:31:09,380
And yes, I moved on to the latest Mac
10035
06:31:09,380 --> 06:31:11,020
and that's why things happen.
10036
06:31:11,020 --> 06:31:13,220
Nothing much of a big fix that I did.
10037
06:31:13,220 --> 06:31:14,980
Actually, I just run this simple command,
10038
06:31:14,980 --> 06:31:16,500
which was suggested to me here that hey,
10039
06:31:16,500 --> 06:31:19,540
you need to change the permission of the NPM packages here.
10040
06:31:19,540 --> 06:31:21,740
So I did exactly same, asked for my password,
10041
06:31:21,740 --> 06:31:23,900
gave it the password, then I'd run the NPM install
10042
06:31:23,900 --> 06:31:24,780
and it works fine.
10043
06:31:24,780 --> 06:31:26,460
So that's basic.
10044
06:31:26,460 --> 06:31:27,820
Nothing too much.
10045
06:31:27,820 --> 06:31:29,920
Things happen all the time.
10046
06:31:29,920 --> 06:31:33,020
Okay, now we have to run simply NPM, run dev at least.
10047
06:31:33,020 --> 06:31:36,180
Let's see if we are able to run the things properly or not.
10048
06:31:36,420 --> 06:31:37,260
Things looks good.
10049
06:31:37,260 --> 06:31:38,080
Things looks good.
10050
06:31:38,080 --> 06:31:40,220
Now we can just go ahead and copy this
10051
06:31:40,220 --> 06:31:42,420
and let's stop this, paste this.
10052
06:31:42,420 --> 06:31:46,820
I should be giving us a package file for Tailwind.
10053
06:31:46,820 --> 06:31:49,420
Hopefully, config file for Tailwind.
10054
06:31:49,420 --> 06:31:50,260
There we go.
10055
06:31:50,260 --> 06:31:51,400
This is our config file.
10056
06:31:51,400 --> 06:31:55,020
Let's go ahead and copy the context for the wheat.
10057
06:31:55,020 --> 06:31:58,000
Let's get this one, copy that.
10058
06:31:58,000 --> 06:31:59,940
This should be very common to you by now.
10059
06:31:59,940 --> 06:32:02,260
We have been doing this for so long
10060
06:32:02,260 --> 06:32:04,280
and we need to have directives.
10061
06:32:04,280 --> 06:32:05,760
So copy this.
10062
06:32:05,760 --> 06:32:10,760
And for the Tailwind CSS source
10063
06:32:11,160 --> 06:32:15,280
and in the app.css, not app, index.css,
10064
06:32:15,280 --> 06:32:17,160
we'll just remove everything, paste it up here,
10065
06:32:17,160 --> 06:32:18,920
save that, that looks good.
10066
06:32:18,920 --> 06:32:22,440
Also go into your app.css and go ahead and remove everything.
10067
06:32:22,440 --> 06:32:23,960
That's exactly what we want.
10068
06:32:23,960 --> 06:32:25,680
We don't want anything.
10069
06:32:25,680 --> 06:32:27,200
Okay, rest is all good.
10070
06:32:27,200 --> 06:32:28,920
We should be able to get a hello world
10071
06:32:28,920 --> 06:32:30,480
with the class names and stuff.
10072
06:32:30,480 --> 06:32:35,480
So let's go into app.jsx and let's run this.
10073
06:32:36,420 --> 06:32:39,440
NPM run dev, let's close this.
10074
06:32:39,440 --> 06:32:41,160
And inside this, let's go ahead
10075
06:32:41,160 --> 06:32:43,240
and use the Tailwind CSS up here.
10076
06:32:43,240 --> 06:32:46,800
So remove everything and paste the such one.
10077
06:32:46,800 --> 06:32:48,980
Save that, let's see.
10078
06:32:48,980 --> 06:32:51,760
And yep, it's a Tailwind, it's a Tailwind one.
10079
06:32:51,760 --> 06:32:53,480
All right, so this looks good.
10080
06:32:53,480 --> 06:32:56,080
Now let's see, let's prepare the plan of action
10081
06:32:56,080 --> 06:32:58,000
that how we are going to take this one.
10082
06:32:58,000 --> 06:33:00,680
The first good thing is that I don't have to worry too much
10083
06:33:00,680 --> 06:33:03,280
because context API comes up as a default one.
10084
06:33:03,280 --> 06:33:04,920
So I can just go with that.
10085
06:33:04,920 --> 06:33:06,320
But first thing is always,
10086
06:33:06,320 --> 06:33:08,440
if you're planning to use the context API
10087
06:33:08,440 --> 06:33:11,400
or maybe Redux toolkit or something,
10088
06:33:11,400 --> 06:33:14,120
just first go ahead and target that one.
10089
06:33:14,120 --> 06:33:15,900
That's always and always a good idea.
10090
06:33:15,900 --> 06:33:18,940
We'll come back onto app.jsx and all these functionality.
10091
06:33:18,940 --> 06:33:20,640
But first is always a good idea
10092
06:33:20,640 --> 06:33:24,180
that you simply go ahead and have a context for this one.
10093
06:33:24,180 --> 06:33:26,200
So let's go ahead and work with that.
10094
06:33:26,200 --> 06:33:29,480
So I'll go into my source and I'll create a new folder.
10095
06:33:29,480 --> 06:33:31,080
I want to keep my context separate.
10096
06:33:31,080 --> 06:33:33,080
So I'll just go ahead and hey,
10097
06:33:33,080 --> 06:33:34,920
why are you not allowing me to write?
10098
06:33:35,840 --> 06:33:38,840
Right click, new folder.
10099
06:33:38,840 --> 06:33:40,080
Yep, now it's good.
10100
06:33:40,080 --> 06:33:43,140
Context, again, we'll be calling it as context
10101
06:33:43,140 --> 06:33:45,560
because you might have more than one context.
10102
06:33:45,560 --> 06:33:46,760
A context for login,
10103
06:33:46,760 --> 06:33:48,960
which does all the functionality for login.
10104
06:33:48,960 --> 06:33:51,480
I'm having just one context, which is my to-do context.
10105
06:33:51,480 --> 06:33:53,520
So I'll show you how it is being done professionally
10106
06:33:53,520 --> 06:33:55,840
in such kind of application.
10107
06:33:55,840 --> 06:33:57,840
I'll create a new file inside the context
10108
06:33:57,840 --> 06:34:00,520
and I'll call this one as todo context.
10109
06:34:00,520 --> 06:34:04,080
So I'll call this context.js.
10110
06:34:04,080 --> 06:34:06,280
Not only that, usually you'll find
10111
06:34:06,280 --> 06:34:09,000
that there is a new file known as index.js.
10112
06:34:09,000 --> 06:34:13,320
This is nothing much more than you have multiple context
10113
06:34:13,320 --> 06:34:15,240
and you pick all those contexts,
10114
06:34:15,240 --> 06:34:18,040
bring them up in index so that you can import all of them
10115
06:34:18,040 --> 06:34:19,160
via the index file.
10116
06:34:19,160 --> 06:34:21,360
That is it, that is the goal.
10117
06:34:21,360 --> 06:34:24,360
Okay, let's see how we can work with the context.
10118
06:34:24,360 --> 06:34:27,000
Pretty easy if you have done this anytime
10119
06:34:27,000 --> 06:34:28,680
and especially the to-dos are pretty easy
10120
06:34:28,680 --> 06:34:29,960
to work on with that.
10121
06:34:29,960 --> 06:34:31,560
So I'll just go ahead and say, first of all,
10122
06:34:31,560 --> 06:34:33,000
let's import some stuff
10123
06:34:33,000 --> 06:34:34,840
and we'll be importing them from React.
10124
06:34:34,840 --> 06:34:36,520
So that's obvious.
10125
06:34:36,520 --> 06:34:37,440
Let's go up here.
10126
06:34:37,440 --> 06:34:38,320
What do we need?
10127
06:34:38,320 --> 06:34:40,840
We need a create context and a use context.
10128
06:34:40,840 --> 06:34:43,080
Create context to create the context
10129
06:34:43,080 --> 06:34:46,000
and use context for using that created context.
10130
06:34:46,000 --> 06:34:48,280
Too many context, but yeah, we need that.
10131
06:34:48,280 --> 06:34:50,000
So we'll be having a create context
10132
06:34:50,000 --> 06:34:52,080
and we'll be needing a use context,
10133
06:34:52,080 --> 06:34:53,720
which is a hook itself.
10134
06:34:53,720 --> 06:34:55,840
All right, now we have these two.
10135
06:34:55,840 --> 06:34:57,560
The first thing is to create the context.
10136
06:34:57,560 --> 06:34:59,560
So we're gonna go ahead and directly export this
10137
06:34:59,560 --> 06:35:02,760
and let's call this one as to-do context.
10138
06:35:02,760 --> 06:35:05,200
This to-do context will be created
10139
06:35:05,200 --> 06:35:07,160
using the create context, that's it.
10140
06:35:07,160 --> 06:35:09,800
It's nothing, it's just a function.
10141
06:35:09,800 --> 06:35:11,400
This function takes an object
10142
06:35:11,400 --> 06:35:14,280
and within the object you can pass on all the things
10143
06:35:14,280 --> 06:35:16,520
which you want to have the context of.
10144
06:35:16,520 --> 06:35:18,680
All the data, all the fields that you require,
10145
06:35:18,680 --> 06:35:21,040
you can just directly pass on in here.
10146
06:35:21,040 --> 06:35:22,880
We saw another method in which I showed you
10147
06:35:22,880 --> 06:35:24,880
we can create them at separate places and all of that,
10148
06:35:24,880 --> 06:35:26,680
but this is more of a professional approach.
10149
06:35:26,680 --> 06:35:28,160
You'll find this again, again.
10150
06:35:28,160 --> 06:35:31,080
That first approach I told you gives you more clarity,
10151
06:35:31,080 --> 06:35:32,720
but in the real world application,
10152
06:35:32,720 --> 06:35:34,480
you'll be using this much more.
10153
06:35:34,480 --> 06:35:37,920
So in this one, my context, I'll call this one as to-dos,
10154
06:35:37,920 --> 06:35:39,680
which is going to be an array
10155
06:35:39,680 --> 06:35:43,600
and how does each of my to-dos looks like?
10156
06:35:43,600 --> 06:35:46,600
So I'll just give it a sample here as an example
10157
06:35:46,600 --> 06:35:48,960
so that we can understand it more as we write code,
10158
06:35:48,960 --> 06:35:50,320
otherwise it's not required yet.
10159
06:35:50,320 --> 06:35:51,760
This is just for an exercise
10160
06:35:51,760 --> 06:35:54,920
so that we understand how each of my to-do looks like.
10161
06:35:54,920 --> 06:35:57,800
So I'll say that ID will be one we can use later
10162
06:35:57,800 --> 06:36:00,200
on the ID as a date, date.now,
10163
06:36:00,200 --> 06:36:02,120
or we can use some kind of a nano ID
10164
06:36:02,120 --> 06:36:04,960
to give a unique ID, totally up to us.
10165
06:36:04,960 --> 06:36:06,920
And then we are going to give a to-do.
10166
06:36:06,920 --> 06:36:08,880
This to-do is going to be a to-do message.
10167
06:36:08,880 --> 06:36:12,080
So we'll be just saying to-do, message.
10168
06:36:12,080 --> 06:36:14,960
And then finally, we'll be having a complete.
10169
06:36:14,960 --> 06:36:17,920
This completed is nothing, it's just a Boolean value.
10170
06:36:17,920 --> 06:36:19,060
So I'll just say false.
10171
06:36:19,060 --> 06:36:21,360
So this is how my to-do looks like.
10172
06:36:21,360 --> 06:36:24,240
Okay, not only that to-do, it's not gonna be just to-do.
10173
06:36:24,240 --> 06:36:26,400
There needs to be a functionality as well.
10174
06:36:26,440 --> 06:36:28,360
So first part is add to-do.
10175
06:36:28,360 --> 06:36:31,680
So there needs to be a functionality which adds the to-do.
10176
06:36:31,680 --> 06:36:34,240
I'll be just writing its vague definition,
10177
06:36:34,240 --> 06:36:38,040
not the functionality or the working part in this one.
10178
06:36:38,040 --> 06:36:40,760
Okay, so how does the add to-do works looks like?
10179
06:36:40,760 --> 06:36:44,120
It is just a method like this, that is it.
10180
06:36:44,120 --> 06:36:45,560
But add to-do doesn't work alone.
10181
06:36:45,560 --> 06:36:47,200
It requires a to-do to be passed on.
10182
06:36:47,200 --> 06:36:49,200
So just go ahead and give me that to-do.
10183
06:36:49,200 --> 06:36:51,560
And we now know this as awareness
10184
06:36:51,560 --> 06:36:52,840
that to-do will look like this.
10185
06:36:52,840 --> 06:36:55,040
And that is why a lot of people like to use TypeScript
10186
06:36:55,040 --> 06:36:56,320
because it gives you awareness
10187
06:36:56,320 --> 06:36:59,740
about how your data looks like, types of the data.
10188
06:36:59,740 --> 06:37:01,680
But again, this already makes sense.
10189
06:37:01,680 --> 06:37:04,120
So there's nothing more to discuss with that.
10190
06:37:04,120 --> 06:37:05,880
Okay, similarly, we have added the to-do.
10191
06:37:05,880 --> 06:37:08,560
Now, obviously there will be a method to update the to-do.
10192
06:37:08,560 --> 06:37:10,240
How does the update to-do looks like?
10193
06:37:10,240 --> 06:37:13,360
Again, it's going to be a simple method just like this.
10194
06:37:13,360 --> 06:37:16,760
But another essential thing to update an existing to-do
10195
06:37:16,760 --> 06:37:19,120
is give me what to-do should I update.
10196
06:37:19,120 --> 06:37:20,900
So that's going to be an ID.
10197
06:37:20,900 --> 06:37:22,840
And what should I updated?
10198
06:37:22,840 --> 06:37:24,320
The updated to-do give me that.
10199
06:37:24,320 --> 06:37:25,880
So it needs to give that to-do.
10200
06:37:25,880 --> 06:37:26,960
So that's all.
10201
06:37:26,960 --> 06:37:28,880
How it will update, I'm not worried on that
10202
06:37:28,880 --> 06:37:30,960
because how can change depends
10203
06:37:30,960 --> 06:37:32,880
on how you're making the application.
10204
06:37:32,880 --> 06:37:35,640
For us, this application is based on local storage.
10205
06:37:35,640 --> 06:37:37,960
For you, this might be an application
10206
06:37:37,960 --> 06:37:40,800
based on MongoDB or MySQL.
10207
06:37:40,800 --> 06:37:43,440
So there could be a lot of use cases in that example.
10208
06:37:45,400 --> 06:37:49,040
So we have added a to-do, updated a to-do.
10209
06:37:49,040 --> 06:37:49,880
What next?
10210
06:37:49,880 --> 06:37:51,480
We can have a delete to-do.
10211
06:37:51,480 --> 06:37:53,040
What do I need to delete that?
10212
06:37:53,040 --> 06:37:54,520
First of all, it's going to be a method.
10213
06:37:54,520 --> 06:37:55,920
That's obvious.
10214
06:37:55,920 --> 06:37:56,760
What do we need?
10215
06:37:56,760 --> 06:37:58,440
Just an ID, give me that ID
10216
06:37:58,440 --> 06:38:00,360
and I'll simply go ahead and delete that.
10217
06:38:00,360 --> 06:38:01,600
So that's one thing.
10218
06:38:01,600 --> 06:38:05,260
I also need to toggle the to-do to mark it as false, true,
10219
06:38:05,260 --> 06:38:07,440
is it done, not done based on that.
10220
06:38:07,440 --> 06:38:10,680
So I'll just go ahead and call this one as toggle,
10221
06:38:10,680 --> 06:38:14,840
toggle, yeah, that sounds, toggle complete,
10222
06:38:14,840 --> 06:38:18,240
toggle complete, not a good naming in this case,
10223
06:38:18,240 --> 06:38:19,600
but I'll just go with that.
10224
06:38:20,760 --> 06:38:21,920
Okay, what do I need for that?
10225
06:38:21,920 --> 06:38:24,040
Just give me the ID and I'll work with that.
10226
06:38:24,040 --> 06:38:25,800
So this is my vague functionality.
10227
06:38:25,800 --> 06:38:28,720
It doesn't work and that's exactly your context
10228
06:38:28,720 --> 06:38:31,720
that based on this, I can add the functionality.
10229
06:38:31,720 --> 06:38:34,400
So I can not only add data into this array,
10230
06:38:34,400 --> 06:38:36,980
but also I can actually define the functionality
10231
06:38:36,980 --> 06:38:37,820
based on that.
10232
06:38:37,820 --> 06:38:39,680
That is exactly your context.
10233
06:38:39,680 --> 06:38:41,400
So now your context is all done,
10234
06:38:41,400 --> 06:38:44,200
but every single time in the earlier videos,
10235
06:38:44,200 --> 06:38:45,320
if you remember that,
10236
06:38:45,320 --> 06:38:48,760
we saw that it's not like just defining the context easy.
10237
06:38:48,760 --> 06:38:50,480
Somebody needs to use that.
10238
06:38:50,480 --> 06:38:53,800
And whoever is using need to use this use context
10239
06:38:53,800 --> 06:38:55,560
as well as all these things that,
10240
06:38:55,560 --> 06:38:57,440
hey, I need to be aware of the context,
10241
06:38:57,440 --> 06:39:00,320
to-do context, login context or something.
10242
06:39:00,320 --> 06:39:03,040
This is such a common thing that we later on realize
10243
06:39:03,040 --> 06:39:05,740
that doing this in the same file actually makes sense
10244
06:39:05,740 --> 06:39:07,680
and actually saves us a lot of time.
10245
06:39:07,680 --> 06:39:09,400
So will we simply go ahead and say,
10246
06:39:09,400 --> 06:39:11,400
let's create our own custom hook.
10247
06:39:11,400 --> 06:39:13,480
Let's call this one as used to do.
10248
06:39:13,480 --> 06:39:15,640
Hook is nothing more than a function.
10249
06:39:15,640 --> 06:39:18,080
So let's go ahead and define the function like this.
10250
06:39:18,080 --> 06:39:18,920
And in this function,
10251
06:39:18,920 --> 06:39:22,480
what we go ahead and do directly return another hook,
10252
06:39:22,480 --> 06:39:24,080
which is a used context,
10253
06:39:24,080 --> 06:39:25,720
which is aware of the context
10254
06:39:25,720 --> 06:39:28,160
since this context is defined in the same file.
10255
06:39:28,160 --> 06:39:29,480
So that's it.
10256
06:39:29,480 --> 06:39:32,160
So this hook returns another hook.
10257
06:39:32,160 --> 06:39:34,760
But the advantage is that I don't have to again
10258
06:39:34,760 --> 06:39:36,480
and again call two files.
10259
06:39:36,480 --> 06:39:38,120
Use context needs to be imported,
10260
06:39:38,120 --> 06:39:40,160
but also this to-do context needs to be imported.
10261
06:39:40,160 --> 06:39:41,560
Here, I don't need to import this.
10262
06:39:41,560 --> 06:39:43,120
This is already available to me.
10263
06:39:43,120 --> 06:39:45,800
That is why we define that into same file.
10264
06:39:45,800 --> 06:39:49,760
Now also, we saw that we can export one more line.
10265
06:39:49,760 --> 06:39:51,560
This is not really that meaningful,
10266
06:39:51,560 --> 06:39:54,760
but makes our other files much more easy to read.
10267
06:39:54,760 --> 06:39:57,760
So let's go ahead and go ahead and do that export const.
10268
06:39:57,760 --> 06:40:01,320
And we simply go ahead and work on the to-do provider
10269
06:40:02,280 --> 06:40:04,080
so that we can directly provide that.
10270
06:40:04,080 --> 06:40:07,560
So to-do context, simply can go ahead
10271
06:40:07,560 --> 06:40:09,480
and work on with provider.
10272
06:40:10,600 --> 06:40:14,360
All right, so this is the basics that we have as of now.
10273
06:40:15,360 --> 06:40:17,880
All right, so my to-do provider
10274
06:40:17,880 --> 06:40:21,680
or the context for this application is almost ready.
10275
06:40:21,680 --> 06:40:23,120
If I have more context,
10276
06:40:23,120 --> 06:40:25,360
then obviously I'll do exactly same like this.
10277
06:40:25,360 --> 06:40:26,400
Maybe if I have login,
10278
06:40:26,400 --> 06:40:28,520
so what does the login information consist
10279
06:40:28,520 --> 06:40:29,960
if I want to have any,
10280
06:40:29,960 --> 06:40:31,920
what are all the methods I'm looking up for,
10281
06:40:31,920 --> 06:40:34,840
like create account, login, logout, anything more.
10282
06:40:34,840 --> 06:40:38,520
So I'll just do exactly almost similar kind of stuff there.
10283
06:40:38,520 --> 06:40:40,800
Now, in addition to that, actually what I did
10284
06:40:40,800 --> 06:40:42,840
is I should be writing all this in to-do context.
10285
06:40:43,000 --> 06:40:44,480
I accidentally wrote it in the index.
10286
06:40:44,480 --> 06:40:46,800
So I'll just go ahead and cut this out.
10287
06:40:46,800 --> 06:40:48,520
This should all go into to-do context.
10288
06:40:48,520 --> 06:40:50,920
So nothing much, that's not gonna bother us.
10289
06:40:50,920 --> 06:40:52,560
So we'll just go ahead and copy paste it
10290
06:40:52,560 --> 06:40:56,480
into the to-do context, which is a right place for it.
10291
06:40:56,480 --> 06:40:58,400
Now, the reason why we created this index
10292
06:40:58,400 --> 06:41:00,960
is because you might have multiple of these things
10293
06:41:00,960 --> 06:41:03,920
and importing them from separate, separate files.
10294
06:41:03,920 --> 06:41:05,920
It's really a nightmare kind of a thing.
10295
06:41:05,920 --> 06:41:08,080
So the best practice is to go ahead
10296
06:41:08,080 --> 06:41:12,480
and export it from here after importing it from here.
10297
06:41:12,480 --> 06:41:16,040
So what we can do is we can directly export all of this.
10298
06:41:16,040 --> 06:41:18,760
This is a nice, sneaky little syntax
10299
06:41:18,760 --> 06:41:20,480
and we can import it from,
10300
06:41:20,480 --> 06:41:21,960
let's just go ahead and to-do context,
10301
06:41:21,960 --> 06:41:24,720
what all the things you want to export from it.
10302
06:41:24,720 --> 06:41:26,640
The first thing, obviously, a to-do context,
10303
06:41:26,640 --> 06:41:29,720
if we need it, most of the time we'll be using the use to-do,
10304
06:41:29,720 --> 06:41:32,760
but maybe we want to get some data in that case,
10305
06:41:32,760 --> 06:41:34,880
to-do context is required.
10306
06:41:34,880 --> 06:41:36,520
We'll be also needing to-do provider
10307
06:41:36,520 --> 06:41:39,200
and we'll be needing the hook, which is used to-do.
10308
06:41:39,200 --> 06:41:41,920
So as you can see, this makes life so much easier.
10309
06:41:41,920 --> 06:41:43,840
Similarly, we can export more of the things
10310
06:41:43,840 --> 06:41:45,160
by importing from other files
10311
06:41:45,160 --> 06:41:48,640
and that's actually something which streamlines the thing.
10312
06:41:48,640 --> 06:41:50,400
So that's really nice.
10313
06:41:50,400 --> 06:41:52,440
One thing is sorted that our context,
10314
06:41:52,440 --> 06:41:55,720
all the work that we wanted to do is all being done.
10315
06:41:55,720 --> 06:41:58,000
Okay, so step one is all done.
10316
06:41:58,000 --> 06:42:01,080
Now, next up is to create these components.
10317
06:42:01,080 --> 06:42:03,360
So if you remember, there was a top component,
10318
06:42:03,360 --> 06:42:06,120
which was the form in which we were writing the to-dos
10319
06:42:06,120 --> 06:42:08,840
and there was another thing, which was the bottom,
10320
06:42:08,840 --> 06:42:10,360
which is a listing of all the to-dos.
10321
06:42:10,360 --> 06:42:13,280
So that's one task that we have in our hand.
10322
06:42:13,280 --> 06:42:14,720
So let me just close this.
10323
06:42:14,720 --> 06:42:16,600
Another task is in the to-do context,
10324
06:42:16,600 --> 06:42:19,200
we have not defined any of these methods.
10325
06:42:19,200 --> 06:42:20,760
So another task in front of us
10326
06:42:20,760 --> 06:42:24,200
is simply to define the functionality of all of this.
10327
06:42:24,200 --> 06:42:26,880
So let's go ahead and whichever you want to take down,
10328
06:42:26,880 --> 06:42:28,560
the first it's totally up to you.
10329
06:42:28,560 --> 06:42:29,400
I think let's go ahead
10330
06:42:29,400 --> 06:42:31,200
and take down the functionality part first
10331
06:42:31,200 --> 06:42:34,040
and then we'll be building the components first.
10332
06:42:34,040 --> 06:42:36,560
Okay, so the first thing that we have to do
10333
06:42:36,560 --> 06:42:40,640
is simply go ahead and have a to-do provider in here.
10334
06:42:40,640 --> 06:42:42,360
And the way how we are going to do is
10335
06:42:42,360 --> 06:42:43,960
let's wrap this up at the top.
10336
06:42:43,960 --> 06:42:48,160
So we'll be just going ahead and say to-do provider.
10337
06:42:48,160 --> 06:42:49,080
No, no suggestion.
10338
06:42:49,080 --> 06:42:51,880
So I need to bring this manually, probably save this.
10339
06:42:51,880 --> 06:42:54,960
Let's go ahead and reload this, reload window.
10340
06:42:54,960 --> 06:42:57,400
So probably now it will give me,
10341
06:42:57,400 --> 06:43:01,400
let's go ahead and to-do provide, no suggestion.
10342
06:43:01,400 --> 06:43:04,000
Okay, so we need to bring this to-do provider.
10343
06:43:04,000 --> 06:43:05,280
So let's go at the very top
10344
06:43:05,280 --> 06:43:08,320
and try to bring the to-do provider.
10345
06:43:08,320 --> 06:43:13,320
All right, so we'll go ahead and say import to-do provider
10346
06:43:14,840 --> 06:43:17,600
and that will be coming up from
10347
06:43:17,600 --> 06:43:22,600
and we'll be saying context dot slash contexts.
10348
06:43:23,320 --> 06:43:26,360
Okay, now that the to-do provider is accessible to me,
10349
06:43:26,360 --> 06:43:30,660
I can go up in here and can add this to-do provider.
10350
06:43:30,660 --> 06:43:32,400
The easiest thing to do is just go ahead
10351
06:43:32,400 --> 06:43:33,600
and say to-do provider.
10352
06:43:33,640 --> 06:43:34,480
Now once you have this,
10353
06:43:34,480 --> 06:43:37,480
obviously you need to have the closing one as well.
10354
06:43:37,480 --> 06:43:41,060
So let's go ahead and have it here and there we go.
10355
06:43:41,060 --> 06:43:41,900
So this is happy.
10356
06:43:41,900 --> 06:43:44,960
Now everything which is going to be inside this
10357
06:43:44,960 --> 06:43:47,480
is going to be aware of the context.
10358
06:43:47,480 --> 06:43:49,560
Some people you'll see that they also give it
10359
06:43:49,560 --> 06:43:50,560
to the main itself.
10360
06:43:50,560 --> 06:43:53,360
That's also fine, but I am pretty sure
10361
06:43:53,360 --> 06:43:56,020
that there will be no component outside of this main
10362
06:43:56,020 --> 06:43:58,560
which will be requiring this context.
10363
06:43:58,560 --> 06:44:00,040
So I'll just go ahead and wrap it up here.
10364
06:44:00,040 --> 06:44:00,880
So wherever you need,
10365
06:44:00,880 --> 06:44:04,000
it needs to be the outermost layer of this thing.
10366
06:44:04,000 --> 06:44:05,520
So that's the basic of it.
10367
06:44:05,520 --> 06:44:07,300
So one part is done.
10368
06:44:07,300 --> 06:44:09,240
But another thing that you are going to require
10369
06:44:09,240 --> 06:44:12,600
in order to do this is to bring in all the methods
10370
06:44:12,600 --> 06:44:15,320
and whatnot and all these things from this one here.
10371
06:44:15,320 --> 06:44:17,880
So how we can actually bring the rest of the things?
10372
06:44:17,880 --> 06:44:18,920
That is the question.
10373
06:44:18,920 --> 06:44:20,640
That is the most important question.
10374
06:44:20,640 --> 06:44:22,720
The easiest way to do is is come back here
10375
06:44:22,720 --> 06:44:25,000
and just say, hey, there is a property being given
10376
06:44:25,000 --> 06:44:26,720
to this to-do provider automatically
10377
06:44:26,720 --> 06:44:28,800
by the context known as value.
10378
06:44:28,840 --> 06:44:30,760
Via this value, you can actually go ahead
10379
06:44:30,760 --> 06:44:32,920
and import the objects that are there.
10380
06:44:32,920 --> 06:44:34,160
So for example, if I go ahead
10381
06:44:34,160 --> 06:44:35,980
and do one more curly braces here,
10382
06:44:35,980 --> 06:44:38,080
I can just go ahead and say, hey, I want to-dos.
10383
06:44:38,080 --> 06:44:40,400
It will give me the to-dos, that same array.
10384
06:44:40,400 --> 06:44:43,280
And you can also bring in all the methods there.
10385
06:44:43,280 --> 06:44:45,680
So for example, we have this add to-do,
10386
06:44:45,680 --> 06:44:49,800
we have update to-do, what else we have delete?
10387
06:44:49,800 --> 06:44:52,680
Delete to-do and one more was toggle something,
10388
06:44:52,680 --> 06:44:53,760
toggle complete.
10389
06:44:53,760 --> 06:44:56,680
So I have brought in all the data
10390
06:44:56,680 --> 06:44:59,000
as well as all the functionality here.
10391
06:44:59,000 --> 06:45:01,920
So you might be wondering why we have brought in the data also
10392
06:45:01,920 --> 06:45:04,960
because we will be passing on this data exactly
10393
06:45:04,960 --> 06:45:08,000
to one component that will eventually build
10394
06:45:08,000 --> 06:45:10,160
to loop through all the values inside it.
10395
06:45:10,160 --> 06:45:11,000
So it's an array.
10396
06:45:11,000 --> 06:45:13,160
So we will bring that and we'll loop through it.
10397
06:45:13,160 --> 06:45:15,000
Currently, I'm not focused on this one
10398
06:45:15,000 --> 06:45:16,440
exactly at this moment.
10399
06:45:16,440 --> 06:45:18,960
I'm more focused on the add to-do, update to-do
10400
06:45:18,960 --> 06:45:21,480
because I want to write functionality in them.
10401
06:45:21,480 --> 06:45:23,840
So let's go ahead and work on with the functionality
10402
06:45:23,840 --> 06:45:25,040
from the very top.
10403
06:45:25,080 --> 06:45:28,560
First of all, we need a state for its management
10404
06:45:28,560 --> 06:45:31,000
because to-dos will be added and removed and whatnot.
10405
06:45:31,000 --> 06:45:33,040
There will be a lot of functionality going on.
10406
06:45:33,040 --> 06:45:35,440
So we need to keep a track of all the to-dos
10407
06:45:35,440 --> 06:45:38,320
inside a state itself to update our UI.
10408
06:45:38,320 --> 06:45:40,640
Let's go ahead and call this one as to-do,
10409
06:45:40,640 --> 06:45:42,720
to-dos, to-dos would be good.
10410
06:45:42,720 --> 06:45:45,160
And this will be set to-dos.
10411
06:45:45,160 --> 06:45:49,160
And that will be all done by our classic friendly use state.
10412
06:45:49,160 --> 06:45:51,320
The default state will be an empty array
10413
06:45:51,320 --> 06:45:54,000
so that that functionality is all done.
10414
06:45:54,000 --> 06:45:56,920
Okay, right now, this is all good,
10415
06:45:56,920 --> 06:45:59,040
but now let's add one by one the things
10416
06:45:59,040 --> 06:46:00,880
that how this is going to be done.
10417
06:46:00,880 --> 06:46:03,040
The first functionality we are going to take care is
10418
06:46:03,040 --> 06:46:03,880
add to-do.
10419
06:46:03,880 --> 06:46:06,480
So how this functionality will go and work on with,
10420
06:46:06,480 --> 06:46:09,720
I can just directly go ahead and mark this as add to-do
10421
06:46:09,720 --> 06:46:12,040
and then this is going to be a simple method,
10422
06:46:12,040 --> 06:46:13,740
just like this.
10423
06:46:13,740 --> 06:46:16,960
The great thing is that since I have this exact same data,
10424
06:46:16,960 --> 06:46:19,240
that data will automatically map to the method
10425
06:46:19,240 --> 06:46:22,360
because remember in the context, we created just a method,
10426
06:46:22,360 --> 06:46:25,160
just the definition, not the definition,
10427
06:46:25,160 --> 06:46:28,480
just the blueprint of it, but not the definition.
10428
06:46:28,480 --> 06:46:30,600
Here's the point where we're going to go ahead
10429
06:46:30,600 --> 06:46:32,080
and write the definition.
10430
06:46:32,080 --> 06:46:33,840
It could have been done into a separate file,
10431
06:46:33,840 --> 06:46:35,960
but all we need to do is wherever you are importing
10432
06:46:35,960 --> 06:46:38,040
these values and these all things,
10433
06:46:38,040 --> 06:46:39,440
it needs to be in the same file.
10434
06:46:39,440 --> 06:46:41,360
So you can define it into other file,
10435
06:46:41,360 --> 06:46:43,260
bring it in here and then can map it.
10436
06:46:43,260 --> 06:46:45,040
That's also totally fine.
10437
06:46:45,040 --> 06:46:46,480
Okay, how you're going to add?
10438
06:46:46,480 --> 06:46:48,200
To add the to-do, you need the to-do.
10439
06:46:48,200 --> 06:46:50,940
So let's go ahead and say that, okay, we need the to-do.
10440
06:46:50,940 --> 06:46:52,320
What else we can do?
10441
06:46:53,140 --> 06:46:53,980
It's really, really simple now.
10442
06:46:53,980 --> 06:46:55,760
All you have to do here in this case
10443
06:46:55,760 --> 06:46:57,720
is use this set to-dos.
10444
06:46:57,720 --> 06:46:59,600
So how does set to-dos will work?
10445
06:46:59,600 --> 06:47:01,640
Obviously it requires a callback here.
10446
06:47:01,640 --> 06:47:04,200
So we'll need to have all the access to previous to-dos
10447
06:47:04,200 --> 06:47:06,120
that it have, it might have.
10448
06:47:06,120 --> 06:47:09,980
And then we will be working to adding the more of that.
10449
06:47:09,980 --> 06:47:11,440
So where do you want to add that?
10450
06:47:11,440 --> 06:47:14,320
I want to add the new to-do at the very top of my array
10451
06:47:14,320 --> 06:47:15,800
and rest of them I'll spread this.
10452
06:47:15,800 --> 06:47:19,600
So I'll just go ahead and say that this will be an array
10453
06:47:19,600 --> 06:47:21,960
and inside this we'll be spreading this.
10454
06:47:21,960 --> 06:47:24,760
So previous all values, we are spreading this out
10455
06:47:24,760 --> 06:47:27,220
and my to-do will go at the very first of it.
10456
06:47:27,220 --> 06:47:29,160
So this is the place where my to-do will go,
10457
06:47:29,160 --> 06:47:30,160
just like that.
10458
06:47:30,160 --> 06:47:33,360
It's an object, it requires three things.
10459
06:47:33,360 --> 06:47:36,640
My ID, the actual to-do title of it
10460
06:47:36,640 --> 06:47:38,940
and the completed, which is by default false.
10461
06:47:38,940 --> 06:47:40,160
So I don't need to give it much.
10462
06:47:40,160 --> 06:47:42,120
So I'll just go ahead and work with that.
10463
06:47:42,120 --> 06:47:43,960
So ID, how can I get the unique ID?
10464
06:47:43,960 --> 06:47:46,560
The easiest, cheapest trick in the JavaScript book
10465
06:47:46,560 --> 06:47:49,040
is date.now, but totally up to you.
10466
06:47:49,040 --> 06:47:51,180
Maybe you want to use nano ID or something else.
10467
06:47:51,220 --> 06:47:52,860
That's totally on you.
10468
06:47:52,860 --> 06:47:57,860
Okay, now that we have this one, we have added the IDs
10469
06:47:57,980 --> 06:47:59,180
and what else we can do?
10470
06:47:59,180 --> 06:48:00,840
We can just get this exact to-do.
10471
06:48:00,840 --> 06:48:04,140
So what we'll do is we'll be spreading this to-do
10472
06:48:04,140 --> 06:48:06,220
because the way how this to-do will work,
10473
06:48:06,220 --> 06:48:08,380
the reason for spreading this one is
10474
06:48:08,380 --> 06:48:11,560
because this to-do might have more of the functionalities
10475
06:48:11,560 --> 06:48:12,700
or more, whatever it is,
10476
06:48:12,700 --> 06:48:14,380
I just want to have it spread it out.
10477
06:48:14,380 --> 06:48:15,340
That's why it is.
10478
06:48:15,340 --> 06:48:17,620
In case you're working with just the string itself,
10479
06:48:17,620 --> 06:48:18,940
then you don't need to spread it out.
10480
06:48:18,940 --> 06:48:20,780
But since ours is an object,
10481
06:48:20,780 --> 06:48:23,100
so we are actually updating one property of it
10482
06:48:23,100 --> 06:48:24,120
and then we are working on it.
10483
06:48:24,120 --> 06:48:27,620
So really simple, basic, classic JavaScript, that's it.
10484
06:48:27,620 --> 06:48:29,280
Okay, so this part is all done.
10485
06:48:29,280 --> 06:48:31,800
Now let's see how we can update the to-do.
10486
06:48:31,800 --> 06:48:34,340
Again, classic way of updating is really simple.
10487
06:48:34,340 --> 06:48:37,700
So we're going to go ahead and say I need to update this.
10488
06:48:37,700 --> 06:48:41,260
Update to-do, update to-do.
10489
06:48:41,260 --> 06:48:45,260
Okay, update to-do, again, a method, nothing more than that.
10490
06:48:45,260 --> 06:48:47,900
And I'll say for updating, I need an ID
10491
06:48:47,900 --> 06:48:50,100
as well as I need it to do.
10492
06:48:50,100 --> 06:48:51,780
Okay, how can I update this?
10493
06:48:51,780 --> 06:48:53,900
For updating, obviously the best part
10494
06:48:53,900 --> 06:48:55,300
is to loop through all the arrays.
10495
06:48:55,300 --> 06:48:56,220
Totally depends on you,
10496
06:48:56,220 --> 06:48:57,700
how you want to loop through the values.
10497
06:48:57,700 --> 06:49:00,520
I'll just use maybe a map for this one.
10498
06:49:00,520 --> 06:49:03,200
So I'll just, first of all, bring in all the to-dos.
10499
06:49:03,200 --> 06:49:05,220
We will be requiring all the previous values.
10500
06:49:05,220 --> 06:49:07,260
So we'll call this one as prev.
10501
06:49:07,260 --> 06:49:10,260
Okay, there we go.
10502
06:49:10,260 --> 06:49:12,220
Now with this, I'll just take this,
10503
06:49:12,220 --> 06:49:14,700
all the previous values inside my arrays.
10504
06:49:14,700 --> 06:49:16,860
I'll loop through with probably a map.
10505
06:49:16,860 --> 06:49:18,660
Inside this map, I get a callback.
10506
06:49:18,660 --> 06:49:21,300
So I'll just go ahead and say that I need each of these.
10507
06:49:21,300 --> 06:49:24,780
So prev to-do, I'll call this one each to-do as prev to-do.
10508
06:49:24,780 --> 06:49:25,860
Once I have this one,
10509
06:49:25,860 --> 06:49:27,820
then I'll simply go ahead and update.
10510
06:49:27,820 --> 06:49:30,860
To update that, I need to find a particular to-do
10511
06:49:30,860 --> 06:49:32,220
to work on with that.
10512
06:49:32,220 --> 06:49:34,620
So what I'll do is I'll just wrap everything
10513
06:49:34,620 --> 06:49:36,040
inside the parentheses again
10514
06:49:36,040 --> 06:49:37,880
so that it doesn't give me any error.
10515
06:49:37,880 --> 06:49:40,660
So I'll just go ahead and say prev to-do
10516
06:49:40,660 --> 06:49:43,840
if it's ID because each to-do has an ID.
10517
06:49:43,840 --> 06:49:48,020
If it matches equals to the ID of the to-do
10518
06:49:48,020 --> 06:49:51,500
that is provided to me in the function.
10519
06:49:51,500 --> 06:49:53,940
So to-do.id, okay.
10520
06:49:53,940 --> 06:49:57,060
If that is the case, if that is working fine,
10521
06:49:57,060 --> 06:50:00,500
then let's go ahead and do something in here.
10522
06:50:00,500 --> 06:50:02,780
Otherwise, we'll do something in here.
10523
06:50:02,780 --> 06:50:04,300
Okay, just boilerplate here.
10524
06:50:04,300 --> 06:50:07,140
This helps me always to write things nicely.
10525
06:50:07,140 --> 06:50:09,200
So in this case, if it matches,
10526
06:50:09,200 --> 06:50:10,700
then I'll go ahead and say to-do.
10527
06:50:10,700 --> 06:50:13,140
So I'll just update the entire object.
10528
06:50:13,140 --> 06:50:14,740
If it doesn't match with that,
10529
06:50:14,740 --> 06:50:16,620
then go ahead and keep it as it is.
10530
06:50:16,620 --> 06:50:18,940
So prev to-do, whatever that to-do is,
10531
06:50:18,940 --> 06:50:19,980
we'll keep it as it is.
10532
06:50:19,980 --> 06:50:22,260
So we're looping through each of the value.
10533
06:50:22,260 --> 06:50:25,240
Couldn't be much more simpler than that, the explanation.
10534
06:50:25,240 --> 06:50:27,380
Line by line, I hope you have understood that.
10535
06:50:27,380 --> 06:50:29,200
If not, rewind the video.
10536
06:50:29,200 --> 06:50:30,980
Okay, next up, we'll just go with the delete.
10537
06:50:30,980 --> 06:50:32,900
Delete is the easiest one.
10538
06:50:32,900 --> 06:50:36,300
Const delete to-do and the delete works with,
10539
06:50:36,300 --> 06:50:39,260
just give me the ID and I'll work with that.
10540
06:50:39,260 --> 06:50:41,700
All right, how does the delete functionality works?
10541
06:50:41,700 --> 06:50:44,740
Simple, set to-dos, let's grab that.
10542
06:50:44,740 --> 06:50:46,340
We need all of the access of that.
10543
06:50:46,340 --> 06:50:48,780
So we'll just go ahead and say prev
10544
06:50:48,780 --> 06:50:50,100
and we'll work with that.
10545
06:50:50,100 --> 06:50:51,540
Okay, how are we going to work that?
10546
06:50:51,540 --> 06:50:56,020
First, let's go ahead and filter this out.
10547
06:50:56,020 --> 06:50:58,140
Looping through in this doesn't make sense.
10548
06:50:58,140 --> 06:51:00,320
We can have operation on filter
10549
06:51:00,320 --> 06:51:02,120
so that we can create a new array
10550
06:51:02,120 --> 06:51:04,000
based on the filtering operation.
10551
06:51:04,000 --> 06:51:05,900
So we need to provide a condition.
10552
06:51:05,900 --> 06:51:07,100
So we'll say, hey, prev,
10553
06:51:07,100 --> 06:51:09,300
let's go ahead and use a filter method on that.
10554
06:51:09,300 --> 06:51:11,020
By the way, I do have a YouTube videos
10555
06:51:11,020 --> 06:51:12,740
on this filter map reduce,
10556
06:51:12,740 --> 06:51:15,400
really nicely explained step-by-step, broken down.
10557
06:51:15,400 --> 06:51:17,680
If you don't know about in depth of that,
10558
06:51:17,680 --> 06:51:18,960
check out that one.
10559
06:51:18,960 --> 06:51:21,000
Okay, how does that work?
10560
06:51:21,000 --> 06:51:24,120
So the filter method requires a callback, okay.
10561
06:51:24,120 --> 06:51:25,240
In each of the callback,
10562
06:51:25,240 --> 06:51:27,760
you'll have the each individual to-do item,
10563
06:51:27,760 --> 06:51:29,120
call it as prev to-do to-do,
10564
06:51:29,120 --> 06:51:31,960
doesn't really matter, it just is a filler word.
10565
06:51:31,960 --> 06:51:34,480
Once it is there, then we need to require
10566
06:51:34,480 --> 06:51:36,800
to pass on a condition to that.
10567
06:51:36,800 --> 06:51:40,000
So if the to-do, we are looping through that,
10568
06:51:40,000 --> 06:51:44,400
each one of them, if it's ID matches with my ID,
10569
06:51:44,400 --> 06:51:47,960
then we need to delete that.
10570
06:51:47,960 --> 06:51:50,480
So we have to go through with the reverse logic of it.
10571
06:51:50,480 --> 06:51:55,020
I want all the to-dos, which doesn't match the ID.
10572
06:51:55,020 --> 06:52:00,020
So which doesn't match the ID.
10573
06:52:00,600 --> 06:52:03,560
So now, because if you don't know this,
10574
06:52:03,560 --> 06:52:05,540
filter always works for the true condition.
10575
06:52:05,540 --> 06:52:07,160
So we need to somehow give the true condition,
10576
06:52:07,160 --> 06:52:09,360
that's why the reverse logic always works here.
10577
06:52:09,360 --> 06:52:11,220
So what I'm saying here is really simple,
10578
06:52:11,220 --> 06:52:12,760
that go through with each one of them,
10579
06:52:12,800 --> 06:52:14,320
and I want to create a new array
10580
06:52:14,320 --> 06:52:16,200
based on some true conditions.
10581
06:52:16,200 --> 06:52:19,520
That true condition is ID should not match.
10582
06:52:19,520 --> 06:52:22,400
So whose ID is matching, we need to remove that.
10583
06:52:22,400 --> 06:52:24,120
Whose IDs is not matching,
10584
06:52:24,120 --> 06:52:25,680
we need to create a new array out of it.
10585
06:52:25,680 --> 06:52:28,080
So that's what we are doing in this delete to-do.
10586
06:52:28,080 --> 06:52:29,960
Okay, pretty cool.
10587
06:52:29,960 --> 06:52:33,040
Now let's go ahead and work on with the toggle as well.
10588
06:52:33,040 --> 06:52:36,560
Toggle is also fairly simple, nothing too much on that.
10589
06:52:36,560 --> 06:52:38,440
A little bit, but not too much.
10590
06:52:38,440 --> 06:52:41,600
Okay, let's call this one as toggle complete.
10591
06:52:41,640 --> 06:52:43,320
Okay, how do you work?
10592
06:52:43,320 --> 06:52:44,760
It requires an ID.
10593
06:52:44,760 --> 06:52:46,120
And once it has the ID,
10594
06:52:46,120 --> 06:52:48,440
obviously we need to go inside this one here.
10595
06:52:48,440 --> 06:52:50,160
Okay, moving further, how does it work?
10596
06:52:50,160 --> 06:52:52,340
First of all, let's grab all the to-dos.
10597
06:52:52,340 --> 06:52:53,640
This is where we get it.
10598
06:52:54,600 --> 06:52:56,560
And we need to go through with each one of them.
10599
06:52:56,560 --> 06:52:59,360
So let's go ahead and have the prev just like this.
10600
06:52:59,360 --> 06:53:01,280
Okay, now we have this one.
10601
06:53:01,280 --> 06:53:03,560
I'll just go ahead and break it down into separate lines
10602
06:53:03,560 --> 06:53:06,040
so it's much more easier for you to understand.
10603
06:53:06,040 --> 06:53:07,680
Okay, now here what I'll do is,
10604
06:53:07,680 --> 06:53:09,080
I'll loop through with each one of them.
10605
06:53:09,080 --> 06:53:11,040
So prev.map, there we go.
10606
06:53:11,120 --> 06:53:12,720
We are looping through the values.
10607
06:53:12,720 --> 06:53:14,360
Inside the map, we need a callback.
10608
06:53:14,360 --> 06:53:16,520
So we'll call this one as prev to-do.
10609
06:53:16,520 --> 06:53:19,280
Call it to-do, prev to-do doesn't really matter.
10610
06:53:19,280 --> 06:53:20,840
And inside this, we need a callback.
10611
06:53:20,840 --> 06:53:22,480
So this is my callback.
10612
06:53:22,480 --> 06:53:25,000
And what I'll do is, I'll again go into the new line
10613
06:53:25,000 --> 06:53:27,580
so it's much more easier for you to understand.
10614
06:53:27,580 --> 06:53:30,100
Now inside this, each one of this,
10615
06:53:30,100 --> 06:53:32,280
I want to toggle this one.
10616
06:53:32,280 --> 06:53:36,760
So I want to go inside the object,
10617
06:53:36,760 --> 06:53:38,440
like we have an array.
10618
06:53:38,440 --> 06:53:40,960
In these array, we have a lot of objects.
10619
06:53:41,760 --> 06:53:42,600
I don't want to go every object.
10620
06:53:42,600 --> 06:53:45,280
I want to go into an object whose ID matches.
10621
06:53:45,280 --> 06:53:48,640
Once I go inside this, I want to update that entire object.
10622
06:53:48,640 --> 06:53:51,060
Not all the properties, just one property,
10623
06:53:51,060 --> 06:53:53,160
which is the complete part.
10624
06:53:53,160 --> 06:53:56,520
Okay, so how we're going to do this are really simple.
10625
06:53:56,520 --> 06:53:57,940
Let's have this prev to-do.
10626
06:53:57,940 --> 06:54:00,640
And first of all, let's see that if the ID
10627
06:54:00,640 --> 06:54:03,860
of this prev to-do matches with the ID
10628
06:54:03,860 --> 06:54:06,840
that you have provided me, if that is the case,
10629
06:54:06,840 --> 06:54:10,040
then we're gonna go ahead and do something.
10630
06:54:10,040 --> 06:54:11,820
Otherwise, we'll do something.
10631
06:54:11,820 --> 06:54:14,400
Okay, boilerplate code here.
10632
06:54:14,400 --> 06:54:17,620
If it matches with the ID, then I want to update it.
10633
06:54:17,620 --> 06:54:19,640
So I'll just go ahead and spread this out.
10634
06:54:19,640 --> 06:54:22,760
So spread this prev to-do, first of all.
10635
06:54:22,760 --> 06:54:25,880
Once I spread this, now I have access to all of this.
10636
06:54:25,880 --> 06:54:27,080
Once I've spreaded this,
10637
06:54:27,080 --> 06:54:32,080
then I have to update only one field, which is completed.
10638
06:54:32,360 --> 06:54:34,280
And that completed, I need to toggle that.
10639
06:54:34,280 --> 06:54:36,680
So I'll just change the previous values.
10640
06:54:36,680 --> 06:54:38,960
So I'll just go ahead and say whatever,
10641
06:54:39,000 --> 06:54:41,640
just use an exclamatory so that it reverse the true
10642
06:54:41,640 --> 06:54:44,080
to false, false to true, so really basic.
10643
06:54:44,080 --> 06:54:48,040
So I'll just say prev to-do, prev to-do.
10644
06:54:48,040 --> 06:54:51,040
And you have a property known as .completed.
10645
06:54:54,560 --> 06:54:56,880
Okay, we are flexing this, nice really.
10646
06:54:56,880 --> 06:54:59,840
And on the else part, what we need to do,
10647
06:54:59,840 --> 06:55:00,720
just keep it as it is.
10648
06:55:00,720 --> 06:55:03,440
So just your prev to-do will remain as it is.
10649
06:55:03,440 --> 06:55:04,640
So there we go.
10650
06:55:04,640 --> 06:55:06,360
Okay, one thing you remember,
10651
06:55:06,360 --> 06:55:09,800
a lot of people kind of get in confusion with this one,
10652
06:55:09,800 --> 06:55:12,480
that hey, you're spreading this first and then updating.
10653
06:55:12,480 --> 06:55:14,800
This is an object, it doesn't really matter.
10654
06:55:14,800 --> 06:55:17,240
Once you spread this out, that is it.
10655
06:55:17,240 --> 06:55:19,520
Then you can update the existing field.
10656
06:55:19,520 --> 06:55:21,400
This is how the object spreading works.
10657
06:55:21,400 --> 06:55:24,480
If you spread this out, either first or end,
10658
06:55:24,480 --> 06:55:25,600
then if you update any field,
10659
06:55:25,600 --> 06:55:28,160
that exactly that particular field will get updated.
10660
06:55:28,160 --> 06:55:29,560
So really nice.
10661
06:55:29,560 --> 06:55:32,280
Okay, so that's the functionality part,
10662
06:55:32,280 --> 06:55:33,800
we have taken this down.
10663
06:55:33,800 --> 06:55:35,920
Now, this is the functionality part.
10664
06:55:35,920 --> 06:55:39,360
We haven't talked about how the things will actually go
10665
06:55:39,360 --> 06:55:40,640
in the local storage.
10666
06:55:40,640 --> 06:55:43,880
So we need to work on with the local storage as well.
10667
06:55:43,880 --> 06:55:45,800
There are two ways how the things are going
10668
06:55:45,800 --> 06:55:47,240
inside the local storage
10669
06:55:47,240 --> 06:55:49,120
and coming out of the local storage.
10670
06:55:49,120 --> 06:55:51,720
First thing, any changes in this to-dos
10671
06:55:51,720 --> 06:55:53,640
or the set to-dos, if you are adding any field
10672
06:55:53,640 --> 06:55:55,560
or updating, removing, whatever we are having,
10673
06:55:55,560 --> 06:55:58,000
we need to update that into the local storage.
10674
06:55:58,000 --> 06:56:00,920
And any given time when the page loads itself,
10675
06:56:00,920 --> 06:56:02,840
we want to query the local storage
10676
06:56:02,840 --> 06:56:04,720
that if you have any data, give me that data.
10677
06:56:04,720 --> 06:56:07,040
Otherwise, what's the point of having local storage?
10678
06:56:07,040 --> 06:56:09,080
So for this, whenever the component loads,
10679
06:56:09,080 --> 06:56:11,080
one good thing that we can actually go ahead
10680
06:56:11,080 --> 06:56:13,640
and use is use effect.
10681
06:56:13,640 --> 06:56:16,680
This is a hook that we want to use, so use effect.
10682
06:56:16,680 --> 06:56:19,440
And this is it, and it requires a callback.
10683
06:56:19,440 --> 06:56:22,280
So let's go ahead and give it a callback just like this.
10684
06:56:22,280 --> 06:56:25,080
The second property is your dependency array.
10685
06:56:25,080 --> 06:56:26,480
We don't have any dependency array
10686
06:56:26,480 --> 06:56:29,040
because this is the hook where we are talking about,
10687
06:56:29,040 --> 06:56:31,000
as soon as the component loads,
10688
06:56:31,000 --> 06:56:34,440
query the local storage, get me all the data,
10689
06:56:34,440 --> 06:56:37,080
and let's push all the data into the state
10690
06:56:37,080 --> 06:56:38,320
which is set to-dos.
10691
06:56:38,320 --> 06:56:40,400
That's exactly what we'll be doing.
10692
06:56:40,400 --> 06:56:45,080
So what we'll be doing is we need to query the local storage
10693
06:56:45,080 --> 06:56:48,600
and we can just get the item just with this one.
10694
06:56:48,600 --> 06:56:50,000
And we'll be calling this one as to-do.
10695
06:56:50,000 --> 06:56:51,520
Right now, we haven't called them anything,
10696
06:56:51,520 --> 06:56:54,480
so let's just call this one as to-dos, all over storage.
10697
06:56:54,480 --> 06:56:56,040
Okay, we have got all of this.
10698
06:56:56,040 --> 06:57:00,160
Now let's go ahead and kind of, this is a string.
10699
06:57:00,160 --> 06:57:03,160
This string needs to convert it into JSON first.
10700
06:57:03,160 --> 06:57:06,240
Local storage always works with a string, so there we go.
10701
06:57:06,240 --> 06:57:08,240
And we have multiple ways of doing this.
10702
06:57:08,240 --> 06:57:10,360
The easiest way is to JSON.parse.
10703
06:57:10,360 --> 06:57:12,960
Once we have this, let's store that into a variable.
10704
06:57:12,960 --> 06:57:15,880
Const to-dos, okay.
10705
06:57:15,880 --> 06:57:19,160
We have brought in the local,
10706
06:57:19,160 --> 06:57:21,040
we have brought in data from local storage.
10707
06:57:21,040 --> 06:57:23,040
Now we need to do is,
10708
06:57:23,040 --> 06:57:25,400
we need to push this data into the state.
10709
06:57:25,400 --> 06:57:27,000
So that's really simple.
10710
06:57:27,000 --> 06:57:29,600
But I want to, I can actually go ahead and directly do this,
10711
06:57:29,600 --> 06:57:32,960
set to-dos and kind of use this one and to-dos.
10712
06:57:32,960 --> 06:57:34,720
But what I'm thinking is,
10713
06:57:34,720 --> 06:57:36,720
there might be no data into the to-dos.
10714
06:57:36,720 --> 06:57:38,560
So that might be the case.
10715
06:57:38,560 --> 06:57:40,440
So let's handle this as an optional,
10716
06:57:40,440 --> 06:57:41,640
otherwise I don't want to do this.
10717
06:57:41,640 --> 06:57:43,080
So if, let's test the condition,
10718
06:57:43,080 --> 06:57:44,720
if there is to-dos first of all.
10719
06:57:44,720 --> 06:57:45,680
If there is no to-dos,
10720
06:57:45,680 --> 06:57:48,320
then there might be a potential of my application
10721
06:57:48,320 --> 06:57:51,560
being crashed down, so let's not do that.
10722
06:57:51,560 --> 06:57:53,800
And what we're gonna do is,
10723
06:57:53,800 --> 06:57:55,720
let's go ahead and use another condition
10724
06:57:55,720 --> 06:57:58,160
that to-dos is there, but there might be nothing inside it.
10725
06:57:58,160 --> 06:58:00,840
So to-dos.length,
10726
06:58:01,840 --> 06:58:04,080
since this is an array, I can use that,
10727
06:58:04,080 --> 06:58:06,480
should be greater than zero, anything greater than zero.
10728
06:58:06,480 --> 06:58:08,720
Then I'll go ahead and use the to-dos,
10729
06:58:08,720 --> 06:58:10,680
and I'll just go ahead and to-dos.
10730
06:58:10,680 --> 06:58:13,920
Again, this is a little bit optional, but good to have.
10731
06:58:13,920 --> 06:58:17,240
So this is the place where I'm using the use effect hook,
10732
06:58:17,240 --> 06:58:18,840
where there is no dependency array.
10733
06:58:18,840 --> 06:58:20,440
As soon as the component will mount,
10734
06:58:20,440 --> 06:58:22,640
this hook will be rendered,
10735
06:58:22,640 --> 06:58:25,040
or this hook will be activated,
10736
06:58:25,040 --> 06:58:27,520
and all this functionality will work.
10737
06:58:27,520 --> 06:58:29,800
Now I want another case
10738
06:58:30,160 --> 06:58:33,200
that if there is any update in the to-dos,
10739
06:58:33,200 --> 06:58:36,640
then also this whole thing should update.
10740
06:58:36,640 --> 06:58:38,400
So we should grab the data from it
10741
06:58:38,400 --> 06:58:40,800
and use and work on with all of them.
10742
06:58:40,800 --> 06:58:44,720
But this time, I don't want to actually grab the data.
10743
06:58:44,720 --> 06:58:46,680
I don't want to get the item, I want to set the item.
10744
06:58:46,680 --> 06:58:47,720
Newer value should be set at,
10745
06:58:47,720 --> 06:58:49,760
so if you have added anything updated,
10746
06:58:49,760 --> 06:58:52,120
newer whole value should be added.
10747
06:58:52,120 --> 06:58:54,640
This whole thing, this new set to-dos,
10748
06:58:54,640 --> 06:58:56,940
all the arrays should go into this one.
10749
06:58:56,940 --> 06:58:59,400
But the problem is, you might be wondering that,
10750
06:58:59,400 --> 06:59:00,720
hey, the easy solution could be
10751
06:59:00,720 --> 06:59:02,400
just add a dependency arrays of to-dos,
10752
06:59:02,400 --> 06:59:04,040
but that will be a problem.
10753
06:59:04,040 --> 06:59:07,440
The problem is that if you add this one,
10754
06:59:07,440 --> 06:59:08,600
this whole thing will run again.
10755
06:59:08,600 --> 06:59:09,960
I don't want to run it.
10756
06:59:09,960 --> 06:59:11,920
I want to run it once at the first start,
10757
06:59:11,920 --> 06:59:13,360
but not after that.
10758
06:59:13,360 --> 06:59:15,180
So this is the classic case where you use
10759
06:59:15,180 --> 06:59:16,140
more than one hook.
10760
06:59:16,140 --> 06:59:19,000
So use effect, let's use it one more time.
10761
06:59:19,000 --> 06:59:20,940
And yes, you can have as many use effect hook
10762
06:59:20,940 --> 06:59:22,600
in your application as you like.
10763
06:59:22,600 --> 06:59:25,680
In this case, I'll just again have my callback,
10764
06:59:25,680 --> 06:59:28,500
just like this, and I'll have a dependency array,
10765
06:59:28,500 --> 06:59:30,260
but this time in my dependency array,
10766
06:59:30,260 --> 06:59:32,280
it is dependent on to-dos.
10767
06:59:32,280 --> 06:59:35,540
Anything that happens to-dos, run this piece of code.
10768
06:59:35,540 --> 06:59:36,820
What piece of code?
10769
06:59:36,820 --> 06:59:38,860
Again, we need to query the local storage.
10770
06:59:38,860 --> 06:59:40,860
This time we'll set the item.
10771
06:59:40,860 --> 06:59:43,100
So just update the value, keep on setting them,
10772
06:59:43,100 --> 06:59:44,280
keep on setting them.
10773
06:59:44,280 --> 06:59:46,020
Set item, what do you want to set them?
10774
06:59:46,020 --> 06:59:48,840
This requires two part, the key and the value.
10775
06:59:48,840 --> 06:59:50,020
The key is pretty simple.
10776
06:59:50,020 --> 06:59:51,940
Just use the exact same keys that you are using
10777
06:59:51,940 --> 06:59:54,660
to parse the values as well, so set to-dos.
10778
06:59:54,660 --> 06:59:57,000
And then we can directly use to-dos,
10779
06:59:57,080 --> 07:00:00,160
but local storage doesn't really accept
10780
07:00:00,160 --> 07:00:02,160
arrays or anything, it just accepts strings.
10781
07:00:02,160 --> 07:00:06,880
So easy way is to just use JSON.stringify.
10782
07:00:06,880 --> 07:00:07,840
Yep, there we go.
10783
07:00:07,840 --> 07:00:10,420
And just go ahead and take to-dos here.
10784
07:00:10,420 --> 07:00:11,680
There we go.
10785
07:00:11,680 --> 07:00:15,200
Really simple, fun functionality that we have added.
10786
07:00:15,200 --> 07:00:16,680
So the functionality part is over.
10787
07:00:16,680 --> 07:00:19,020
Now the next part that's in front of us
10788
07:00:19,020 --> 07:00:21,480
is to create some components.
10789
07:00:21,480 --> 07:00:23,960
Let's dive in and create some components,
10790
07:00:23,960 --> 07:00:26,980
the top form as well as the bottom one here as well.
10791
07:00:28,440 --> 07:00:31,520
All right, so the next thing that is in front of us
10792
07:00:31,520 --> 07:00:33,720
is to build the components, that is it.
10793
07:00:33,720 --> 07:00:35,400
We have worked on the functionality part,
10794
07:00:35,400 --> 07:00:37,840
we have worked on a lot of logics and stuff.
10795
07:00:37,840 --> 07:00:40,520
Now let's go ahead and talk about the components.
10796
07:00:40,520 --> 07:00:41,960
We have two major components.
10797
07:00:41,960 --> 07:00:44,160
The first one being the form itself,
10798
07:00:44,160 --> 07:00:45,960
where I write the data, click on the button,
10799
07:00:45,960 --> 07:00:47,500
it adds into the context.
10800
07:00:47,500 --> 07:00:48,600
That's why the context is for,
10801
07:00:48,600 --> 07:00:50,480
that's why the add method is for.
10802
07:00:50,480 --> 07:00:51,360
That's one thing.
10803
07:00:51,360 --> 07:00:53,000
The another component that we'll be creating
10804
07:00:53,000 --> 07:00:55,200
is give it an array of to-dos.
10805
07:00:55,200 --> 07:00:57,480
It will be looping through and displaying it.
10806
07:00:57,480 --> 07:00:58,680
That's it.
10807
07:00:58,680 --> 07:00:59,760
Not only displaying it,
10808
07:00:59,760 --> 07:01:02,040
it will add some more functionality it is,
10809
07:01:02,040 --> 07:01:04,360
but we won't be working on the functionality part
10810
07:01:04,360 --> 07:01:06,360
because we've already done that in the app.js.
10811
07:01:06,360 --> 07:01:08,200
We'll be just bringing that functionality
10812
07:01:08,200 --> 07:01:10,240
and injecting at the right place.
10813
07:01:10,240 --> 07:01:11,560
That is it.
10814
07:01:11,560 --> 07:01:13,440
That is it all we have to do.
10815
07:01:13,440 --> 07:01:14,940
Let's go ahead and work on with this one.
10816
07:01:14,940 --> 07:01:19,280
So I'll just say that I need one more folder.
10817
07:01:19,280 --> 07:01:22,120
Yep, so I'll just go into source, new folder,
10818
07:01:22,120 --> 07:01:25,920
and we'll call this one as components.
10819
07:01:25,920 --> 07:01:27,280
Looks good.
10820
07:01:27,280 --> 07:01:30,040
So again, the components will have majorly three files.
10821
07:01:30,040 --> 07:01:32,640
The first one will be obvious, the index.js,
10822
07:01:32,640 --> 07:01:35,720
so that we can just get all the components at one place
10823
07:01:35,720 --> 07:01:37,000
and can import and export that.
10824
07:01:37,000 --> 07:01:40,680
So that's majorly it's being done in almost all places.
10825
07:01:40,680 --> 07:01:41,960
If you want to do it, that's okay.
10826
07:01:41,960 --> 07:01:43,760
If you don't want to do it, that's okay too.
10827
07:01:43,760 --> 07:01:45,720
I'm not going to force you anything on that.
10828
07:01:45,720 --> 07:01:48,760
Okay, so first one that we will be working on
10829
07:01:48,760 --> 07:01:51,300
is going to be simply to-do form.
10830
07:01:51,300 --> 07:01:53,780
To-do form.jsx, of course,
10831
07:01:53,780 --> 07:01:57,660
because this is an x component, gsx component,
10832
07:01:57,660 --> 07:01:59,500
and will be to-do items as well.
10833
07:01:59,500 --> 07:02:03,340
So let's go ahead and say components, new file.
10834
07:02:03,340 --> 07:02:08,340
This one will be to-do item.jsx.
10835
07:02:08,540 --> 07:02:10,660
Okay, let's take down the easiest one,
10836
07:02:10,660 --> 07:02:12,540
which is the to-do form first.
10837
07:02:12,540 --> 07:02:13,380
That is the easiest one.
10838
07:02:13,380 --> 07:02:14,900
I'll close all the other files as well.
10839
07:02:14,900 --> 07:02:17,140
We don't need them as of now.
10840
07:02:17,140 --> 07:02:19,740
Okay, how does the to-do form looks like?
10841
07:02:19,740 --> 07:02:21,260
Basic react functional components.
10842
07:02:21,260 --> 07:02:26,260
So rfce, react functional component.
10843
07:02:27,180 --> 07:02:31,060
What we can do is, let's hit enter.
10844
07:02:31,060 --> 07:02:33,460
Okay, looks good, looks good.
10845
07:02:33,460 --> 07:02:35,740
React function to-do does this nicely.
10846
07:02:35,740 --> 07:02:37,260
Okay, one by one.
10847
07:02:37,260 --> 07:02:39,300
First of all, what do we need for this to-do?
10848
07:02:39,300 --> 07:02:40,740
First of all, we need to track
10849
07:02:40,740 --> 07:02:42,500
what the user is writing in the form.
10850
07:02:42,500 --> 07:02:44,060
So I need a state for that.
10851
07:02:44,060 --> 07:02:45,860
So let's go ahead and do that.
10852
07:02:45,860 --> 07:02:47,040
This will be a single to-do.
10853
07:02:47,040 --> 07:02:48,420
So I'll just call this one to-do,
10854
07:02:48,620 --> 07:02:53,220
set to-do, and that will be bringing up from use state.
10855
07:02:53,220 --> 07:02:55,420
So bring me the user state,
10856
07:02:55,420 --> 07:02:58,460
and we'll just say initially you are empty.
10857
07:02:58,460 --> 07:03:01,820
Okay, apart from this, do you need anything else?
10858
07:03:01,820 --> 07:03:03,980
Yes, you need to add this to-do.
10859
07:03:03,980 --> 07:03:06,220
The add functionality is in my context,
10860
07:03:06,220 --> 07:03:08,500
and the method, if you remember it,
10861
07:03:08,500 --> 07:03:10,780
we actually worked on the functionality in app.js,
10862
07:03:10,780 --> 07:03:12,060
but the beauty is,
10863
07:03:12,060 --> 07:03:13,860
it doesn't really matter where you worked on it.
10864
07:03:13,860 --> 07:03:15,340
I can just bring in that functionality,
10865
07:03:15,340 --> 07:03:17,860
and if somebody has done that functionality,
10866
07:03:17,940 --> 07:03:19,180
I can just bring it here.
10867
07:03:19,180 --> 07:03:23,740
So the best thing to do here is just use the hook use to-do.
10868
07:03:23,740 --> 07:03:24,900
Oh no, it doesn't.
10869
07:03:24,900 --> 07:03:26,580
Why is it not suggesting me anything?
10870
07:03:26,580 --> 07:03:28,340
I really don't like it.
10871
07:03:28,340 --> 07:03:31,700
Okay, we need to work on with use to-do,
10872
07:03:31,700 --> 07:03:33,060
and how we're going to grab it,
10873
07:03:33,060 --> 07:03:34,700
we'll be grabbing it from,
10874
07:03:34,700 --> 07:03:38,380
we need to go one directory back inside the context,
10875
07:03:38,380 --> 07:03:42,060
and from this one, we need to grab the to-do context.
10876
07:03:42,060 --> 07:03:44,900
So we'll just grab this hook use to-do from there,
10877
07:03:44,900 --> 07:03:48,620
or can I bring it directly from the index?
10878
07:03:48,620 --> 07:03:51,580
Probably, but anyways, you get the idea.
10879
07:03:51,580 --> 07:03:54,340
Use to-do, now we have this use to-do directly a hook,
10880
07:03:54,340 --> 07:03:55,860
which internally, if you remember,
10881
07:03:55,860 --> 07:03:59,100
is giving us an access of the hook use context,
10882
07:03:59,100 --> 07:04:01,380
which is already having the to-do context.
10883
07:04:01,380 --> 07:04:02,220
Pretty nice.
10884
07:04:02,220 --> 07:04:05,060
Okay, and we can bring in functionality from this one,
10885
07:04:05,060 --> 07:04:06,220
so I can just go ahead and say,
10886
07:04:06,220 --> 07:04:07,620
hey, give me something, whatever you like.
10887
07:04:07,620 --> 07:04:09,740
So in this case, I just need add to-do.
10888
07:04:09,740 --> 07:04:11,740
I don't need to have access of all the to-dos,
10889
07:04:11,740 --> 07:04:14,620
I don't need to have access of add, delete,
10890
07:04:14,660 --> 07:04:17,460
no need at all, I can just work with that.
10891
07:04:17,460 --> 07:04:19,220
Okay, this is good.
10892
07:04:19,220 --> 07:04:21,860
Now, we need to have a functionality
10893
07:04:21,860 --> 07:04:24,420
when the form is going to get submitted,
10894
07:04:24,420 --> 07:04:26,580
or the add button is going to click,
10895
07:04:26,580 --> 07:04:28,740
we need to add it into this one.
10896
07:04:28,740 --> 07:04:31,220
So we'll just, first of all, we'll say,
10897
07:04:31,220 --> 07:04:32,900
okay, let me just show you one by one.
10898
07:04:32,900 --> 07:04:35,660
So we'll call this method as simply add, not the add to-do.
10899
07:04:35,660 --> 07:04:36,860
So what this will do is,
10900
07:04:36,860 --> 07:04:39,180
there will be an event that will be fired.
10901
07:04:39,180 --> 07:04:40,700
First of all, prevent that default.
10902
07:04:40,700 --> 07:04:45,460
So E.prevent default,
10903
07:04:45,460 --> 07:04:47,180
so that it doesn't submit it anywhere.
10904
07:04:47,180 --> 07:04:48,940
Okay, that's the step one.
10905
07:04:48,940 --> 07:04:51,420
Now, if there is no to-do, like it is empty,
10906
07:04:51,420 --> 07:04:53,740
then we'll just don't do anything.
10907
07:04:53,740 --> 07:04:54,900
So we'll just go ahead and say,
10908
07:04:54,900 --> 07:04:59,140
if there is no to-do, then just go ahead and return.
10909
07:04:59,140 --> 07:05:01,500
So we'll just remove this, remove this,
10910
07:05:01,500 --> 07:05:03,860
it could be a one-liner, so return.
10911
07:05:03,860 --> 07:05:06,460
If it is not the case, there is something inside the to-do,
10912
07:05:06,460 --> 07:05:09,340
is there is a string or something inside the to-do,
10913
07:05:09,340 --> 07:05:10,300
then we can simply go ahead
10914
07:05:10,300 --> 07:05:13,180
and call this one as add to-do, okay.
10915
07:05:13,180 --> 07:05:15,180
First of all, let's push this one here.
10916
07:05:15,180 --> 07:05:19,740
So add to-do, and what this add to-do method will do,
10917
07:05:19,740 --> 07:05:22,380
it requires it to do to be passed on to this one.
10918
07:05:22,380 --> 07:05:25,380
So this is to-do is an object,
10919
07:05:25,380 --> 07:05:28,180
and we'll just give you this to-do, this is a string,
10920
07:05:28,180 --> 07:05:31,700
and we can optionally give it completed as one as,
10921
07:05:31,700 --> 07:05:33,500
although there is a default value there,
10922
07:05:33,500 --> 07:05:37,020
but any case, we'll just give it a false.
10923
07:05:37,020 --> 07:05:38,820
We don't need to give it an ID
10924
07:05:38,820 --> 07:05:41,740
because if you remember correctly,
10925
07:05:41,740 --> 07:05:46,060
in the app.jsx, when we were working on this add to-do,
10926
07:05:46,060 --> 07:05:47,820
whatever the to-do you pass me on,
10927
07:05:47,820 --> 07:05:50,820
which is an object, obviously, I am adding the date here.
10928
07:05:50,820 --> 07:05:52,380
If you want to remove it completely,
10929
07:05:52,380 --> 07:05:54,100
you can just save yourself some step.
10930
07:05:54,100 --> 07:05:57,060
You can spread this or not even spread this.
10931
07:05:57,060 --> 07:05:58,140
You can just have a to-do here,
10932
07:05:58,140 --> 07:06:00,300
which is an object and spread this previous here.
10933
07:06:00,300 --> 07:06:05,060
So it's totally up to you that what kind of data flow
10934
07:06:05,060 --> 07:06:07,460
or what kind of application flow you are going.
10935
07:06:07,460 --> 07:06:11,300
In my case, I'm passing the text of the to-do
10936
07:06:11,300 --> 07:06:13,980
as well as completed here and the data I'm adding there,
10937
07:06:13,980 --> 07:06:15,540
but you can do everything here,
10938
07:06:15,540 --> 07:06:18,380
you can do not everything there, you cannot do that.
10939
07:06:18,380 --> 07:06:20,140
Okay, so this is the basic,
10940
07:06:20,140 --> 07:06:23,120
and one as side note that I'll be doing is,
10941
07:06:23,120 --> 07:06:24,140
once everything is all done,
10942
07:06:24,140 --> 07:06:26,580
this is all what we need to do as a functionality.
10943
07:06:26,580 --> 07:06:28,500
I want to reset the to-do as well
10944
07:06:28,500 --> 07:06:31,620
so that the state actually the to-do just gets off,
10945
07:06:31,620 --> 07:06:33,100
so I'll just empty it out.
10946
07:06:33,100 --> 07:06:35,020
So I'll just go ahead and say set to-do,
10947
07:06:35,020 --> 07:06:37,540
and I'll just empty it out, that's it.
10948
07:06:37,540 --> 07:06:39,620
A little bit basics, so there we go.
10949
07:06:39,620 --> 07:06:42,620
So this is all it takes to have your to-do form.
10950
07:06:42,620 --> 07:06:44,260
Now comes to the visual part.
10951
07:06:44,260 --> 07:06:46,900
For the visual part, what we'll be having is a simple form.
10952
07:06:46,900 --> 07:06:50,540
So let's go ahead and remove this and just have a form.
10953
07:06:51,540 --> 07:06:53,860
So there we go, we'll be having a form.
10954
07:06:53,860 --> 07:06:55,860
There will be no action required on this.
10955
07:06:55,860 --> 07:06:59,300
We'll be having just one method, which is on submit.
10956
07:06:59,300 --> 07:07:01,820
And in this, we'll be calling this add method,
10957
07:07:01,820 --> 07:07:04,780
and we'll be having some class name onto this one as well.
10958
07:07:05,020 --> 07:07:07,060
So we'll be having class name of flex.
10959
07:07:07,060 --> 07:07:10,060
This is just a visual aesthetic aspect,
10960
07:07:10,060 --> 07:07:11,900
not bothered much on that.
10961
07:07:11,900 --> 07:07:14,980
We are having this input, which is a type of text.
10962
07:07:16,660 --> 07:07:18,500
Okay, we don't need this.
10963
07:07:20,100 --> 07:07:21,340
Okay, let's go there.
10964
07:07:21,340 --> 07:07:23,820
And first of all, we'll be having a placeholder.
10965
07:07:23,820 --> 07:07:28,400
Placeholder we are saying right to do with couple of dots.
10966
07:07:30,740 --> 07:07:32,820
And after that, we have some class names
10967
07:07:32,820 --> 07:07:35,180
that I'll be bringing in from my notes file.
10968
07:07:35,180 --> 07:07:37,260
I do have a lot of notes.
10969
07:07:37,260 --> 07:07:39,100
Okay, so I'll be just bringing them up
10970
07:07:39,100 --> 07:07:40,500
so that it looks decent.
10971
07:07:40,500 --> 07:07:41,420
So there we go.
10972
07:07:41,420 --> 07:07:44,660
Okay, this is copy paste stuff, Tailwind CSS.
10973
07:07:44,660 --> 07:07:45,940
Okay, now interesting part.
10974
07:07:45,940 --> 07:07:48,140
How does the value in this one governs?
10975
07:07:48,140 --> 07:07:50,260
The value is going to be governed by the to-do,
10976
07:07:50,260 --> 07:07:51,860
so that's managed by state.
10977
07:07:51,860 --> 07:07:53,260
What happens when something changes?
10978
07:07:53,260 --> 07:07:57,020
So anytime you change something, so on change,
10979
07:07:57,020 --> 07:07:58,940
what happens is there will be an event
10980
07:07:58,940 --> 07:08:01,700
that will be firing up, so callback.
10981
07:08:01,740 --> 07:08:04,620
And we'll be calling the set to do.
10982
07:08:04,620 --> 07:08:05,780
And inside the set to do,
10983
07:08:05,780 --> 07:08:08,980
we'll be saying e.target.value.
10984
07:08:08,980 --> 07:08:11,940
So we'll be adding the targeted value in here.
10985
07:08:11,940 --> 07:08:14,260
Okay, that's my first part of it.
10986
07:08:14,260 --> 07:08:15,780
And the next part is the button.
10987
07:08:15,780 --> 07:08:17,540
So that's not really bad.
10988
07:08:17,540 --> 07:08:21,940
So button, which will be of type submit, there we go.
10989
07:08:21,940 --> 07:08:24,200
And we'll be calling this one as add.
10990
07:08:24,200 --> 07:08:26,180
And obviously without any doubt,
10991
07:08:26,180 --> 07:08:28,380
we do have some classes here as well.
10992
07:08:28,380 --> 07:08:30,860
Class name, and I do have it in my notes as well.
10993
07:08:30,860 --> 07:08:32,800
By the way, you'll be grabbing all these classes
10994
07:08:32,800 --> 07:08:34,060
from my GitHub itself.
10995
07:08:34,060 --> 07:08:36,780
If you want to add it on your own, give it on your own look,
10996
07:08:36,780 --> 07:08:39,220
that's also fine, no big deal there.
10997
07:08:39,220 --> 07:08:40,580
Okay, so this part is all done.
10998
07:08:40,580 --> 07:08:42,380
We have exported the to-do form as well.
10999
07:08:42,380 --> 07:08:44,540
So all looks great.
11000
07:08:44,540 --> 07:08:46,580
Now moving on, let's go ahead and work on
11001
07:08:46,580 --> 07:08:47,420
with the to-do item.
11002
07:08:47,420 --> 07:08:49,240
Again, rfce looks great.
11003
07:08:49,240 --> 07:08:52,460
So we have react functional component, everything.
11004
07:08:52,460 --> 07:08:53,900
The looping part and all of this
11005
07:08:53,900 --> 07:08:55,660
will be working through all of that
11006
07:08:55,660 --> 07:08:57,060
and all these things in a minute.
11007
07:08:57,060 --> 07:09:00,040
I'll just directly give you majority of the part as well.
11008
07:09:00,040 --> 07:09:02,280
But first let's work on the functionality part
11009
07:09:02,280 --> 07:09:06,120
because here also you need some kind of state management.
11010
07:09:06,120 --> 07:09:06,980
Why?
11011
07:09:06,980 --> 07:09:08,160
Because in our application,
11012
07:09:08,160 --> 07:09:10,080
we are having some of the state controllers.
11013
07:09:10,080 --> 07:09:11,380
And as somebody checks on that,
11014
07:09:11,380 --> 07:09:13,920
so is it editable or not?
11015
07:09:13,920 --> 07:09:15,120
We are governing that.
11016
07:09:15,120 --> 07:09:16,640
If it is marked as complete,
11017
07:09:16,640 --> 07:09:19,000
then we are not allowing that to be editable.
11018
07:09:19,000 --> 07:09:20,220
So that's one thing.
11019
07:09:20,220 --> 07:09:22,480
And then obviously we need to have all these
11020
07:09:22,480 --> 07:09:23,560
to-do messages as well.
11021
07:09:23,560 --> 07:09:25,560
We'll be using the state as well.
11022
07:09:25,560 --> 07:09:26,740
And apart from this,
11023
07:09:26,740 --> 07:09:28,960
we also have the update functionality as well.
11024
07:09:28,960 --> 07:09:30,680
So first of all, in this to-do item,
11025
07:09:30,680 --> 07:09:33,740
somebody will give us a prop which will be a to-do.
11026
07:09:33,740 --> 07:09:37,320
And this to-do is having all the to-dos.
11027
07:09:37,320 --> 07:09:39,560
It's a major gigantic array
11028
07:09:39,560 --> 07:09:41,440
which has all the functionality in it.
11029
07:09:41,440 --> 07:09:42,920
Let's go ahead and import one by one
11030
07:09:42,920 --> 07:09:44,280
the functionalities that we need.
11031
07:09:44,280 --> 07:09:48,180
First of all, we need to check is to do editable.
11032
07:09:49,720 --> 07:09:50,600
Okay.
11033
07:09:50,600 --> 07:09:55,600
And we'll be needing set is to do editable.
11034
07:09:55,960 --> 07:09:58,880
And that will be governed by use state.
11035
07:09:59,960 --> 07:10:03,720
And by default, everything will be false.
11036
07:10:04,840 --> 07:10:05,960
Okay.
11037
07:10:05,960 --> 07:10:07,280
And what else we need?
11038
07:10:07,280 --> 07:10:08,800
We need the to-do messages as well.
11039
07:10:08,800 --> 07:10:10,280
So we'll be saying const.
11040
07:10:10,280 --> 07:10:14,560
And we'll call this one as to-do message.
11041
07:10:14,560 --> 07:10:19,280
Set to-do message.
11042
07:10:19,280 --> 07:10:23,160
And we'll be saying that you will be governed by use state.
11043
07:10:23,160 --> 07:10:25,000
But in the use state,
11044
07:10:25,000 --> 07:10:26,720
we will be not passing on directly to-do
11045
07:10:26,720 --> 07:10:27,720
because that will be bad.
11046
07:10:27,720 --> 07:10:30,400
We'll be just passing it all the to-dos here.
11047
07:10:30,400 --> 07:10:31,240
Okay.
11048
07:10:31,240 --> 07:10:32,600
So that's my one message of the to-do.
11049
07:10:32,600 --> 07:10:33,680
Okay.
11050
07:10:33,680 --> 07:10:35,080
And updation as well.
11051
07:10:35,080 --> 07:10:36,840
We'll be governing the updation part as well.
11052
07:10:36,840 --> 07:10:38,600
So we'll just say update to-do.
11053
07:10:39,800 --> 07:10:40,640
Update to-do.
11054
07:10:40,640 --> 07:10:44,320
And we don't need updation for the state management.
11055
07:10:44,320 --> 07:10:45,240
We don't need this one.
11056
07:10:45,240 --> 07:10:46,080
Okay.
11057
07:10:46,080 --> 07:10:47,320
Another thing that we need
11058
07:10:47,320 --> 07:10:49,600
since we are controlling couple of functionalities here
11059
07:10:49,600 --> 07:10:52,960
for example, update, the delete as well, the toggle as well
11060
07:10:52,960 --> 07:10:54,480
we need to bring these functionality
11061
07:10:54,480 --> 07:10:57,760
and how we can bring that simply with the hook itself,
11062
07:10:57,760 --> 07:10:58,600
the use to-do.
11063
07:10:58,600 --> 07:11:01,400
The use context hook actually gives us that access.
11064
07:11:01,400 --> 07:11:03,080
But we are not using use context.
11065
07:11:03,080 --> 07:11:04,920
We have actually crafted our own hook
11066
07:11:04,920 --> 07:11:07,200
that gives us access to all the functionality.
11067
07:11:07,200 --> 07:11:10,720
So let's go ahead at the very top and bring this one here.
11068
07:11:10,720 --> 07:11:14,880
I'll say first of all, let's give me use to-do
11069
07:11:14,880 --> 07:11:18,520
and I'll just bring it from auto-import.
11070
07:11:18,520 --> 07:11:19,920
That's nice.
11071
07:11:19,920 --> 07:11:20,760
Okay.
11072
07:11:20,760 --> 07:11:22,280
So use to-do.
11073
07:11:23,160 --> 07:11:24,000
There we go.
11074
07:11:24,800 --> 07:11:26,320
And this hook gives you access
11075
07:11:26,320 --> 07:11:29,480
to all the features that you need.
11076
07:11:29,480 --> 07:11:30,440
What all do you need?
11077
07:11:30,440 --> 07:11:32,560
In this one, I'll need update to-do.
11078
07:11:32,560 --> 07:11:37,560
I need delete to-do and I also need toggle complete.
11079
07:11:39,440 --> 07:11:40,840
There we go.
11080
07:11:40,840 --> 07:11:41,680
Okay.
11081
07:11:41,680 --> 07:11:44,640
So all the to-dos and everything are with me.
11082
07:11:44,640 --> 07:11:48,240
Now we need to define some of the functionality as well.
11083
07:11:48,240 --> 07:11:49,080
Functionality wise,
11084
07:11:49,080 --> 07:11:50,920
we have already taken care of most of the things
11085
07:11:50,920 --> 07:11:52,520
but we need to take care of some things
11086
07:11:52,520 --> 07:11:54,680
in the visual aspect as well.
11087
07:11:54,680 --> 07:11:57,240
Especially what happens when we do the edit
11088
07:11:57,240 --> 07:11:59,800
because notice here, if it is editable
11089
07:11:59,800 --> 07:12:01,800
then we are enabling some fields.
11090
07:12:01,800 --> 07:12:04,760
For example, if you remember when I clicked on the edit
11091
07:12:04,760 --> 07:12:06,960
there was a input field that came in
11092
07:12:06,960 --> 07:12:09,960
and that input field was conditionally rendered.
11093
07:12:09,960 --> 07:12:14,040
If input field, like if it was edit was editable
11094
07:12:14,040 --> 07:12:16,560
then the input field came in, the value got into it
11095
07:12:16,560 --> 07:12:18,360
and now you're allowed to edit into that.
11096
07:12:18,360 --> 07:12:20,560
So based on this, this is the whole thing.
11097
07:12:20,560 --> 07:12:23,000
This true or false functionality is allowing us
11098
07:12:23,000 --> 07:12:24,320
to conditionally render that.
11099
07:12:24,320 --> 07:12:26,440
That is why we need to write some piece of code
11100
07:12:26,440 --> 07:12:27,880
to conditionally do that.
11101
07:12:27,880 --> 07:12:30,680
So I'll just call this one as edit to-do
11102
07:12:30,680 --> 07:12:32,560
and what does this edit to-do does?
11103
07:12:32,560 --> 07:12:35,120
It's a simple function like this
11104
07:12:35,120 --> 07:12:37,880
and all it does is it allows us to update that
11105
07:12:37,880 --> 07:12:39,440
because once somebody clicks on edit,
11106
07:12:39,440 --> 07:12:41,840
we need to run the functionality of update.
11107
07:12:41,840 --> 07:12:44,200
Whether he has edited or not, that's up to him
11108
07:12:44,200 --> 07:12:45,640
but we'll just go with that.
11109
07:12:45,640 --> 07:12:48,240
In order to update anything, we need to pass on two things.
11110
07:12:48,240 --> 07:12:49,680
The first one is the ID.
11111
07:12:49,680 --> 07:12:52,600
So we'll just grab the to-do and its ID from there
11112
07:12:52,600 --> 07:12:54,600
and we need to pass on the entire to-do
11113
07:12:54,600 --> 07:12:55,800
that needs to be updated.
11114
07:12:55,800 --> 07:13:00,040
So we'll just give it an object, we'll spread the to-do
11115
07:13:00,040 --> 07:13:02,480
and what we'll be doing is the only thing
11116
07:13:02,480 --> 07:13:05,040
that's usually we are allowing to update
11117
07:13:05,040 --> 07:13:07,560
while this method is just the string part.
11118
07:13:07,560 --> 07:13:09,080
So let's go ahead and spread this out
11119
07:13:09,080 --> 07:13:11,880
and the only thing, only property that's getting updated
11120
07:13:11,880 --> 07:13:13,860
is the to-do which is now getting updated
11121
07:13:13,860 --> 07:13:15,560
with the to-do message.
11122
07:13:15,560 --> 07:13:16,400
There we go.
11123
07:13:16,400 --> 07:13:18,560
Now it's making much more sense to you.
11124
07:13:18,760 --> 07:13:21,960
Once this is all done, then obviously we need to say that,
11125
07:13:21,960 --> 07:13:23,600
hey, this edit is all done.
11126
07:13:23,600 --> 07:13:25,680
So this operation is being performed.
11127
07:13:25,680 --> 07:13:28,760
Now let's set editable again back to false.
11128
07:13:28,760 --> 07:13:33,240
So set to do editable will be going it as false.
11129
07:13:33,240 --> 07:13:34,080
Okay.
11130
07:13:34,080 --> 07:13:35,040
Right now you might be wondering,
11131
07:13:35,040 --> 07:13:36,600
hey, nobody has made it update.
11132
07:13:36,600 --> 07:13:37,580
That will be done.
11133
07:13:37,580 --> 07:13:39,960
Editable, nobody is making it as true.
11134
07:13:39,960 --> 07:13:41,000
Yes, we'll do that.
11135
07:13:41,000 --> 07:13:44,360
But that will be toggled by another click, not this.
11136
07:13:44,360 --> 07:13:46,480
This is a pure functionality part.
11137
07:13:46,480 --> 07:13:47,320
Okay.
11138
07:13:47,320 --> 07:13:52,000
Now another thing that we'll be going through is this one.
11139
07:13:52,000 --> 07:13:53,160
Let's create another method.
11140
07:13:53,160 --> 07:13:55,000
We'll be using that in a second.
11141
07:13:55,000 --> 07:13:58,080
This will be a simple toggle complete.
11142
07:13:58,080 --> 07:13:59,520
So in the toggle complete,
11143
07:13:59,520 --> 07:14:03,600
what we are doing is this toggle complete.
11144
07:14:03,600 --> 07:14:05,920
Let's go ahead and do it like this.
11145
07:14:05,920 --> 07:14:06,760
There we go.
11146
07:14:07,920 --> 07:14:09,040
Okay.
11147
07:14:09,040 --> 07:14:10,760
Toggle completed.
11148
07:14:10,760 --> 07:14:15,060
Actually, this is not the toggle complete.
11149
07:14:15,060 --> 07:14:16,940
Toggle complete is something that we are bringing
11150
07:14:16,940 --> 07:14:18,420
from the context.
11151
07:14:18,420 --> 07:14:21,020
Toggle completed is something that we'll be using
11152
07:14:21,020 --> 07:14:23,700
for visual aspect only, just for the strikethrough line.
11153
07:14:23,700 --> 07:14:24,820
That is it.
11154
07:14:24,820 --> 07:14:26,420
So how we're going to do that,
11155
07:14:26,420 --> 07:14:31,420
simply just have this one as toggle complete.
11156
07:14:32,060 --> 07:14:33,660
Inside this, we'll be calling this one
11157
07:14:33,660 --> 07:14:35,500
and passing on the todo.id.
11158
07:14:36,420 --> 07:14:37,260
Okay.
11159
07:14:37,260 --> 07:14:39,060
So we're not directly using this method.
11160
07:14:39,060 --> 07:14:42,140
We are actually created our own method inside this.
11161
07:14:42,140 --> 07:14:44,420
And this method technically will be running this method.
11162
07:14:44,460 --> 07:14:45,780
So that's it.
11163
07:14:45,780 --> 07:14:46,620
Okay.
11164
07:14:46,620 --> 07:14:48,900
So the functionality part is almost all done,
11165
07:14:48,900 --> 07:14:50,920
whatever the code we wanted to write.
11166
07:14:50,920 --> 07:14:53,340
Now what's remaining is how we actually render that.
11167
07:14:53,340 --> 07:14:55,460
We have used a lot of fancy things inside this.
11168
07:14:55,460 --> 07:14:57,900
So we'll just do it things one by one.
11169
07:14:57,900 --> 07:15:02,220
So first of all, what we're going to do is this is my div.
11170
07:15:02,220 --> 07:15:04,660
This is for each of the todo itself.
11171
07:15:04,660 --> 07:15:07,020
The first thing that I'll do is add some class names here.
11172
07:15:07,020 --> 07:15:09,620
So let me walk you through how we are doing it.
11173
07:15:09,620 --> 07:15:11,900
So remember this, this is not all the todos.
11174
07:15:11,900 --> 07:15:13,500
This is one todo itself.
11175
07:15:13,500 --> 07:15:14,340
Okay.
11176
07:15:15,160 --> 07:15:17,100
So in the app.js, we will be looping through the values.
11177
07:15:17,100 --> 07:15:18,500
This is just one.
11178
07:15:18,500 --> 07:15:19,340
Okay.
11179
07:15:19,340 --> 07:15:21,440
So the first thing that we have is the class name
11180
07:15:21,440 --> 07:15:23,280
and we'll be removing the class name like this.
11181
07:15:23,280 --> 07:15:26,600
We'll be starting our JavaScript, use the back ticks here.
11182
07:15:26,600 --> 07:15:29,800
The reason for using the back tick is because
11183
07:15:29,800 --> 07:15:32,540
I have some of the CSS classes, which looks as a default.
11184
07:15:32,540 --> 07:15:35,880
So this is just a string, but I want to add more
11185
07:15:35,880 --> 07:15:38,720
based on, I want to do some conditional rendering.
11186
07:15:38,720 --> 07:15:40,060
So if the todo is completed,
11187
07:15:40,060 --> 07:15:42,860
I want to just add another color based on that.
11188
07:15:42,860 --> 07:15:44,180
So I'll just do that.
11189
07:15:44,220 --> 07:15:45,780
Okay. So what I'll do is first of all,
11190
07:15:45,780 --> 07:15:48,260
let's add the JavaScript functionality
11191
07:15:48,260 --> 07:15:52,340
and then ask if the todo is completed.
11192
07:15:52,340 --> 07:15:55,800
Todo is, it has a functionality.
11193
07:15:55,800 --> 07:15:56,940
I know that this is an object.
11194
07:15:56,940 --> 07:16:01,080
I added this property into this one, which is a completed.
11195
07:16:01,080 --> 07:16:03,100
If that is the case, we'll do something.
11196
07:16:03,100 --> 07:16:04,820
Otherwise we'll do something.
11197
07:16:04,820 --> 07:16:07,060
So based on this, we'll be rendering the color.
11198
07:16:07,060 --> 07:16:08,700
And by the way, I do have these colors.
11199
07:16:08,700 --> 07:16:10,500
So I'll just copy and paste this one.
11200
07:16:10,500 --> 07:16:14,460
So this color, if it is completed, we'll use that.
11201
07:16:14,460 --> 07:16:17,020
And if it is not completed, we'll be using this color.
11202
07:16:17,020 --> 07:16:19,260
So I do have different colors based on that.
11203
07:16:20,220 --> 07:16:22,480
Okay. So this is easy part.
11204
07:16:22,480 --> 07:16:24,100
We have gone through with this one.
11205
07:16:24,100 --> 07:16:26,460
Now let's go ahead and remove this todo item
11206
07:16:26,460 --> 07:16:27,740
and go up here.
11207
07:16:27,740 --> 07:16:28,900
Now we have a couple of things
11208
07:16:28,900 --> 07:16:30,200
that are conditionally rendering.
11209
07:16:30,200 --> 07:16:32,260
First of all, the checkbox is always there.
11210
07:16:32,260 --> 07:16:34,060
So let's go ahead and have this one.
11211
07:16:34,060 --> 07:16:37,120
So input, this is a type of checkbox.
11212
07:16:37,120 --> 07:16:42,120
We don't need this name and ID.
11213
07:16:43,640 --> 07:16:46,040
Okay. So this checkbox,
11214
07:16:46,040 --> 07:16:48,180
we have a class name for this one, really easy,
11215
07:16:48,180 --> 07:16:53,180
which is cursor, no suggestion, cursor pointer.
11216
07:16:53,760 --> 07:16:56,160
Okay. And is it checked or not?
11217
07:16:56,160 --> 07:16:59,280
This checked or not is going to be based on todo.
11218
07:16:59,280 --> 07:17:02,640
So todo will tell me literally completed or not.
11219
07:17:02,640 --> 07:17:04,600
And what happens when something changes?
11220
07:17:04,600 --> 07:17:06,680
So on change, we'll run on that.
11221
07:17:06,680 --> 07:17:10,040
And in this, we will be running the todo completed,
11222
07:17:10,040 --> 07:17:12,480
the method that we created todo.
11223
07:17:12,480 --> 07:17:14,400
I'll just copy and paste this one.
11224
07:17:14,400 --> 07:17:17,600
Otherwise it will confuse me a lot.
11225
07:17:17,600 --> 07:17:21,480
Okay. This one, toggle completed.
11226
07:17:21,480 --> 07:17:23,840
Copy that and paste it here.
11227
07:17:23,840 --> 07:17:27,280
So this is the reason why I didn't use it directly
11228
07:17:27,280 --> 07:17:29,920
because if I use it directly toggle complete,
11229
07:17:29,920 --> 07:17:31,200
I have to pass an ID.
11230
07:17:31,200 --> 07:17:33,440
So I have to run a callback here.
11231
07:17:33,440 --> 07:17:35,680
If you don't want to do that, just use it like this.
11232
07:17:35,720 --> 07:17:36,560
Exactly same thing.
11233
07:17:36,560 --> 07:17:39,320
So exactly same thing, nothing too much to be discussed.
11234
07:17:39,320 --> 07:17:42,480
Okay. Next part is my input field
11235
07:17:42,480 --> 07:17:45,880
and based the input field is editable or not,
11236
07:17:45,880 --> 07:17:50,120
that will decide based on this one is todo editable.
11237
07:17:50,120 --> 07:17:52,560
Okay. Let's move on to the next part.
11238
07:17:52,560 --> 07:17:55,440
Next part is again, this one is the input type of text.
11239
07:17:55,440 --> 07:17:57,480
So we'll be saying input text.
11240
07:17:57,480 --> 07:17:58,480
There we go.
11241
07:17:58,480 --> 07:17:59,840
We don't need any of this.
11242
07:17:59,840 --> 07:18:01,760
Remove this, remove this.
11243
07:18:01,760 --> 07:18:03,400
Okay. First of all, the class,
11244
07:18:03,400 --> 07:18:06,920
again, the class name will go like this, this.
11245
07:18:06,920 --> 07:18:08,040
This is a common practice.
11246
07:18:08,040 --> 07:18:11,080
You'll see quite a lot of things being done just like this.
11247
07:18:11,080 --> 07:18:13,280
So these are our basic classes,
11248
07:18:13,280 --> 07:18:16,440
but rest of the classes will be conditionally rendered.
11249
07:18:16,440 --> 07:18:19,320
So again, fire up your JavaScript fillers up here
11250
07:18:19,320 --> 07:18:24,320
and is todo editable based on this condition,
11251
07:18:24,480 --> 07:18:28,160
either do something or do something else.
11252
07:18:28,160 --> 07:18:30,280
I do have again, these things.
11253
07:18:30,280 --> 07:18:32,960
So if it is editable, we are showing the borders.
11254
07:18:32,960 --> 07:18:35,960
Otherwise we are not showing the borders and that is it.
11255
07:18:35,960 --> 07:18:39,640
I know very, very sneaky, but this is how it's being done.
11256
07:18:39,640 --> 07:18:43,320
Okay. So command Z.
11257
07:18:45,160 --> 07:18:46,920
So we are showing the borders.
11258
07:18:46,920 --> 07:18:48,120
Let me just copy this.
11259
07:18:48,120 --> 07:18:49,440
So we are showing the border.
11260
07:18:49,440 --> 07:18:52,600
If it is editable, if it is not editable,
11261
07:18:52,600 --> 07:18:54,800
then we are making the border as transparent.
11262
07:18:54,800 --> 07:18:55,640
That is it.
11263
07:18:55,640 --> 07:18:57,680
So it gives the feeling that it's not an input field.
11264
07:18:57,680 --> 07:18:59,040
That is it very sneaky.
11265
07:18:59,040 --> 07:19:00,840
I know, but this is all what we have.
11266
07:19:00,840 --> 07:19:02,000
So in the class name,
11267
07:19:02,000 --> 07:19:04,560
now the rest of the thing in this is pretty easy to add in.
11268
07:19:04,560 --> 07:19:06,040
So we need to add the value.
11269
07:19:06,040 --> 07:19:06,960
What value?
11270
07:19:06,960 --> 07:19:09,560
Pretty simple value is a todo message.
11271
07:19:09,560 --> 07:19:12,320
Todo message, we got the value, we are displaying it.
11272
07:19:12,320 --> 07:19:13,840
Is it readable or not?
11273
07:19:13,840 --> 07:19:15,080
So let's go ahead and,
11274
07:19:15,080 --> 07:19:17,720
so this is a read only field based on some field.
11275
07:19:18,800 --> 07:19:22,880
So we'll be using exclamatory and the thing is,
11276
07:19:22,880 --> 07:19:27,160
is todo editable.
11277
07:19:27,160 --> 07:19:29,360
So if the todo are really basic logic,
11278
07:19:29,360 --> 07:19:31,480
we have already discussed that as too much,
11279
07:19:31,960 --> 07:19:33,280
we are giving it as a false.
11280
07:19:33,280 --> 07:19:36,160
So is it readable only or user can edit it
11281
07:19:36,160 --> 07:19:37,720
based on the edit functionality?
11282
07:19:37,720 --> 07:19:39,160
We are giving that, so really basic.
11283
07:19:39,160 --> 07:19:41,760
Don't want to explain it too much explanation of that.
11284
07:19:41,760 --> 07:19:43,400
And one more field is on change.
11285
07:19:43,400 --> 07:19:44,720
What happens on change?
11286
07:19:44,720 --> 07:19:47,840
So again, we have an event that is going to callback
11287
07:19:47,840 --> 07:19:49,400
and that's going to make it is,
11288
07:19:49,400 --> 07:19:54,400
is set todo message as e.target.value.
11289
07:19:54,400 --> 07:19:59,400
Set todo message as e.target.value.
11290
07:20:00,920 --> 07:20:02,040
There we go.
11291
07:20:02,040 --> 07:20:03,600
All right, so this is done.
11292
07:20:03,600 --> 07:20:05,560
And again, very, very sneakingly,
11293
07:20:05,560 --> 07:20:08,120
we are adding these input fields and all of that.
11294
07:20:08,120 --> 07:20:10,960
Last but not the least, now we have buttons
11295
07:20:10,960 --> 07:20:12,960
and actually we have couple of them.
11296
07:20:12,960 --> 07:20:13,920
There's a save button,
11297
07:20:13,920 --> 07:20:17,600
which actually conditionally render to save or edit.
11298
07:20:17,600 --> 07:20:19,080
We have a delete button as well.
11299
07:20:19,080 --> 07:20:21,520
So let's go ahead and do that as well.
11300
07:20:21,520 --> 07:20:22,440
Okay, one by one.
11301
07:20:22,440 --> 07:20:23,880
First of all, this is a button.
11302
07:20:23,880 --> 07:20:26,800
So this button is just a classic button,
11303
07:20:26,800 --> 07:20:28,640
nothing too much onto this one.
11304
07:20:28,640 --> 07:20:32,280
What goes into the button is actually dependent
11305
07:20:32,280 --> 07:20:34,920
on the value itself.
11306
07:20:34,920 --> 07:20:38,200
So I'll just go ahead and start my JavaScript again
11307
07:20:38,200 --> 07:20:41,560
and depend on is todo editable.
11308
07:20:41,560 --> 07:20:44,120
So for that, we'll be giving it something.
11309
07:20:45,840 --> 07:20:47,880
Otherwise, we'll be giving it something.
11310
07:20:47,880 --> 07:20:49,880
So you can go ahead and say if todo is editable,
11311
07:20:49,880 --> 07:20:51,400
go ahead and give it a save.
11312
07:20:51,400 --> 07:20:54,040
If it is not, give it a edit message,
11313
07:20:54,040 --> 07:20:56,000
but we do have the icons for it.
11314
07:20:56,000 --> 07:20:58,040
So I've actually copied the icons.
11315
07:20:58,040 --> 07:20:59,560
So we'll be using the icons,
11316
07:20:59,560 --> 07:21:01,840
but again, you can use the text if you wish.
11317
07:21:01,840 --> 07:21:04,280
And I do have a pencil icon for that as well
11318
07:21:04,280 --> 07:21:05,360
in the case of edit.
11319
07:21:05,360 --> 07:21:08,560
So we'll be using that fancy, but yeah, I like that.
11320
07:21:08,560 --> 07:21:12,880
Okay, so again, we'll be adding some of the classes
11321
07:21:12,880 --> 07:21:13,720
and all these things.
11322
07:21:13,720 --> 07:21:15,440
So let's go up here.
11323
07:21:15,440 --> 07:21:17,600
First of all, let's add a class name,
11324
07:21:17,600 --> 07:21:19,080
lots of classes in this one.
11325
07:21:20,080 --> 07:21:23,560
Okay, copy that and paste it, no worries that part.
11326
07:21:23,560 --> 07:21:26,280
Okay, classes is all done, but what happens on click?
11327
07:21:26,280 --> 07:21:30,200
That is the important part, on click.
11328
07:21:30,200 --> 07:21:32,400
So on click, we'll be firing up a callback
11329
07:21:32,400 --> 07:21:34,800
because we need to check some conditionary rendering here
11330
07:21:34,800 --> 07:21:36,080
or conditionally.
11331
07:21:36,080 --> 07:21:39,680
So we'll be checking if, based on some conditions,
11332
07:21:39,680 --> 07:21:42,160
if todo is completed.
11333
07:21:43,280 --> 07:21:44,640
If todo is completed,
11334
07:21:44,640 --> 07:21:46,680
then we don't want to do anything at all.
11335
07:21:46,680 --> 07:21:48,280
We don't want to give any functionality.
11336
07:21:48,320 --> 07:21:49,960
On click should do nothing at all.
11337
07:21:49,960 --> 07:21:51,440
If it's already completed,
11338
07:21:51,440 --> 07:21:52,760
why do you want to save or edit it?
11339
07:21:52,760 --> 07:21:54,760
So we'll just go ahead and say return.
11340
07:21:54,760 --> 07:21:57,400
Okay, that's one check, but if todo is editable,
11341
07:21:57,400 --> 07:22:00,440
let's go ahead and do some more stuff.
11342
07:22:00,440 --> 07:22:02,200
So we'll check again.
11343
07:22:02,200 --> 07:22:07,200
If is todo editable, in that case,
11344
07:22:07,680 --> 07:22:10,560
we'll just go ahead and say edit todo.
11345
07:22:10,560 --> 07:22:13,320
And in this one, we'll just run this method.
11346
07:22:13,320 --> 07:22:16,760
And in the else part, if todo is not editable,
11347
07:22:16,760 --> 07:22:18,880
then we'll just keep it as it is.
11348
07:22:18,880 --> 07:22:23,080
So we'll just say set is todo editable,
11349
07:22:23,080 --> 07:22:25,280
and we'll take the previous value
11350
07:22:25,280 --> 07:22:27,800
and we'll say as it is, just flip that.
11351
07:22:29,760 --> 07:22:31,440
Prep, okay.
11352
07:22:31,440 --> 07:22:33,360
So I hope you remember is todo editable.
11353
07:22:33,360 --> 07:22:35,000
This is just a Boolean value.
11354
07:22:35,000 --> 07:22:37,080
So this is just true and false.
11355
07:22:37,080 --> 07:22:39,360
And if todo is editable,
11356
07:22:39,360 --> 07:22:41,160
then we perform the edit operation.
11357
07:22:41,160 --> 07:22:44,200
If it is not, then just go ahead and keep it as it is.
11358
07:22:44,200 --> 07:22:46,360
We don't want to do anything in that case.
11359
07:22:46,360 --> 07:22:48,000
Okay, so this is the first part.
11360
07:22:48,000 --> 07:22:52,280
And also what we can do is in this case,
11361
07:22:52,280 --> 07:22:55,160
we can actually check for, you want to give that button.
11362
07:22:55,160 --> 07:22:56,520
So you can actually optionally,
11363
07:22:56,520 --> 07:22:59,160
we can make it as disabled button or not.
11364
07:22:59,160 --> 07:23:00,680
Again, disabled will be based on
11365
07:23:00,680 --> 07:23:01,880
if todo is completed or not.
11366
07:23:01,880 --> 07:23:06,880
So todo.is, not todo, completed.
11367
07:23:07,600 --> 07:23:08,760
There we go.
11368
07:23:08,760 --> 07:23:11,040
Okay, that's my first button that I have.
11369
07:23:11,040 --> 07:23:13,200
I do have another button, which is a delete button.
11370
07:23:13,200 --> 07:23:15,380
So let's go ahead and have a button.
11371
07:23:15,380 --> 07:23:16,660
And this one is delete,
11372
07:23:16,660 --> 07:23:20,420
but just like always, we do have some icon for it.
11373
07:23:20,420 --> 07:23:21,980
So I'll copy and paste this one.
11374
07:23:21,980 --> 07:23:24,580
So yes, we have this icon.
11375
07:23:24,580 --> 07:23:25,860
And again, apart from this,
11376
07:23:25,860 --> 07:23:27,420
we'll be having a class name.
11377
07:23:27,420 --> 07:23:29,540
In this class name, lots of classes.
11378
07:23:29,540 --> 07:23:33,900
Yes, literally, lots of classes goes into this one.
11379
07:23:33,900 --> 07:23:35,460
Doesn't really bother.
11380
07:23:35,460 --> 07:23:36,820
The most important thing in here is
11381
07:23:36,820 --> 07:23:38,880
what happens when somebody clicks on this button.
11382
07:23:38,880 --> 07:23:40,280
So if somebody clicks on this button,
11383
07:23:40,280 --> 07:23:42,420
then obviously we'll run on click.
11384
07:23:42,420 --> 07:23:45,240
And on this, fire this callback.
11385
07:23:45,240 --> 07:23:47,880
And just simply run the delete todo.
11386
07:23:47,880 --> 07:23:49,960
And for this, we need to pass on ID.
11387
07:23:49,960 --> 07:23:52,280
So we'll say todo.id.
11388
07:23:52,280 --> 07:23:53,880
There we go.
11389
07:23:53,880 --> 07:23:56,040
Okay, quite a lot of stuff,
11390
07:23:56,040 --> 07:23:57,840
but I think it's all understandable.
11391
07:23:57,840 --> 07:23:59,840
Probably it's going to take one more iteration
11392
07:23:59,840 --> 07:24:00,960
to understand this.
11393
07:24:00,960 --> 07:24:01,960
It looks a lot,
11394
07:24:01,960 --> 07:24:04,100
but because we are doing some sneaky stuff,
11395
07:24:04,100 --> 07:24:07,380
like removing the borders of input field and all not,
11396
07:24:07,380 --> 07:24:08,740
if you don't want to do all of this,
11397
07:24:08,740 --> 07:24:10,880
you can just always go with the classic simple,
11398
07:24:10,880 --> 07:24:12,500
add todo is remove, delete, that's it.
11399
07:24:12,500 --> 07:24:13,340
We don't want to,
11400
07:24:13,340 --> 07:24:14,600
if somebody wants to edit it,
11401
07:24:14,600 --> 07:24:16,560
there are lots of ways of editing that.
11402
07:24:16,560 --> 07:24:17,540
Okay, now next thing is,
11403
07:24:17,540 --> 07:24:19,140
let's go ahead and import all of this
11404
07:24:19,140 --> 07:24:21,480
and export them via the index file.
11405
07:24:21,480 --> 07:24:22,920
That's always a good idea.
11406
07:24:22,920 --> 07:24:24,120
So we'll just go ahead and say,
11407
07:24:24,120 --> 07:24:26,420
I want to import the todo form
11408
07:24:26,420 --> 07:24:31,160
and I want to import this todo item
11409
07:24:31,160 --> 07:24:33,040
and end of the day, we'll be exporting them.
11410
07:24:33,040 --> 07:24:34,880
So export all of them.
11411
07:24:34,880 --> 07:24:37,120
Remember, we are not exporting them as a default.
11412
07:24:37,120 --> 07:24:39,240
So be careful of that.
11413
07:24:39,240 --> 07:24:41,240
And todo item, there we go.
11414
07:24:41,240 --> 07:24:42,300
Exported all of that.
11415
07:24:42,300 --> 07:24:45,340
Now it's time that we go into app.js
11416
07:24:45,340 --> 07:24:46,820
and actually work on with this one.
11417
07:24:46,820 --> 07:24:49,100
So app.jsx.
11418
07:24:49,100 --> 07:24:52,620
Now this is the part where we work on with this one.
11419
07:24:52,620 --> 07:24:54,700
Okay, now as you can see,
11420
07:24:54,700 --> 07:24:57,940
we need a little bit more of the CSS part and whatnot,
11421
07:24:57,940 --> 07:25:00,060
but I'll walk you through directly that.
11422
07:25:00,060 --> 07:25:01,240
All we have to do is,
11423
07:25:01,240 --> 07:25:03,260
I'll be adding the CSS, we'll be giving you directly,
11424
07:25:03,260 --> 07:25:04,300
but in this one,
11425
07:25:04,300 --> 07:25:07,140
I can just go ahead and remove this H1 first
11426
07:25:07,140 --> 07:25:09,340
and can import my form directly here.
11427
07:25:09,340 --> 07:25:11,740
So I'll just go ahead and say todo form
11428
07:25:11,760 --> 07:25:13,300
and that will do the job.
11429
07:25:13,300 --> 07:25:14,980
It will not look the best of the one,
11430
07:25:14,980 --> 07:25:17,560
which I'll give you that, but it will do the job.
11431
07:25:17,560 --> 07:25:20,060
In the case where I want to loop through the values,
11432
07:25:20,060 --> 07:25:22,440
then also it was super, super easy.
11433
07:25:22,440 --> 07:25:24,160
I'll give you the copy paste version of it,
11434
07:25:24,160 --> 07:25:25,260
but first let me walk you through
11435
07:25:25,260 --> 07:25:27,100
with the functionality part.
11436
07:25:27,100 --> 07:25:28,860
In here, when you want to loop through the values,
11437
07:25:28,860 --> 07:25:32,180
you have to fire up your JavaScript, just like this.
11438
07:25:32,180 --> 07:25:34,180
Now I can use the todos.
11439
07:25:34,180 --> 07:25:35,580
Remember, this todos, yes,
11440
07:25:35,580 --> 07:25:37,300
this is all the time getting updated
11441
07:25:37,300 --> 07:25:38,520
in the context and everything
11442
07:25:38,520 --> 07:25:39,940
from the local storage, everything.
11443
07:25:39,940 --> 07:25:41,860
You can use it directly.
11444
07:25:41,860 --> 07:25:44,940
So in the todos, just go ahead and first loop through it.
11445
07:25:44,940 --> 07:25:47,020
So we'll just go ahead and say map.
11446
07:25:47,020 --> 07:25:48,140
Once I'm looping through this,
11447
07:25:48,140 --> 07:25:51,500
obviously I have access to this callback, just like this.
11448
07:25:51,500 --> 07:25:55,020
I have access to each of the todo, just like this, todo.
11449
07:25:55,020 --> 07:25:58,900
And in here, what I'll do is I'll directly fire up parenthesis
11450
07:25:58,900 --> 07:26:01,680
so that I don't have to use the return keyword in here.
11451
07:26:01,680 --> 07:26:03,980
And I can just go ahead and add a simple div,
11452
07:26:03,980 --> 07:26:04,860
just like this.
11453
07:26:04,860 --> 07:26:06,380
The reason for using the div is
11454
07:26:06,380 --> 07:26:08,140
so that I can pass on my key.
11455
07:26:08,140 --> 07:26:09,220
Keys are really important
11456
07:26:09,220 --> 07:26:11,180
when you're iterating through the values.
11457
07:26:11,180 --> 07:26:13,980
And I can say that todo.id is,
11458
07:26:13,980 --> 07:26:16,720
I'm pretty sure that's a unique one, so I can use that.
11459
07:26:16,720 --> 07:26:19,260
And in here, I can just go ahead and call my components.
11460
07:26:19,260 --> 07:26:21,840
So that is my todo item.
11461
07:26:21,840 --> 07:26:22,680
There we go.
11462
07:26:22,680 --> 07:26:24,360
This requires just one thing to be passed on,
11463
07:26:24,360 --> 07:26:26,460
which is a prop known as todo.
11464
07:26:26,460 --> 07:26:28,460
And I can directly pass on this todo.
11465
07:26:28,460 --> 07:26:30,780
Now this is all, this is all the functionality parts.
11466
07:26:30,780 --> 07:26:32,180
So now I'll just go ahead
11467
07:26:32,180 --> 07:26:35,020
and actually bring the nicer version of it,
11468
07:26:35,020 --> 07:26:36,740
which includes the classes and whatnot.
11469
07:26:36,740 --> 07:26:38,700
So I'll just go ahead and bring that in.
11470
07:26:38,700 --> 07:26:41,380
So from my notes, but this is it.
11471
07:26:41,380 --> 07:26:42,540
The functionality part is it.
11472
07:26:42,540 --> 07:26:44,900
Rest of it is just the classes and all of that.
11473
07:26:44,900 --> 07:26:46,060
So I'll paste this one.
11474
07:26:46,060 --> 07:26:47,780
And if you remember, this is nothing.
11475
07:26:47,780 --> 07:26:49,720
We have the todo provider exactly same.
11476
07:26:49,720 --> 07:26:50,880
We're calling this todo form,
11477
07:26:50,880 --> 07:26:53,860
but a little bit nicer in the div with some classes
11478
07:26:53,860 --> 07:26:55,540
and some flex box going around.
11479
07:26:55,540 --> 07:26:59,220
And this is exactly the same thing that we just discussed.
11480
07:26:59,220 --> 07:27:00,620
The only thing which is different
11481
07:27:00,620 --> 07:27:02,200
is the widthful and all of that.
11482
07:27:02,200 --> 07:27:03,420
So as I save this,
11483
07:27:03,420 --> 07:27:07,060
and hopefully things are working or probably not,
11484
07:27:07,060 --> 07:27:08,860
I'll just kill it and start it again.
11485
07:27:09,780 --> 07:27:11,500
Now, if I go back, there we go.
11486
07:27:11,500 --> 07:27:13,160
We have this test and all of that.
11487
07:27:13,160 --> 07:27:15,060
So probably it's working.
11488
07:27:15,060 --> 07:27:18,520
Let's go back and see in the context first,
11489
07:27:18,520 --> 07:27:22,620
in the context, todo context, and this is todo message.
11490
07:27:22,620 --> 07:27:26,160
And this is, so what this is doing is,
11491
07:27:26,160 --> 07:27:28,860
actually this is bringing all of this
11492
07:27:28,860 --> 07:27:29,780
from the local store.
11493
07:27:29,780 --> 07:27:32,400
So I'll just right click inspect
11494
07:27:32,400 --> 07:27:34,740
and go to my application.
11495
07:27:36,180 --> 07:27:38,100
And we need to go into this one
11496
07:27:38,100 --> 07:27:40,600
and we'll just clear this one.
11497
07:27:40,600 --> 07:27:42,500
Okay, now let's try to reload this.
11498
07:27:42,500 --> 07:27:45,000
Now we have everything gone, okay.
11499
07:27:45,000 --> 07:27:49,100
Let's go ahead and add this one as test and add this.
11500
07:27:49,100 --> 07:27:49,940
So there we go.
11501
07:27:49,940 --> 07:27:51,280
We see the test is there.
11502
07:27:51,280 --> 07:27:55,060
Let's also see if it is able to grab this from
11503
07:27:55,060 --> 07:27:59,600
or inject it inside my local storage application
11504
07:27:59,600 --> 07:28:00,780
and local storage.
11505
07:28:00,780 --> 07:28:01,620
There we go.
11506
07:28:01,860 --> 07:28:05,180
We saw that test is here with the ID, nice, nice and easy.
11507
07:28:05,180 --> 07:28:07,820
And apart from this, we are having the edit functionality.
11508
07:28:07,820 --> 07:28:09,380
So the border comes around
11509
07:28:09,380 --> 07:28:11,480
and I'm able to add the test one.
11510
07:28:11,480 --> 07:28:13,660
Save functionality, working nicely.
11511
07:28:13,660 --> 07:28:14,620
Can I remove this?
11512
07:28:14,620 --> 07:28:16,260
Yes, this is also working.
11513
07:28:16,260 --> 07:28:18,340
So let me just summarize this one more time
11514
07:28:18,340 --> 07:28:19,900
because I think this can be too much
11515
07:28:19,900 --> 07:28:21,980
of overwhelming situation for a lot of you.
11516
07:28:21,980 --> 07:28:23,660
Let me go ahead and walk through with this one.
11517
07:28:23,660 --> 07:28:26,620
Although I tried my best to explain you line by line
11518
07:28:26,620 --> 07:28:28,580
and I'm pretty sure you'll leave a comment for that
11519
07:28:28,580 --> 07:28:31,060
that, hey, we enjoyed this lecture.
11520
07:28:31,100 --> 07:28:33,060
The first thing that we understood about this kind
11521
07:28:33,060 --> 07:28:36,660
of application is that we need to attack the context first
11522
07:28:36,660 --> 07:28:38,860
because that's where majority of the things goes.
11523
07:28:38,860 --> 07:28:40,860
So in the context of to do, it was pretty simple.
11524
07:28:40,860 --> 07:28:42,860
We have the create context and use context.
11525
07:28:42,860 --> 07:28:44,740
Create context for creating the context.
11526
07:28:44,740 --> 07:28:48,100
Use context is the hook for using that context.
11527
07:28:48,100 --> 07:28:49,740
And use context doesn't work alone.
11528
07:28:49,740 --> 07:28:53,860
It requires the context which you created by create context.
11529
07:28:53,860 --> 07:28:56,220
So we use the create context to do context.
11530
07:28:56,220 --> 07:28:58,020
If we added our data will go here,
11531
07:28:58,020 --> 07:28:59,060
functionality will go here.
11532
07:28:59,060 --> 07:29:00,560
We don't write to the functionality,
11533
07:29:00,560 --> 07:29:03,320
but the boilerplate blueprint of the functionality.
11534
07:29:03,320 --> 07:29:05,120
Then we simply use the use context hook
11535
07:29:05,120 --> 07:29:06,520
and provide the to do context.
11536
07:29:06,520 --> 07:29:07,520
Don't need to import anything
11537
07:29:07,520 --> 07:29:09,240
since it's available directly.
11538
07:29:09,240 --> 07:29:11,400
We created our own hook known as used to do
11539
07:29:11,400 --> 07:29:13,240
to actually go ahead and do all of this.
11540
07:29:13,240 --> 07:29:14,480
Pass on as a hook.
11541
07:29:14,480 --> 07:29:15,720
Once that is all being done,
11542
07:29:15,720 --> 07:29:17,960
and now there are two cases in front of me
11543
07:29:17,960 --> 07:29:19,360
work either on the components
11544
07:29:19,360 --> 07:29:20,840
or the functionality part first.
11545
07:29:20,840 --> 07:29:23,120
I chose to work on the functionality first.
11546
07:29:23,120 --> 07:29:24,520
I always go with that.
11547
07:29:24,520 --> 07:29:26,800
So we went into app.jsx,
11548
07:29:26,800 --> 07:29:30,000
wrapped everything into the to do provider.
11549
07:29:30,040 --> 07:29:31,040
That's the easiest thing.
11550
07:29:31,040 --> 07:29:32,080
And by the way, if you remember,
11551
07:29:32,080 --> 07:29:34,760
we are having this to do provider also being exported.
11552
07:29:34,760 --> 07:29:35,600
So we need this one.
11553
07:29:35,600 --> 07:29:37,840
Otherwise we have to say to do context.provider,
11554
07:29:37,840 --> 07:29:39,320
don't want to do that.
11555
07:29:39,320 --> 07:29:42,800
So I went into app.jsx and work on with this,
11556
07:29:42,800 --> 07:29:44,880
wrapped everything we did to do provider,
11557
07:29:44,880 --> 07:29:48,440
either do it here or do it in the main.jsx,
11558
07:29:48,440 --> 07:29:49,920
totally up to you.
11559
07:29:49,920 --> 07:29:52,160
Wherever we are importing these values and things,
11560
07:29:52,160 --> 07:29:53,840
we have to import these functionality as well.
11561
07:29:53,840 --> 07:29:55,840
So we know that to dos don't need anything,
11562
07:29:55,840 --> 07:29:58,360
but add to do, update to do, delete to do and toggle,
11563
07:29:58,360 --> 07:30:00,120
we'd need to write the functionality somewhere.
11564
07:30:00,120 --> 07:30:02,880
So we chose app.jsx for that one.
11565
07:30:02,880 --> 07:30:04,080
Add to do, pretty simple.
11566
07:30:04,080 --> 07:30:07,680
We just added to dos from the set to dos, very basic.
11567
07:30:07,680 --> 07:30:09,080
Update is very basic.
11568
07:30:09,080 --> 07:30:12,600
We discussed on that, delete and toggle as well.
11569
07:30:12,600 --> 07:30:14,400
The important part was the use effect.
11570
07:30:14,400 --> 07:30:16,840
We used to use effect in this one.
11571
07:30:16,840 --> 07:30:19,640
This use effect will run as soon as the component will mount.
11572
07:30:19,640 --> 07:30:21,920
Since there is no dependency array inside this one,
11573
07:30:21,920 --> 07:30:23,720
this will never run again.
11574
07:30:23,720 --> 07:30:25,520
If to dos has a dependency array,
11575
07:30:25,520 --> 07:30:27,800
then it always run again
11576
07:30:27,800 --> 07:30:30,040
if there's a change in that dependency array
11577
07:30:30,040 --> 07:30:32,440
or any value inside the dependency array.
11578
07:30:32,440 --> 07:30:33,560
So this one use effect,
11579
07:30:33,560 --> 07:30:36,680
we want that I want to add or inject the to dos
11580
07:30:36,680 --> 07:30:39,200
as soon as there's a change in this state,
11581
07:30:39,200 --> 07:30:40,240
which is a to dos.
11582
07:30:40,240 --> 07:30:42,880
So that's why use to use effect, common thing.
11583
07:30:42,880 --> 07:30:44,520
You'll see this quite a lot.
11584
07:30:44,520 --> 07:30:46,920
After that, we started to build our components.
11585
07:30:46,920 --> 07:30:49,920
And the first we take down is a to do form, very easy.
11586
07:30:49,920 --> 07:30:52,120
All we had to do is work on just one functionality,
11587
07:30:52,120 --> 07:30:53,440
which is add to do, pretty simple.
11588
07:30:53,440 --> 07:30:55,560
We brought it in from the context.
11589
07:30:55,560 --> 07:30:56,480
And we simply say is,
11590
07:30:56,720 --> 07:30:58,120
when the add method is being called,
11591
07:30:58,120 --> 07:30:59,200
somebody clicks on that,
11592
07:30:59,200 --> 07:31:00,880
just run this add it to do,
11593
07:31:00,880 --> 07:31:03,960
which is context and pass on the data, that's it.
11594
07:31:03,960 --> 07:31:05,120
Then we worked on the to do item,
11595
07:31:05,120 --> 07:31:06,760
which is a singular item.
11596
07:31:06,760 --> 07:31:08,280
We spend a lot of time in understanding
11597
07:31:08,280 --> 07:31:10,160
the contextual part of it,
11598
07:31:10,160 --> 07:31:12,360
the conditional rendering of the elements.
11599
07:31:12,360 --> 07:31:14,520
This one was basic because we want to control that
11600
07:31:14,520 --> 07:31:16,320
whether the to do is editable or not,
11601
07:31:16,320 --> 07:31:17,840
what's the to do message
11602
07:31:17,840 --> 07:31:20,480
and what happens with the functionality as well.
11603
07:31:20,480 --> 07:31:22,720
So functionality we brought in from use to do.
11604
07:31:22,720 --> 07:31:24,960
The rest of the things is just managing the visual aspect
11605
07:31:24,960 --> 07:31:26,720
and the UI aspect of it.
11606
07:31:26,720 --> 07:31:28,440
So we worked on the edit to do functionality
11607
07:31:28,440 --> 07:31:29,960
and toggle complete, nothing much.
11608
07:31:29,960 --> 07:31:31,240
You could have done the toggle complete
11609
07:31:31,240 --> 07:31:33,560
inside there as well, but I chose to do it here.
11610
07:31:33,560 --> 07:31:35,840
Again, a random choice.
11611
07:31:35,840 --> 07:31:38,640
And in here we worked on simple things.
11612
07:31:38,640 --> 07:31:41,480
For example, should everything be will be striked off
11613
07:31:41,480 --> 07:31:45,080
or not based on conditional rendering of the CSS.
11614
07:31:45,080 --> 07:31:46,040
Input box.
11615
07:31:46,040 --> 07:31:47,400
So this input box is checked.
11616
07:31:47,400 --> 07:31:49,200
Should it be checked or not?
11617
07:31:49,200 --> 07:31:50,360
To do will tell me.
11618
07:31:50,360 --> 07:31:51,880
I'll just ask to to do.
11619
07:31:51,880 --> 07:31:53,940
To do dot completed, are you completed or not?
11620
07:31:53,940 --> 07:31:55,620
Based on that, we'll get that.
11621
07:31:55,620 --> 07:31:57,220
Then we have this nice thing,
11622
07:31:57,220 --> 07:31:59,740
which is having a lot of conditional rendering.
11623
07:31:59,740 --> 07:32:01,700
Majorly the outline around it.
11624
07:32:01,700 --> 07:32:02,700
So if there is no outline,
11625
07:32:02,700 --> 07:32:04,540
the input field looks like a text itself.
11626
07:32:04,540 --> 07:32:06,420
So we actually use that.
11627
07:32:06,420 --> 07:32:07,900
Value will get from the state.
11628
07:32:07,900 --> 07:32:10,260
On change will be governed by the set to do message.
11629
07:32:10,260 --> 07:32:12,020
And is it read only or not?
11630
07:32:12,020 --> 07:32:13,260
That's awesome.
11631
07:32:13,260 --> 07:32:14,980
After that, we have a couple of buttons.
11632
07:32:14,980 --> 07:32:16,540
The button will be a save button
11633
07:32:16,540 --> 07:32:20,380
or the edit button depends on is it to do editable or not.
11634
07:32:20,380 --> 07:32:22,020
And then the delete button.
11635
07:32:22,020 --> 07:32:22,940
So that is it.
11636
07:32:22,980 --> 07:32:23,900
A lot of functionality.
11637
07:32:23,900 --> 07:32:25,660
Don't worry about the CSS part of it.
11638
07:32:25,660 --> 07:32:27,460
If yours doesn't look exactly mine,
11639
07:32:27,460 --> 07:32:28,860
just look at the GitHub repository.
11640
07:32:28,860 --> 07:32:29,700
I'll be pushing that.
11641
07:32:29,700 --> 07:32:31,540
In fact, that would be a good thing to do.
11642
07:32:31,540 --> 07:32:35,240
I'll just go ahead and add everything in here.
11643
07:32:35,240 --> 07:32:39,120
And we'll say added another,
11644
07:32:40,480 --> 07:32:45,480
add another app with context and local storage.
11645
07:32:53,020 --> 07:32:54,220
Okay.
11646
07:32:54,220 --> 07:32:55,220
And this is app time.
11647
07:32:55,220 --> 07:32:57,180
So I'll just mention that app time.
11648
07:32:57,180 --> 07:32:58,100
Oh, too much.
11649
07:32:59,580 --> 07:33:00,580
I'll just remove this.
11650
07:33:00,580 --> 07:33:01,460
Okay.
11651
07:33:01,460 --> 07:33:03,020
So let's just go ahead and commit this
11652
07:33:03,020 --> 07:33:06,180
so you can find everything on my GitHub repository.
11653
07:33:06,180 --> 07:33:07,020
Okay.
11654
07:33:07,020 --> 07:33:07,860
Pushed it.
11655
07:33:07,860 --> 07:33:08,700
So there we go.
11656
07:33:08,700 --> 07:33:11,100
So now I hope that you are pretty much more aware
11657
07:33:11,100 --> 07:33:12,900
of the flow of the application
11658
07:33:12,900 --> 07:33:14,940
as well as how the context part
11659
07:33:14,940 --> 07:33:16,280
of the application works through that.
11660
07:33:16,280 --> 07:33:18,540
I hope that has given you great, great insight
11661
07:33:18,540 --> 07:33:19,960
of the React application,
11662
07:33:19,960 --> 07:33:21,260
some inner working of the React,
11663
07:33:21,260 --> 07:33:23,780
especially the use effect hook and whatnot.
11664
07:33:23,780 --> 07:33:25,700
In the next video, from the next video itself,
11665
07:33:25,700 --> 07:33:27,300
we'll be starting our mega project,
11666
07:33:27,300 --> 07:33:29,340
which will give you a lot of ton of insight
11667
07:33:29,340 --> 07:33:31,780
of how to build a full stack application.
11668
07:33:31,780 --> 07:33:33,620
We'll be using obviously the app right for it.
11669
07:33:33,620 --> 07:33:36,520
So let me walk you through about that in the next video.
11670
07:33:40,460 --> 07:33:41,440
All right.
11671
07:33:41,440 --> 07:33:42,280
Hey there, everyone.
11672
07:33:42,280 --> 07:33:44,340
Hitesh here back again with another video
11673
07:33:44,340 --> 07:33:48,180
and welcome to the continuation of our React series.
11674
07:33:48,180 --> 07:33:50,620
So far, we have studied quite a lot about the React,
11675
07:33:50,640 --> 07:33:54,180
quite an in-depth series about how we can build applications
11676
07:33:54,180 --> 07:33:56,260
with the React, how the React internal works
11677
07:33:56,260 --> 07:33:58,060
and pretty much a lot of things.
11678
07:33:58,060 --> 07:33:59,260
Now from this video onwards,
11679
07:33:59,260 --> 07:34:02,020
we are moving into a journey where we actually utilize
11680
07:34:02,020 --> 07:34:04,380
all the things that we have grabbed so far
11681
07:34:04,380 --> 07:34:07,460
and put this into a use of building a software,
11682
07:34:07,460 --> 07:34:10,020
building or using the development skills.
11683
07:34:10,020 --> 07:34:11,780
This is exactly what a lot of people miss
11684
07:34:11,780 --> 07:34:14,420
that how to actually transform your learnings
11685
07:34:14,420 --> 07:34:16,220
and knowledge into the development skills.
11686
07:34:16,220 --> 07:34:18,180
And this is known as development.
11687
07:34:18,180 --> 07:34:19,460
In this video, I'll walk you through
11688
07:34:19,460 --> 07:34:20,420
what we are about to build
11689
07:34:21,060 --> 07:34:23,060
and what all skills you are going to be learning
11690
07:34:23,060 --> 07:34:24,420
throughout this one.
11691
07:34:24,420 --> 07:34:26,860
By the way, we are building a full stack application
11692
07:34:26,860 --> 07:34:28,540
using React and for the backend,
11693
07:34:28,540 --> 07:34:32,360
we are using everybody's favorite and open source app, right?
11694
07:34:32,360 --> 07:34:33,900
So I'll walk you through what the idea
11695
07:34:33,900 --> 07:34:37,080
behind this application and I will be focusing more
11696
07:34:37,080 --> 07:34:38,860
on the generalized knowledge.
11697
07:34:38,860 --> 07:34:42,100
This means after watching this entire few videos
11698
07:34:42,100 --> 07:34:43,760
and the entire project,
11699
07:34:43,760 --> 07:34:46,580
you will be able to build any kind of social media app.
11700
07:34:46,580 --> 07:34:48,760
You don't need to watch any other videos after this,
11701
07:34:48,760 --> 07:34:50,320
you will have full knowledge.
11702
07:34:51,080 --> 07:34:53,360
By the way, just imagine what is Facebook?
11703
07:34:53,360 --> 07:34:56,440
Just some text and images, that's basically it.
11704
07:34:56,440 --> 07:34:57,920
What is a Twitter?
11705
07:34:57,920 --> 07:34:59,760
Just some text and images.
11706
07:34:59,760 --> 07:35:02,980
So it doesn't really matter how the website looks like,
11707
07:35:02,980 --> 07:35:04,920
end of the day, it's just a social media
11708
07:35:04,920 --> 07:35:07,720
which is empowering you with some kind of text
11709
07:35:07,720 --> 07:35:08,800
and some images.
11710
07:35:08,800 --> 07:35:10,380
The same goes for the blog article.
11711
07:35:10,380 --> 07:35:12,520
So if you know the ins and outs
11712
07:35:12,520 --> 07:35:14,200
of how to build a blog application
11713
07:35:14,200 --> 07:35:16,680
with some text and some images,
11714
07:35:16,680 --> 07:35:19,240
you pretty much can build any kind of social media app
11715
07:35:19,260 --> 07:35:20,100
as well.
11716
07:35:20,100 --> 07:35:21,120
Definitely on top of that,
11717
07:35:21,120 --> 07:35:23,320
there could be so much more that you can do,
11718
07:35:23,320 --> 07:35:25,660
but at least a basic building block could be ready.
11719
07:35:25,660 --> 07:35:28,200
And that's exactly what we'll be learning in this video.
11720
07:35:28,200 --> 07:35:30,520
So let me first show you what we are going to do.
11721
07:35:30,520 --> 07:35:31,720
So let me share my screen.
11722
07:35:31,720 --> 07:35:33,680
So this is where we'll be building.
11723
07:35:33,680 --> 07:35:35,320
By the way, in case you haven't noticed,
11724
07:35:35,320 --> 07:35:37,600
we are already on the 10th app.
11725
07:35:37,600 --> 07:35:38,900
So we have done with that.
11726
07:35:38,900 --> 07:35:41,360
This one is going to be technically our 11th app,
11727
07:35:41,360 --> 07:35:43,520
but I want to show you something more.
11728
07:35:43,520 --> 07:35:45,880
First thing, although you have completed the series,
11729
07:35:45,880 --> 07:35:47,840
I expect that you have completed the series
11730
07:35:47,840 --> 07:35:50,120
in all the playlist manner that I have uploaded.
11731
07:35:50,120 --> 07:35:51,800
So quite a lot of long playlist
11732
07:35:51,800 --> 07:35:53,880
that we have gone through with the long videos,
11733
07:35:53,880 --> 07:35:55,520
26 minutes to 40 minutes,
11734
07:35:55,520 --> 07:35:58,160
there's a lot of range in that.
11735
07:35:58,160 --> 07:35:59,600
Only recommendation is,
11736
07:35:59,600 --> 07:36:01,840
if you're watching it in the continuation,
11737
07:36:01,840 --> 07:36:03,940
I'm not sure that whether you have seen this video
11738
07:36:03,940 --> 07:36:05,760
at the very end or at the very last,
11739
07:36:05,760 --> 07:36:07,020
wherever you're watching it,
11740
07:36:07,020 --> 07:36:09,300
after finishing up your context API,
11741
07:36:09,300 --> 07:36:11,920
go and watch my Redux toolkit in one hour.
11742
07:36:11,920 --> 07:36:13,360
This is a crash course on Redux
11743
07:36:13,360 --> 07:36:15,080
where I've talked quite an in depth
11744
07:36:15,080 --> 07:36:16,900
about how Redux toolkit works
11745
07:36:16,900 --> 07:36:17,940
and the setup of it,
11746
07:36:17,940 --> 07:36:20,220
different ways of handling the situation.
11747
07:36:20,220 --> 07:36:22,020
This is going to be a little bit requirements.
11748
07:36:22,020 --> 07:36:23,740
So in case you haven't yet watched it,
11749
07:36:23,740 --> 07:36:25,300
go ahead, watch it in the playlist.
11750
07:36:25,300 --> 07:36:27,540
If you're watching this entire video in just one go,
11751
07:36:27,540 --> 07:36:29,820
go ahead and watch this one as well.
11752
07:36:29,820 --> 07:36:31,700
And then you can move on to this video,
11753
07:36:31,700 --> 07:36:33,860
which is obviously the next in the playlist.
11754
07:36:33,860 --> 07:36:35,660
So what we'll be building up?
11755
07:36:35,660 --> 07:36:37,900
We'll be building up this small application.
11756
07:36:37,900 --> 07:36:40,460
And again, our focus is not on the UI part,
11757
07:36:40,460 --> 07:36:42,360
but rather more on the functionality part.
11758
07:36:42,360 --> 07:36:44,980
In your UI, there might be two cards in one row.
11759
07:36:44,980 --> 07:36:47,060
In our UI, it might be four cards.
11760
07:36:47,060 --> 07:36:47,900
Doesn't really matter.
11761
07:36:47,900 --> 07:36:50,460
This is exactly the functionality we are looking up for.
11762
07:36:50,460 --> 07:36:52,540
This is our homepage where there will be a display
11763
07:36:52,540 --> 07:36:54,220
of the card which displays the title
11764
07:36:54,220 --> 07:36:55,940
as well as a preview of the images,
11765
07:36:55,940 --> 07:36:57,320
not the actual images.
11766
07:36:57,320 --> 07:36:59,540
This is something which is given to you by App Right
11767
07:36:59,540 --> 07:37:02,480
as kind of an easier way to handle images
11768
07:37:02,480 --> 07:37:05,340
so that not the entire image is being transferred to you,
11769
07:37:05,340 --> 07:37:06,740
but a preview version of it,
11770
07:37:06,740 --> 07:37:08,900
which is a little bit of a lesser quality.
11771
07:37:08,900 --> 07:37:11,580
Once you click on this, any of this AI or anything,
11772
07:37:11,580 --> 07:37:13,200
wherever you want to visit this,
11773
07:37:13,200 --> 07:37:14,600
this gives you a full blown image,
11774
07:37:14,600 --> 07:37:15,560
which is larger.
11775
07:37:15,560 --> 07:37:16,900
And that's why the bigger one,
11776
07:37:16,900 --> 07:37:19,040
because I wanted to show this exaggerately
11777
07:37:19,040 --> 07:37:20,240
that this is a larger one.
11778
07:37:20,240 --> 07:37:24,160
And you can see this is where we have our text data.
11779
07:37:24,160 --> 07:37:25,960
Our text data is very, very small.
11780
07:37:25,960 --> 07:37:28,080
I just wanted to show you that you can actually store
11781
07:37:28,080 --> 07:37:29,840
the way how this is being bowled out.
11782
07:37:29,840 --> 07:37:31,560
So yes, this is also done.
11783
07:37:31,560 --> 07:37:34,000
Not only that, this project has some of the issues
11784
07:37:34,000 --> 07:37:35,900
which are intentionally left in this one
11785
07:37:35,900 --> 07:37:38,560
so that you can actually work on them and work on that.
11786
07:37:38,560 --> 07:37:41,280
So that you saw that briefly login to read post.
11787
07:37:41,280 --> 07:37:44,940
So there's an intentional error being shown there.
11788
07:37:44,940 --> 07:37:46,960
And by the way, I will give you the entire list
11789
07:37:46,960 --> 07:37:49,040
of where the bugs are and how you can fix them.
11790
07:37:49,040 --> 07:37:50,740
Entire walkthrough will be given to you.
11791
07:37:50,740 --> 07:37:52,640
But these are the things that you have to walk through
11792
07:37:52,640 --> 07:37:53,680
and you have to learn through.
11793
07:37:53,680 --> 07:37:56,360
I've seen that when I recorded this entire series
11794
07:37:56,360 --> 07:37:58,900
in different language and people actually appreciated
11795
07:37:58,900 --> 07:38:00,720
that, okay, now we have some work to do.
11796
07:38:00,720 --> 07:38:02,120
And they got excited.
11797
07:38:02,120 --> 07:38:03,560
And if I click on this latest one,
11798
07:38:03,560 --> 07:38:05,200
you can see this is uploaded by me.
11799
07:38:05,200 --> 07:38:07,880
So obviously I get the edit and delete control over that,
11800
07:38:07,880 --> 07:38:09,040
not for the other people.
11801
07:38:09,040 --> 07:38:11,160
So that's a great idea of how things are done.
11802
07:38:11,160 --> 07:38:13,120
Here we can see we are storing more information
11803
07:38:13,120 --> 07:38:15,120
like there is a color control, there's all of that.
11804
07:38:15,120 --> 07:38:17,040
So we have a full fledged editor
11805
07:38:17,040 --> 07:38:19,940
that we are going to be using along with the React.
11806
07:38:19,940 --> 07:38:22,260
Of course, we have the logout and sign up functionality
11807
07:38:22,260 --> 07:38:24,440
and sign in functionality powered by app, right?
11808
07:38:24,440 --> 07:38:26,080
I'll walk you through with that as well.
11809
07:38:26,080 --> 07:38:27,320
When I click on the add post,
11810
07:38:27,320 --> 07:38:30,000
we can see that we have this add post that we have.
11811
07:38:30,000 --> 07:38:31,960
We have the full control of WYSIWYG editor,
11812
07:38:31,960 --> 07:38:34,320
what you see, what you get kind of editor.
11813
07:38:34,320 --> 07:38:35,240
We can store that.
11814
07:38:35,240 --> 07:38:37,820
We have a slug which works automatically.
11815
07:38:37,820 --> 07:38:39,240
We can have a nice slug
11816
07:38:39,240 --> 07:38:42,920
which automatically converts whatever the URL
11817
07:38:42,920 --> 07:38:46,560
or our title is into a URL format with the dashes.
11818
07:38:46,560 --> 07:38:48,640
So there is a little bit of logic writing
11819
07:38:48,640 --> 07:38:49,840
that you will be learning in this one.
11820
07:38:49,840 --> 07:38:53,200
So quite a lot of intriguing details are there.
11821
07:38:53,200 --> 07:38:55,760
For this entire one, we are using app right end to end.
11822
07:38:55,760 --> 07:38:58,400
This entire things are stored in the database like this.
11823
07:38:58,400 --> 07:39:00,640
I'll walk you through how the database are being created,
11824
07:39:00,640 --> 07:39:03,220
how you can use them, authentication features.
11825
07:39:03,220 --> 07:39:06,560
End to end, the full backend is powered by the app right.
11826
07:39:06,560 --> 07:39:08,620
It's free and we will be using that.
11827
07:39:08,620 --> 07:39:10,460
So if I click on this,
11828
07:39:10,460 --> 07:39:13,100
this is where we have entire authentication details.
11829
07:39:13,100 --> 07:39:15,740
We are having all these four, five random names
11830
07:39:15,740 --> 07:39:17,100
of the users, but if we wish,
11831
07:39:17,100 --> 07:39:19,940
we can go ahead and use other services for this.
11832
07:39:19,940 --> 07:39:22,220
For example, in the settings, we have a lot more options.
11833
07:39:22,220 --> 07:39:25,520
Just have to click and enable small pieces of code
11834
07:39:25,520 --> 07:39:26,820
that I have to inject and that's it.
11835
07:39:26,820 --> 07:39:30,120
It supports so many crazy how much it supports.
11836
07:39:30,120 --> 07:39:31,860
And we will be using authentication.
11837
07:39:31,860 --> 07:39:33,380
We'll be using database services.
11838
07:39:33,380 --> 07:39:36,020
We'll be using the storage services as well.
11839
07:39:36,020 --> 07:39:37,860
So this will give you enough of idea
11840
07:39:37,860 --> 07:39:40,340
that how to use storage, how to use authentication
11841
07:39:40,340 --> 07:39:42,140
and how to use databases.
11842
07:39:42,140 --> 07:39:43,260
Rest of them, I don't think so.
11843
07:39:43,260 --> 07:39:44,900
There is too much of tutorial required.
11844
07:39:44,900 --> 07:39:48,340
Once you know how to do A, B and C in one format,
11845
07:39:48,340 --> 07:39:50,160
you can figure out how to do the D one.
11846
07:39:50,160 --> 07:39:52,760
So that's the goal of this series.
11847
07:39:52,760 --> 07:39:54,660
So again, I'm super, super excited
11848
07:39:54,660 --> 07:39:55,940
that we are going to get started
11849
07:39:55,940 --> 07:39:57,540
and we are going to build this one.
11850
07:39:57,540 --> 07:40:00,580
Again, my recommendation is we will be focusing more
11851
07:40:00,580 --> 07:40:03,460
on the functionality part, the UI part.
11852
07:40:03,460 --> 07:40:05,780
It's purely, purely based on the tailwind.
11853
07:40:05,820 --> 07:40:08,020
I highly recommend you to give it a different look
11854
07:40:08,020 --> 07:40:09,300
that what I've given you.
11855
07:40:09,300 --> 07:40:10,920
A lot of other students have done that
11856
07:40:10,920 --> 07:40:13,380
and they have found that it's a great result.
11857
07:40:13,380 --> 07:40:16,620
They have learned so much more just by modifying the UI.
11858
07:40:16,620 --> 07:40:18,220
It gives them so much of confidence.
11859
07:40:18,220 --> 07:40:20,500
Of course, I'll be giving you assignments as well,
11860
07:40:20,500 --> 07:40:23,060
but I'm super excited to get started with this one.
11861
07:40:23,060 --> 07:40:23,900
So in the next video,
11862
07:40:23,900 --> 07:40:27,420
we'll set up a simple boilerplate react template.
11863
07:40:27,420 --> 07:40:29,660
We'll connect our app right with that.
11864
07:40:29,660 --> 07:40:32,180
We'll start everything from the scratch and the fresh.
11865
07:40:32,180 --> 07:40:33,620
And I'm pretty excited
11866
07:40:33,620 --> 07:40:35,740
that you are also following this up so far
11867
07:40:35,740 --> 07:40:36,940
and I'm pretty sure you'll be following
11868
07:40:36,940 --> 07:40:38,220
in the next one as well.
11869
07:40:38,220 --> 07:40:39,700
In case you are enjoying these series,
11870
07:40:39,700 --> 07:40:40,900
please share them on LinkedIn
11871
07:40:40,900 --> 07:40:43,400
and also do hit me in the comment section as well.
11872
07:40:43,400 --> 07:40:45,980
Just a model support a heart would be really nice.
11873
07:40:45,980 --> 07:40:47,340
So that's it for this video.
11874
07:40:47,340 --> 07:40:48,940
Let's catch up in the next one.
11875
07:40:51,940 --> 07:40:52,780
Hey there, everyone.
11876
07:40:52,780 --> 07:40:54,920
They share back again with another video
11877
07:40:54,920 --> 07:40:58,380
and welcome to the continuation of our react series.
11878
07:40:58,380 --> 07:41:00,660
So in this video, we'll just create a fresh app.
11879
07:41:00,660 --> 07:41:02,180
We'll peek into a little bit
11880
07:41:02,180 --> 07:41:04,040
of the documentation of app, right?
11881
07:41:04,040 --> 07:41:06,320
And it's actually surprisingly good
11882
07:41:06,320 --> 07:41:08,040
that their documentation was already good,
11883
07:41:08,040 --> 07:41:11,040
but they have still rewritten the entire one
11884
07:41:11,040 --> 07:41:12,160
and I'm loving the new one.
11885
07:41:12,160 --> 07:41:14,000
So we'll go through with that
11886
07:41:14,000 --> 07:41:16,880
and the entire documentation study that we are going to do
11887
07:41:16,880 --> 07:41:18,760
and with the code that we'll be writing
11888
07:41:18,760 --> 07:41:21,120
is going to be 100% reusable.
11889
07:41:21,120 --> 07:41:23,560
So whether you are building any app in Flutter
11890
07:41:23,560 --> 07:41:25,000
or maybe in React Native
11891
07:41:25,000 --> 07:41:26,680
or anything else that you're going through,
11892
07:41:26,680 --> 07:41:28,320
the concepts will remain same.
11893
07:41:28,320 --> 07:41:29,720
If the programming language changes,
11894
07:41:29,720 --> 07:41:31,800
then obviously you can find the things equivalent
11895
07:41:31,800 --> 07:41:33,200
in your language as well.
11896
07:41:33,200 --> 07:41:34,160
But in most of the case,
11897
07:41:34,160 --> 07:41:36,600
anything related to JavaScript, TypeScript,
11898
07:41:36,600 --> 07:41:38,840
they are going to be very, very same.
11899
07:41:38,840 --> 07:41:41,880
So let's go with that and let me share the screen
11900
07:41:41,880 --> 07:41:43,280
and walk you through with that.
11901
07:41:43,280 --> 07:41:45,560
So first, let's go ahead and create a new app.
11902
07:41:45,560 --> 07:41:47,440
So obviously we are using Vite.
11903
07:41:47,440 --> 07:41:49,580
So NPM create Vite at latest.
11904
07:41:49,580 --> 07:41:51,200
That is what we have been using
11905
07:41:51,200 --> 07:41:53,000
and that's exactly what you're using.
11906
07:41:53,000 --> 07:41:54,280
By the way, with this one,
11907
07:41:54,280 --> 07:41:56,640
I'm targeting the people who probably
11908
07:41:56,640 --> 07:41:59,080
might have not watched my previous videos.
11909
07:41:59,080 --> 07:42:00,240
That's also fine.
11910
07:42:00,240 --> 07:42:02,440
If you're just starting from here, that's also fine.
11911
07:42:02,440 --> 07:42:04,480
There will be a few concepts which I'll point towards,
11912
07:42:04,480 --> 07:42:06,240
say this was covered in previous video or something,
11913
07:42:06,240 --> 07:42:07,780
you can watch it at that time.
11914
07:42:07,780 --> 07:42:09,760
Otherwise it would be a fantastic experience
11915
07:42:09,760 --> 07:42:12,720
in working together and building a full fledged application,
11916
07:42:12,720 --> 07:42:14,440
a full stack application.
11917
07:42:14,440 --> 07:42:17,120
So let's call this one as 11th app.
11918
07:42:17,120 --> 07:42:18,600
That's basically our 11th app,
11919
07:42:18,600 --> 07:42:23,320
but hey, let's go ahead and start my terminal here.
11920
07:42:23,320 --> 07:42:24,960
We have a lot of one here.
11921
07:42:24,960 --> 07:42:27,520
We'll be just going with the create Vite latest.
11922
07:42:27,520 --> 07:42:29,860
I think that's good one.
11923
07:42:29,860 --> 07:42:33,820
And let's call this one as 11th blog app.
11924
07:42:33,820 --> 07:42:37,220
Blog app, yeah, fine, good name.
11925
07:42:37,220 --> 07:42:40,060
We'll be using of course React and yes, no,
11926
07:42:40,060 --> 07:42:42,440
we are not going to be TypeScript in this one.
11927
07:42:42,440 --> 07:42:44,140
Yes, I know, I do have a series
11928
07:42:44,140 --> 07:42:45,140
on TypeScript on this channel.
11929
07:42:45,140 --> 07:42:47,440
It got really popular on the free code camp as well,
11930
07:42:47,440 --> 07:42:50,280
but we'll be going with JavaScript in this one.
11931
07:42:50,280 --> 07:42:53,420
And what I want to do is I just want to kill this terminal
11932
07:42:53,420 --> 07:42:54,940
and I want to open this up,
11933
07:42:54,940 --> 07:42:56,960
right click and open an integrated terminal.
11934
07:42:56,960 --> 07:42:59,660
That way I don't have to do CD and all those stuff.
11935
07:43:00,100 --> 07:43:02,100
And I'm into this, I can just do an LS
11936
07:43:02,100 --> 07:43:03,980
and I can just say NPM install.
11937
07:43:03,980 --> 07:43:07,020
This is going to obviously install everything for us.
11938
07:43:07,020 --> 07:43:10,700
And we need Tailwind for this one as well.
11939
07:43:10,700 --> 07:43:14,340
So let's go into Tailwind CSS,
11940
07:43:14,340 --> 07:43:15,660
quickly go into the docs.
11941
07:43:15,660 --> 07:43:17,420
That's how I always recommend everybody
11942
07:43:17,420 --> 07:43:19,100
to just go look into the docs,
11943
07:43:19,100 --> 07:43:20,660
figure out how things works.
11944
07:43:20,660 --> 07:43:22,620
In this one, we have already done this kind of a thing.
11945
07:43:22,620 --> 07:43:25,140
So we'll be going with this command now.
11946
07:43:25,140 --> 07:43:26,860
So let's go ahead and copy this
11947
07:43:26,860 --> 07:43:30,140
so that we have the Tailwind setup being done.
11948
07:43:30,140 --> 07:43:32,480
So this is the part one of Tailwind setup.
11949
07:43:32,480 --> 07:43:35,560
The part two is to have the configuration file
11950
07:43:35,560 --> 07:43:38,260
and set up so that it knows where probably
11951
07:43:38,260 --> 07:43:40,260
you will be writing your Tailwind files
11952
07:43:40,260 --> 07:43:44,300
or Tailwind commands, utilities, wherever you see that.
11953
07:43:44,300 --> 07:43:45,300
All right.
11954
07:43:45,300 --> 07:43:47,420
So in this one, I have the Tailwind config.
11955
07:43:47,420 --> 07:43:49,280
Go ahead and change the content part.
11956
07:43:49,280 --> 07:43:50,740
Don't forget the trailing comma.
11957
07:43:50,740 --> 07:43:51,900
This is pretty important.
11958
07:43:51,900 --> 07:43:53,140
So go ahead and do that.
11959
07:43:53,140 --> 07:43:55,700
Once you're done with this, then in the index.css,
11960
07:43:55,700 --> 07:43:58,420
we need these directives being placed.
11961
07:43:58,420 --> 07:44:00,940
Yes, with the add the rate, they are called as directives.
11962
07:44:00,940 --> 07:44:04,100
So we'll go into the main file where all of my CSS is there.
11963
07:44:04,100 --> 07:44:06,380
In my case, it's inside the source
11964
07:44:06,380 --> 07:44:08,740
and I do have index.css.
11965
07:44:08,740 --> 07:44:09,700
We'll replace everything
11966
07:44:09,700 --> 07:44:12,260
and place our directives there, save that.
11967
07:44:12,260 --> 07:44:13,100
And that's it.
11968
07:44:13,100 --> 07:44:15,820
Now I'm technically allowed to run npm run dev
11969
07:44:15,820 --> 07:44:17,660
to have my application up and running.
11970
07:44:17,660 --> 07:44:21,300
We'll be doing that, but that's the basic configuration.
11971
07:44:21,300 --> 07:44:24,640
The next step is to have app right being installed.
11972
07:44:24,680 --> 07:44:26,920
Now installing app right is pretty straightforward.
11973
07:44:26,920 --> 07:44:28,840
There is nothing too much to discuss on that.
11974
07:44:28,840 --> 07:44:31,640
It just says npm install app right.
11975
07:44:31,640 --> 07:44:32,480
And that's it.
11976
07:44:32,480 --> 07:44:34,200
That is the easiest part.
11977
07:44:34,200 --> 07:44:36,580
Now you might be wondering that we are into React,
11978
07:44:36,580 --> 07:44:38,180
which is pure front end.
11979
07:44:38,180 --> 07:44:40,400
So what does this app right is going to do?
11980
07:44:40,400 --> 07:44:43,240
This app right package in itself will allow you to talk
11981
07:44:43,240 --> 07:44:46,160
to the backend part, backend as a service, which is app right.
11982
07:44:46,160 --> 07:44:47,660
This is a very common thing
11983
07:44:47,660 --> 07:44:49,840
in case you have used any backend as a service
11984
07:44:49,840 --> 07:44:52,680
in which we focus majorly on the front end part,
11985
07:44:52,680 --> 07:44:54,040
not on the backend side.
11986
07:44:54,040 --> 07:44:56,480
So backend part is handled by the app right.
11987
07:44:56,480 --> 07:44:59,400
But in order to talk to that, we need the app right.
11988
07:44:59,400 --> 07:45:00,620
So that's what we have.
11989
07:45:00,620 --> 07:45:02,640
Let's quickly check our package.json
11990
07:45:02,640 --> 07:45:05,020
so that we can verify things are doing good
11991
07:45:05,020 --> 07:45:07,160
and we are okay with that.
11992
07:45:07,160 --> 07:45:09,680
All right, so in the dependencies we have app right.
11993
07:45:09,680 --> 07:45:11,000
That's exactly what we want.
11994
07:45:11,000 --> 07:45:13,920
And in the dev dependencies we have tailwind and all.
11995
07:45:13,920 --> 07:45:15,400
All of that, we are happy with that.
11996
07:45:15,400 --> 07:45:18,480
So app right is the only thing that we require right now.
11997
07:45:18,480 --> 07:45:20,440
Now we'll be needing a couple of things here.
11998
07:45:20,440 --> 07:45:22,920
So inside the blog, I'll be just creating
11999
07:45:22,960 --> 07:45:23,880
a couple of new files.
12000
07:45:23,880 --> 07:45:25,880
Let me go ahead and first create that.
12001
07:45:25,880 --> 07:45:27,920
First is going to be .env.
12002
07:45:27,920 --> 07:45:29,720
That's my environment variable.
12003
07:45:29,720 --> 07:45:30,560
I'll walk you through that,
12004
07:45:30,560 --> 07:45:32,760
how you can deploy this application on WordCell
12005
07:45:32,760 --> 07:45:35,600
or Netlify, whichever works for you.
12006
07:45:35,600 --> 07:45:36,960
I'll show with the WordCell.
12007
07:45:36,960 --> 07:45:39,440
So these environment variables are very important
12008
07:45:39,440 --> 07:45:40,280
at that point of time.
12009
07:45:40,280 --> 07:45:43,000
So that sensitive information or data is not exposed
12010
07:45:43,000 --> 07:45:44,760
in the GitHub and all of that.
12011
07:45:44,760 --> 07:45:46,720
I will also create another new file
12012
07:45:46,720 --> 07:45:48,720
because I want to give all this data to you.
12013
07:45:48,720 --> 07:45:50,320
So I'll be saying that .env
12014
07:45:51,240 --> 07:45:53,960
and I'll be creating a .sample.
12015
07:45:53,960 --> 07:45:58,120
So this is a sample file which is meant to be given to you
12016
07:45:58,120 --> 07:46:00,000
so that you actually work with that.
12017
07:46:00,000 --> 07:46:05,000
And what I'll do is I'll just actually go up into this one
12018
07:46:05,480 --> 07:46:06,680
and this environment variable,
12019
07:46:06,680 --> 07:46:09,720
I can just right click and add this to gitignore
12020
07:46:09,720 --> 07:46:13,440
so that that file never goes out to any GitHub repository
12021
07:46:13,440 --> 07:46:15,680
because this includes some of the sensitive data
12022
07:46:15,680 --> 07:46:18,400
that I'm about to add in here, okay.
12023
07:46:18,720 --> 07:46:20,840
What kind of sensitive data you will be requiring
12024
07:46:20,840 --> 07:46:23,640
that will come from the AppRite itself.
12025
07:46:23,640 --> 07:46:25,560
So go ahead, create an account on AppRite
12026
07:46:25,560 --> 07:46:28,240
if you haven't yet, it's cloud.apprite.io,
12027
07:46:28,240 --> 07:46:30,560
pretty straightforward, pretty basic.
12028
07:46:30,560 --> 07:46:32,600
And if you just scroll at the bottom,
12029
07:46:32,600 --> 07:46:34,360
you'll find the docs one here.
12030
07:46:34,360 --> 07:46:36,240
By the way, you can just get through the docs
12031
07:46:36,240 --> 07:46:39,080
simply by apprite.io slash docs, however you want.
12032
07:46:39,080 --> 07:46:41,280
And let me walk you through how to study these docs,
12033
07:46:41,280 --> 07:46:42,800
that's an important aspect.
12034
07:46:42,800 --> 07:46:43,680
So on the left hand side,
12035
07:46:43,680 --> 07:46:45,220
you'll see that what products they offer
12036
07:46:45,220 --> 07:46:47,720
and they have authentication, database, functions
12037
07:46:47,720 --> 07:46:50,240
and storage, these are four major services.
12038
07:46:50,240 --> 07:46:51,880
There's a lot under these categories,
12039
07:46:51,880 --> 07:46:54,640
but these are major four categories that they work on.
12040
07:46:54,640 --> 07:46:56,320
In this project, we'll work on auth,
12041
07:46:56,320 --> 07:46:58,360
we'll work on database and we'll work on storage
12042
07:46:58,360 --> 07:47:00,300
so that at least three of them
12043
07:47:00,300 --> 07:47:02,880
are completely understandable by you
12044
07:47:02,880 --> 07:47:05,580
and you can explore further things more.
12045
07:47:05,580 --> 07:47:07,000
In the database, I'm not just talking
12046
07:47:07,000 --> 07:47:08,120
about touching the database,
12047
07:47:08,120 --> 07:47:10,120
I'll also walk you through how you can make queries
12048
07:47:10,120 --> 07:47:11,960
in the database so that whatever the application
12049
07:47:11,960 --> 07:47:14,480
you are building, you have the knowledge
12050
07:47:14,480 --> 07:47:16,480
so that you can explore things on your own.
12051
07:47:16,480 --> 07:47:17,960
So we'll be going through with that.
12052
07:47:17,960 --> 07:47:20,200
Now, if you go on any of these products,
12053
07:47:20,200 --> 07:47:23,020
for example, if I go into the auth,
12054
07:47:23,020 --> 07:47:25,120
now we can see that there are journeys
12055
07:47:25,120 --> 07:47:26,460
and there are references.
12056
07:47:26,460 --> 07:47:28,340
Now, journeys is something that what do you want
12057
07:47:28,340 --> 07:47:29,920
to implement in your application
12058
07:47:29,920 --> 07:47:32,940
and the APIs are what all the things I can do in that.
12059
07:47:32,940 --> 07:47:35,260
For example, in the email and login,
12060
07:47:35,260 --> 07:47:37,460
if I just click on this, it gives me the entire that,
12061
07:47:37,460 --> 07:47:39,100
hey, what do you going to need?
12062
07:47:39,100 --> 07:47:41,360
The entire project is itself there,
12063
07:47:41,360 --> 07:47:44,620
so entire source code is there and you can just see that.
12064
07:47:44,620 --> 07:47:47,580
So here we can see that what we get is a promise,
12065
07:47:47,580 --> 07:47:49,340
but what we are using is an account
12066
07:47:49,340 --> 07:47:51,900
which gets to us by this account from the app right,
12067
07:47:51,900 --> 07:47:53,180
just like this.
12068
07:47:53,180 --> 07:47:56,440
And further this, we can actually provide a user ID
12069
07:47:56,440 --> 07:47:59,560
if we don't, app right will give us one
12070
07:47:59,560 --> 07:48:01,860
and we can provide an email and password
12071
07:48:01,860 --> 07:48:03,300
to create an account of the user.
12072
07:48:03,300 --> 07:48:05,140
So this is all it requires.
12073
07:48:05,140 --> 07:48:07,100
And further, if you want to do the login,
12074
07:48:07,100 --> 07:48:09,400
the same kind of a guide is provided to you.
12075
07:48:09,400 --> 07:48:12,500
But if you want to do more with this account API,
12076
07:48:12,500 --> 07:48:14,340
you can just click on the account API
12077
07:48:14,980 --> 07:48:16,420
and can see that I can get an account,
12078
07:48:16,420 --> 07:48:18,620
I can create an account, update an email,
12079
07:48:18,620 --> 07:48:21,300
I can create a JWT token, update a username,
12080
07:48:21,300 --> 07:48:22,580
pretty much whatever I want to do,
12081
07:48:22,580 --> 07:48:25,020
delete the sessions, list the sessions.
12082
07:48:25,020 --> 07:48:26,460
There is an endpoint given to me
12083
07:48:26,460 --> 07:48:27,940
so that I don't have to worry too much.
12084
07:48:27,940 --> 07:48:30,340
For example, if I just want to see that
12085
07:48:30,340 --> 07:48:32,540
how to delete sessions, all the sessions,
12086
07:48:32,540 --> 07:48:35,340
I can click on this and this gives me the method that,
12087
07:48:35,340 --> 07:48:39,140
okay, you can use simply deleteSessionsS with the end
12088
07:48:39,140 --> 07:48:40,820
so that it deletes everything.
12089
07:48:40,820 --> 07:48:42,540
And that's it, that is going to delete.
12090
07:48:42,540 --> 07:48:44,260
So it saves me so much of the time
12091
07:48:45,060 --> 07:48:46,540
and if I know how to navigate properly,
12092
07:48:46,540 --> 07:48:49,180
it doesn't really matter if you're using a React Native,
12093
07:48:49,180 --> 07:48:51,740
React, or you're using something else,
12094
07:48:51,740 --> 07:48:53,380
it just is the same.
12095
07:48:53,380 --> 07:48:56,460
So that's a brief overview of how to actually study
12096
07:48:56,460 --> 07:48:58,580
the newer documentation and I find myself,
12097
07:48:58,580 --> 07:49:02,500
I can find exactly what I need in a much quicker time
12098
07:49:02,500 --> 07:49:05,280
with this pretty much fantastic documentation here.
12099
07:49:05,280 --> 07:49:08,780
Okay, once now that we know that how the documentation
12100
07:49:08,780 --> 07:49:10,760
and how we can traverse through them,
12101
07:49:10,760 --> 07:49:14,100
I can go into organization, which it gives to everyone,
12102
07:49:14,180 --> 07:49:15,300
the first time you create the account,
12103
07:49:15,300 --> 07:49:18,180
this is what they call account as an organization.
12104
07:49:18,180 --> 07:49:20,380
I am supposed to create a new project.
12105
07:49:20,380 --> 07:49:22,580
So let's go ahead and create an empty project.
12106
07:49:22,580 --> 07:49:25,340
I can import a project as well, but that's experimental.
12107
07:49:25,340 --> 07:49:27,660
They are always very fast in doing the things.
12108
07:49:27,660 --> 07:49:29,700
They always keep on doing some stuff.
12109
07:49:29,700 --> 07:49:31,980
I'll create an empty project and let's call this one
12110
07:49:31,980 --> 07:49:36,900
as YouTube blog, I think that's a pretty good name.
12111
07:49:36,900 --> 07:49:38,460
It also gives you a project ID.
12112
07:49:38,460 --> 07:49:40,900
We need this project ID, but I don't want to edit it,
12113
07:49:40,900 --> 07:49:42,260
although you can, if you wish,
12114
07:49:42,260 --> 07:49:44,060
you can add your own custom IDs.
12115
07:49:44,900 --> 07:49:45,740
I don't want to do that.
12116
07:49:45,740 --> 07:49:47,860
I'll just simply click on create,
12117
07:49:47,860 --> 07:49:50,220
and this is going to create a project for me.
12118
07:49:51,300 --> 07:49:54,700
And in a few seconds, hopefully my internet is,
12119
07:49:54,700 --> 07:49:59,540
oh, some of the things are actually getting uploaded.
12120
07:49:59,540 --> 07:50:02,100
So I'll just copy that, stop that for a minute.
12121
07:50:02,100 --> 07:50:03,500
And this is what I need.
12122
07:50:03,500 --> 07:50:05,020
So I can just click on the copy
12123
07:50:05,020 --> 07:50:07,460
and this is something that I'll be needing.
12124
07:50:07,460 --> 07:50:09,260
Okay, where do I need this?
12125
07:50:09,260 --> 07:50:11,620
All of these things, go ahead and follow along with me.
12126
07:50:11,620 --> 07:50:13,700
These are some required stuff from your site.
12127
07:50:13,700 --> 07:50:18,700
So, okay, Postman, no, I don't want to do any of that.
12128
07:50:19,700 --> 07:50:21,580
Okay, in the environment variable,
12129
07:50:21,580 --> 07:50:23,220
we need some variables to be put on.
12130
07:50:23,220 --> 07:50:26,020
So I'll be just adding a React underscore app,
12131
07:50:26,020 --> 07:50:30,460
and then I'll say underscore app right,
12132
07:50:30,460 --> 07:50:33,900
if I wrote that correctly, app right underscore URL.
12133
07:50:33,900 --> 07:50:36,600
And that's going to be my first variable name.
12134
07:50:36,600 --> 07:50:38,780
And similarly, we will be having a couple of others,
12135
07:50:38,780 --> 07:50:40,700
like app right project ID as well,
12136
07:50:41,700 --> 07:50:45,500
project underscore ID, and this is my project ID.
12137
07:50:45,500 --> 07:50:47,700
So what we get as a project,
12138
07:50:47,700 --> 07:50:50,220
that's exactly my project ID that I have.
12139
07:50:50,220 --> 07:50:51,660
Now, once I have the project ID,
12140
07:50:51,660 --> 07:50:54,460
the next thing is we have not worked on one thing,
12141
07:50:54,460 --> 07:50:55,960
which is the project URL.
12142
07:50:57,140 --> 07:50:59,980
Now the project URL is actually constant
12143
07:50:59,980 --> 07:51:01,100
for all the app right,
12144
07:51:01,100 --> 07:51:03,580
because the app right is hosted up here in the cloud.
12145
07:51:03,580 --> 07:51:05,060
By the way, in case you want to do
12146
07:51:05,060 --> 07:51:08,460
and find it out properly, then click on the web.
12147
07:51:08,460 --> 07:51:10,120
This is where you add your project.
12148
07:51:10,140 --> 07:51:11,880
You can add multiple of your project.
12149
07:51:11,880 --> 07:51:15,760
So my project name is, we called it what?
12150
07:51:16,640 --> 07:51:20,320
We called it as, let me just go into package.json.
12151
07:51:20,320 --> 07:51:22,440
We called it as 11 blog app.
12152
07:51:22,440 --> 07:51:25,760
Let's use the same, otherwise it's not really compulsory.
12153
07:51:25,760 --> 07:51:27,060
This is really important.
12154
07:51:27,060 --> 07:51:30,440
Right now we want to use a local host here,
12155
07:51:30,440 --> 07:51:33,920
but as you upload this exact project on vorsl,
12156
07:51:33,920 --> 07:51:36,620
Netlify, wherever, I use something similar to this.
12157
07:51:36,620 --> 07:51:39,480
So any subdomain which is coming up from vorsl,
12158
07:51:39,480 --> 07:51:41,680
any subdomain that's come from Netlify,
12159
07:51:41,680 --> 07:51:43,840
if you're not going to put this properly,
12160
07:51:43,840 --> 07:51:46,800
then there are 100% chances that you will find yourself
12161
07:51:46,800 --> 07:51:48,900
messing up with the course error.
12162
07:51:48,900 --> 07:51:52,520
So this is something which resolves it 100% necessary.
12163
07:51:52,520 --> 07:51:55,160
Please pay special attention to this one.
12164
07:51:55,160 --> 07:51:57,440
For the local host, it doesn't require any port or something.
12165
07:51:57,440 --> 07:51:58,720
You just need to get local host.
12166
07:51:58,720 --> 07:52:01,140
Notice here, it actually gives you a suggestion.
12167
07:52:01,140 --> 07:52:03,720
I hope it's visible in the screen recording.
12168
07:52:03,720 --> 07:52:04,760
Yeah, it is, it is.
12169
07:52:04,760 --> 07:52:06,320
So just add a local host.
12170
07:52:06,320 --> 07:52:07,980
So just go ahead and add a local host.
12171
07:52:07,980 --> 07:52:09,740
That's all that is required.
12172
07:52:09,740 --> 07:52:10,760
Once you are done with this,
12173
07:52:10,760 --> 07:52:12,740
now any request coming from local host
12174
07:52:12,740 --> 07:52:15,100
will be accepted in the server and it takes time.
12175
07:52:15,100 --> 07:52:17,380
Not too much, but I have noticed it takes
12176
07:52:17,380 --> 07:52:19,460
two to three minutes to propagate these changes.
12177
07:52:19,460 --> 07:52:21,300
Sometimes when I'm back to back recording,
12178
07:52:21,300 --> 07:52:22,140
it sometimes takes time.
12179
07:52:22,140 --> 07:52:24,460
So two to three minutes is usually the things
12180
07:52:24,460 --> 07:52:26,280
to propagate these changes.
12181
07:52:26,280 --> 07:52:27,540
Let's click on the next.
12182
07:52:27,540 --> 07:52:28,980
Now, npm install app, right?
12183
07:52:28,980 --> 07:52:30,500
We have already done that.
12184
07:52:30,500 --> 07:52:33,260
This importing of the client in the web SDKs and stuff,
12185
07:52:33,260 --> 07:52:35,940
we will do that, but not right now.
12186
07:52:35,940 --> 07:52:38,140
Let's go ahead and click on the next.
12187
07:52:38,140 --> 07:52:40,060
This is the endpoints and set project.
12188
07:52:40,060 --> 07:52:42,300
So notice here, project is 736.
12189
07:52:42,300 --> 07:52:46,100
This is exactly the same ID that we have got in this one.
12190
07:52:46,100 --> 07:52:50,220
So 763, that's the same ID we have already got.
12191
07:52:50,220 --> 07:52:53,060
And there is an endpoint being mentioned here as well.
12192
07:52:53,060 --> 07:52:54,900
That is exactly your app right URL.
12193
07:52:54,900 --> 07:52:56,140
You might want to copy this.
12194
07:52:56,140 --> 07:52:58,700
And by the way, this is exactly same for all the projects.
12195
07:52:58,700 --> 07:53:01,100
Yes, I worked with a lot of projects of app right.
12196
07:53:01,100 --> 07:53:03,340
And this is exactly what you needed here.
12197
07:53:03,340 --> 07:53:05,120
Okay, once we have this,
12198
07:53:05,120 --> 07:53:06,480
now we can click on the next.
12199
07:53:06,480 --> 07:53:08,480
And it says, hey, go to your dashboard and stuff.
12200
07:53:08,480 --> 07:53:10,240
Yes, I'll go ahead and do that.
12201
07:53:10,240 --> 07:53:12,560
This is one of the most important thing.
12202
07:53:12,560 --> 07:53:13,600
Please do not skip that.
12203
07:53:13,600 --> 07:53:16,500
Otherwise I've seen people struggling into the course error.
12204
07:53:16,500 --> 07:53:18,480
So these are the two things that you need
12205
07:53:18,480 --> 07:53:19,680
and your project.
12206
07:53:19,680 --> 07:53:22,320
Now you have a unique ID, you can talk to that.
12207
07:53:22,320 --> 07:53:25,440
And that's where the app right SDK comes into the picture.
12208
07:53:25,440 --> 07:53:26,920
But there are a couple of more things
12209
07:53:26,920 --> 07:53:28,000
that we are going to require.
12210
07:53:28,000 --> 07:53:29,880
So project ID is great.
12211
07:53:29,880 --> 07:53:31,400
I'll just remove this one.
12212
07:53:31,400 --> 07:53:32,960
But apart from the project ID,
12213
07:53:32,960 --> 07:53:34,720
we need the database ID as well.
12214
07:53:36,520 --> 07:53:37,960
Database underscore ID,
12215
07:53:37,960 --> 07:53:39,880
we'll work with the database as well.
12216
07:53:39,880 --> 07:53:41,180
Once you're into the database,
12217
07:53:41,180 --> 07:53:42,660
that's a generalized database.
12218
07:53:42,660 --> 07:53:46,360
In each database, you'll find a lot of collections as well.
12219
07:53:46,360 --> 07:53:49,100
So I'll just go ahead and have a collection ID as well.
12220
07:53:50,580 --> 07:53:51,880
And by the way, from where to get,
12221
07:53:51,880 --> 07:53:54,080
I'll walk you through with that as well, don't worry.
12222
07:53:54,080 --> 07:53:55,800
And we need the bucket ID as well.
12223
07:53:55,800 --> 07:53:57,440
So I'll just go ahead and add a bucket.
12224
07:53:57,440 --> 07:53:58,840
What do you mean by bucket?
12225
07:53:59,840 --> 07:54:03,800
Bucket simply means the storage that we'll be using.
12226
07:54:03,800 --> 07:54:06,320
So let me walk you through how we can grab that.
12227
07:54:06,320 --> 07:54:09,340
So I'll simply go ahead and have this one.
12228
07:54:09,340 --> 07:54:14,340
So what I'll do is simply go into the database.
12229
07:54:14,760 --> 07:54:17,400
So our app is completely up here.
12230
07:54:17,400 --> 07:54:19,600
Now here we have the databases.
12231
07:54:19,600 --> 07:54:22,600
Just go ahead and create a new database
12232
07:54:22,600 --> 07:54:24,000
and enter the database name.
12233
07:54:24,000 --> 07:54:26,560
Let's call this one as YouTube,
12234
07:54:26,560 --> 07:54:27,600
whatever you want to call,
12235
07:54:27,640 --> 07:54:29,480
you can go ahead and call that.
12236
07:54:29,480 --> 07:54:30,680
I won't be giving any ID.
12237
07:54:30,680 --> 07:54:32,760
It will be given to me automatically.
12238
07:54:32,760 --> 07:54:35,040
So I'll just go ahead and click on create.
12239
07:54:35,040 --> 07:54:36,280
So that's what this is.
12240
07:54:36,280 --> 07:54:38,480
So this is your database ID.
12241
07:54:38,480 --> 07:54:39,760
So go ahead and copy that.
12242
07:54:39,760 --> 07:54:40,860
That's exactly what we need.
12243
07:54:40,860 --> 07:54:43,180
So this is our database ID, that's it.
12244
07:54:43,180 --> 07:54:45,400
And once we are into the database ID,
12245
07:54:45,400 --> 07:54:47,200
then obviously we need to create a collection.
12246
07:54:47,200 --> 07:54:48,680
So that's the next step.
12247
07:54:48,680 --> 07:54:49,720
I'll create a collection.
12248
07:54:49,720 --> 07:54:54,720
Let's call this one as blogs, articles, whatever you like.
12249
07:54:55,040 --> 07:54:56,960
I'll just go ahead and click on create.
12250
07:54:57,940 --> 07:54:59,480
And this is my collection ID.
12251
07:54:59,480 --> 07:55:01,480
So blogs, notice here how easy it is
12252
07:55:01,480 --> 07:55:03,280
to just go ahead and go with the flow
12253
07:55:03,280 --> 07:55:04,680
and copy the collection ID.
12254
07:55:04,680 --> 07:55:06,100
So that's all what we need.
12255
07:55:06,100 --> 07:55:08,240
Now in here, we are going to need
12256
07:55:08,240 --> 07:55:09,880
to add some of the attributes.
12257
07:55:09,880 --> 07:55:12,420
What kind of data is going to come up in the collection?
12258
07:55:12,420 --> 07:55:13,880
Since we are here already,
12259
07:55:13,880 --> 07:55:16,000
let's go ahead and add those attributes.
12260
07:55:16,000 --> 07:55:18,400
So let's go ahead and click on attributes
12261
07:55:18,400 --> 07:55:20,480
and click on create attributes.
12262
07:55:20,480 --> 07:55:22,880
And you can create attributes of type string, integer,
12263
07:55:22,920 --> 07:55:25,360
flow, Boolean, there's a lot of types.
12264
07:55:25,360 --> 07:55:27,920
I'll be most of the time will be using the strings.
12265
07:55:27,920 --> 07:55:29,280
Once I click on the string,
12266
07:55:29,280 --> 07:55:30,880
what is the key that you want to use?
12267
07:55:30,880 --> 07:55:33,080
I want to go with title.
12268
07:55:33,080 --> 07:55:36,200
If I can write that properly, there we go.
12269
07:55:36,200 --> 07:55:37,260
What is the size?
12270
07:55:37,260 --> 07:55:38,100
Totally up to you.
12271
07:55:38,100 --> 07:55:39,160
I'll go with 255.
12272
07:55:39,160 --> 07:55:41,760
Go ahead and use whatever the type
12273
07:55:41,760 --> 07:55:42,880
that you want to go with that.
12274
07:55:42,880 --> 07:55:45,040
So I'll just go ahead and add 255.
12275
07:55:45,040 --> 07:55:47,560
So use that or use the scroll ones.
12276
07:55:47,560 --> 07:55:49,760
You can add a default string value if you wish.
12277
07:55:49,760 --> 07:55:50,960
I'll be requiring this.
12278
07:55:50,960 --> 07:55:53,280
So I'll just say, hey, this is a required string.
12279
07:55:53,280 --> 07:55:57,040
I'll just go ahead and click on create, that's it.
12280
07:55:57,040 --> 07:55:58,960
So you need to provide a structure of your data
12281
07:55:58,960 --> 07:56:01,600
that how this data is going to come up in the collection
12282
07:56:01,600 --> 07:56:05,680
so that anything which is required can be treated like that.
12283
07:56:05,680 --> 07:56:07,280
Let's go ahead and add a few more
12284
07:56:07,280 --> 07:56:08,920
which are going to be useful for us.
12285
07:56:08,920 --> 07:56:11,240
So we'll be saying content.
12286
07:56:11,240 --> 07:56:14,040
This is how my content will come up.
12287
07:56:14,040 --> 07:56:16,160
I'll go with the string again, 255.
12288
07:56:16,160 --> 07:56:19,080
If you wish more, then obviously add more numbers here.
12289
07:56:19,080 --> 07:56:20,200
These are character sizes.
12290
07:56:20,280 --> 07:56:21,880
So go ahead and use more.
12291
07:56:21,880 --> 07:56:24,240
I'll say the content is also required for me.
12292
07:56:24,240 --> 07:56:26,840
I'll just go ahead and click on create for this one.
12293
07:56:28,120 --> 07:56:30,320
All right, so we have content title.
12294
07:56:30,320 --> 07:56:32,200
Let's go ahead and create one more.
12295
07:56:32,200 --> 07:56:34,380
And that is going to be my featured image.
12296
07:56:35,480 --> 07:56:36,960
Featured image.
12297
07:56:36,960 --> 07:56:39,760
Now this featured image is going to be a string size.
12298
07:56:39,760 --> 07:56:41,240
I think 255 is good enough.
12299
07:56:41,240 --> 07:56:43,800
I'm not storing the actual image into this one.
12300
07:56:43,800 --> 07:56:46,440
Rather I'm keeping the long string URL
12301
07:56:46,440 --> 07:56:47,980
that I'll be uploading in the date
12302
07:56:47,980 --> 07:56:49,960
in the storage service of app, right?
12303
07:56:50,040 --> 07:56:51,780
Once I store an image in that,
12304
07:56:51,780 --> 07:56:55,080
it returns me back as a promise of a long string URL.
12305
07:56:55,080 --> 07:56:57,160
That is what I'll be keeping here.
12306
07:56:57,160 --> 07:56:59,160
And I'll say this is also required.
12307
07:56:59,160 --> 07:57:00,280
So give me this image.
12308
07:57:00,280 --> 07:57:02,020
This is pretty important for our application.
12309
07:57:02,020 --> 07:57:03,760
Let's go ahead and create that.
12310
07:57:03,760 --> 07:57:05,440
Now I hope it gives you an idea
12311
07:57:05,440 --> 07:57:07,800
that how these things can be done.
12312
07:57:07,800 --> 07:57:09,200
You can work with that.
12313
07:57:09,200 --> 07:57:13,200
So I'll just go ahead and create more attributes.
12314
07:57:13,200 --> 07:57:14,440
One more string.
12315
07:57:14,440 --> 07:57:17,080
So I'll just say, hey, I need one more, which is status.
12316
07:57:17,080 --> 07:57:18,120
Now it's up to you.
12317
07:57:18,120 --> 07:57:19,560
You can keep this as a string
12318
07:57:20,040 --> 07:57:21,560
or you can keep this as a Boolean value.
12319
07:57:21,560 --> 07:57:22,920
I'll not keep this one as required
12320
07:57:22,920 --> 07:57:24,520
because that's the status of my blog,
12321
07:57:24,520 --> 07:57:26,240
whether it is active or inactive.
12322
07:57:26,240 --> 07:57:27,920
I can just do that on the go.
12323
07:57:27,920 --> 07:57:31,200
But if you wish to have it as an enum Boolean,
12324
07:57:31,200 --> 07:57:32,540
it's totally up to you.
12325
07:57:32,540 --> 07:57:35,200
I'll have one more, which I'll talk in a minute,
12326
07:57:35,200 --> 07:57:37,480
but this one is actually user ID.
12327
07:57:37,480 --> 07:57:40,120
So I'll be adding a couple of, not couple,
12328
07:57:40,120 --> 07:57:42,600
just one user ID for each of the blog that we have.
12329
07:57:42,600 --> 07:57:44,560
So this is exactly for that.
12330
07:57:44,560 --> 07:57:46,800
255 is good enough that we saw
12331
07:57:46,800 --> 07:57:49,080
while building the demo of this application.
12332
07:57:49,280 --> 07:57:50,560
But this is required field
12333
07:57:50,560 --> 07:57:52,120
when we create a collection of this one.
12334
07:57:52,120 --> 07:57:53,820
Let's go ahead and create this one.
12335
07:57:54,920 --> 07:57:56,640
Okay, so there we go.
12336
07:57:56,640 --> 07:57:59,640
We have now the basics being done.
12337
07:57:59,640 --> 07:58:00,680
Pretty good.
12338
07:58:00,680 --> 07:58:04,380
Now what we'll do is we will learn
12339
07:58:04,380 --> 07:58:07,560
how we can make some queries with the databases as well.
12340
07:58:07,560 --> 07:58:08,860
In order to make some queries,
12341
07:58:08,860 --> 07:58:10,360
we need to have some queries
12342
07:58:10,360 --> 07:58:13,320
other than these basic fields like title or something.
12343
07:58:13,320 --> 07:58:16,400
What you'll study is when you have an index
12344
07:58:16,400 --> 07:58:17,980
is being placed on any collection,
12345
07:58:18,020 --> 07:58:20,860
it's much more optimized for the searching purpose.
12346
07:58:20,860 --> 07:58:22,020
I'll probably talk about more
12347
07:58:22,020 --> 07:58:24,100
of the database optimization stuff
12348
07:58:24,100 --> 07:58:25,600
probably in some other video.
12349
07:58:25,600 --> 07:58:26,760
Right now, let's go ahead and learn
12350
07:58:26,760 --> 07:58:28,340
how we can create an index.
12351
07:58:28,340 --> 07:58:30,180
So all you have to do is create an index,
12352
07:58:30,180 --> 07:58:31,820
is provide a key for that one.
12353
07:58:31,820 --> 07:58:33,320
So I'll just go ahead and say that,
12354
07:58:33,320 --> 07:58:35,900
hey, the key we are going to call this one as status,
12355
07:58:35,900 --> 07:58:37,340
that's my key.
12356
07:58:37,340 --> 07:58:39,660
The key type is you can have multiple keys.
12357
07:58:39,660 --> 07:58:41,180
I'll just go with the keys.
12358
07:58:41,180 --> 07:58:42,740
What is the data attribute
12359
07:58:42,740 --> 07:58:44,460
which will be responsible for this one?
12360
07:58:44,460 --> 07:58:46,860
I'll just go ahead and use the status for this one.
12361
07:58:46,860 --> 07:58:47,700
And that's it.
12362
07:58:47,740 --> 07:58:48,660
I'll just create this.
12363
07:58:48,660 --> 07:58:51,860
That is how simple it is to have a key being assigned.
12364
07:58:51,860 --> 07:58:52,900
So there we go.
12365
07:58:52,900 --> 07:58:54,480
Now we'll be able to make queries.
12366
07:58:54,480 --> 07:58:55,700
By the way, we can make queries
12367
07:58:55,700 --> 07:58:57,260
just based on attributes as well,
12368
07:58:57,260 --> 07:58:59,340
but it gives us a little bit more advantage.
12369
07:58:59,340 --> 07:59:01,460
We'll study about them and I'll walk you through,
12370
07:59:01,460 --> 07:59:03,540
give you some resources more on that.
12371
07:59:03,540 --> 07:59:04,380
So there we go.
12372
07:59:04,380 --> 07:59:06,900
We have now all the values being added up here.
12373
07:59:06,900 --> 07:59:09,160
Since we were already here, we set this up.
12374
07:59:09,160 --> 07:59:11,260
Now, coming more onto this one.
12375
07:59:11,260 --> 07:59:12,540
So we have the auth service,
12376
07:59:12,540 --> 07:59:14,740
we have the database service, we studied about them.
12377
07:59:14,740 --> 07:59:16,940
We have one more thing, which is the bucket ID.
12378
07:59:16,940 --> 07:59:20,180
Now, in the documents,
12379
07:59:20,180 --> 07:59:22,340
if we'll just come up onto the documents
12380
07:59:22,340 --> 07:59:24,140
and we were in the attributes section,
12381
07:59:24,140 --> 07:59:26,100
go into the settings section.
12382
07:59:26,100 --> 07:59:28,380
This is where you can see that who can actually have
12383
07:59:28,380 --> 07:59:30,580
the permission to add these documents.
12384
07:59:30,580 --> 07:59:32,220
This is the most important thing.
12385
07:59:32,220 --> 07:59:34,300
Not if anybody can come up and write
12386
07:59:34,300 --> 07:59:36,040
into your documentation,
12387
07:59:36,040 --> 07:59:37,260
you need to give a role to that,
12388
07:59:37,260 --> 07:59:38,700
that who is allowed to that.
12389
07:59:38,700 --> 07:59:40,720
Anyone is allowed, all the guests are allowed,
12390
07:59:40,720 --> 07:59:42,940
all the users are allowed,
12391
07:59:42,940 --> 07:59:45,340
any guest, anybody who will like to that.
12392
07:59:45,340 --> 07:59:47,420
I'll say that any user is allowed.
12393
07:59:47,420 --> 07:59:51,260
Any user is somebody who is already using my application,
12394
07:59:51,260 --> 07:59:52,940
already logged in or something.
12395
07:59:52,940 --> 07:59:55,620
So all the users are allowed of this application.
12396
07:59:55,620 --> 07:59:57,540
So it will automatically wire these things up
12397
07:59:57,540 --> 07:59:58,500
with your links.
12398
07:59:58,500 --> 08:00:00,700
I'll say that all of my users have the ability
12399
08:00:00,700 --> 08:00:04,460
to create, read, update, and delete my application.
12400
08:00:04,460 --> 08:00:05,980
Whatever the role you want to give,
12401
08:00:05,980 --> 08:00:07,980
you can have the role-based access
12402
08:00:07,980 --> 08:00:10,460
within this database as a service.
12403
08:00:10,460 --> 08:00:12,840
I'll just go ahead and update this.
12404
08:00:12,840 --> 08:00:14,900
So there we go, our permissions are updated.
12405
08:00:14,900 --> 08:00:15,980
This is the most crucial one.
12406
08:00:15,980 --> 08:00:18,220
I've seen people struggling with this quite a lot.
12407
08:00:18,220 --> 08:00:20,500
So make sure you are worried about your settings
12408
08:00:20,500 --> 08:00:22,500
and who can access the application.
12409
08:00:22,500 --> 08:00:24,540
Now we'll not talk about the functions in this video,
12410
08:00:24,540 --> 08:00:25,780
probably some other video.
12411
08:00:25,780 --> 08:00:27,460
Let's go into the storage.
12412
08:00:27,460 --> 08:00:29,340
So this is where you set up your buckets
12413
08:00:29,340 --> 08:00:31,620
and everybody calls this storage as buckets.
12414
08:00:31,620 --> 08:00:34,360
Let's go ahead and click on the create button.
12415
08:00:34,360 --> 08:00:36,180
And what do you want to call this bucket?
12416
08:00:36,180 --> 08:00:38,460
I'll call this one as images.
12417
08:00:38,460 --> 08:00:39,300
Doesn't really matter.
12418
08:00:39,300 --> 08:00:40,540
We never actually,
12419
08:00:41,820 --> 08:00:43,660
we never reach it out to using the name.
12420
08:00:43,660 --> 08:00:45,500
We always reach it out using the ID.
12421
08:00:45,500 --> 08:00:46,340
So that's what we need.
12422
08:00:46,340 --> 08:00:48,180
So let's go ahead and create this.
12423
08:00:48,180 --> 08:00:49,620
And we'll see the bucket ID,
12424
08:00:49,620 --> 08:00:51,700
go ahead and copy this and that's what.
12425
08:00:51,700 --> 08:00:52,760
So there we go.
12426
08:00:52,760 --> 08:00:54,100
Our setting is all done.
12427
08:00:54,100 --> 08:00:55,600
Now I want to copy this
12428
08:00:55,600 --> 08:00:59,140
and I want to give this you into environment variable as well.
12429
08:00:59,140 --> 08:01:01,020
Obviously these things will be changed
12430
08:01:01,020 --> 08:01:02,540
by the time you'll be watching the videos.
12431
08:01:02,540 --> 08:01:04,500
So I'll be obviously rewriting them.
12432
08:01:04,500 --> 08:01:06,460
It's important for me to rewrite.
12433
08:01:06,460 --> 08:01:07,880
I'll be giving you all of that,
12434
08:01:07,880 --> 08:01:11,500
but you know what values and what variables to look up for.
12435
08:01:11,500 --> 08:01:13,420
So that's the step one of how to grab
12436
08:01:13,580 --> 08:01:14,500
all the environment variables
12437
08:01:14,500 --> 08:01:17,540
and what the settings we need from this one.
12438
08:01:17,540 --> 08:01:19,060
Now let's go ahead and set up
12439
08:01:19,060 --> 08:01:21,220
a little bit of our application as well
12440
08:01:21,220 --> 08:01:22,980
and show you some of the best practices
12441
08:01:22,980 --> 08:01:26,460
that probably will help you to optimize these applications.
12442
08:01:26,460 --> 08:01:29,380
So first thing that we're going to do is inside the source,
12443
08:01:29,380 --> 08:01:30,740
I'll create a new folder
12444
08:01:30,740 --> 08:01:34,260
and we're going to call this one as conf.
12445
08:01:34,260 --> 08:01:35,780
This is for configuration
12446
08:01:35,780 --> 08:01:37,920
and we'll be creating one more file into this one
12447
08:01:37,920 --> 08:01:39,340
known as conf.js.
12448
08:01:41,420 --> 08:01:42,780
Conf.js.
12449
08:01:42,780 --> 08:01:45,500
Now what we are going to do in this configuration,
12450
08:01:45,500 --> 08:01:46,740
what we're going to do majorly
12451
08:01:46,740 --> 08:01:50,220
and you'll see this as a common production grade setting
12452
08:01:50,220 --> 08:01:52,100
and practices being used
12453
08:01:52,100 --> 08:01:54,420
is you simply go ahead and create a conf
12454
08:01:56,220 --> 08:01:58,100
or conf just like this.
12455
08:01:58,100 --> 08:01:59,700
And this is usually an object
12456
08:01:59,700 --> 08:02:01,940
and you simply go ahead and export that.
12457
08:02:03,100 --> 08:02:04,620
Export default conf.
12458
08:02:04,620 --> 08:02:06,180
Now why we are doing this?
12459
08:02:06,180 --> 08:02:08,560
This is being done because sometimes what you'll notice
12460
08:02:08,560 --> 08:02:10,780
is accessing the environment variable
12461
08:02:10,820 --> 08:02:13,040
could actually potentially throw up an error
12462
08:02:13,040 --> 08:02:14,900
or sometimes there is no guarantee
12463
08:02:14,900 --> 08:02:16,820
that what data type is getting returned.
12464
08:02:16,820 --> 08:02:18,380
This is not the case when obviously
12465
08:02:18,380 --> 08:02:20,120
are using TypeScript or something,
12466
08:02:20,120 --> 08:02:21,840
but this is a common practice being used.
12467
08:02:21,840 --> 08:02:23,620
For example, I can just go ahead and say that,
12468
08:02:23,620 --> 08:02:28,460
hey, I'll export an app write URL just like this
12469
08:02:28,460 --> 08:02:31,020
and the value of this will be wrapped up in the string
12470
08:02:31,020 --> 08:02:33,620
so that I'm 100% sure the value that's coming up
12471
08:02:33,620 --> 08:02:35,340
is actually the string.
12472
08:02:35,340 --> 08:02:36,620
And I'll just go ahead and say,
12473
08:02:36,620 --> 08:02:39,020
I'm accessing that by process.env
12474
08:02:39,020 --> 08:02:40,940
that's by default in the React.
12475
08:02:40,940 --> 08:02:43,900
And then I'll just name this one as whatever I use there.
12476
08:02:43,900 --> 08:02:45,820
So in the environment variable,
12477
08:02:45,820 --> 08:02:47,740
if I go ahead and say app write URL,
12478
08:02:47,740 --> 08:02:51,100
copy this and I go ahead and paste this up here.
12479
08:02:51,100 --> 08:02:53,380
So a common practice that you'll see quite a lot
12480
08:02:53,380 --> 08:02:55,900
and similarly, we have the project IDs and whatnot.
12481
08:02:55,900 --> 08:02:58,260
So let's go ahead and finish this one up.
12482
08:02:58,260 --> 08:03:03,260
App write project ID just like this
12483
08:03:04,020 --> 08:03:07,940
and again, same string and yes, this one takes time.
12484
08:03:07,940 --> 08:03:09,940
Process.env.
12485
08:03:09,940 --> 08:03:12,420
And we need to grab the project ID.
12486
08:03:12,420 --> 08:03:15,640
So copy that, paste that.
12487
08:03:15,640 --> 08:03:16,740
That's the project ID.
12488
08:03:16,740 --> 08:03:18,300
We need the database ID now.
12489
08:03:20,060 --> 08:03:25,060
App write database ID and our gain string.
12490
08:03:27,660 --> 08:03:30,060
This is just to make sure that we don't fall
12491
08:03:30,060 --> 08:03:34,020
into the case or the data type issues.
12492
08:03:34,020 --> 08:03:35,600
Again, nothing much.
12493
08:03:35,800 --> 08:03:39,800
Process.env.
12494
08:03:39,800 --> 08:03:41,640
And we need to grab the database ID.
12495
08:03:44,040 --> 08:03:45,760
This simple export will help you
12496
08:03:45,760 --> 08:03:47,560
to save so much of the problem.
12497
08:03:47,560 --> 08:03:49,480
Trust me, I've been into that phase.
12498
08:03:50,560 --> 08:03:52,480
App write collection ID
12499
08:03:54,720 --> 08:03:56,520
and again, that's going to be a string
12500
08:03:56,520 --> 08:03:59,760
and again, process.env.
12501
08:03:59,760 --> 08:04:02,000
This looks so much work right now
12502
08:04:02,000 --> 08:04:04,280
but it saves so much of the troubles.
12503
08:04:04,280 --> 08:04:05,800
Good practice again.
12504
08:04:05,800 --> 08:04:08,840
We have the collection ID, one more, bucket ID, almost done.
12505
08:04:10,120 --> 08:04:15,120
App write and bucket ID.
12506
08:04:16,240 --> 08:04:17,080
There we go.
12507
08:04:17,080 --> 08:04:20,440
Again, last one string and we'll be saying
12508
08:04:22,760 --> 08:04:24,920
process.env.
12509
08:04:24,920 --> 08:04:27,920
And last one, bucket ID.
12510
08:04:29,040 --> 08:04:30,560
All right, so there we go.
12511
08:04:30,560 --> 08:04:32,720
So now that we are exporting this conf,
12512
08:04:32,720 --> 08:04:34,800
now we can import this at any place
12513
08:04:34,800 --> 08:04:36,200
and wherever we import this,
12514
08:04:36,200 --> 08:04:39,680
we have conf.app write URL, app write project ID
12515
08:04:39,680 --> 08:04:42,440
in case you wish you can directly go ahead and import this.
12516
08:04:42,440 --> 08:04:44,360
But the idea is that if we face any error
12517
08:04:44,360 --> 08:04:47,040
or the environment variables are not being able to load,
12518
08:04:47,040 --> 08:04:48,460
we see all of that at one place.
12519
08:04:48,460 --> 08:04:50,600
So this makes life a little bit easier.
12520
08:04:50,600 --> 08:04:51,920
It was not compulsory to do
12521
08:04:51,920 --> 08:04:54,600
but in the good major scale projects
12522
08:04:54,600 --> 08:04:56,820
and high scale, high scale companies,
12523
08:04:56,820 --> 08:04:58,480
you'll find that this is a common practice.
12524
08:04:58,480 --> 08:04:59,800
So just wanted to introduce you that,
12525
08:04:59,800 --> 08:05:01,400
that yes, things like that happens
12526
08:05:01,400 --> 08:05:03,400
and things that like works.
12527
08:05:03,400 --> 08:05:04,800
All right, so this is our basics,
12528
08:05:04,800 --> 08:05:06,480
the setups and everything are done.
12529
08:05:06,480 --> 08:05:07,800
Now let's close all of this.
12530
08:05:07,800 --> 08:05:09,640
You have the idea how this is being done.
12531
08:05:09,640 --> 08:05:12,880
Now let's set up the things for the next video
12532
08:05:12,880 --> 08:05:14,400
that we are about to work.
12533
08:05:14,400 --> 08:05:17,960
So for this one, we'll create a new folder inside the source
12534
08:05:17,960 --> 08:05:20,960
and this is the most important thing in here.
12535
08:05:20,960 --> 08:05:24,320
Let's go ahead and name this one as app write.
12536
08:05:24,320 --> 08:05:27,060
And inside the app write, we'll start with just one file
12537
08:05:27,060 --> 08:05:29,320
and then eventually you'll see that why the other file
12538
08:05:29,320 --> 08:05:30,960
or how the other file will work.
12539
08:05:30,960 --> 08:05:33,840
We're going to call this one as auth.js
12540
08:05:33,840 --> 08:05:35,800
and I'll walk you through what is our plan
12541
08:05:35,800 --> 08:05:37,360
with this auth.js.
12542
08:05:37,360 --> 08:05:39,400
So right now we have just got the idea
12543
08:05:39,400 --> 08:05:40,840
that how things are going to work.
12544
08:05:40,840 --> 08:05:42,600
We have studied the app write a little bit.
12545
08:05:42,600 --> 08:05:44,680
I highly recommend you to go ahead and explore
12546
08:05:44,680 --> 08:05:47,720
a little bit more of the documentation of app write.
12547
08:05:47,720 --> 08:05:51,560
The idea behind that is I want to create these services.
12548
08:05:51,560 --> 08:05:52,400
Why services?
12549
08:05:52,400 --> 08:05:54,000
What's the service as a page?
12550
08:05:54,000 --> 08:05:56,320
Whenever you work with these kinds of applications,
12551
08:05:56,320 --> 08:05:58,120
especially backend as a service,
12552
08:05:58,120 --> 08:06:00,000
you want to create a service file
12553
08:06:00,040 --> 08:06:04,280
which actually kind of encapsulates all the hard details
12554
08:06:04,280 --> 08:06:06,240
like how the registration work.
12555
08:06:06,240 --> 08:06:08,000
Somebody who's using our application
12556
08:06:08,000 --> 08:06:09,040
should not worry about that.
12557
08:06:09,040 --> 08:06:10,960
He should see this as just a method
12558
08:06:10,960 --> 08:06:12,960
that I provide you an email and password
12559
08:06:12,960 --> 08:06:16,160
or probably a photo and you register me as a user.
12560
08:06:16,160 --> 08:06:17,680
What you do in the internal detail
12561
08:06:17,680 --> 08:06:21,320
should be hidden from me, should be abstracted for me.
12562
08:06:21,320 --> 08:06:24,080
And another advantage of doing this same approach
12563
08:06:24,080 --> 08:06:26,860
is maybe you are working with React Native
12564
08:06:26,860 --> 08:06:29,880
or maybe you're working some other application as well.
12565
08:06:29,920 --> 08:06:32,120
You can reuse this exact same code.
12566
08:06:32,120 --> 08:06:35,080
Yes, literally you can copy and paste this exact code
12567
08:06:35,080 --> 08:06:38,000
and it makes it so much highly reusable of a code.
12568
08:06:38,000 --> 08:06:39,420
So that's a good practice
12569
08:06:39,420 --> 08:06:41,780
that we are learning how to write the reusable code.
12570
08:06:41,780 --> 08:06:43,760
So that's one of the advantage we are going to learn.
12571
08:06:43,760 --> 08:06:45,200
And once you see and understand
12572
08:06:45,200 --> 08:06:47,200
that how we can use authentication service
12573
08:06:47,200 --> 08:06:50,280
and the database service as well as the storage service,
12574
08:06:50,280 --> 08:06:52,840
that's it, you are mastered about the three services
12575
08:06:52,840 --> 08:06:55,080
in app write and you can explore things on the go.
12576
08:06:55,080 --> 08:06:57,760
We'll be learning everything from the documentation itself
12577
08:06:57,760 --> 08:06:59,160
so that it gives you more confidence
12578
08:06:59,320 --> 08:07:01,600
that yes, you can do the things on your own as well.
12579
08:07:01,600 --> 08:07:03,000
All right, so that's it all.
12580
08:07:03,000 --> 08:07:04,440
We'll be doing keeping it short.
12581
08:07:04,440 --> 08:07:07,520
And in the next video, I'll be changing some of my IDs
12582
08:07:07,520 --> 08:07:09,680
because I've exposed this to all of you.
12583
08:07:09,680 --> 08:07:10,600
So I'll be changing them
12584
08:07:10,600 --> 08:07:13,440
and then we'll be working on the next file together.
12585
08:07:13,440 --> 08:07:15,160
All right, so that's it for this video.
12586
08:07:15,160 --> 08:07:17,200
Let's catch up into the next one.
12587
08:07:19,360 --> 08:07:20,960
Hey there everyone, Hitesh here,
12588
08:07:20,960 --> 08:07:22,200
back again with another video
12589
08:07:22,200 --> 08:07:24,900
and let's continue our journey with the React.
12590
08:07:24,900 --> 08:07:26,320
Just to give you a brief context,
12591
08:07:26,320 --> 08:07:27,560
in the last video we saw that
12592
08:07:27,560 --> 08:07:29,960
how we can build a full stack application
12593
08:07:29,960 --> 08:07:31,520
using React and app write.
12594
08:07:31,520 --> 08:07:33,560
I walked you through with the setup of app write
12595
08:07:33,560 --> 08:07:35,620
and integrate it with the React.
12596
08:07:35,620 --> 08:07:39,820
Just a quick sidebar or as an interesting note,
12597
08:07:39,820 --> 08:07:42,000
make sure that you're in your app write app,
12598
08:07:42,000 --> 08:07:43,680
your app is properly configured,
12599
08:07:43,680 --> 08:07:44,940
you have added the web app
12600
08:07:44,940 --> 08:07:47,540
and there is a local host string being added.
12601
08:07:47,540 --> 08:07:48,760
If I'm not going to add this,
12602
08:07:48,760 --> 08:07:51,600
this might lead up into a lot of course error
12603
08:07:51,600 --> 08:07:53,080
which are nasty in itself,
12604
08:07:53,080 --> 08:07:55,300
but the easy fix is watch out
12605
08:07:55,300 --> 08:07:58,080
if you have added the web app inside the app write.
12606
08:07:58,080 --> 08:07:59,040
That's it.
12607
08:07:59,040 --> 08:08:01,240
In this video, I will walk you through everything
12608
08:08:01,240 --> 08:08:02,540
that you need to know about
12609
08:08:02,540 --> 08:08:04,860
how to read the app write documentation
12610
08:08:04,860 --> 08:08:06,860
and integrate the auth section of it
12611
08:08:06,860 --> 08:08:08,420
and taking one section at a time
12612
08:08:08,420 --> 08:08:09,500
and we'll walk you through
12613
08:08:09,500 --> 08:08:11,660
how you can make your code robust
12614
08:08:11,660 --> 08:08:13,580
as well as highly reusable,
12615
08:08:13,580 --> 08:08:15,500
whether you're using app write in Next.js,
12616
08:08:15,500 --> 08:08:18,900
React, React Native, Flutter, whatever you're using,
12617
08:08:18,900 --> 08:08:20,960
you will be creating exactly same file.
12618
08:08:20,960 --> 08:08:22,580
In fact, you can actually copy paste
12619
08:08:22,580 --> 08:08:24,980
this exact same file in all of your project.
12620
08:08:24,980 --> 08:08:27,140
And not only that, I'll walk you through
12621
08:08:27,140 --> 08:08:29,420
what is the best way to read the documentation
12622
08:08:29,420 --> 08:08:30,540
and all that you need.
12623
08:08:30,540 --> 08:08:32,180
Quite interesting, isn't it?
12624
08:08:32,180 --> 08:08:33,620
So this is all that you need to know
12625
08:08:33,620 --> 08:08:35,880
about handling the auth in the app write.
12626
08:08:35,880 --> 08:08:37,020
Let's go ahead and get started.
12627
08:08:37,020 --> 08:08:38,800
Let me share my screen first
12628
08:08:38,800 --> 08:08:40,500
and then we'll walk you through.
12629
08:08:40,500 --> 08:08:42,700
So this is our app write documentation
12630
08:08:42,700 --> 08:08:44,060
and this is our React app
12631
08:08:44,060 --> 08:08:46,540
that we have been going through for a while.
12632
08:08:46,540 --> 08:08:48,220
And in this, I showed you
12633
08:08:48,220 --> 08:08:49,540
that we have installed the app write.
12634
08:08:49,540 --> 08:08:52,180
So if I just open up my package.json,
12635
08:08:52,180 --> 08:08:54,740
we can see in the dependency we have app write.
12636
08:08:54,740 --> 08:08:56,420
Pretty cool so far.
12637
08:08:56,420 --> 08:08:58,700
Now, after that, with the basic configuration
12638
08:08:58,700 --> 08:09:00,660
and having all of our environment variables,
12639
08:09:00,660 --> 08:09:02,400
which we discussed in the last video,
12640
08:09:02,400 --> 08:09:04,300
I asked you that create an app write folder
12641
08:09:04,300 --> 08:09:07,320
and create an auth.js file into this one.
12642
08:09:07,320 --> 08:09:08,660
In this video, I'll walk you through that
12643
08:09:08,660 --> 08:09:10,380
how we are going to use this file,
12644
08:09:10,380 --> 08:09:12,780
but first let's read the documentation.
12645
08:09:12,780 --> 08:09:16,020
So when you go to the appwrite.io slash docs,
12646
08:09:16,020 --> 08:09:17,980
this is where you see all the docs.
12647
08:09:17,980 --> 08:09:21,160
And the organization of the doc, the hierarchy of it,
12648
08:09:21,160 --> 08:09:22,980
the structure is pretty nice
12649
08:09:22,980 --> 08:09:25,220
to go ahead and work on with this one.
12650
08:09:25,220 --> 08:09:26,900
So in this video, I'll walk you through with this
12651
08:09:26,900 --> 08:09:28,740
that how you can actually use this one.
12652
08:09:28,740 --> 08:09:32,460
So just give me a second, I'll arrange these things.
12653
08:09:32,460 --> 08:09:35,340
Some of my elements are moving on the screens
12654
08:09:35,340 --> 08:09:37,100
just like that, okay.
12655
08:09:37,100 --> 08:09:39,700
So as you can see, the products that they're offering
12656
08:09:39,700 --> 08:09:42,700
is auth, database, function and storage.
12657
08:09:42,700 --> 08:09:44,340
In this video, I'll cover the auth.
12658
08:09:44,340 --> 08:09:46,540
In the next video, I'll cover the database
12659
08:09:46,540 --> 08:09:48,560
as well as the storage part of it.
12660
08:09:48,560 --> 08:09:50,060
So that's pretty nice.
12661
08:09:50,060 --> 08:09:52,200
Let's go into the auth section of it.
12662
08:09:52,240 --> 08:09:55,060
Inside this auth section, you'll see that
12663
08:09:55,060 --> 08:09:57,400
on the left-hand side, we have some of the concepts,
12664
08:09:57,400 --> 08:09:59,600
the journey and the references.
12665
08:09:59,600 --> 08:10:01,640
Most probably the way how you're going to handle
12666
08:10:01,640 --> 08:10:03,320
is first a look at the journey.
12667
08:10:03,320 --> 08:10:05,800
For example, in this one, we want to see how we can
12668
08:10:05,800 --> 08:10:07,900
add a user based on email and password.
12669
08:10:07,900 --> 08:10:10,560
Maybe you want to go with auth logins or magic URL,
12670
08:10:10,560 --> 08:10:13,120
the same strategies are followed there as well.
12671
08:10:13,120 --> 08:10:15,480
I click on this, and this is the first step
12672
08:10:15,480 --> 08:10:17,560
that how I can sign up a user.
12673
08:10:17,560 --> 08:10:19,920
Similarly, I can just read the docs for login
12674
08:10:19,920 --> 08:10:21,480
and something more.
12675
08:10:21,480 --> 08:10:23,760
But what if I need a little bit more?
12676
08:10:23,760 --> 08:10:26,640
So here, first of all, just go ahead and read one thing,
12677
08:10:26,640 --> 08:10:28,520
which is if you go onto this auth section,
12678
08:10:28,520 --> 08:10:30,960
if you go onto the auth homepage,
12679
08:10:30,960 --> 08:10:33,480
there is nothing too much to explore into this one.
12680
08:10:33,480 --> 08:10:35,760
Just go onto this one, this is my journey.
12681
08:10:35,760 --> 08:10:37,920
And after this journey, let me just move this
12682
08:10:37,920 --> 08:10:40,560
a little bit here so that you can see it all.
12683
08:10:40,560 --> 08:10:44,300
Now, what we're going to do majorly is this account API.
12684
08:10:44,300 --> 08:10:48,000
User API is, you have a user and you want to modify
12685
08:10:48,000 --> 08:10:49,780
some things about user, maybe it's name,
12686
08:10:49,780 --> 08:10:52,340
email, and it's record, but this is the account API.
12687
08:10:52,340 --> 08:10:53,560
There is a difference between them.
12688
08:10:53,560 --> 08:10:55,400
So if I click on the account API,
12689
08:10:55,400 --> 08:10:57,300
you'll see there are two dots here.
12690
08:10:57,300 --> 08:10:58,780
Just go ahead and click on this.
12691
08:10:58,780 --> 08:11:00,560
And this is where you see all the methods,
12692
08:11:00,560 --> 08:11:03,040
how to create an account, how to update an email.
12693
08:11:03,040 --> 08:11:04,740
So all these things are mentioned here.
12694
08:11:04,740 --> 08:11:07,600
For example, if I want to delete a sessions
12695
08:11:07,600 --> 08:11:10,380
or list all the sessions, I can just click on this.
12696
08:11:10,380 --> 08:11:12,220
And this gives me the source code.
12697
08:11:12,220 --> 08:11:14,700
This is a little bit shrinked up.
12698
08:11:14,700 --> 08:11:16,660
So this gives me the entire source code
12699
08:11:16,660 --> 08:11:18,140
that hey, you have to use a method
12700
08:11:18,180 --> 08:11:20,500
which is known as a list sessions
12701
08:11:20,500 --> 08:11:21,820
and I'll give you a response.
12702
08:11:21,820 --> 08:11:23,900
And in the response, I'll give you a promise
12703
08:11:23,900 --> 08:11:25,700
and you can extract data from this promise
12704
08:11:25,700 --> 08:11:27,460
and you'll get all the sessions.
12705
08:11:27,460 --> 08:11:30,180
Exactly like that, if I want to work on the delete session,
12706
08:11:30,180 --> 08:11:33,580
I can just use the method which is delete sessions.
12707
08:11:33,580 --> 08:11:36,620
Similarly, if I want to create an email verification
12708
08:11:36,620 --> 08:11:39,060
or I want to have something else,
12709
08:11:39,060 --> 08:11:42,020
whatever, I want to get the account preferences
12710
08:11:42,020 --> 08:11:44,220
or I want to update the name,
12711
08:11:44,220 --> 08:11:46,420
create a JWT token, whatever I wish,
12712
08:11:46,420 --> 08:11:48,100
I can go ahead and do that.
12713
08:11:48,980 --> 08:11:51,500
Apart from this, I would like to bring you back
12714
08:11:51,500 --> 08:11:55,700
on to the account, not here, into the auth section.
12715
08:11:55,700 --> 08:11:57,740
So in the auth section, the very first thing
12716
08:11:57,740 --> 08:12:01,060
if I go into the journey of email and password login,
12717
08:12:01,060 --> 08:12:04,220
notice here this source code, just walk through with this.
12718
08:12:04,220 --> 08:12:07,900
Every single time, I have to import client, account and ID.
12719
08:12:07,900 --> 08:12:10,580
ID for creating the unique IDs, there is no big deal.
12720
08:12:10,580 --> 08:12:13,460
Then I have two options here, client and account.
12721
08:12:13,460 --> 08:12:15,780
Now with this, you'll see a similar pattern
12722
08:12:15,780 --> 08:12:17,740
that is getting repeated again and again.
12723
08:12:17,740 --> 08:12:21,660
For example, you create a new object out of this client.
12724
08:12:21,660 --> 08:12:25,060
Okay, I understand this point, I understand this part.
12725
08:12:25,060 --> 08:12:27,820
Now I have to set an endpoint and set a project.
12726
08:12:27,820 --> 08:12:30,220
The endpoint almost always remains same
12727
08:12:30,220 --> 08:12:32,700
until unless if you have added your own custom domains
12728
08:12:32,700 --> 08:12:34,260
or something like that, but in most cases,
12729
08:12:34,260 --> 08:12:35,700
it will remain same.
12730
08:12:35,700 --> 08:12:37,380
And you have to give a project ID.
12731
08:12:37,380 --> 08:12:39,620
This project ID we have already seen in the last video
12732
08:12:39,620 --> 08:12:42,300
that you can just go ahead and copy this project ID.
12733
08:12:42,300 --> 08:12:45,540
This is very repeatable code, okay?
12734
08:12:45,540 --> 08:12:47,420
After this, I have to create an account
12735
08:12:47,420 --> 08:12:50,780
and I get this variable account after using the account
12736
08:12:50,780 --> 08:12:52,660
that was given to me by app write
12737
08:12:52,660 --> 08:12:54,860
and injecting this client variable to it.
12738
08:12:54,860 --> 08:12:58,380
So this is almost like giving a context to the account
12739
08:12:58,380 --> 08:13:01,860
that here is your context and now give me this object account
12740
08:13:01,860 --> 08:13:04,580
and this account is you can say a facade.
12741
08:13:04,580 --> 08:13:06,540
It has so many things inside it into it.
12742
08:13:06,540 --> 08:13:09,340
For example, you can use a method like create.
12743
08:13:09,340 --> 08:13:12,660
This create method is actually associated with this account.
12744
08:13:12,660 --> 08:13:15,540
That's why I'm able to call it account.create.
12745
08:13:15,540 --> 08:13:17,500
Similarly, now if you go into the login,
12746
08:13:17,500 --> 08:13:20,380
you'll see exact same portion being repeated.
12747
08:13:20,380 --> 08:13:22,100
Okay, there's a client, there's account,
12748
08:13:22,100 --> 08:13:25,220
there's an endpoint, blah, blah, stuff again repeatable.
12749
08:13:25,220 --> 08:13:28,900
But what I see is account.create email session.
12750
08:13:28,900 --> 08:13:31,420
What parameters I pass on, I can study it here,
12751
08:13:31,420 --> 08:13:35,460
but I can see this whole top point is very, very repeatable.
12752
08:13:35,460 --> 08:13:37,740
Now with this, I would like to bring your attention
12753
08:13:37,740 --> 08:13:41,220
that if these all things are very repeatable,
12754
08:13:41,220 --> 08:13:43,540
can I write a code in such a way
12755
08:13:43,540 --> 08:13:45,660
that I don't need to repeat it again?
12756
08:13:45,660 --> 08:13:48,140
And one such example is create a class
12757
08:13:48,140 --> 08:13:51,060
because in the class I can create a constructor
12758
08:13:51,060 --> 08:13:53,900
which can do all of this code repeatably for me.
12759
08:13:53,900 --> 08:13:56,620
And when I extract an object out of this class,
12760
08:13:56,620 --> 08:13:58,500
maybe all things are already done.
12761
08:13:58,500 --> 08:14:00,580
And this is exactly the approach that is used
12762
08:14:00,580 --> 08:14:02,940
for creating the services.
12763
08:14:02,940 --> 08:14:04,940
Yes, this is what we call in the programmatically
12764
08:14:04,940 --> 08:14:06,820
jargon word as services.
12765
08:14:06,820 --> 08:14:09,020
So what I'll do is I'll create a service
12766
08:14:09,020 --> 08:14:12,220
and I'll use almost exactly same kind of a stuff like this.
12767
08:14:12,220 --> 08:14:15,020
So I'll just go ahead and copy this much
12768
08:14:15,020 --> 08:14:16,260
from wherever you want to borrow it.
12769
08:14:16,260 --> 08:14:18,020
This is exactly same code signup login.
12770
08:14:18,020 --> 08:14:19,260
It doesn't really matter.
12771
08:14:19,260 --> 08:14:21,220
Borrow this code and what we'll do
12772
08:14:21,220 --> 08:14:23,660
is we'll just paste this code here.
12773
08:14:23,660 --> 08:14:24,500
Doesn't really matter.
12774
08:14:24,500 --> 08:14:26,700
These are for my references only.
12775
08:14:26,700 --> 08:14:30,180
Now, first of all, I obviously need these project ID
12776
08:14:30,180 --> 08:14:31,020
and stuff.
12777
08:14:31,020 --> 08:14:32,740
So I know that I have actually added them up
12778
08:14:32,740 --> 08:14:33,980
inside my config.
12779
08:14:33,980 --> 08:14:37,580
So I'll just go ahead and say import conf
12780
08:14:37,580 --> 08:14:40,180
and that conf will come up from,
12781
08:14:40,180 --> 08:14:43,780
we need to go one directory back inside the conf
12782
08:14:43,780 --> 08:14:47,780
and there we have got conf.js, I guess.
12783
08:14:47,780 --> 08:14:50,500
Yep, that's exactly the file I'm looking up for.
12784
08:14:50,500 --> 08:14:52,540
Now I have this conf data.
12785
08:14:52,540 --> 08:14:54,980
And with this conf data, I can actually go ahead
12786
08:14:54,980 --> 08:14:57,700
and use this app write URL, project ID,
12787
08:14:57,700 --> 08:14:59,100
all these things are being exported.
12788
08:14:59,100 --> 08:15:00,940
So just with the dot access, I can have this.
12789
08:15:00,940 --> 08:15:03,180
So this problem is solved.
12790
08:15:03,180 --> 08:15:05,340
All right, what is the next problem?
12791
08:15:05,340 --> 08:15:07,300
This thing is very, very repeatable.
12792
08:15:07,300 --> 08:15:10,900
So it's better that if I go ahead and just use this.
12793
08:15:10,900 --> 08:15:13,100
So I'll just go ahead and move this line above
12794
08:15:13,100 --> 08:15:14,860
because I'm going to use this one.
12795
08:15:14,860 --> 08:15:17,380
Let's create a simple class and export that as well.
12796
08:15:17,380 --> 08:15:19,620
So I'll go ahead and say, hey, export class
12797
08:15:19,620 --> 08:15:22,540
and let's name this one as auth service.
12798
08:15:22,540 --> 08:15:25,380
We will export the class, maybe we want to use it
12799
08:15:25,380 --> 08:15:28,420
but my goal is to create an object out of this class
12800
08:15:28,420 --> 08:15:30,860
and export that object so that you can just import it
12801
08:15:30,860 --> 08:15:34,100
and start using it if you want to use it anywhere else.
12802
08:15:34,100 --> 08:15:36,900
So I'll go ahead and use service if I can write that correctly
12803
08:15:36,900 --> 08:15:39,860
that would be great service.
12804
08:15:39,860 --> 08:15:40,980
All right, so there we go.
12805
08:15:40,980 --> 08:15:45,540
This is our classic class in the JavaScript world, okay.
12806
08:15:45,540 --> 08:15:47,900
The next thing is we need couple of these things.
12807
08:15:47,900 --> 08:15:51,540
So we need these client and we need this account as well.
12808
08:15:51,540 --> 08:15:53,300
So these are my goal to create.
12809
08:15:53,300 --> 08:15:54,700
So let's go ahead and do that.
12810
08:15:54,700 --> 08:15:56,180
So client is pretty obvious.
12811
08:15:56,180 --> 08:15:58,100
I can go ahead and say, hey, client,
12812
08:15:58,100 --> 08:16:01,700
you will be coming up from new and client just like that.
12813
08:16:01,700 --> 08:16:05,740
Okay, happy with this one, but account not so happy
12814
08:16:05,740 --> 08:16:08,620
because I cannot create the account directly right now.
12815
08:16:08,620 --> 08:16:10,460
Account can only be created
12816
08:16:10,460 --> 08:16:13,100
by passing the context of the client.
12817
08:16:13,100 --> 08:16:15,460
And in order to create a proper client context,
12818
08:16:15,460 --> 08:16:20,460
I need to run these methods dot set endpoint dot set project
12819
08:16:21,020 --> 08:16:23,300
and I cannot just do that right now
12820
08:16:23,300 --> 08:16:25,940
because otherwise just by creating the class I'm running.
12821
08:16:25,940 --> 08:16:27,700
I want to run these methods
12822
08:16:27,700 --> 08:16:30,060
as soon as somebody creates an object out of this class
12823
08:16:30,060 --> 08:16:32,860
and that's a great way to bring up the concept
12824
08:16:32,860 --> 08:16:33,700
of constructors.
12825
08:16:33,700 --> 08:16:35,260
So this is my constructor
12826
08:16:35,380 --> 08:16:37,380
and as soon as this constructor is being called,
12827
08:16:37,380 --> 08:16:39,580
that means as soon as somebody creates an object
12828
08:16:39,580 --> 08:16:43,100
out of this class, I'll say that this dot client,
12829
08:16:43,100 --> 08:16:44,740
now we'll use the two method.
12830
08:16:44,740 --> 08:16:46,620
The first one is set endpoint.
12831
08:16:46,620 --> 08:16:48,260
I'll pass you the variables in a minute
12832
08:16:48,260 --> 08:16:51,860
and I'll also go ahead and use the set project.
12833
08:16:51,860 --> 08:16:53,420
Yep, that's the one.
12834
08:16:53,420 --> 08:16:55,580
Set project and these are the ones.
12835
08:16:55,580 --> 08:16:57,220
I'll pass you the variables in a minute.
12836
08:16:57,220 --> 08:17:00,820
But once this is done, now I can create an object,
12837
08:17:00,820 --> 08:17:02,100
not object, the account.
12838
08:17:02,100 --> 08:17:03,780
This is exactly what we studied.
12839
08:17:03,780 --> 08:17:05,980
Create an account by passing the context.
12840
08:17:05,980 --> 08:17:08,260
So I'll just go ahead and say this dot account.
12841
08:17:08,260 --> 08:17:09,940
Now you can have the value.
12842
08:17:09,940 --> 08:17:10,940
So what value you get?
12843
08:17:10,940 --> 08:17:12,860
You'll get obviously a new keyword
12844
08:17:12,860 --> 08:17:15,620
and we'll get an account, we'll pass on the context,
12845
08:17:15,620 --> 08:17:17,980
which in this case is this dot client.
12846
08:17:17,980 --> 08:17:18,860
There we go.
12847
08:17:18,860 --> 08:17:21,460
So no more repeatable code in every single time
12848
08:17:21,460 --> 08:17:22,300
I have to do this.
12849
08:17:22,300 --> 08:17:24,900
This is the best thing that you can do.
12850
08:17:24,900 --> 08:17:27,180
Now let's go ahead and pass on the variables into this one.
12851
08:17:27,180 --> 08:17:32,180
So this one will come up from conf dot app right URL.
12852
08:17:32,820 --> 08:17:34,260
Yep, that's what we used.
12853
08:17:34,260 --> 08:17:39,260
And into this one, we'll say conf dot app right project ID.
12854
08:17:39,740 --> 08:17:41,580
There we go, problem solved.
12855
08:17:41,580 --> 08:17:44,700
And this is highly, highly repeatable code.
12856
08:17:44,700 --> 08:17:47,180
Now, what we're gonna do is,
12857
08:17:47,180 --> 08:17:49,340
we're going to create a couple of methods.
12858
08:17:49,340 --> 08:17:51,180
And again, these are app right methods.
12859
08:17:51,180 --> 08:17:53,020
So your request is going to the app right,
12860
08:17:53,020 --> 08:17:55,940
coming back onto this one, this might take some time.
12861
08:17:55,940 --> 08:17:59,460
So obviously async await is your best friend in this case.
12862
08:17:59,460 --> 08:18:00,300
Maybe you don't like them,
12863
08:18:00,300 --> 08:18:02,100
but these are your best friends.
12864
08:18:02,900 --> 08:18:03,740
So what we're going to do is,
12865
08:18:03,740 --> 08:18:04,580
we are going to create a sync method.
12866
08:18:04,580 --> 08:18:07,620
And let's just call this one as create account.
12867
08:18:07,620 --> 08:18:09,700
And this method has no idea how it works.
12868
08:18:09,700 --> 08:18:10,780
It just works.
12869
08:18:10,780 --> 08:18:13,300
So this is my first method, create an account.
12870
08:18:13,300 --> 08:18:15,420
How to work with that, we'll walk through with that,
12871
08:18:15,420 --> 08:18:17,180
but I'll create a couple of methods like this.
12872
08:18:17,180 --> 08:18:19,220
So this is my create account.
12873
08:18:19,220 --> 08:18:21,100
This is my login method.
12874
08:18:21,100 --> 08:18:22,660
What else do you need?
12875
08:18:22,660 --> 08:18:24,380
So anything that you want to use.
12876
08:18:24,380 --> 08:18:27,740
So two things we already studied, sign up and login.
12877
08:18:27,740 --> 08:18:29,380
Maybe more things you are going to require.
12878
08:18:29,380 --> 08:18:30,580
Maybe you are going to require,
12879
08:18:30,580 --> 08:18:32,340
give me the current logged in user
12880
08:18:32,340 --> 08:18:34,020
or whoever has the current session.
12881
08:18:34,020 --> 08:18:35,460
So we can just use that.
12882
08:18:35,460 --> 08:18:40,420
So I'll just use this one, get current user, just like this.
12883
08:18:40,420 --> 08:18:42,420
And after that, log out will be one.
12884
08:18:42,420 --> 08:18:45,100
So obviously we need to delete all the sessions.
12885
08:18:45,100 --> 08:18:46,700
We just saw the code for that.
12886
08:18:46,700 --> 08:18:48,020
So that will be log out.
12887
08:18:48,020 --> 08:18:49,340
So if you have anything more,
12888
08:18:49,340 --> 08:18:51,280
you can go ahead and use more such things.
12889
08:18:51,280 --> 08:18:53,220
Now it's time that we write logics for that.
12890
08:18:53,220 --> 08:18:55,780
So for that, let's refer the documentation.
12891
08:18:55,780 --> 08:18:58,500
For the signup, we have gone through with this much part.
12892
08:18:58,500 --> 08:19:01,220
So I'm not worried on this part now.
12893
08:19:01,220 --> 08:19:03,580
All I'm worried about is dot create method
12894
08:19:03,580 --> 08:19:04,940
that I have to go through.
12895
08:19:04,940 --> 08:19:06,420
I'll be giving the user ID.
12896
08:19:06,420 --> 08:19:09,140
So I can give my own unique ID or I can use the ID
12897
08:19:09,140 --> 08:19:12,220
which I borrowed from the app right just here.
12898
08:19:12,220 --> 08:19:13,560
And I have to pass on email
12899
08:19:13,560 --> 08:19:15,060
and whatever else field you have,
12900
08:19:15,060 --> 08:19:17,380
you just pass on them and it will create an account.
12901
08:19:17,380 --> 08:19:19,500
All right, let's see how we can do that.
12902
08:19:19,500 --> 08:19:21,820
So anybody who will be using this method
12903
08:19:21,820 --> 08:19:23,780
will be passing me what?
12904
08:19:23,780 --> 08:19:27,280
Email and we'll be getting password
12905
08:19:27,280 --> 08:19:28,680
and we'll be grabbing the name as well.
12906
08:19:28,680 --> 08:19:29,680
Maybe you have more field,
12907
08:19:29,680 --> 08:19:32,040
go ahead and grab more field, nothing to be worried.
12908
08:19:32,040 --> 08:19:34,200
Now in this one, obviously this might fail.
12909
08:19:34,200 --> 08:19:37,160
So your try catch is again a good friend.
12910
08:19:37,160 --> 08:19:39,960
Feel free to use try catch or promises, that's up to you.
12911
08:19:39,960 --> 08:19:41,760
I'll leave that as a simple exercise for you,
12912
08:19:41,760 --> 08:19:43,600
but I'll go with that classic try catch
12913
08:19:43,600 --> 08:19:44,880
because I think that's easy.
12914
08:19:44,880 --> 08:19:47,880
And in this case, I'll just go ahead and say throw error.
12915
08:19:47,880 --> 08:19:49,880
That's it, should have handled better,
12916
08:19:49,880 --> 08:19:52,620
but in this case, just want to walk you through with that.
12917
08:19:52,620 --> 08:19:56,860
Okay, now we have seen that we have to use this method
12918
08:19:57,300 --> 08:19:58,140
dot account dot create.
12919
08:19:58,140 --> 08:19:59,660
Okay, I can use that.
12920
08:19:59,660 --> 08:20:01,100
This is going to be awaited
12921
08:20:01,100 --> 08:20:03,220
because this is a promise that we are getting.
12922
08:20:03,220 --> 08:20:04,620
So if we are not using promise,
12923
08:20:04,620 --> 08:20:06,500
then obviously we have to await.
12924
08:20:06,500 --> 08:20:08,860
So in this one, I have to access this account.
12925
08:20:08,860 --> 08:20:10,260
I have to call this dot account.
12926
08:20:10,260 --> 08:20:12,900
They don't because they are directly using it.
12927
08:20:12,900 --> 08:20:14,900
I have created an object.
12928
08:20:14,900 --> 08:20:16,020
I have created a constructor.
12929
08:20:16,020 --> 08:20:17,500
So that's why I'm using this.
12930
08:20:17,500 --> 08:20:21,580
So this dot account and it has a method dot create.
12931
08:20:21,580 --> 08:20:22,420
That's it.
12932
08:20:22,420 --> 08:20:24,420
And all the values need to be passed on.
12933
08:20:24,420 --> 08:20:26,900
The first method is the user ID.
12934
08:20:26,900 --> 08:20:29,080
So the first method I can grab with the ID
12935
08:20:29,080 --> 08:20:33,140
that I borrowed, notice here, this ID exactly same.
12936
08:20:33,140 --> 08:20:35,140
If you'll study the documentation of this,
12937
08:20:35,140 --> 08:20:36,440
this has couple of methods.
12938
08:20:36,440 --> 08:20:38,060
And as soon as you put up a dot,
12939
08:20:38,060 --> 08:20:42,460
you can see that there is a thing known as unique.
12940
08:20:42,460 --> 08:20:44,540
No suggestions, bad luck.
12941
08:20:44,540 --> 08:20:46,140
So you can just provide a unique
12942
08:20:46,140 --> 08:20:47,900
and it gives you a string,
12943
08:20:47,900 --> 08:20:49,240
which you can store as a unique ID.
12944
08:20:49,240 --> 08:20:52,500
But there are a lot of other ways to generate unique IDs.
12945
08:20:52,500 --> 08:20:54,500
Maybe you want to use nano ID or something,
12946
08:20:54,500 --> 08:20:55,620
totally up to you.
12947
08:20:55,620 --> 08:20:59,340
I'll go ahead and give email and I'll give a password
12948
08:20:59,340 --> 08:21:00,940
and I'll also give a name.
12949
08:21:00,940 --> 08:21:03,780
If you have more parameters, go ahead and pass on this.
12950
08:21:03,780 --> 08:21:06,140
Now this is going to create an account.
12951
08:21:06,140 --> 08:21:07,740
So let's store that into a variable
12952
08:21:07,740 --> 08:21:09,920
and call this one as user account.
12953
08:21:09,920 --> 08:21:11,000
There we go.
12954
08:21:11,000 --> 08:21:12,740
Now we have the user account.
12955
08:21:12,740 --> 08:21:13,900
Now I can check it,
12956
08:21:13,900 --> 08:21:16,100
whether the user account was successfully created or not.
12957
08:21:16,100 --> 08:21:18,820
So I can just run a simple if else condition
12958
08:21:18,820 --> 08:21:21,520
and I'll check if the user account exists or not.
12959
08:21:21,520 --> 08:21:23,520
So if user account exists, do something.
12960
08:21:23,520 --> 08:21:28,520
If it doesn't exist, then return whatever the value is.
12961
08:21:29,220 --> 08:21:31,740
Maybe there's a null inside it or whatever that is.
12962
08:21:31,740 --> 08:21:33,080
It's up to you how you handle that.
12963
08:21:33,080 --> 08:21:35,480
Maybe you want to return a proper error object
12964
08:21:35,480 --> 08:21:37,920
that hey, throw this error, whatever you want to do,
12965
08:21:37,920 --> 08:21:39,040
it's up to you.
12966
08:21:39,040 --> 08:21:42,700
But if the account was created, I want to log in the user.
12967
08:21:42,700 --> 08:21:44,240
Probably that's my workflow.
12968
08:21:44,240 --> 08:21:46,660
Probably that's the flow I want to go with the application.
12969
08:21:46,660 --> 08:21:48,640
So I can just go ahead and say return
12970
08:21:48,640 --> 08:21:51,560
and I can call another method login
12971
08:21:51,560 --> 08:21:54,560
and I can just log in the user using this method.
12972
08:21:54,560 --> 08:21:57,000
Obviously this login is not going to work directly.
12973
08:21:57,000 --> 08:21:58,720
This requires some parameter.
12974
08:21:58,720 --> 08:22:01,700
I can log in with email and password.
12975
08:22:01,700 --> 08:22:04,600
Now I can just simply go ahead and say return
12976
08:22:04,600 --> 08:22:07,700
whatever is coming up back from this.login,
12977
08:22:07,700 --> 08:22:10,980
calling another method from the same class, how easy it is.
12978
08:22:10,980 --> 08:22:14,760
And for this one, let's pass on email and password.
12979
08:22:14,760 --> 08:22:15,840
That's it.
12980
08:22:15,840 --> 08:22:18,160
Now, whatever is your flow, totally go with that.
12981
08:22:18,180 --> 08:22:20,740
But I just wanted to show you how life is going to become
12982
08:22:20,740 --> 08:22:24,480
easier in the future with just this class that we have.
12983
08:22:24,480 --> 08:22:26,480
Now, similarly with the login, we know that.
12984
08:22:26,480 --> 08:22:27,360
We just studied it.
12985
08:22:27,360 --> 08:22:29,480
To log in, we know we want to just work
12986
08:22:29,480 --> 08:22:31,120
with this create email session.
12987
08:22:31,120 --> 08:22:33,360
I'll copy this so that I don't make a mistake
12988
08:22:33,360 --> 08:22:34,400
and I can just use it.
12989
08:22:34,400 --> 08:22:36,480
So let's go ahead and try the exact same methods.
12990
08:22:36,480 --> 08:22:40,080
So again, try catch, catch, not going to do too much
12991
08:22:40,080 --> 08:22:42,060
apart from throw the error.
12992
08:22:42,060 --> 08:22:46,960
And in the try part, let's go ahead and return a wait.
12993
08:22:46,960 --> 08:22:48,280
Obviously we have to wait.
12994
08:22:48,280 --> 08:22:51,400
This.account, and we have to use the method
12995
08:22:51,400 --> 08:22:55,480
of create email session, pass on the email and password
12996
08:22:55,480 --> 08:22:57,480
that you have grabbed.
12997
08:22:57,480 --> 08:22:58,760
And that's it.
12998
08:22:58,760 --> 08:23:00,940
So easy to work on with.
12999
08:23:00,940 --> 08:23:04,040
And this is why I like so much.
13000
08:23:04,040 --> 08:23:05,760
This file is so much reusable.
13001
08:23:05,760 --> 08:23:07,840
This file is not opinionated.
13002
08:23:07,840 --> 08:23:09,400
You can use this in React Native.
13003
08:23:09,400 --> 08:23:10,540
You can use this in React.
13004
08:23:10,540 --> 08:23:13,280
I have used this in my lots of other tutorials as well.
13005
08:23:13,280 --> 08:23:14,760
And that's why I love to create this.
13006
08:23:15,360 --> 08:23:20,080
Maybe right now, this create account as well as this login
13007
08:23:20,080 --> 08:23:21,920
is not good enough feature for you.
13008
08:23:21,920 --> 08:23:23,200
Maybe you want to add more.
13009
08:23:23,200 --> 08:23:25,120
Just go ahead and add more methods into class.
13010
08:23:25,120 --> 08:23:26,360
That's great.
13011
08:23:26,360 --> 08:23:28,360
Now let me show you how you can get the current user.
13012
08:23:28,360 --> 08:23:30,000
This is a little bit hidden in the docs,
13013
08:23:30,000 --> 08:23:31,720
but super easy again.
13014
08:23:31,720 --> 08:23:33,080
There's just one line here.
13015
08:23:33,080 --> 08:23:35,520
So I'll just go ahead and try catch.
13016
08:23:35,520 --> 08:23:38,320
And if the catch is there, you are not able to grab the user.
13017
08:23:38,320 --> 08:23:40,360
Then I want to do a little bit of the more console log,
13018
08:23:40,360 --> 08:23:43,240
but anyways, I'll just go ahead and say return.
13019
08:23:43,320 --> 08:23:46,480
The way it is must have this dot account
13020
08:23:46,480 --> 08:23:50,280
and the method to get the current user is dot get.
13021
08:23:50,280 --> 08:23:52,320
Yeah, super simple.
13022
08:23:52,320 --> 08:23:54,000
That's all I have to do.
13023
08:23:54,000 --> 08:23:55,640
No variables, nothing is required.
13024
08:23:55,640 --> 08:23:59,040
It just, since this account has an access
13025
08:23:59,040 --> 08:24:00,920
to the endpoints and all of this.
13026
08:24:00,920 --> 08:24:02,520
So that's how I can grab it.
13027
08:24:02,520 --> 08:24:03,960
Super, super easy.
13028
08:24:03,960 --> 08:24:05,640
But if I'm not able to do this,
13029
08:24:05,640 --> 08:24:08,640
then obviously I'll want to do a console log in this case,
13030
08:24:08,640 --> 08:24:11,220
because sometimes this has happened to me
13031
08:24:11,220 --> 08:24:12,960
that while working with this application,
13032
08:24:13,560 --> 08:24:14,840
things might have gone a little bit wrong.
13033
08:24:14,840 --> 08:24:17,520
So I'll just copy paste a little bit of the error.
13034
08:24:17,520 --> 08:24:22,520
So I'll just say app write service.
13035
08:24:22,520 --> 08:24:24,480
There is an error in the service, two colons.
13036
08:24:24,480 --> 08:24:28,680
And then the problem is in get current, oops,
13037
08:24:28,680 --> 08:24:30,480
get current user.
13038
08:24:30,480 --> 08:24:32,720
This is the method which is creating me the problem,
13039
08:24:32,720 --> 08:24:34,720
two colons, and then I'll just go ahead
13040
08:24:34,720 --> 08:24:37,920
and would like to stack the entire error,
13041
08:24:37,920 --> 08:24:38,800
which is coming to me.
13042
08:24:38,800 --> 08:24:40,520
Again, it's up to you how you handle the error.
13043
08:24:40,520 --> 08:24:42,120
It's totally up to you.
13044
08:24:42,120 --> 08:24:44,440
But if I'm not able to run any of the try catch
13045
08:24:44,440 --> 08:24:45,280
and all of that,
13046
08:24:45,280 --> 08:24:47,380
I would love to gracefully end this method
13047
08:24:47,380 --> 08:24:49,160
by returning a simple null.
13048
08:24:49,160 --> 08:24:50,560
So I'll check whether what I'm getting,
13049
08:24:50,560 --> 08:24:51,400
if I'm getting null,
13050
08:24:51,400 --> 08:24:53,840
I can handle the situation based on that.
13051
08:24:53,840 --> 08:24:56,360
Now, another one is how to do the logout.
13052
08:24:56,360 --> 08:24:57,480
The logout is super easy.
13053
08:24:57,480 --> 08:25:00,560
If you want to do anything, just go hit account API,
13054
08:25:00,560 --> 08:25:02,200
look for what all that you want to do.
13055
08:25:02,200 --> 08:25:03,960
You have to study this obviously.
13056
08:25:03,960 --> 08:25:06,020
List the identities, delete the identities,
13057
08:25:06,020 --> 08:25:08,200
update the phone numbers, list the sessions,
13058
08:25:08,200 --> 08:25:09,320
delete the sessions, yes.
13059
08:25:09,360 --> 08:25:13,400
This is exactly how you delete all the currently logged
13060
08:25:13,400 --> 08:25:15,680
in sessions or known as logged out.
13061
08:25:15,680 --> 08:25:17,760
You can get the sessions as well, just like this.
13062
08:25:17,760 --> 08:25:21,000
You can go ahead and get all these sessions.
13063
08:25:21,000 --> 08:25:22,760
And there's a lot more here.
13064
08:25:22,760 --> 08:25:25,960
Some things you require a little bit more of the studies
13065
08:25:25,960 --> 08:25:28,220
and discussion, the Discord forum is also,
13066
08:25:28,220 --> 08:25:30,320
Discord section entirely is pretty great.
13067
08:25:30,320 --> 08:25:32,600
Anyways, so let's go ahead and work with,
13068
08:25:32,600 --> 08:25:34,000
I want to delete the sessions.
13069
08:25:34,000 --> 08:25:36,180
So all I have to do is use this delete sessions,
13070
08:25:36,180 --> 08:25:39,340
copy this and we'll come back onto the logout.
13071
08:25:39,340 --> 08:25:41,020
We don't need anything.
13072
08:25:41,020 --> 08:25:44,820
As a parameter, we'll just go with the try catch.
13073
08:25:44,820 --> 08:25:48,800
In the catch, we'll just do a same kind of a thing.
13074
08:25:48,800 --> 08:25:53,620
So let's go ahead and copy this, paste this.
13075
08:25:53,620 --> 08:25:57,600
And this time the error is inside the logout.
13076
08:25:57,600 --> 08:25:58,720
There we go.
13077
08:25:58,720 --> 08:26:00,300
In the try, what do you want to do?
13078
08:26:00,300 --> 08:26:05,300
I want to await this dot account dot delete sessions.
13079
08:26:06,460 --> 08:26:08,340
Make sure there's an S at the end of it
13080
08:26:08,340 --> 08:26:10,780
because it deletes every session that you have.
13081
08:26:10,780 --> 08:26:11,800
So there we go.
13082
08:26:11,800 --> 08:26:14,020
This is the way how we actually were able
13083
08:26:14,020 --> 08:26:16,740
to just simply create some of the methods
13084
08:26:16,740 --> 08:26:18,220
that helped us to do all of this.
13085
08:26:18,220 --> 08:26:19,900
But this is not all.
13086
08:26:19,900 --> 08:26:21,700
Because right now this is a great class
13087
08:26:21,700 --> 08:26:22,740
that we have built up.
13088
08:26:22,740 --> 08:26:24,120
And let me just minimize this.
13089
08:26:24,120 --> 08:26:25,940
This is going to work nicely.
13090
08:26:25,940 --> 08:26:27,660
And I'll not forget to remove all of this.
13091
08:26:27,660 --> 08:26:29,140
This was just to show you,
13092
08:26:29,140 --> 08:26:30,940
usually every programmer does that.
13093
08:26:30,940 --> 08:26:33,020
Bring some things, keep them in the file,
13094
08:26:33,020 --> 08:26:34,580
eventually remove that.
13095
08:26:34,580 --> 08:26:37,540
This class is great, but this class needs an object
13096
08:26:37,540 --> 08:26:39,980
so that this constructor is invoked
13097
08:26:39,980 --> 08:26:43,160
at the time of creation of the object, obviously.
13098
08:26:43,160 --> 08:26:46,700
So what we can do is we can simply go ahead and say const.
13099
08:26:46,700 --> 08:26:49,120
And let's just call this one as auth service.
13100
08:26:50,740 --> 08:26:52,220
Service.
13101
08:26:52,220 --> 08:26:54,060
And that service will be created, obviously,
13102
08:26:54,060 --> 08:26:56,100
new auth service, just like this.
13103
08:26:56,100 --> 08:26:57,640
So we have created an object.
13104
08:26:57,640 --> 08:26:59,060
Now we are going to go ahead
13105
08:26:59,060 --> 08:27:03,100
and export default this auth service,
13106
08:27:03,100 --> 08:27:04,940
this object auth service.
13107
08:27:04,940 --> 08:27:07,100
So this lower one is an object.
13108
08:27:07,100 --> 08:27:09,260
This upper class is the class itself.
13109
08:27:09,260 --> 08:27:12,460
So now the advantage of exporting this object
13110
08:27:12,460 --> 08:27:15,860
is that at any point of time, the constructor is invoked.
13111
08:27:15,860 --> 08:27:17,980
So my endpoints are properly created.
13112
08:27:17,980 --> 08:27:21,020
And since it's an object, it can access all those methods.
13113
08:27:21,020 --> 08:27:23,500
So life is much more easier this way.
13114
08:27:23,500 --> 08:27:26,300
So this is all that you need to know about these services.
13115
08:27:26,300 --> 08:27:28,020
And in case you want to add more methods,
13116
08:27:28,020 --> 08:27:31,860
maybe in your application, it makes sense
13117
08:27:31,860 --> 08:27:33,460
to update the status as well.
13118
08:27:33,460 --> 08:27:35,140
So you can update the status as well
13119
08:27:35,140 --> 08:27:36,860
that whatever, however you want to do,
13120
08:27:36,860 --> 08:27:39,660
does it make sense or not status of anything?
13121
08:27:39,660 --> 08:27:41,180
So you can make more things.
13122
08:27:41,180 --> 08:27:42,660
Maybe you want to create a JWT.
13123
08:27:42,660 --> 08:27:44,660
So you can go ahead and request create JWT.
13124
08:27:44,660 --> 08:27:46,260
It will give you a JWT.
13125
08:27:46,260 --> 08:27:49,300
So just go ahead and add more of these methods
13126
08:27:49,300 --> 08:27:51,540
in your class, highly reusable code.
13127
08:27:51,540 --> 08:27:53,420
And I'll obviously go ahead and push all of this code.
13128
08:27:53,420 --> 08:27:55,940
You can find them all in the GitHub section
13129
08:27:55,940 --> 08:27:57,700
in the description section.
13130
08:27:57,700 --> 08:27:58,680
So this is really nice.
13131
08:27:58,680 --> 08:28:00,220
I enjoy this quite a lot.
13132
08:28:00,220 --> 08:28:02,100
This is really a high quality code
13133
08:28:02,100 --> 08:28:04,980
that you have written, highly reusable in any application.
13134
08:28:04,980 --> 08:28:06,300
And it's fun as well.
13135
08:28:06,300 --> 08:28:09,060
So in the next video, we'll go through with the same process.
13136
08:28:09,060 --> 08:28:11,700
But this time, we have already done with the Auth section.
13137
08:28:11,700 --> 08:28:14,180
Next time in our application, it makes sense
13138
08:28:14,180 --> 08:28:17,180
to have an interaction with database as well as storage.
13139
08:28:17,180 --> 08:28:18,820
You can keep them in separate files as well.
13140
08:28:18,820 --> 08:28:20,660
We don't have that much of the application
13141
08:28:20,660 --> 08:28:22,060
or the methods being called.
13142
08:28:22,060 --> 08:28:23,700
So we'll keep them in just one file.
13143
08:28:23,700 --> 08:28:26,180
And it's your choice, your decision totally.
13144
08:28:26,180 --> 08:28:27,580
So in the next video, I'll walk you through
13145
08:28:27,580 --> 08:28:29,380
how we can interact with the database
13146
08:28:29,380 --> 08:28:30,780
as well as the storage section
13147
08:28:30,780 --> 08:28:33,100
and the storage APIs of the app, right?
13148
08:28:33,100 --> 08:28:33,940
I hope you're excited.
13149
08:28:33,940 --> 08:28:36,020
If you are, do let me know in the comment section.
13150
08:28:36,020 --> 08:28:37,920
I would be super, super pumped up
13151
08:28:37,920 --> 08:28:39,180
to get some of your support,
13152
08:28:39,180 --> 08:28:41,340
maybe on tweet, on LinkedIn or wherever.
13153
08:28:41,340 --> 08:28:44,400
If these videos are making a little bit help,
13154
08:28:44,400 --> 08:28:45,820
some motivation is required for me.
13155
08:28:45,820 --> 08:28:47,300
I really, really need that.
13156
08:28:47,300 --> 08:28:48,420
That's it for this video.
13157
08:28:48,420 --> 08:28:49,540
Thank you so much.
13158
08:28:49,540 --> 08:28:51,340
I'll catch you up in the next one.
13159
08:28:54,220 --> 08:28:55,140
Hey there, everyone.
13160
08:28:55,140 --> 08:28:57,020
It is here back again with another video
13161
08:28:57,020 --> 08:28:58,680
and welcome to another episode
13162
08:28:58,720 --> 08:29:00,360
where we are trying to learn React
13163
08:29:00,360 --> 08:29:03,320
and we are trying to finish up our mega project.
13164
08:29:03,320 --> 08:29:05,040
In this video, you will learn everything
13165
08:29:05,040 --> 08:29:07,100
that you probably will need to learn
13166
08:29:07,100 --> 08:29:09,240
about AppRite's database,
13167
08:29:09,240 --> 08:29:11,400
how to make queries with the database,
13168
08:29:11,400 --> 08:29:14,960
as well as how the storage facility of the AppRite works.
13169
08:29:14,960 --> 08:29:16,820
The code that we are going to write in this video
13170
08:29:16,820 --> 08:29:19,360
is of course highly, highly reusable.
13171
08:29:19,360 --> 08:29:21,520
You can use it with the React application,
13172
08:29:21,520 --> 08:29:23,040
Next.js application,
13173
08:29:23,040 --> 08:29:24,800
probably with the mobile application as well,
13174
08:29:24,800 --> 08:29:27,040
like React Native Letter, whatever you're using.
13175
08:29:27,080 --> 08:29:29,320
We'll just keep it absolutely independent
13176
08:29:29,320 --> 08:29:31,120
of whatever the platform you're using.
13177
08:29:31,120 --> 08:29:33,400
That's the goal and we are going with that.
13178
08:29:33,400 --> 08:29:35,000
And of course, it's a little winter time.
13179
08:29:35,000 --> 08:29:40,000
So probably one of my first video in the winter wear.
13180
08:29:40,080 --> 08:29:41,800
So that's what we are going for.
13181
08:29:41,800 --> 08:29:43,280
Okay, so let me share the screen.
13182
08:29:43,280 --> 08:29:45,920
And first, let me just remind a little bit jog
13183
08:29:45,920 --> 08:29:48,680
of the memory of what we are about to do in this one.
13184
08:29:48,680 --> 08:29:51,440
So in case you remember, in the last video,
13185
08:29:51,440 --> 08:29:53,200
we worked through with the Auth.js
13186
08:29:53,200 --> 08:29:55,520
and I gave you a simple walkthrough
13187
08:29:55,520 --> 08:29:57,240
of how these things actually work.
13188
08:29:57,240 --> 08:29:59,640
And we created a simple Auth service,
13189
08:29:59,640 --> 08:30:02,480
which is having all the constructors and methods.
13190
08:30:02,480 --> 08:30:04,440
And we are using the client account.
13191
08:30:04,440 --> 08:30:06,560
We created methods like create account login,
13192
08:30:06,560 --> 08:30:09,300
current user logout, and probably you can add more.
13193
08:30:09,300 --> 08:30:11,860
We also went up with the documentation.
13194
08:30:11,860 --> 08:30:14,360
So we studied the bit and pieces of the documentation
13195
08:30:14,360 --> 08:30:16,080
of how the account API works,
13196
08:30:16,080 --> 08:30:18,600
how you can add and learn about more methods
13197
08:30:18,600 --> 08:30:21,400
in the documentation like creating JWTs
13198
08:30:21,400 --> 08:30:23,840
or maybe creating password recovery, whatever you want.
13199
08:30:23,840 --> 08:30:25,320
That is exactly the same thing
13200
08:30:25,320 --> 08:30:27,040
that we are going to work through it.
13201
08:30:27,040 --> 08:30:28,680
I'll just crawl this a little bit
13202
08:30:28,680 --> 08:30:31,640
so that we can see it nicely.
13203
08:30:31,640 --> 08:30:33,940
All right, looks good, decent.
13204
08:30:36,120 --> 08:30:39,080
Yeah, I think, yeah, that's okay.
13205
08:30:39,080 --> 08:30:40,480
Now the next thing that we are going to do
13206
08:30:40,480 --> 08:30:43,880
is almost similar kind of approach that we are going to use,
13207
08:30:43,880 --> 08:30:46,640
but this time we'll be taking care of the different
13208
08:30:46,640 --> 08:30:48,080
of the APIs that are available.
13209
08:30:48,080 --> 08:30:48,960
So let's go here.
13210
08:30:48,960 --> 08:30:51,480
And this time we are first curious about database
13211
08:30:51,480 --> 08:30:53,880
and then we obviously are curious about storage as well.
13212
08:30:53,880 --> 08:30:55,500
Let's explore the database.
13213
08:30:55,500 --> 08:30:57,960
So when you look on the database here,
13214
08:30:57,960 --> 08:31:00,280
what do we actually go with that?
13215
08:31:00,280 --> 08:31:02,840
First of all, you can see there are concept of database,
13216
08:31:02,840 --> 08:31:05,320
collection, document, relationship, all these.
13217
08:31:05,320 --> 08:31:07,620
And then there are journeys about the queries
13218
08:31:07,620 --> 08:31:08,460
that you can make.
13219
08:31:08,460 --> 08:31:09,760
Of course, you can do order pagination
13220
08:31:09,760 --> 08:31:11,040
that's also available.
13221
08:31:11,040 --> 08:31:14,080
But first of all, let's understand the concept of databases
13222
08:31:14,080 --> 08:31:16,300
and then we'll also learn about how the queries
13223
08:31:16,300 --> 08:31:17,860
are being done and used.
13224
08:31:17,860 --> 08:31:19,120
If I click on the databases,
13225
08:31:19,120 --> 08:31:21,320
this is how you create an SDKs and servers
13226
08:31:22,280 --> 08:31:23,120
and whatnot.
13227
08:31:23,120 --> 08:31:24,640
The most important thing with the database as well
13228
08:31:24,640 --> 08:31:28,280
is that you need some of the constant fields
13229
08:31:28,280 --> 08:31:29,100
that are required.
13230
08:31:29,100 --> 08:31:32,240
Now this one is actually a node app, right?
13231
08:31:32,240 --> 08:31:34,080
We are not interested in that
13232
08:31:34,080 --> 08:31:36,440
because that's something you want to interact
13233
08:31:36,440 --> 08:31:38,360
if you're making a backend as application
13234
08:31:38,360 --> 08:31:40,200
and which is interacting with that.
13235
08:31:40,200 --> 08:31:42,240
We are more over worried about creating
13236
08:31:42,240 --> 08:31:43,680
and getting through with the collections
13237
08:31:43,680 --> 08:31:45,040
and buckets and all that.
13238
08:31:45,040 --> 08:31:46,760
But one common thing you will notice here,
13239
08:31:46,760 --> 08:31:48,680
this is here, it says SDK database.
13240
08:31:48,680 --> 08:31:52,560
But if I go ahead and look for a legacy database APIs,
13241
08:31:53,440 --> 08:31:55,780
notice here the exact same thing.
13242
08:31:55,780 --> 08:31:57,680
We get the app right from the,
13243
08:31:57,680 --> 08:32:00,200
and we extract client and database out of it.
13244
08:32:00,200 --> 08:32:02,040
Let me zoom this a little bit.
13245
08:32:02,040 --> 08:32:04,440
And we exactly create a client.
13246
08:32:04,440 --> 08:32:05,860
Just like in the auth service,
13247
08:32:05,860 --> 08:32:08,440
we created auth from this.
13248
08:32:08,440 --> 08:32:10,720
This time exactly we'll be using databases,
13249
08:32:10,720 --> 08:32:12,880
we'll be passing on a reference of the client.
13250
08:32:12,880 --> 08:32:14,640
And the endpoints are exactly same.
13251
08:32:14,640 --> 08:32:17,200
The endpoints is first of all, the URL
13252
08:32:17,200 --> 08:32:19,080
and then we need a project one.
13253
08:32:19,080 --> 08:32:19,920
Now out of this,
13254
08:32:19,920 --> 08:32:23,060
just like you were able to extract auth database,
13255
08:32:23,060 --> 08:32:26,320
I think this gives us enough idea that exactly same way,
13256
08:32:26,320 --> 08:32:29,560
we can actually extract the services for storage as well.
13257
08:32:29,560 --> 08:32:31,880
And that's exactly what we'll be doing in this one.
13258
08:32:31,880 --> 08:32:34,840
So let me go ahead and copy this piece of code
13259
08:32:34,840 --> 08:32:36,760
so that we can work on it together.
13260
08:32:36,760 --> 08:32:38,660
And we'll be using exactly same approach
13261
08:32:38,660 --> 08:32:40,920
that we used in the auth that let's create a class
13262
08:32:40,920 --> 08:32:43,200
and set up all these things.
13263
08:32:43,200 --> 08:32:45,600
And we'll be exporting this class as well.
13264
08:32:45,600 --> 08:32:47,840
Now it's up to you, what do you name this class?
13265
08:32:47,840 --> 08:32:49,960
Since there is not too much of the things
13266
08:32:49,960 --> 08:32:50,800
that we are doing,
13267
08:32:50,800 --> 08:32:54,160
usually I would love to keep my storage into separate class
13268
08:32:54,160 --> 08:32:57,400
and my database related all stuff in a separate class
13269
08:32:57,400 --> 08:32:58,360
or a file at least,
13270
08:32:58,360 --> 08:33:00,520
but in this case, this is not too much going on.
13271
08:33:00,520 --> 08:33:04,160
So I'll just wrap them up in same file here.
13272
08:33:04,160 --> 08:33:05,800
I'm gonna call this one as config,
13273
08:33:05,800 --> 08:33:07,800
not too confused with the conf.
13274
08:33:07,800 --> 08:33:10,840
Conf is for app rights URL only
13275
08:33:10,840 --> 08:33:13,120
and config is for all the configuration,
13276
08:33:13,120 --> 08:33:15,500
remaining all the configuration that I require.
13277
08:33:15,500 --> 08:33:16,700
Let's go ahead and work on with that.
13278
08:33:16,700 --> 08:33:19,460
First of all, I'll paste whatever I copied.
13279
08:33:19,460 --> 08:33:22,700
So this is the stuff that is required for myself.
13280
08:33:22,700 --> 08:33:24,740
Now let's go ahead and move it at the bottom
13281
08:33:24,740 --> 08:33:28,100
and just go ahead and explore them one by one.
13282
08:33:28,100 --> 08:33:30,180
So first of all, the most important thing
13283
08:33:30,180 --> 08:33:33,260
is to grab all the conf, which is the URLs.
13284
08:33:35,380 --> 08:33:37,580
So let's go ahead and grab the URLs.
13285
08:33:39,820 --> 08:33:42,400
URL, I mean to say all the end points
13286
08:33:42,400 --> 08:33:45,220
like the environment variables, basically.
13287
08:33:45,260 --> 08:33:48,700
So I'll just go ahead and say, give me a conf
13288
08:33:48,700 --> 08:33:50,420
and that will be coming up from,
13289
08:33:50,420 --> 08:33:53,380
let's go one directory back inside the conf
13290
08:33:53,380 --> 08:33:58,140
and we have conf.js or conf, that's the first thing.
13291
08:33:58,140 --> 08:34:00,260
After that, we obviously are going to need
13292
08:34:00,260 --> 08:34:01,740
the client and database.
13293
08:34:01,740 --> 08:34:03,660
And I'm pretty sure by this point,
13294
08:34:03,660 --> 08:34:06,020
you have learned that you can also extract
13295
08:34:06,020 --> 08:34:07,420
all the services that you require,
13296
08:34:07,420 --> 08:34:08,540
maybe all the other things.
13297
08:34:08,540 --> 08:34:10,380
In this case, I need storage
13298
08:34:10,380 --> 08:34:12,540
and we'll also discuss a little bit about the queries,
13299
08:34:12,540 --> 08:34:13,460
how to make queries.
13300
08:34:13,460 --> 08:34:16,620
This is the most important part of learning the app right.
13301
08:34:16,620 --> 08:34:18,260
All right, so most of the things are done
13302
08:34:18,260 --> 08:34:19,880
and we'll be using exact same approach.
13303
08:34:19,880 --> 08:34:21,420
So let me also open up our auth
13304
08:34:21,420 --> 08:34:23,300
so that we can refer it back.
13305
08:34:23,300 --> 08:34:25,300
We created a class known as auth service
13306
08:34:25,300 --> 08:34:27,260
and we created client and account out of it.
13307
08:34:27,260 --> 08:34:29,660
Great approach, we'll be using exactly same.
13308
08:34:29,660 --> 08:34:31,100
So let's go ahead and simply go ahead
13309
08:34:31,100 --> 08:34:34,000
and say export class service.
13310
08:34:34,000 --> 08:34:35,860
In this one, we'll be exporting the class as well,
13311
08:34:35,860 --> 08:34:38,980
but the most important part is we'll be creating an object
13312
08:34:38,980 --> 08:34:40,460
and we'll be exporting that.
13313
08:34:40,460 --> 08:34:43,200
So that object at the time of creation of an object,
13314
08:34:43,800 --> 08:34:45,120
we create or we use the constructor
13315
08:34:45,120 --> 08:34:46,780
that's already spin-off
13316
08:34:46,780 --> 08:34:49,200
and also all the methods are directly available.
13317
08:34:49,200 --> 08:34:50,360
So that's the goal.
13318
08:34:50,360 --> 08:34:52,360
Let's call this one as service directly.
13319
08:34:52,360 --> 08:34:54,240
And in this one, first of all, we need a client.
13320
08:34:54,240 --> 08:34:56,200
So let's go ahead and create a client
13321
08:34:56,200 --> 08:34:58,120
and we'll be creating a client just like that.
13322
08:34:58,120 --> 08:34:59,640
So we have a client.
13323
08:34:59,640 --> 08:35:02,700
Apart from this, we will be needing databases.
13324
08:35:02,700 --> 08:35:05,000
So let's call this one as databases
13325
08:35:05,000 --> 08:35:07,040
and we'll be needing a bucket as well.
13326
08:35:07,040 --> 08:35:10,080
Now bucket might be a little bit unfamiliar to you,
13327
08:35:10,080 --> 08:35:11,400
but if you've watched the previous video,
13328
08:35:11,400 --> 08:35:13,000
you know that the folders in the app right
13329
08:35:13,000 --> 08:35:13,840
are called as bucket.
13330
08:35:13,840 --> 08:35:16,240
The same terminology is being used by AWS
13331
08:35:16,240 --> 08:35:18,080
and all the other folks as well.
13332
08:35:18,080 --> 08:35:20,640
So we got the client and we got the database,
13333
08:35:20,640 --> 08:35:24,420
but in order to actually properly create a database,
13334
08:35:24,420 --> 08:35:26,880
we need a couple of more things to be done.
13335
08:35:26,880 --> 08:35:28,920
So let's go ahead and do that.
13336
08:35:28,920 --> 08:35:32,000
First of all, let's check on the documentation.
13337
08:35:32,000 --> 08:35:35,520
So database can be created by new database,
13338
08:35:35,520 --> 08:35:38,120
but the issue is it needs a client to be passed on.
13339
08:35:38,120 --> 08:35:39,840
So we need to actually do that.
13340
08:35:39,840 --> 08:35:42,480
And client also needs these endpoints
13341
08:35:42,480 --> 08:35:43,760
and all these things to be created.
13342
08:35:43,760 --> 08:35:45,360
So that's also interesting.
13343
08:35:45,360 --> 08:35:48,340
Let me show you how that needs to be done.
13344
08:35:48,340 --> 08:35:51,160
First of all, let's go ahead and create a constructor.
13345
08:35:51,160 --> 08:35:53,800
In the constructor, as soon as somebody creates an object,
13346
08:35:53,800 --> 08:35:55,560
we'll spin off this constructor.
13347
08:35:55,560 --> 08:35:59,120
So this dot client will set an endpoint.
13348
08:35:59,120 --> 08:36:01,000
So let's go ahead and set an endpoint.
13349
08:36:01,000 --> 08:36:04,880
In this, we'll be grabbing the endpoint from conf.
13350
08:36:04,880 --> 08:36:09,880
So conf.api app-write URL, that's the one we need.
13351
08:36:11,640 --> 08:36:13,080
All right, once this is done,
13352
08:36:13,080 --> 08:36:15,760
then we obviously need to set a project.
13353
08:36:15,760 --> 08:36:18,000
So set project, that's the step one.
13354
08:36:18,000 --> 08:36:21,460
So we need to provide the project ID in this one.
13355
08:36:21,460 --> 08:36:26,120
Let's go ahead and say conf.app-write project ID,
13356
08:36:26,120 --> 08:36:27,440
that's the one we need.
13357
08:36:27,440 --> 08:36:30,640
And once this is done, that means properly a client
13358
08:36:30,640 --> 08:36:32,440
has all the variables and points
13359
08:36:32,440 --> 08:36:34,160
that are required for us to pass on.
13360
08:36:34,160 --> 08:36:35,760
So these two things are done.
13361
08:36:35,760 --> 08:36:38,280
And now based on this, I can take a utilization
13362
08:36:38,280 --> 08:36:40,680
and can actually create the database and the bucket.
13363
08:36:40,680 --> 08:36:42,360
So it's super, super easy.
13364
08:36:42,360 --> 08:36:44,120
All you have to do is pass on the reference
13365
08:36:44,120 --> 08:36:45,120
of this client and use it.
13366
08:36:45,120 --> 08:36:50,120
So this dot database, databases will be created by new,
13367
08:36:50,720 --> 08:36:55,720
oops, not like that, new database and inside databases
13368
08:36:57,160 --> 08:36:59,780
and we'll be passing on this dot client.
13369
08:36:59,780 --> 08:37:01,400
So I hope you can see the pattern
13370
08:37:01,400 --> 08:37:04,000
and the consistency in the documentation of app-write
13371
08:37:04,080 --> 08:37:05,640
that is pretty useful.
13372
08:37:05,640 --> 08:37:09,640
Exactly like this, we'll be simply creating this dot
13373
08:37:09,640 --> 08:37:12,200
and this time let's create a bucket
13374
08:37:12,200 --> 08:37:14,440
and bucket will be created from storage service.
13375
08:37:14,440 --> 08:37:16,520
So we have the storage just like that
13376
08:37:16,520 --> 08:37:19,400
and we'll be passing on this dot client.
13377
08:37:19,400 --> 08:37:22,440
All right, so this means now I have two variables with me,
13378
08:37:22,440 --> 08:37:25,320
database and bucket, which has access to pretty much anything
13379
08:37:25,320 --> 08:37:26,640
that you want to work with.
13380
08:37:26,640 --> 08:37:29,800
For example, if you want to just list all the documents,
13381
08:37:29,800 --> 08:37:32,540
now databases is capable of doing so.
13382
08:37:32,540 --> 08:37:35,060
So now we can use the methods like list documents
13383
08:37:35,060 --> 08:37:37,380
and pass on the document ID, collection ID
13384
08:37:37,380 --> 08:37:39,420
and whatever you want to ask for it.
13385
08:37:39,420 --> 08:37:41,860
This is exactly the point where you first time learn
13386
08:37:41,860 --> 08:37:44,140
that what all you can do with the database.
13387
08:37:44,140 --> 08:37:46,820
So in our case, we want to ask database
13388
08:37:46,820 --> 08:37:49,900
and grab some of the values out of it.
13389
08:37:49,900 --> 08:37:51,100
Okay, so let me show you.
13390
08:37:52,140 --> 08:37:54,200
First of all, let's create a couple of methods
13391
08:37:54,200 --> 08:37:56,300
and see what they will be able to do.
13392
08:37:56,300 --> 08:37:58,860
Obviously these methods will be async
13393
08:37:58,860 --> 08:38:01,060
and the very first method is get post.
13394
08:38:01,060 --> 08:38:03,780
So I want to grab a single post out of it.
13395
08:38:03,780 --> 08:38:06,180
Now, obviously when you're grabbing a single post,
13396
08:38:06,180 --> 08:38:08,540
you need to provide that based on what you want
13397
08:38:08,540 --> 08:38:10,060
to actually grab this.
13398
08:38:10,060 --> 08:38:13,980
So if I go back into app right cloud, which is here.
13399
08:38:13,980 --> 08:38:16,460
So this is my blog, which is previous one.
13400
08:38:16,460 --> 08:38:17,300
I'm not using it.
13401
08:38:17,300 --> 08:38:19,700
I have removed all the API's keys out of it.
13402
08:38:19,700 --> 08:38:22,080
This is my new one, but exactly same copy.
13403
08:38:22,080 --> 08:38:24,300
So if I go ahead and check it out
13404
08:38:24,300 --> 08:38:27,500
and let's take a look onto the databases here
13405
08:38:27,540 --> 08:38:31,380
and inside this one, we do have a database.
13406
08:38:32,900 --> 08:38:34,220
We were having the database.
13407
08:38:34,220 --> 08:38:36,800
So just to give you a brief idea
13408
08:38:36,800 --> 08:38:38,500
that how this actually works
13409
08:38:38,500 --> 08:38:40,260
or let me just walk you through directly.
13410
08:38:40,260 --> 08:38:44,740
Okay, so how can I grab a post out of it?
13411
08:38:44,740 --> 08:38:47,700
Okay, let's study a little bit of the documentation.
13412
08:38:47,700 --> 08:38:49,260
Okay, get the document.
13413
08:38:49,260 --> 08:38:50,860
So this is the one that I'm looking up for.
13414
08:38:50,860 --> 08:38:53,260
Again, by the way, all the CRUD operations are listed here,
13415
08:38:53,260 --> 08:38:54,980
create, get, update and delete.
13416
08:38:54,980 --> 08:38:56,940
So this is my get document.
13417
08:38:56,940 --> 08:38:58,980
In order to get a document, notice here,
13418
08:38:58,980 --> 08:39:01,060
I need to pass on the database ID.
13419
08:39:01,060 --> 08:39:02,360
Obviously I have that.
13420
08:39:02,360 --> 08:39:03,980
I need to pass on collection ID.
13421
08:39:03,980 --> 08:39:05,740
Obviously that makes hierarchy.
13422
08:39:05,740 --> 08:39:07,860
And then I have to provide a document ID.
13423
08:39:07,860 --> 08:39:09,500
And in case you remember,
13424
08:39:09,500 --> 08:39:12,580
we created each document ID as a slug.
13425
08:39:12,580 --> 08:39:15,160
Obviously you can pass on the auto generated IDs,
13426
08:39:15,160 --> 08:39:17,440
but we actually replaced it with the slug.
13427
08:39:17,440 --> 08:39:20,740
If you remember in the earlier videos, we actually did that.
13428
08:39:20,740 --> 08:39:23,340
So now somebody will be passing me on this slug
13429
08:39:23,340 --> 08:39:25,060
of the blog post.
13430
08:39:25,060 --> 08:39:26,740
So that's a unique one for me.
13431
08:39:26,780 --> 08:39:28,540
And I need to grab the ID from it.
13432
08:39:28,540 --> 08:39:30,380
Okay, now how do we do it?
13433
08:39:30,380 --> 08:39:32,200
Of course, it's a database operation.
13434
08:39:32,200 --> 08:39:34,580
So it needs to be wrapped up in the try catch.
13435
08:39:34,580 --> 08:39:36,060
First of all, let's do that.
13436
08:39:36,060 --> 08:39:38,500
And let's do a console log as an error.
13437
08:39:38,500 --> 08:39:41,340
So in the error part, we'll do exactly same.
13438
08:39:41,340 --> 08:39:46,340
We'll refer it as app, oops, not like that.
13439
08:39:47,380 --> 08:39:48,660
App right service.
13440
08:39:48,660 --> 08:39:51,660
And we'll just mark it where the problem actually comes.
13441
08:39:51,660 --> 08:39:54,120
And we'll say problem is in the get post.
13442
08:39:54,120 --> 08:39:56,460
So that we can again come back and look at
13443
08:39:56,500 --> 08:39:59,340
what is the exact point where I'm facing the issues.
13444
08:39:59,340 --> 08:40:01,740
Once this is done, then I'll obviously go ahead
13445
08:40:01,740 --> 08:40:04,380
and print the error as well.
13446
08:40:04,380 --> 08:40:05,580
I think that's good enough.
13447
08:40:05,580 --> 08:40:07,300
And we are going to return a false
13448
08:40:07,300 --> 08:40:10,160
so that in the front end part, we can handle that.
13449
08:40:10,160 --> 08:40:11,960
Now what's inside the try part?
13450
08:40:11,960 --> 08:40:14,500
Now you'll be surprised to know that how easy it is
13451
08:40:14,500 --> 08:40:17,260
to actually grab from the app right database.
13452
08:40:17,260 --> 08:40:18,940
Notice here, this dot databases,
13453
08:40:18,940 --> 08:40:20,700
this is our service that we use.
13454
08:40:20,700 --> 08:40:22,440
And all I have to use is a method.
13455
08:40:22,440 --> 08:40:24,780
I hope you can see that already get a document.
13456
08:40:24,780 --> 08:40:25,620
Yes.
13457
08:40:25,620 --> 08:40:28,020
The list document is to grab all the documents.
13458
08:40:28,020 --> 08:40:29,740
Get document is where you pass on that.
13459
08:40:29,740 --> 08:40:30,900
This is exactly what I need.
13460
08:40:30,900 --> 08:40:33,000
You need to pass on an ID here.
13461
08:40:33,000 --> 08:40:36,020
So again, the step one is to pass on the database ID.
13462
08:40:36,020 --> 08:40:40,100
So let's go ahead and say this is my app right database ID.
13463
08:40:40,100 --> 08:40:41,380
That's the step one.
13464
08:40:41,380 --> 08:40:44,340
The next step is to provide the collection ID.
13465
08:40:44,340 --> 08:40:49,080
So I'll grab that from conf.app right collection ID.
13466
08:40:49,080 --> 08:40:50,320
That's the next step.
13467
08:40:50,320 --> 08:40:52,740
And once after that, I have to provide this slug,
13468
08:40:52,780 --> 08:40:55,700
which whoever is using will use this method
13469
08:40:55,700 --> 08:40:58,060
will pass me up here and will give me that.
13470
08:40:58,060 --> 08:40:58,980
Once this is there,
13471
08:40:58,980 --> 08:41:00,780
obviously this operation will take some time.
13472
08:41:00,780 --> 08:41:04,620
So let's go ahead and wrap it or prefix it with the await.
13473
08:41:04,620 --> 08:41:06,180
And let's directly return that.
13474
08:41:06,180 --> 08:41:08,380
So whatever the value is coming in,
13475
08:41:08,380 --> 08:41:09,540
coming out of this query,
13476
08:41:09,540 --> 08:41:11,700
we'll directly just send it to the user.
13477
08:41:11,700 --> 08:41:14,060
So I hope you can see it's not really that difficult.
13478
08:41:14,060 --> 08:41:15,980
Whatever the unique value is, in our case,
13479
08:41:15,980 --> 08:41:18,340
slug is there, we will be just using it.
13480
08:41:18,340 --> 08:41:21,340
And when we'll be taking actual usage of the service,
13481
08:41:21,380 --> 08:41:23,620
you'll understand that how you actually grab that slug.
13482
08:41:23,620 --> 08:41:26,260
That's really easy from the URL, we can grab it.
13483
08:41:26,260 --> 08:41:27,540
From the title, we can grab it.
13484
08:41:27,540 --> 08:41:30,940
There are so many places, but this is it, this is it.
13485
08:41:30,940 --> 08:41:33,020
Now the next step is that, okay,
13486
08:41:33,020 --> 08:41:35,680
I know how to actually use this one.
13487
08:41:35,680 --> 08:41:37,780
Like I can update the document, get the document.
13488
08:41:37,780 --> 08:41:39,780
We'll create those methods as well.
13489
08:41:39,780 --> 08:41:43,680
But let's just say now I want to query the database
13490
08:41:43,680 --> 08:41:47,780
and only want to find out all the values,
13491
08:41:47,780 --> 08:41:50,220
which are status as active.
13492
08:41:50,220 --> 08:41:52,180
So there is some query in my case.
13493
08:41:52,180 --> 08:41:53,460
I'll just show you that.
13494
08:41:53,460 --> 08:41:56,140
I think that will help all of us in this one,
13495
08:41:56,140 --> 08:41:58,540
instead of worrying about the IDs and all of that.
13496
08:41:58,540 --> 08:42:01,000
So let's go into the databases.
13497
08:42:01,000 --> 08:42:03,820
And in the databases, we can see this is our collection.
13498
08:42:03,820 --> 08:42:05,660
And inside this, we have a blog.
13499
08:42:05,660 --> 08:42:07,700
So all the attributes, when I check this,
13500
08:42:07,700 --> 08:42:08,900
I have this user ID.
13501
08:42:08,900 --> 08:42:12,500
So user ID is there, there is a title here as well.
13502
08:42:12,500 --> 08:42:15,700
And we do have a slug here as well.
13503
08:42:15,700 --> 08:42:16,940
So inside the user ID,
13504
08:42:16,940 --> 08:42:18,820
we'll be passing on the slugs and all these,
13505
08:42:18,820 --> 08:42:20,580
not in the user ID, but the title.
13506
08:42:20,580 --> 08:42:22,740
Anyways, I'll just see this one.
13507
08:42:22,740 --> 08:42:26,740
Now, my goal is that I want to find out all the status,
13508
08:42:26,740 --> 08:42:29,300
which are marked as active.
13509
08:42:29,300 --> 08:42:32,200
So there is a query status need to be active.
13510
08:42:32,200 --> 08:42:37,200
So this time, find me all the documents in this database ID,
13511
08:42:38,860 --> 08:42:40,140
in this collection ID,
13512
08:42:40,140 --> 08:42:42,700
but not just I'll pass on one thing and give me all of that
13513
08:42:42,700 --> 08:42:44,620
or that one particular value,
13514
08:42:44,620 --> 08:42:47,420
give me all the values based on my query.
13515
08:42:47,420 --> 08:42:49,780
So this is the point where we need to study that,
13516
08:42:49,780 --> 08:42:52,300
hey, there is a key and the value is that,
13517
08:42:52,300 --> 08:42:54,100
only give me those documents.
13518
08:42:54,100 --> 08:42:55,180
So I'll come back here.
13519
08:42:55,180 --> 08:42:58,300
And if you'll notice that in the database,
13520
08:42:58,300 --> 08:43:02,060
I need to expand this a little bit, probably not.
13521
08:43:02,980 --> 08:43:06,440
And let's go into this one, the references.
13522
08:43:07,760 --> 08:43:10,340
And this time, we'll be going into database
13523
08:43:10,340 --> 08:43:13,420
and I want to learn about the queries.
13524
08:43:13,420 --> 08:43:14,860
So how do I make the queries?
13525
08:43:14,860 --> 08:43:16,060
That's interesting.
13526
08:43:16,060 --> 08:43:17,940
So notice here, it's super easy.
13527
08:43:17,940 --> 08:43:21,740
All you have to do is query dot select or dot equal,
13528
08:43:21,740 --> 08:43:23,140
whichever you want to use.
13529
08:43:23,140 --> 08:43:25,540
This one says select which attribute should be returned
13530
08:43:25,540 --> 08:43:27,860
from a document, a return document,
13531
08:43:27,860 --> 08:43:30,740
if attribute is equal to any value provided in the array.
13532
08:43:30,740 --> 08:43:33,920
So this is one that looks okay to me in this case,
13533
08:43:33,920 --> 08:43:35,700
because I'll be providing you status
13534
08:43:35,700 --> 08:43:37,460
and a value of the status.
13535
08:43:37,460 --> 08:43:39,460
And you give me all the documents
13536
08:43:39,460 --> 08:43:41,160
that actually matches that.
13537
08:43:41,160 --> 08:43:42,500
So I'll provide you a title.
13538
08:43:42,500 --> 08:43:44,260
In this case, it says Ironman,
13539
08:43:44,260 --> 08:43:47,220
but I'll give you a query dot equal,
13540
08:43:47,220 --> 08:43:50,620
which is status and the status should be active.
13541
08:43:50,620 --> 08:43:52,540
So I'll just give you, by the way, in the array,
13542
08:43:52,540 --> 08:43:54,580
you can pass on all the parameter as a string
13543
08:43:54,580 --> 08:43:56,620
if you have multiple, but I do have just one.
13544
08:43:56,620 --> 08:43:57,700
So I'll just pass on the one.
13545
08:43:57,700 --> 08:43:59,540
So let's go ahead and do that.
13546
08:43:59,540 --> 08:44:02,380
Okay, now let's go ahead and write a method for this one
13547
08:44:02,380 --> 08:44:05,540
that I have, let's go with this.
13548
08:44:05,540 --> 08:44:09,400
Again, async, we go with that, get posts,
13549
08:44:09,400 --> 08:44:11,100
because multiple will be coming up.
13550
08:44:11,100 --> 08:44:13,280
And then I have to make a queries.
13551
08:44:15,260 --> 08:44:17,980
This is the parameter somebody will be giving me.
13552
08:44:17,980 --> 08:44:20,900
If nobody gives me that, then by default, I'll use that.
13553
08:44:20,900 --> 08:44:23,500
The way how you actually grab the queries
13554
08:44:23,500 --> 08:44:26,420
is you write exactly as you are being told.
13555
08:44:26,420 --> 08:44:29,000
So remember, everything was inside the square bracket,
13556
08:44:29,000 --> 08:44:30,260
you need to pass on an array.
13557
08:44:30,260 --> 08:44:32,020
So this is the first step.
13558
08:44:32,020 --> 08:44:34,780
So you want all the title to be whatever is mentioned
13559
08:44:34,780 --> 08:44:37,580
into this one, or you can pass on the key value pair as well,
13560
08:44:37,580 --> 08:44:39,780
the title, Ironman, and all of that.
13561
08:44:39,780 --> 08:44:41,340
So we'll be using the second one.
13562
08:44:41,340 --> 08:44:43,620
I need the title to be this one.
13563
08:44:44,380 --> 08:44:45,200
Similar to this one.
13564
08:44:45,200 --> 08:44:46,540
So this is my query.
13565
08:44:48,940 --> 08:44:50,420
Query.equal.
13566
08:44:52,620 --> 08:44:53,460
There we go.
13567
08:44:53,460 --> 08:44:56,460
And this is the parenthesis, a method being used.
13568
08:44:56,460 --> 08:44:59,900
Notice here, string and the value query types,
13569
08:44:59,900 --> 08:45:00,740
whatever that is.
13570
08:45:00,740 --> 08:45:03,020
Basically it's saying is give me, I want the status.
13571
08:45:03,020 --> 08:45:05,020
This is my key that I want to find out
13572
08:45:05,020 --> 08:45:06,900
what is the value that you're looking up for.
13573
08:45:06,900 --> 08:45:08,980
If you have multiple values, you can provide an array,
13574
08:45:08,980 --> 08:45:12,020
but here the type that I'm looking up for is active.
13575
08:45:12,020 --> 08:45:13,940
All right, there we go.
13576
08:45:13,940 --> 08:45:15,740
Not that difficult.
13577
08:45:15,740 --> 08:45:18,020
So now I need to learn that how can I use it?
13578
08:45:18,020 --> 08:45:21,980
Usage is another simplest thing that you can do.
13579
08:45:21,980 --> 08:45:23,260
This is building queries.
13580
08:45:23,260 --> 08:45:26,380
So if you look up for it, notice here,
13581
08:45:26,380 --> 08:45:29,220
I have to say is database ID.
13582
08:45:29,220 --> 08:45:31,260
Then I have to go with the collection ID.
13583
08:45:31,260 --> 08:45:34,820
Then in the array, I can pass on as many query as I wish.
13584
08:45:34,820 --> 08:45:35,660
I just have one.
13585
08:45:35,660 --> 08:45:38,700
That's why I directly call this one in an array.
13586
08:45:38,700 --> 08:45:41,620
But if you wish, you can just convert it like this.
13587
08:45:41,620 --> 08:45:44,220
I have already converted that here, notice here.
13588
08:45:44,220 --> 08:45:47,460
I've already wrapped this up inside the square brackets.
13589
08:45:47,460 --> 08:45:48,660
That is an array.
13590
08:45:48,660 --> 08:45:49,500
But if you don't want to,
13591
08:45:49,500 --> 08:45:51,020
you can just make it one by one.
13592
08:45:51,020 --> 08:45:53,740
I actually did a little bit help to myself
13593
08:45:53,740 --> 08:45:55,420
of wrapping this up.
13594
08:45:55,420 --> 08:45:57,900
Now as a third parameter, I can directly pass on.
13595
08:45:57,900 --> 08:45:59,460
That's the advantage.
13596
08:45:59,460 --> 08:46:00,820
Great, nicely done.
13597
08:46:00,820 --> 08:46:02,540
Okay, let's go ahead and try this.
13598
08:46:02,540 --> 08:46:04,780
Again, same, we'll be using try catch.
13599
08:46:04,780 --> 08:46:06,500
The error part will remain same.
13600
08:46:06,500 --> 08:46:08,400
So I'll just copy and paste this one.
13601
08:46:09,340 --> 08:46:11,260
Copy this, paste this.
13602
08:46:11,260 --> 08:46:13,740
And this time the problem, if it might occur,
13603
08:46:13,740 --> 08:46:16,860
is in get posts.
13604
08:46:16,860 --> 08:46:18,240
So multiple one.
13605
08:46:18,240 --> 08:46:21,780
Okay, next up is how can I try this up?
13606
08:46:21,780 --> 08:46:22,660
Really simple.
13607
08:46:22,660 --> 08:46:26,020
This dot databases.
13608
08:46:26,020 --> 08:46:30,820
And this databases will list all the documents based on what?
13609
08:46:30,820 --> 08:46:33,140
First of all, give me the database ID.
13610
08:46:33,140 --> 08:46:37,900
So let's say conf dot project ID.
13611
08:46:37,900 --> 08:46:40,660
I've given not the project ID, my bad.
13612
08:46:40,660 --> 08:46:42,980
Database ID, we are interacting with the database.
13613
08:46:42,980 --> 08:46:44,500
App right database ID.
13614
08:46:44,500 --> 08:46:45,740
Second is collection ID.
13615
08:46:47,140 --> 08:46:51,340
So this one will be conf dot collection ID,
13616
08:46:51,340 --> 08:46:52,340
app right collection ID.
13617
08:46:52,340 --> 08:46:55,180
And third part is directly my queries.
13618
08:46:55,180 --> 08:46:57,660
This is the only part where you need to be careful.
13619
08:46:57,660 --> 08:46:58,900
I have wrapped this, remember,
13620
08:46:58,900 --> 08:47:01,800
I have wrapped this queries directly in the square bracket.
13621
08:47:01,800 --> 08:47:03,000
If you are not doing that,
13622
08:47:03,000 --> 08:47:04,960
then make sure you're passing it like this.
13623
08:47:04,960 --> 08:47:06,780
Just the syntax issue.
13624
08:47:06,820 --> 08:47:09,060
All right, so obviously this is a database operation.
13625
08:47:09,060 --> 08:47:10,220
It needs to be a wait.
13626
08:47:10,220 --> 08:47:12,120
So let's go ahead and do that.
13627
08:47:12,120 --> 08:47:14,940
Once this is done, let's go ahead and return that directly.
13628
08:47:14,940 --> 08:47:16,480
So I hope now you understand,
13629
08:47:16,480 --> 08:47:19,220
it's not really that difficult to work on with this.
13630
08:47:19,220 --> 08:47:21,140
So we have worked on two database operations.
13631
08:47:21,140 --> 08:47:24,700
One is get post, one is get post based on queries.
13632
08:47:24,700 --> 08:47:27,060
It's very repeatable, very understandable
13633
08:47:27,060 --> 08:47:29,100
and very consistent code in the app, right?
13634
08:47:29,100 --> 08:47:31,940
So let's move and shrink this up.
13635
08:47:31,940 --> 08:47:34,140
And let's also shrink this up.
13636
08:47:34,140 --> 08:47:35,900
And let's talk about other operations
13637
08:47:35,900 --> 08:47:36,960
which is creating the post.
13638
08:47:36,960 --> 08:47:39,620
Creating the post is super, super easy.
13639
08:47:39,620 --> 08:47:42,540
If I go back into the documents,
13640
08:47:44,100 --> 08:47:45,100
database,
13641
08:47:46,340 --> 08:47:48,100
documents,
13642
08:47:48,100 --> 08:47:49,820
list documents, create documents.
13643
08:47:49,820 --> 08:47:52,040
Let's see how do we create a document?
13644
08:47:52,040 --> 08:47:54,020
And this is how you create the document.
13645
08:47:54,020 --> 08:47:56,020
You simply say create document.
13646
08:47:56,020 --> 08:47:58,080
You provide the database ID, collection ID,
13647
08:47:58,080 --> 08:47:59,140
something that is unique
13648
08:47:59,140 --> 08:48:00,740
and all the things that you want to store
13649
08:48:00,740 --> 08:48:03,440
that is already available in the attributes
13650
08:48:03,440 --> 08:48:04,640
that you are having.
13651
08:48:04,640 --> 08:48:07,320
All right, so let's go ahead and do that.
13652
08:48:07,320 --> 08:48:08,600
That will also help you to understand
13653
08:48:08,600 --> 08:48:10,320
that since this is unique,
13654
08:48:10,320 --> 08:48:13,000
that's why we were able to go up here
13655
08:48:13,000 --> 08:48:15,320
and mention that, hey, the slug is unique.
13656
08:48:15,320 --> 08:48:17,640
So give me all the values based on the slug.
13657
08:48:17,640 --> 08:48:19,000
Hope this helps.
13658
08:48:19,000 --> 08:48:21,940
Now let's go ahead and move on to another one.
13659
08:48:21,940 --> 08:48:23,740
Again, this one will be async
13660
08:48:23,740 --> 08:48:26,020
and we'll be saying create a post.
13661
08:48:27,700 --> 08:48:29,680
And this should be super easy.
13662
08:48:29,680 --> 08:48:31,920
What do we expect that how do we create a post?
13663
08:48:31,920 --> 08:48:32,880
While creating the post,
13664
08:48:32,880 --> 08:48:34,600
I expect that you pass me on a title,
13665
08:48:35,420 --> 08:48:36,500
you pass me a slug value.
13666
08:48:37,400 --> 08:48:39,080
Slug is nothing, just a title,
13667
08:48:39,080 --> 08:48:40,640
but we remove all the spaces,
13668
08:48:40,640 --> 08:48:43,520
move them into dashes, just we saw in the demo.
13669
08:48:43,520 --> 08:48:46,600
And then we also expect that you will provide me a content.
13670
08:48:46,600 --> 08:48:50,720
You will also provide me a featured image.
13671
08:48:50,720 --> 08:48:54,620
You provide me a status, whatever the status value is.
13672
08:48:54,620 --> 08:48:56,480
And we'll also grab a user ID.
13673
08:48:57,420 --> 08:48:59,800
Okay, all the values are here.
13674
08:48:59,800 --> 08:49:01,560
Once these values are here, again,
13675
08:49:01,560 --> 08:49:04,880
same try catch operation, very repeatable code.
13676
08:49:05,920 --> 08:49:06,800
And that's the good thing.
13677
08:49:06,800 --> 08:49:08,280
Once we have a repeatable code,
13678
08:49:08,280 --> 08:49:11,680
that means it's something good.
13679
08:49:11,680 --> 08:49:15,500
Okay, this one will be create post.
13680
08:49:15,500 --> 08:49:16,840
Errors and everything are good.
13681
08:49:16,840 --> 08:49:18,420
Let's go ahead and do the same thing.
13682
08:49:18,420 --> 08:49:21,160
Now we know that let's go ahead and return this.
13683
08:49:21,160 --> 08:49:23,040
This will be await.
13684
08:49:23,040 --> 08:49:25,560
This dot databases,
13685
08:49:25,560 --> 08:49:27,520
this is going to work with the method,
13686
08:49:27,520 --> 08:49:30,600
create document, provide all these things.
13687
08:49:30,600 --> 08:49:35,600
The first one is conf.appwrite database ID.
13688
08:49:36,040 --> 08:49:41,040
The second one will be conf.appwrite collection ID.
13689
08:49:41,760 --> 08:49:44,440
And the third one is what is the unique ID?
13690
08:49:44,440 --> 08:49:46,600
In our case, the unique ID is not the ID,
13691
08:49:46,600 --> 08:49:48,680
but the slug that we want uniquely.
13692
08:49:48,680 --> 08:49:50,000
We want all the posts to be unique.
13693
08:49:50,000 --> 08:49:51,160
So that's the slug.
13694
08:49:51,160 --> 08:49:54,160
And the third parameter is provide me all the objects.
13695
08:49:54,160 --> 08:49:55,360
Yeah, there we go.
13696
08:49:55,360 --> 08:49:57,960
So let's go ahead and provide all these objects.
13697
08:49:57,960 --> 08:50:00,220
So we'll go ahead and say title.
13698
08:50:00,220 --> 08:50:02,180
Then we have content.
13699
08:50:02,180 --> 08:50:05,340
We have featured image.
13700
08:50:05,340 --> 08:50:06,780
We haven't uploaded the image yet,
13701
08:50:06,780 --> 08:50:08,460
but we'll work on that.
13702
08:50:08,460 --> 08:50:11,620
Status and we have user ID.
13703
08:50:11,620 --> 08:50:12,460
There we go.
13704
08:50:12,460 --> 08:50:15,260
So all the value that is being passed on to me as a method,
13705
08:50:15,260 --> 08:50:17,260
I'll just use them to create a post.
13706
08:50:17,260 --> 08:50:21,220
Now, going back, this is for creating the post.
13707
08:50:21,220 --> 08:50:25,740
Okay, how am I going to do and update the post?
13708
08:50:25,740 --> 08:50:27,100
That's interesting.
13709
08:50:27,100 --> 08:50:29,500
Let's go ahead and say collection.
13710
08:50:30,380 --> 08:50:33,540
Databases, let's go into directly database APIs.
13711
08:50:33,540 --> 08:50:35,340
That's always easier.
13712
08:50:35,340 --> 08:50:37,540
And this time I want to update the document.
13713
08:50:37,540 --> 08:50:39,740
Okay, so for updating the document,
13714
08:50:39,740 --> 08:50:41,620
you have to use update document.
13715
08:50:41,620 --> 08:50:43,660
Notice here, update document.
13716
08:50:43,660 --> 08:50:46,980
Database ID, okay, collection ID, no big deal.
13717
08:50:46,980 --> 08:50:48,180
What else do you need?
13718
08:50:49,340 --> 08:50:52,740
And this is not proper.
13719
08:50:52,740 --> 08:50:53,940
This should be a little bit more
13720
08:50:53,940 --> 08:50:58,660
because you need something to find out the update document.
13721
08:50:58,700 --> 08:51:00,540
Unique IDs.
13722
08:51:00,540 --> 08:51:02,180
So I think the collection ID,
13723
08:51:02,180 --> 08:51:04,620
this is not scrolling properly.
13724
08:51:04,620 --> 08:51:06,100
We definitely have more.
13725
08:51:06,100 --> 08:51:07,700
We definitely have more.
13726
08:51:07,700 --> 08:51:09,340
Update the document.
13727
08:51:09,340 --> 08:51:10,860
Here we can read about it.
13728
08:51:10,860 --> 08:51:14,380
Collection ID, document ID, data to be updated
13729
08:51:14,380 --> 08:51:16,020
and the permissions.
13730
08:51:16,020 --> 08:51:18,540
Anyways, I'll walk you through with that, no worries.
13731
08:51:18,540 --> 08:51:20,140
Okay, so this is my create post.
13732
08:51:20,140 --> 08:51:22,420
Let's go ahead and create another method
13733
08:51:22,420 --> 08:51:24,180
which will be update.
13734
08:51:24,180 --> 08:51:27,220
I'll sync, update post.
13735
08:51:28,220 --> 08:51:30,460
And while updating the post,
13736
08:51:33,900 --> 08:51:35,980
update document,
13737
08:51:35,980 --> 08:51:38,540
you need to provide that what is the unique value
13738
08:51:38,540 --> 08:51:40,860
I am looking for for updating that.
13739
08:51:42,900 --> 08:51:45,540
And update document, database ID,
13740
08:51:45,540 --> 08:51:47,500
this is not proper.
13741
08:51:47,500 --> 08:51:48,420
I've worked with that.
13742
08:51:48,420 --> 08:51:49,260
I've worked with this.
13743
08:51:49,260 --> 08:51:51,540
This is newly updated document, probably that's the reason.
13744
08:51:51,540 --> 08:51:53,780
So while updating the post, you will need a slug
13745
08:51:53,780 --> 08:51:56,020
which is uniquely identify your document
13746
08:51:56,140 --> 08:51:58,700
that needs to be updated, that needs to be passed on.
13747
08:51:58,700 --> 08:52:01,220
Otherwise the method of update document doesn't work.
13748
08:52:01,220 --> 08:52:02,180
Probably there's a mistake
13749
08:52:02,180 --> 08:52:03,860
or I'll send a pull request to them.
13750
08:52:03,860 --> 08:52:05,620
I worked with these documents in the past.
13751
08:52:05,620 --> 08:52:07,980
So probably that's the one issue.
13752
08:52:07,980 --> 08:52:11,340
And then one we can do is provide me the title,
13753
08:52:11,340 --> 08:52:13,620
the new updated title or the same, whatever that is.
13754
08:52:13,620 --> 08:52:17,020
You pass me content, you pass me featured image
13755
08:52:17,020 --> 08:52:18,020
and you pass me status.
13756
08:52:18,020 --> 08:52:21,300
These are the field which we are allowing to change.
13757
08:52:21,300 --> 08:52:24,820
And once this is done, same stuff, try catch.
13758
08:52:25,820 --> 08:52:27,860
Let's open this up.
13759
08:52:29,060 --> 08:52:30,980
We'll copy this.
13760
08:52:30,980 --> 08:52:32,020
We'll paste it up.
13761
08:52:32,020 --> 08:52:34,020
And this time if the problem appears,
13762
08:52:34,020 --> 08:52:38,860
it might be an update document tracking all of this.
13763
08:52:38,860 --> 08:52:43,300
And of course we will be returning the await
13764
08:52:43,300 --> 08:52:48,300
and this time this dot databases and update document.
13765
08:52:48,580 --> 08:52:51,260
Now the way how update document works is,
13766
08:52:51,260 --> 08:52:53,060
first of all, you provide the database ID
13767
08:52:53,060 --> 08:52:55,900
in the collection ID in which, or in what one,
13768
08:52:55,900 --> 08:52:58,740
what exactly the collection we are looking up for.
13769
08:52:58,740 --> 08:53:01,420
So conf dot app right database ID.
13770
08:53:01,420 --> 08:53:03,140
The second step is collection ID.
13771
08:53:04,140 --> 08:53:06,500
So collection ID.
13772
08:53:06,500 --> 08:53:08,860
The third step is to provide me the unique ID.
13773
08:53:08,860 --> 08:53:10,460
If you're working with the unique IDs,
13774
08:53:10,460 --> 08:53:11,660
provide the unique IDs.
13775
08:53:11,660 --> 08:53:13,180
If not, just provide anything
13776
08:53:13,180 --> 08:53:14,780
that's making your document unique.
13777
08:53:14,780 --> 08:53:16,340
In my case, that slug.
13778
08:53:16,340 --> 08:53:18,380
And then pass on all the objects that you have.
13779
08:53:18,380 --> 08:53:19,540
So exactly same.
13780
08:53:20,380 --> 08:53:21,500
Oops, not like that.
13781
08:53:22,420 --> 08:53:25,900
We do have, I think I can copy paste.
13782
08:53:25,900 --> 08:53:28,300
Yep, this is all the data that we have.
13783
08:53:28,300 --> 08:53:30,220
So I'll just copy and paste this one.
13784
08:53:31,460 --> 08:53:35,100
So we have title, content, featured image, status.
13785
08:53:35,100 --> 08:53:36,340
We are not passing on user ID
13786
08:53:36,340 --> 08:53:38,980
because we are not allowing to change that.
13787
08:53:38,980 --> 08:53:40,740
And we are also not accepting that.
13788
08:53:40,740 --> 08:53:41,580
So there we go.
13789
08:53:41,580 --> 08:53:42,500
All the data is done.
13790
08:53:42,500 --> 08:53:43,540
And that's it.
13791
08:53:43,540 --> 08:53:44,740
That's our update post.
13792
08:53:44,740 --> 08:53:47,060
Obviously we need to write the delete one as well.
13793
08:53:47,060 --> 08:53:50,740
And to delete a document, what else do we have?
13794
08:53:50,740 --> 08:53:52,140
Database ID, collection ID.
13795
08:53:52,140 --> 08:53:54,220
There is something, something that is missing
13796
08:53:54,220 --> 08:53:55,940
because we need a unique identifier.
13797
08:53:55,940 --> 08:53:58,980
Otherwise what document you are actually deleting.
13798
08:53:58,980 --> 08:54:01,420
There is no way of finding that out.
13799
08:54:01,420 --> 08:54:03,940
Okay, there is something probably a bug or issue.
13800
08:54:03,940 --> 08:54:07,020
Anyways, this is, you get the point how this is being done.
13801
08:54:07,020 --> 08:54:09,620
So now the best way is actually to actually copy
13802
08:54:09,620 --> 08:54:11,060
and paste this entire stuff
13803
08:54:11,060 --> 08:54:12,780
because that is much, much easier now,
13804
08:54:12,780 --> 08:54:14,580
now that you understand the concept.
13805
08:54:14,580 --> 08:54:19,620
This one is delete document or delete post.
13806
08:54:19,620 --> 08:54:20,780
We will be taking the slug,
13807
08:54:20,780 --> 08:54:22,300
but we don't need these objects
13808
08:54:22,300 --> 08:54:24,060
because it doesn't really matter what's inside.
13809
08:54:24,060 --> 08:54:25,300
We just want to delete it.
13810
08:54:25,300 --> 08:54:26,340
No need of comma as well.
13811
08:54:26,340 --> 08:54:28,780
Just give me the slug and I'll try to delete it.
13812
08:54:28,780 --> 08:54:30,060
And let's update this one.
13813
08:54:30,060 --> 08:54:31,820
This is if the error occurs,
13814
08:54:31,820 --> 08:54:34,340
it might be delete document.
13815
08:54:34,340 --> 08:54:35,300
Good.
13816
08:54:35,300 --> 08:54:36,780
Now we also don't need this.
13817
08:54:36,780 --> 08:54:38,540
So that's great.
13818
08:54:38,540 --> 08:54:40,780
And obviously the method gets updated.
13819
08:54:40,780 --> 08:54:44,140
Instead of update, we want to use delete document,
13820
08:54:44,140 --> 08:54:48,140
two times document, delete document.
13821
08:54:48,260 --> 08:54:50,100
Hopefully I have copy pasted it correctly
13822
08:54:50,100 --> 08:54:51,860
and we provide the database ID,
13823
08:54:51,860 --> 08:54:53,100
we provide the collection ID
13824
08:54:53,100 --> 08:54:53,980
and we provide the slug.
13825
08:54:53,980 --> 08:54:57,060
Something that uniquely identifies this one.
13826
08:54:57,060 --> 08:54:59,580
The only new thing is you cannot just go ahead
13827
08:54:59,580 --> 08:55:01,900
and return it because it doesn't return anything.
13828
08:55:01,900 --> 08:55:05,300
The return type data type is a little bit questionable here.
13829
08:55:05,300 --> 08:55:07,940
So we prefer to manually return something here.
13830
08:55:07,940 --> 08:55:10,100
So we are going to go ahead and say return true
13831
08:55:10,100 --> 08:55:12,180
that yes, it was properly returned.
13832
08:55:13,140 --> 08:55:14,100
Return true.
13833
08:55:14,100 --> 08:55:14,940
Oops, my bad.
13834
08:55:14,940 --> 08:55:16,780
This should go up here.
13835
08:55:16,780 --> 08:55:18,380
Okay, looks good.
13836
08:55:18,380 --> 08:55:20,300
Let's indent that properly.
13837
08:55:20,300 --> 08:55:21,140
There we go.
13838
08:55:21,140 --> 08:55:21,980
So this is nice.
13839
08:55:21,980 --> 08:55:23,900
In the update one, you don't need to return that.
13840
08:55:23,900 --> 08:55:26,700
Updated one actually returns you the updated document.
13841
08:55:26,700 --> 08:55:27,540
That's good.
13842
08:55:27,540 --> 08:55:28,860
But the delete actually,
13843
08:55:28,860 --> 08:55:30,420
if you'll see, they should actually go
13844
08:55:30,420 --> 08:55:32,020
what the response is going to be.
13845
08:55:32,020 --> 08:55:34,900
It just says, hey, two or four application, Jason.
13846
08:55:34,900 --> 08:55:35,740
So we don't have.
13847
08:55:35,740 --> 08:55:36,660
In the update document,
13848
08:55:36,660 --> 08:55:39,220
if you'll check out what is the response,
13849
08:55:39,220 --> 08:55:40,740
you can see it gives you the document.
13850
08:55:40,740 --> 08:55:41,700
That's the good one.
13851
08:55:41,700 --> 08:55:44,260
But if you check the delete document,
13852
08:55:44,260 --> 08:55:45,700
there is no document that is returned.
13853
08:55:45,700 --> 08:55:47,900
There is no true false value that is returned.
13854
08:55:47,900 --> 08:55:50,180
So yes, nothing magically is coming out of the box.
13855
08:55:50,180 --> 08:55:52,420
I'm trying to teach you how to study the docs
13856
08:55:52,420 --> 08:55:53,620
and all of these.
13857
08:55:53,620 --> 08:55:56,180
Okay, so delete post is done.
13858
08:55:56,180 --> 08:55:58,260
Now let's work on one more thing.
13859
08:55:58,260 --> 08:55:59,980
We can actually remove them.
13860
08:55:59,980 --> 08:56:00,900
We don't need you.
13861
08:56:01,900 --> 08:56:04,260
Just like that, we have created all these methods
13862
08:56:04,260 --> 08:56:09,020
about update post, delete post, create post, get post,
13863
08:56:09,020 --> 08:56:09,940
and pretty much anything.
13864
08:56:09,940 --> 08:56:11,900
All the queries that you want to handle,
13865
08:56:11,900 --> 08:56:13,780
non-queries you want to handle,
13866
08:56:13,780 --> 08:56:16,140
we have worked through with almost every possible case
13867
08:56:16,140 --> 08:56:17,500
that can happen in the database.
13868
08:56:17,500 --> 08:56:18,340
If there are more,
13869
08:56:18,340 --> 08:56:20,500
you can obviously modify these existing methods
13870
08:56:20,500 --> 08:56:22,900
or can add more by reading the docs.
13871
08:56:22,900 --> 08:56:24,100
Next one is buckets.
13872
08:56:24,100 --> 08:56:25,980
So how do we handle the bucket part?
13873
08:56:25,980 --> 08:56:27,940
Let's go ahead and study the docs.
13874
08:56:27,940 --> 08:56:30,900
So this time we want to use a storage service.
13875
08:56:30,900 --> 08:56:32,060
Now this is the storage service
13876
08:56:32,060 --> 08:56:33,220
and it has all the methods,
13877
08:56:33,220 --> 08:56:35,940
how you can list all the files, create the files,
13878
08:56:35,940 --> 08:56:38,260
get files, update files, delete file.
13879
08:56:38,260 --> 08:56:40,940
First for me is the create file.
13880
08:56:40,940 --> 08:56:42,500
I want to upload a file.
13881
08:56:42,500 --> 08:56:44,980
So it simply is a method which says create file.
13882
08:56:44,980 --> 08:56:46,180
In my case, notice here,
13883
08:56:46,180 --> 08:56:48,900
it gives you bucket ID, which we have already.
13884
08:56:48,900 --> 08:56:51,900
Then you have to provide a unique ID for the file.
13885
08:56:51,900 --> 08:56:54,540
And then you can simply say document.getElementByID
13886
08:56:54,540 --> 08:56:57,140
or however the way you want to grab it.
13887
08:56:57,140 --> 08:56:59,340
Probably there is something definitely wrong
13888
08:56:59,340 --> 08:57:00,900
with the scrolling because I can see
13889
08:57:00,900 --> 08:57:03,980
there is more content here, but it's not visible.
13890
08:57:03,980 --> 08:57:06,300
Is it my browser just?
13891
08:57:06,300 --> 08:57:08,700
Yeah, we can see that the scrolling,
13892
08:57:08,700 --> 08:57:10,620
probably my browser is going that.
13893
08:57:10,620 --> 08:57:11,660
With this, this reminds me,
13894
08:57:11,660 --> 08:57:13,300
let's go back into databases
13895
08:57:13,300 --> 08:57:16,860
and let's see how the update document looks for
13896
08:57:16,860 --> 08:57:19,140
and collection ID and the document ID.
13897
08:57:19,140 --> 08:57:21,140
Notice here, now it says and mentioned this,
13898
08:57:21,140 --> 08:57:23,620
there is a unique document ID which is required
13899
08:57:23,620 --> 08:57:25,580
and that's exactly what we used.
13900
08:57:25,580 --> 08:57:27,620
Probably there is something in,
13901
08:57:27,620 --> 08:57:31,140
when you scroll this, now it's scrolling.
13902
08:57:31,140 --> 08:57:33,780
But if I open this, it doesn't scroll.
13903
08:57:33,780 --> 08:57:36,660
Probably I can report a bug to them.
13904
08:57:36,660 --> 08:57:38,700
Anyways, we got the concept.
13905
08:57:38,700 --> 08:57:41,020
So coming back onto the point, which I was saying,
13906
08:57:41,020 --> 08:57:43,180
that let's go and talk about storage.
13907
08:57:43,180 --> 08:57:44,620
We want to create a file.
13908
08:57:44,620 --> 08:57:46,340
The rest of the stuff we have already taken care of.
13909
08:57:46,340 --> 08:57:49,460
Now we need to just run through the method of create file.
13910
08:57:49,460 --> 08:57:53,220
Whoever is going to use this method will pass me a file.
13911
08:57:53,220 --> 08:57:56,060
Just like here, they are passing the file, just like that.
13912
08:57:56,060 --> 08:57:58,980
Let's go ahead and now in the same file,
13913
08:57:58,980 --> 08:57:59,980
I'll just write it for it.
13914
08:57:59,980 --> 08:58:00,940
Maybe you want to use it.
13915
08:58:00,940 --> 08:58:03,420
This is where we are using the storage service.
13916
08:58:05,140 --> 08:58:08,540
Okay, so again, async and we'll be calling this one
13917
08:58:08,540 --> 08:58:10,780
as upload file files.
13918
08:58:10,780 --> 08:58:12,660
Now we are just dealing with one.
13919
08:58:12,660 --> 08:58:14,940
Upload file and there we go.
13920
08:58:14,940 --> 08:58:16,740
Now how we are going to deal with this one?
13921
08:58:16,740 --> 08:58:17,740
Exactly same.
13922
08:58:17,740 --> 08:58:22,740
Go with the try catch, borrow the catch method, copy that,
13923
08:58:23,620 --> 08:58:26,620
paste it up here and this time if the problem occurs,
13924
08:58:26,620 --> 08:58:31,340
it is coming up from upload file.
13925
08:58:31,340 --> 08:58:33,420
What do you want to do in the try part?
13926
08:58:33,420 --> 08:58:35,700
We obviously want to return after awaiting
13927
08:58:35,700 --> 08:58:37,700
and sending this to bucket.
13928
08:58:37,740 --> 08:58:41,940
Same concepts, this.bucket.create file.
13929
08:58:41,940 --> 08:58:43,260
It takes couple of parameter.
13930
08:58:43,260 --> 08:58:45,180
First one, the bucket ID, which we can grab
13931
08:58:45,180 --> 08:58:49,300
from conf.bucket app, right?
13932
08:58:49,300 --> 08:58:50,700
Bucket ID, there we go.
13933
08:58:50,700 --> 08:58:51,980
We need a unique ID.
13934
08:58:51,980 --> 08:58:53,500
So obviously we don't have a unique ID,
13935
08:58:53,500 --> 08:58:56,460
but if I remember in the auth,
13936
08:58:56,460 --> 08:58:59,580
we actually, no, we didn't actually worked on this one,
13937
08:58:59,580 --> 08:59:01,860
but in case you don't know this,
13938
08:59:01,860 --> 08:59:04,180
we should have dealt with us, probably anyway.
13939
08:59:04,180 --> 08:59:06,420
You can see that there is a way
13940
08:59:06,420 --> 08:59:08,020
how you can grab the unique ID.
13941
08:59:08,020 --> 08:59:09,700
So notice here there is a file ID,
13942
08:59:09,700 --> 08:59:12,380
but app right also gives you something
13943
08:59:12,380 --> 08:59:14,060
very interesting known as ID.
13944
08:59:14,060 --> 08:59:18,340
So here, inside the conf,
13945
08:59:18,340 --> 08:59:19,980
just like we were able to grab this,
13946
08:59:19,980 --> 08:59:22,620
let's grab the ID and you'll be able
13947
08:59:22,620 --> 08:59:24,620
to provide unique IDs with that.
13948
08:59:24,620 --> 08:59:26,580
Although you can use nano IDs or something,
13949
08:59:26,580 --> 08:59:28,220
in case you wish to, I don't wish to,
13950
08:59:28,220 --> 08:59:30,060
I just want to use app right services.
13951
08:59:30,060 --> 08:59:32,940
If they're directly available to me, why to be bothered?
13952
08:59:32,940 --> 08:59:35,220
Anyways, so once we have this ID,
13953
08:59:35,220 --> 08:59:37,140
now I have to give a unique name to the file.
13954
08:59:37,140 --> 08:59:40,740
So I'll just say ID.unique, and that's a method.
13955
08:59:40,740 --> 08:59:41,780
So there we go.
13956
08:59:41,780 --> 08:59:44,740
And then provide the file, that's it.
13957
08:59:44,740 --> 08:59:46,420
App right will take care of the rest of the things
13958
08:59:46,420 --> 08:59:47,660
that hey, I'll upload the files,
13959
08:59:47,660 --> 08:59:49,580
we'll provide a unique ID and we'll return you
13960
08:59:49,580 --> 08:59:53,100
all the path that you require for this file.
13961
08:59:53,100 --> 08:59:54,780
So public path will be given to you
13962
08:59:54,780 --> 08:59:56,460
so that you can display them.
13963
08:59:56,460 --> 08:59:59,340
So this is basic of how you upload a file.
13964
08:59:59,340 --> 09:00:01,300
Can you assume how you're going to delete the file?
13965
09:00:01,300 --> 09:00:03,820
Let me go ahead and copy this
13966
09:00:03,820 --> 09:00:06,460
and we'll go up and paste this.
13967
09:00:06,460 --> 09:00:08,420
Let's move a method for delete file.
13968
09:00:11,220 --> 09:00:12,940
So delete file.
13969
09:00:12,940 --> 09:00:15,220
Obviously, this time you don't need a file,
13970
09:00:15,220 --> 09:00:17,100
you need just an ID of the file.
13971
09:00:17,100 --> 09:00:20,140
So just provide me the ID of the file
13972
09:00:20,140 --> 09:00:22,180
and I'll just delete it.
13973
09:00:22,180 --> 09:00:23,660
Okay, how can we modify this?
13974
09:00:23,660 --> 09:00:25,700
Let's see how to delete a file.
13975
09:00:25,700 --> 09:00:27,340
Obviously, give me the unique ID.
13976
09:00:27,340 --> 09:00:29,420
So bucket ID you need to give me,
13977
09:00:29,420 --> 09:00:30,940
file ID you need to give me, that's it.
13978
09:00:30,940 --> 09:00:33,500
Two methods and it can do the job.
13979
09:00:33,500 --> 09:00:35,420
So bucket ID I've already provided you
13980
09:00:35,420 --> 09:00:37,260
but the method is delete file.
13981
09:00:37,260 --> 09:00:39,260
So let's go ahead and use that.
13982
09:00:39,260 --> 09:00:41,900
Delete file, I'm giving you the bucket ID
13983
09:00:41,900 --> 09:00:44,660
but I cannot give you this file ID unique.
13984
09:00:44,660 --> 09:00:48,300
It generates unique ID every single time, obviously.
13985
09:00:48,300 --> 09:00:49,820
And here I cannot give you file
13986
09:00:49,820 --> 09:00:51,660
but rather I have to give you file ID.
13987
09:00:53,700 --> 09:00:56,980
So whoever is using this method need to provide me this.
13988
09:00:56,980 --> 09:00:59,260
And this time if the error comes up,
13989
09:00:59,260 --> 09:01:01,620
it comes up from delete file.
13990
09:01:02,500 --> 09:01:05,300
All right, so you have learned how you can upload images.
13991
09:01:05,300 --> 09:01:06,980
By the way, this exact method works
13992
09:01:06,980 --> 09:01:08,780
if you're uploading PDFs,
13993
09:01:08,780 --> 09:01:11,260
anything else that you probably want to deal with.
13994
09:01:11,260 --> 09:01:12,260
So delete file.
13995
09:01:12,260 --> 09:01:14,260
Now one more last thing I would like to discuss
13996
09:01:14,260 --> 09:01:16,660
before we sum up this entire lecture.
13997
09:01:16,660 --> 09:01:18,660
You can see that AppWrite has so many things,
13998
09:01:18,660 --> 09:01:20,860
list files, create files, get files, update file,
13999
09:01:20,860 --> 09:01:23,100
delete file but what's interesting is,
14000
09:01:23,100 --> 09:01:24,980
is you can also get file for the preview.
14001
09:01:24,980 --> 09:01:27,700
What's interesting about this file preview is,
14002
09:01:27,700 --> 09:01:31,060
file preview, this method supports preview of these images.
14003
09:01:31,060 --> 09:01:36,060
So entire image doesn't get onto your network bandwidth
14004
09:01:36,380 --> 09:01:37,980
but rather it's a cutting
14005
09:01:37,980 --> 09:01:39,860
and the resizing of your preview image.
14006
09:01:39,860 --> 09:01:42,300
So for example, preview supported only for the image
14007
09:01:42,300 --> 09:01:44,100
for size smaller 10 MB.
14008
09:01:44,100 --> 09:01:46,620
So let's just say you uploaded a file of eight MB.
14009
09:01:46,620 --> 09:01:49,340
It's not eight MB in the preview, it's just few KBs.
14010
09:01:49,340 --> 09:01:50,300
So it saves.
14011
09:01:50,300 --> 09:01:52,940
So in our application, we also want to give this feature
14012
09:01:52,940 --> 09:01:55,420
that somebody who wants, don't want the entire file,
14013
09:01:55,420 --> 09:01:57,980
probably just want a preview of it, lower quality file.
14014
09:01:57,980 --> 09:01:59,420
We can actually give that.
14015
09:01:59,420 --> 09:02:01,380
So let's call this one method as well.
14016
09:02:01,380 --> 09:02:04,100
And the good thing about this one is,
14017
09:02:04,100 --> 09:02:07,140
since there is nothing too much of operation going on,
14018
09:02:07,140 --> 09:02:09,900
you don't need to make it async await.
14019
09:02:09,900 --> 09:02:11,300
Although if you do, that's great
14020
09:02:11,300 --> 09:02:15,060
but there is nothing being async await in this one.
14021
09:02:15,060 --> 09:02:17,420
I'll show you why this is because if you notice the method,
14022
09:02:17,420 --> 09:02:19,180
it's just storage.get file preview
14023
09:02:20,260 --> 09:02:21,820
and it's ridiculously fast.
14024
09:02:21,820 --> 09:02:23,260
Again, anyways, it might take some time.
14025
09:02:23,260 --> 09:02:24,540
So we'll see that.
14026
09:02:24,540 --> 09:02:29,380
Let's call this one as get file preview.
14027
09:02:29,540 --> 09:02:31,700
And provide me the file ID.
14028
09:02:32,780 --> 09:02:36,100
And what we're going to do is this is like that.
14029
09:02:36,100 --> 09:02:41,180
And we can go ahead and simply say return this.bucket.
14030
09:02:41,180 --> 09:02:44,780
And we can just work with the method, get file preview
14031
09:02:44,780 --> 09:02:46,060
and provide you the detail.
14032
09:02:46,060 --> 09:02:50,700
The first one is conf.bucket ID, app.writebucket ID.
14033
09:02:50,700 --> 09:02:55,700
And the second one is a file ref, file ID.
14034
09:02:55,980 --> 09:02:59,580
And once this is there,
14035
09:02:59,580 --> 09:03:00,980
you don't want to return it like this
14036
09:03:00,980 --> 09:03:05,540
because if you notice it carefully, it's not mentioned here.
14037
09:03:06,500 --> 09:03:09,860
Let's see what's the return type that we have response.
14038
09:03:09,860 --> 09:03:13,660
So response is actually a big object file for view.
14039
09:03:13,660 --> 09:03:15,660
And you need to actually do a console log of this.
14040
09:03:15,660 --> 09:03:17,300
And once you do the console log of this,
14041
09:03:17,300 --> 09:03:20,180
you will find out that this whole thing
14042
09:03:20,180 --> 09:03:22,020
actually needs to be worked a little bit different.
14043
09:03:22,020 --> 09:03:25,060
So I'll just come up here.
14044
09:03:25,060 --> 09:03:26,700
And once this is all done,
14045
09:03:26,700 --> 09:03:30,780
then I go ahead and say .href, this is the one.
14046
09:03:30,780 --> 09:03:32,780
You can get host name and all these things.
14047
09:03:32,780 --> 09:03:35,900
Yeah, a little bit sneaky, but yeah, this works nicely.
14048
09:03:35,900 --> 09:03:37,940
If this doesn't work, we'll come back here.
14049
09:03:37,940 --> 09:03:38,780
We'll make it a sync.
14050
09:03:38,780 --> 09:03:40,340
We'll just insert a wait keyword here.
14051
09:03:40,340 --> 09:03:43,380
But I have noticed while working a previous version
14052
09:03:43,380 --> 09:03:45,340
of this application that this works directly fine.
14053
09:03:45,340 --> 09:03:48,300
So if there is no need of it, I could just add it.
14054
09:03:48,300 --> 09:03:52,020
Okay, so this is all the method we have studied in depth
14055
09:03:52,020 --> 09:03:54,300
about how to upload the files, delete the files,
14056
09:03:54,500 --> 09:03:55,820
get the previews.
14057
09:03:55,820 --> 09:03:57,780
If you really want to work with more methods,
14058
09:03:57,780 --> 09:03:59,380
you can definitely work with that.
14059
09:03:59,380 --> 09:04:00,640
Now you have the idea.
14060
09:04:01,740 --> 09:04:03,540
Last thing, just like we did,
14061
09:04:03,540 --> 09:04:05,540
we'll just go ahead and call this one as service.
14062
09:04:05,540 --> 09:04:09,100
And this will be a new service.
14063
09:04:09,100 --> 09:04:10,880
We create an object out of this class
14064
09:04:10,880 --> 09:04:11,940
and we export this one.
14065
09:04:11,940 --> 09:04:15,940
So export default and let's export service.
14066
09:04:17,220 --> 09:04:18,060
There we go.
14067
09:04:18,060 --> 09:04:19,940
This will make our life so much easier.
14068
09:04:19,940 --> 09:04:21,300
Of course, there might be chances
14069
09:04:21,300 --> 09:04:23,500
that this might have some bugs, some issues.
14070
09:04:23,540 --> 09:04:24,860
We need to fix them up.
14071
09:04:24,860 --> 09:04:27,740
These can be tested while we actually work on the project
14072
09:04:27,740 --> 09:04:29,020
in the front-end side of it.
14073
09:04:29,020 --> 09:04:31,340
But at least our backend part is all done.
14074
09:04:31,340 --> 09:04:34,620
And this really, I'm super happy that now we are actually
14075
09:04:34,620 --> 09:04:36,980
able to write JavaScript using App Write.
14076
09:04:36,980 --> 09:04:38,620
We're building full stack applications.
14077
09:04:38,620 --> 09:04:41,660
So this is my backend that I have all written here.
14078
09:04:41,660 --> 09:04:43,300
Great work there in the backend part.
14079
09:04:43,300 --> 09:04:46,300
Let me go ahead and I'll just commit this one as well.
14080
09:04:46,300 --> 09:04:48,300
Let me just go ahead and add this one.
14081
09:04:49,900 --> 09:04:51,500
Add service.
14082
09:04:51,500 --> 09:04:56,500
Service for database and storage.
14083
09:05:01,700 --> 09:05:04,020
All right, let's go ahead and do a quick commit
14084
09:05:04,020 --> 09:05:04,860
and I'll push this.
14085
09:05:04,860 --> 09:05:06,380
Yeah, some people really say that.
14086
09:05:06,380 --> 09:05:08,180
Hey, you should do it from command line.
14087
09:05:08,180 --> 09:05:10,580
No, I feel here, it's nice and easy.
14088
09:05:10,580 --> 09:05:12,500
All right, so this is all the knowledge
14089
09:05:12,500 --> 09:05:14,100
that you really need to have to interact
14090
09:05:14,100 --> 09:05:16,480
with App Write databases and storage.
14091
09:05:16,480 --> 09:05:18,780
Now you're completely equipped with handling
14092
09:05:18,780 --> 09:05:20,380
any kind of thing, all the queries,
14093
09:05:20,380 --> 09:05:21,780
anything that you want to do.
14094
09:05:21,780 --> 09:05:24,140
This, I hope that this video has given you enough
14095
09:05:24,140 --> 09:05:26,500
of the knowledge to work things on your own now.
14096
09:05:26,500 --> 09:05:27,340
That's it for this video.
14097
09:05:27,340 --> 09:05:29,220
From the next video onwards, we'll start working
14098
09:05:29,220 --> 09:05:30,860
on the front-end side of the application.
14099
09:05:30,860 --> 09:05:32,500
We'll walk you through all the caveats,
14100
09:05:32,500 --> 09:05:34,060
how to build a full stack application,
14101
09:05:34,060 --> 09:05:36,380
which is authenticated, some pages are protected
14102
09:05:36,380 --> 09:05:38,100
and all these things.
14103
09:05:38,100 --> 09:05:39,380
All right, so that's it for this one.
14104
09:05:39,380 --> 09:05:40,740
If you find this video interesting,
14105
09:05:40,740 --> 09:05:41,820
do leave a comment section.
14106
09:05:41,820 --> 09:05:44,420
I really, really need some of your help and support.
14107
09:05:44,420 --> 09:05:46,880
Your comment, just a like, just a heart.
14108
09:05:46,880 --> 09:05:48,460
It gives me so much of motivation.
14109
09:05:48,460 --> 09:05:51,540
I really need it to continue to do all of these videos.
14110
09:05:51,540 --> 09:05:52,380
Thank you so much.
14111
09:05:52,380 --> 09:05:53,980
Let's catch up in the next video.
14112
09:05:56,160 --> 09:05:57,000
Hey there, everyone.
14113
09:05:57,000 --> 09:05:59,180
Hittai Sheer back again with another video
14114
09:05:59,180 --> 09:06:00,420
and it's been quite wild.
14115
09:06:00,420 --> 09:06:02,460
In fact, few good weeks.
14116
09:06:02,460 --> 09:06:04,460
And if you're watching this video in just one go,
14117
09:06:04,460 --> 09:06:06,500
then obviously we are meeting back-to-back.
14118
09:06:06,500 --> 09:06:08,640
But if you're watching it on my main channel
14119
09:06:08,640 --> 09:06:10,260
as the series is progressing,
14120
09:06:10,260 --> 09:06:12,559
yes, I was gone for a couple of weeks.
14121
09:06:12,559 --> 09:06:15,739
A lot of health issues, but thank goodness I'm back.
14122
09:06:15,739 --> 09:06:17,039
It's winter here.
14123
09:06:17,040 --> 09:06:19,960
And the best part is I do write my strategies
14124
09:06:19,960 --> 09:06:20,960
to record these videos.
14125
09:06:20,960 --> 09:06:22,800
Otherwise it would be so much difficult.
14126
09:06:22,800 --> 09:06:25,280
Probably I would have to re-record the entire,
14127
09:06:25,280 --> 09:06:28,360
this segment, but thank goodness I write my strategies
14128
09:06:28,360 --> 09:06:30,019
to teach these topics.
14129
09:06:30,019 --> 09:06:32,339
And that makes life a little bit easier.
14130
09:06:32,339 --> 09:06:34,159
So in this video, we're going to continue
14131
09:06:34,160 --> 09:06:36,580
from where we have left in the last videos,
14132
09:06:36,580 --> 09:06:38,559
which was just handling the app right.
14133
09:06:38,559 --> 09:06:40,419
So far we have handled the app right.
14134
09:06:40,420 --> 09:06:42,199
Now we are going to see that how we can make
14135
09:06:42,199 --> 09:06:44,459
those web requests and if we have any issues,
14136
09:06:44,460 --> 09:06:46,900
how we can debug them and how the application
14137
09:06:47,100 --> 09:06:48,460
and our flow will work.
14138
09:06:48,460 --> 09:06:51,059
I don't expect anybody to simply go ahead
14139
09:06:51,059 --> 09:06:54,019
and just build these kinds of application in just one go,
14140
09:06:54,019 --> 09:06:55,859
because simply that's not possible.
14141
09:06:55,860 --> 09:06:58,140
So I'll walk you through what is going to be the strategy,
14142
09:06:58,140 --> 09:06:59,900
how we are going to deal with that.
14143
09:06:59,900 --> 09:07:03,500
First of all, I want to introduce the React Redux here,
14144
09:07:03,500 --> 09:07:05,120
especially the Redux toolkit,
14145
09:07:05,120 --> 09:07:08,059
so that we can manage the state of the application.
14146
09:07:08,059 --> 09:07:10,259
On top of that, we'll be needing a couple of pages.
14147
09:07:10,260 --> 09:07:12,900
What goes inside those pages, we'll worry about that later,
14148
09:07:12,900 --> 09:07:14,780
but we'll be needing a few pages.
14149
09:07:14,780 --> 09:07:16,660
The reason for introducing these pages
14150
09:07:16,699 --> 09:07:18,859
is because we obviously will have the routing
14151
09:07:18,860 --> 09:07:20,100
in our application.
14152
09:07:20,100 --> 09:07:22,420
So some page are going to be protected
14153
09:07:22,420 --> 09:07:25,420
that they cannot be visited if you're not logged in,
14154
09:07:25,420 --> 09:07:27,360
but some pages are available to everyone.
14155
09:07:27,360 --> 09:07:29,720
For example, if you are not logged in,
14156
09:07:29,720 --> 09:07:30,780
the signup page is available,
14157
09:07:30,780 --> 09:07:31,620
but if you're logged in,
14158
09:07:31,620 --> 09:07:33,739
the signup page is not available for you.
14159
09:07:33,739 --> 09:07:34,859
So there are certain pages
14160
09:07:34,860 --> 09:07:36,699
which are available to non logged in users,
14161
09:07:36,699 --> 09:07:37,819
certain pages are available
14162
09:07:37,820 --> 09:07:39,640
which are for the logged in user.
14163
09:07:39,640 --> 09:07:42,140
So we need to figure out a way and mechanism,
14164
09:07:42,140 --> 09:07:44,699
a logic to do so, it's very simple logic.
14165
09:07:44,699 --> 09:07:46,139
I'll walk you through with the two ways
14166
09:07:46,300 --> 09:07:47,379
of understanding the code
14167
09:07:47,379 --> 09:07:49,619
so that you can probably understand it
14168
09:07:49,620 --> 09:07:51,860
at a very better pace.
14169
09:07:51,860 --> 09:07:54,460
All right, so quite a lot of stuff that we have to do.
14170
09:07:54,460 --> 09:07:57,780
Let's go back and try to share my screen.
14171
09:07:57,780 --> 09:08:00,500
So this is my screen that we have.
14172
09:08:00,500 --> 09:08:02,980
First, let's open up the Redux part.
14173
09:08:02,980 --> 09:08:05,339
So I'll just go ahead and work with that.
14174
09:08:05,339 --> 09:08:06,619
So I'll just go on to Google
14175
09:08:06,620 --> 09:08:09,340
and we'll go into Redux toolkit.
14176
09:08:10,220 --> 09:08:12,820
That's the one we are looking up for.
14177
09:08:12,820 --> 09:08:14,140
The getting started part,
14178
09:08:14,140 --> 09:08:16,100
it should be fairly easy with that.
14179
09:08:16,100 --> 09:08:18,059
And we just need two things.
14180
09:08:18,059 --> 09:08:19,779
The first one is Redux toolkit
14181
09:08:19,780 --> 09:08:21,699
and we of course need React Redux
14182
09:08:21,699 --> 09:08:23,899
so that it can act as a binding agent
14183
09:08:23,900 --> 09:08:25,580
between the Redux and the React.
14184
09:08:25,580 --> 09:08:29,059
Redux is an independent library in itself.
14185
09:08:29,059 --> 09:08:31,339
You can use it with the Vue.js,
14186
09:08:31,339 --> 09:08:33,139
probably anything else that wherever you want
14187
09:08:33,140 --> 09:08:34,980
to maintain the state, you can use that.
14188
09:08:34,980 --> 09:08:38,019
I'll copy that and obviously we'll install this.
14189
09:08:38,019 --> 09:08:39,419
So quite a while.
14190
09:08:39,420 --> 09:08:43,019
And now let's go ahead and install the toolkit first.
14191
09:08:43,019 --> 09:08:45,299
It doesn't really matter which one you install first.
14192
09:08:45,300 --> 09:08:47,260
But since it was mentioned in the documentation,
14193
09:08:47,260 --> 09:08:49,180
I'll just install that.
14194
09:08:49,180 --> 09:08:51,500
We also need the router as well.
14195
09:08:51,500 --> 09:08:53,420
So let's go ahead and since we are already here,
14196
09:08:53,420 --> 09:08:55,019
let's install that.
14197
09:08:55,019 --> 09:08:59,419
So I'll just go ahead and say React router DOM.
14198
09:08:59,420 --> 09:09:01,260
That's exactly what we need.
14199
09:09:01,260 --> 09:09:03,500
And that's how we always install them.
14200
09:09:03,500 --> 09:09:06,420
We simply go ahead and say example tutorial.
14201
09:09:06,420 --> 09:09:08,580
I just want to install this.
14202
09:09:08,580 --> 09:09:09,580
What's new?
14203
09:09:09,580 --> 09:09:10,860
Probably not.
14204
09:09:10,860 --> 09:09:13,500
Tutorial, I think that's a better place to install it.
14205
09:09:14,780 --> 09:09:17,740
Can you give me a point where I can install it?
14206
09:09:18,660 --> 09:09:19,820
Probably not.
14207
09:09:20,980 --> 09:09:23,180
Okay, give me a step to install it.
14208
09:09:23,180 --> 09:09:26,420
Otherwise I have to do NPM install React router DOM.
14209
09:09:26,420 --> 09:09:27,580
I'll probably do that.
14210
09:09:27,580 --> 09:09:31,980
Okay, so I'll just go ahead and say NPM install
14211
09:09:31,980 --> 09:09:36,980
React router DOM, router dash DOM.
14212
09:09:38,260 --> 09:09:40,500
That's the easiest way to install this.
14213
09:09:41,140 --> 09:09:43,140
Oh, React, oh, my bad.
14214
09:09:43,140 --> 09:09:44,300
I mistyped it.
14215
09:09:44,300 --> 09:09:48,700
React router DOM.
14216
09:09:49,699 --> 09:09:51,459
Okay, that should be all.
14217
09:09:51,460 --> 09:09:53,460
So we have couple of libraries being installed
14218
09:09:53,460 --> 09:09:54,420
in our system now.
14219
09:09:54,420 --> 09:09:55,660
We have Redux toolkit.
14220
09:09:55,660 --> 09:09:57,580
We have React router DOM.
14221
09:09:57,580 --> 09:09:59,300
This is the basic React DOM.
14222
09:09:59,300 --> 09:10:00,339
We are not interested in that.
14223
09:10:00,339 --> 09:10:02,659
We are interested in the React router DOM.
14224
09:10:02,660 --> 09:10:07,059
And we have the React Redux, the binding library for that.
14225
09:10:07,059 --> 09:10:08,819
Yes, we will be needing couple of more,
14226
09:10:08,820 --> 09:10:12,100
but right now let's handle what we have in it right now.
14227
09:10:12,100 --> 09:10:14,900
Okay, one common thing that we are going to do
14228
09:10:14,900 --> 09:10:17,300
is in this application, in fact, any application
14229
09:10:17,300 --> 09:10:18,379
that you'll be working through,
14230
09:10:18,379 --> 09:10:21,499
you will have a lots of pages in them.
14231
09:10:21,500 --> 09:10:24,059
Our application also has a few good pages.
14232
09:10:24,059 --> 09:10:25,299
What goes inside that pages,
14233
09:10:25,300 --> 09:10:27,620
we'll worry about that later on in the component part.
14234
09:10:27,620 --> 09:10:29,420
But right now, I think it's a good idea
14235
09:10:29,420 --> 09:10:32,540
that we just create those pages and try to figure out
14236
09:10:32,540 --> 09:10:34,900
that how we can inject our state management
14237
09:10:34,900 --> 09:10:37,660
as well as how we can protect some of these pages.
14238
09:10:37,660 --> 09:10:39,140
So let's go ahead and practice that.
14239
09:10:39,140 --> 09:10:40,300
That's a good idea.
14240
09:10:40,300 --> 09:10:41,660
So I'll just do a quick LS
14241
09:10:41,660 --> 09:10:44,540
and I can see all of my files and everything are here.
14242
09:10:44,540 --> 09:10:47,500
I will go inside the source.
14243
09:10:47,500 --> 09:10:49,620
So let's go into the source.
14244
09:10:49,620 --> 09:10:50,780
And if I do a quick LS,
14245
09:10:50,780 --> 09:10:54,540
I can see app write and all these files and folders appear.
14246
09:10:54,540 --> 09:10:56,460
I think let's create a new directory in here.
14247
09:10:56,460 --> 09:10:58,100
I want to do this via the command line
14248
09:10:58,100 --> 09:11:01,100
because it's much more easier and faster this way.
14249
09:11:01,100 --> 09:11:02,260
Feel free to use your mouse.
14250
09:11:02,260 --> 09:11:05,059
I think this is faster approach and better approach for me.
14251
09:11:05,059 --> 09:11:07,739
So I'll just go ahead and say this is pages.
14252
09:11:07,739 --> 09:11:08,659
Now we have pages.
14253
09:11:08,660 --> 09:11:10,700
I can go into the pages as well.
14254
09:11:11,620 --> 09:11:13,739
And I'll just open up these pages
14255
09:11:13,739 --> 09:11:15,659
so that I can show you what all the pages
14256
09:11:15,660 --> 09:11:16,980
that I want to create.
14257
09:11:16,980 --> 09:11:20,780
So obviously, this is all the pages that we have.
14258
09:11:20,780 --> 09:11:24,860
So we'll have add post.jsx.
14259
09:11:24,860 --> 09:11:27,780
And by the way, touch is utility
14260
09:11:27,780 --> 09:11:29,300
which helps you to create the files.
14261
09:11:29,300 --> 09:11:30,860
And since they are so many files,
14262
09:11:30,860 --> 09:11:33,019
I don't want to just right click new file, new file.
14263
09:11:33,019 --> 09:11:34,899
I just want to create them for here.
14264
09:11:34,900 --> 09:11:38,860
And we'll be having one for all posts.jsx.
14265
09:11:38,860 --> 09:11:41,940
So add post is going to be where I'll be giving a form
14266
09:11:41,940 --> 09:11:43,860
where user can add a new post.
14267
09:11:43,860 --> 09:11:45,739
And all post is where all the posts
14268
09:11:45,739 --> 09:11:47,899
are going to be listed in the card format.
14269
09:11:47,900 --> 09:11:51,900
And then we'll be having an edit post.jsx.
14270
09:11:51,900 --> 09:11:54,100
This is where if you are owner of the post,
14271
09:11:54,100 --> 09:11:56,660
you can hit the edit button and we'll give you a form.
14272
09:11:56,660 --> 09:11:59,500
Again, the same form will be utilized of the add post
14273
09:11:59,500 --> 09:12:01,620
but we'll be just pre-filling the data into that.
14274
09:12:01,620 --> 09:12:03,420
That's how it is all done.
14275
09:12:03,420 --> 09:12:06,699
And we'll be having one home.jsx.
14276
09:12:06,699 --> 09:12:10,179
This is just a homepage for you, for users.
14277
09:12:10,180 --> 09:12:14,339
And then we'll be having one login.jsx,
14278
09:12:14,339 --> 09:12:15,659
of course for login.
14279
09:12:15,660 --> 09:12:18,540
We'll be having one post page as well
14280
09:12:18,540 --> 09:12:21,699
if you want to read an individual post, so JSX.
14281
09:12:21,699 --> 09:12:23,579
And one last one, which is sign up.
14282
09:12:23,580 --> 09:12:28,220
So we'll be having sign up.jsx.
14283
09:12:28,220 --> 09:12:29,739
Now, if I go ahead and do this,
14284
09:12:29,739 --> 09:12:32,459
this creates all these posts and everything for me.
14285
09:12:32,460 --> 09:12:34,660
That's what I love about it.
14286
09:12:34,660 --> 09:12:36,140
You could have done that right click as well,
14287
09:12:36,140 --> 09:12:37,540
but that's okay.
14288
09:12:37,540 --> 09:12:40,420
As of now, I'll just use a utility, rfce,
14289
09:12:40,420 --> 09:12:44,220
which is by the way a add on of a VS code
14290
09:12:44,220 --> 09:12:45,420
that you can simply have.
14291
09:12:45,420 --> 09:12:47,940
So I'll just have an React functional component
14292
09:12:47,940 --> 09:12:48,780
just like this.
14293
09:12:48,780 --> 09:12:50,339
So it automatically detects the file name
14294
09:12:50,339 --> 09:12:51,939
and we'll be just having this one.
14295
09:12:51,940 --> 09:12:53,300
Right now, no logic is there.
14296
09:12:53,300 --> 09:12:56,460
We'll be just putting these basic templates here
14297
09:12:56,460 --> 09:12:58,540
so that we can import and export them.
14298
09:12:58,540 --> 09:13:02,019
rfce, all post, same goes for edit post.
14299
09:13:02,019 --> 09:13:03,779
rfce, there we go.
14300
09:13:03,780 --> 09:13:05,620
I'm not doing anything at all,
14301
09:13:05,620 --> 09:13:07,019
just providing these values.
14302
09:13:07,019 --> 09:13:07,939
What goes inside them?
14303
09:13:07,940 --> 09:13:10,820
We'll definitely have a detailed talk on them.
14304
09:13:10,820 --> 09:13:14,220
If we need any more pages, we'll obviously create them.
14305
09:13:14,220 --> 09:13:17,100
rfce, save that, and one more.
14306
09:13:17,100 --> 09:13:18,780
rfce, there we go.
14307
09:13:18,780 --> 09:13:20,180
So now we have all the pages.
14308
09:13:20,180 --> 09:13:21,379
So one task is done.
14309
09:13:21,379 --> 09:13:22,579
Let's go ahead and close that.
14310
09:13:22,580 --> 09:13:25,460
I can actually close others just like that.
14311
09:13:25,460 --> 09:13:26,379
There we go.
14312
09:13:26,379 --> 09:13:27,619
So all the pages are there.
14313
09:13:27,620 --> 09:13:30,140
Right now, all these pages are available.
14314
09:13:30,140 --> 09:13:31,540
In fact, if I just go ahead
14315
09:13:31,540 --> 09:13:33,379
and set up the router and everything,
14316
09:13:33,379 --> 09:13:37,419
almost everything should be immediately available to me.
14317
09:13:37,420 --> 09:13:39,260
Now, one more thing that we are going to do here
14318
09:13:39,260 --> 09:13:43,940
is inside the source, let's create one more folder
14319
09:13:43,940 --> 09:13:45,739
where we are going to handle a couple of things.
14320
09:13:45,739 --> 09:13:47,019
I'll show you how to do that,
14321
09:13:47,019 --> 09:13:48,939
but first let's create a new folder
14322
09:13:48,940 --> 09:13:52,980
and call this one as component or components.
14323
09:13:52,980 --> 09:13:54,620
That would be better.
14324
09:13:54,620 --> 09:13:56,339
Now inside the components,
14325
09:13:56,339 --> 09:13:59,619
we'll just create only one file as of now,
14326
09:13:59,620 --> 09:14:02,100
which will be simply the auth layout,
14327
09:14:02,100 --> 09:14:04,900
how the authenticated layouts will be there.
14328
09:14:04,900 --> 09:14:06,540
Right now, there is no logic into them,
14329
09:14:06,540 --> 09:14:09,300
but we'll obviously will creating them.
14330
09:14:09,300 --> 09:14:12,019
Right click and a new file inside the components.
14331
09:14:12,019 --> 09:14:17,019
Let's call this one as simply auth layout.jsx.
14332
09:14:18,379 --> 09:14:21,299
Okay, simply rfce, nothing there.
14333
09:14:21,300 --> 09:14:22,699
Instead of auth layout,
14334
09:14:22,699 --> 09:14:25,619
let's go ahead and call this one as protected.
14335
09:14:25,620 --> 09:14:26,699
Again, it's up to you.
14336
09:14:26,699 --> 09:14:28,259
If you want to call them something else,
14337
09:14:28,260 --> 09:14:29,420
totally up to you.
14338
09:14:30,059 --> 09:14:31,019
I'm calling it as protected as,
14339
09:14:31,019 --> 09:14:35,179
because if I want to protect any of the page or anything,
14340
09:14:35,180 --> 09:14:38,100
I'll just wrap all these things around this component.
14341
09:14:38,100 --> 09:14:41,580
So this will be serving just single purpose
14342
09:14:41,580 --> 09:14:44,059
that anything inside this layout
14343
09:14:44,059 --> 09:14:45,979
is going to be something which is authenticated.
14344
09:14:45,980 --> 09:14:48,140
If you are authenticated, I'll serve you.
14345
09:14:48,140 --> 09:14:51,460
This will act as a wrapper or by the wrapper means
14346
09:14:51,460 --> 09:14:55,260
I'll simply accept some of the children here.
14347
09:14:55,260 --> 09:14:58,339
And all I'll do is render these children.
14348
09:14:58,339 --> 09:15:00,179
That's the whole idea.
14349
09:15:00,180 --> 09:15:02,100
So instead of returning this kind of a thing,
14350
09:15:02,100 --> 09:15:05,980
I'll just say that, hey, just return the children up here.
14351
09:15:05,980 --> 09:15:08,739
So I'll just go ahead and use it like this
14352
09:15:08,739 --> 09:15:10,179
and we'll go children.
14353
09:15:10,180 --> 09:15:13,739
Definitely, I'll go ahead and modify this a little bit,
14354
09:15:13,739 --> 09:15:15,139
but right now this is the goal.
14355
09:15:15,140 --> 09:15:17,379
You accept some parameter, you render them.
14356
09:15:17,379 --> 09:15:19,859
But right now this of the component doesn't know
14357
09:15:19,860 --> 09:15:22,780
that which one to render, which one to doesn't render.
14358
09:15:22,780 --> 09:15:24,620
And in order to actually have this,
14359
09:15:24,620 --> 09:15:28,220
we will accept a simple authentication as a parameter.
14360
09:15:29,580 --> 09:15:31,699
Authentication and that authentication
14361
09:15:31,699 --> 09:15:33,379
by default will be true.
14362
09:15:33,379 --> 09:15:35,139
If the authentication is true,
14363
09:15:35,140 --> 09:15:36,379
that means render this page,
14364
09:15:36,379 --> 09:15:38,339
otherwise don't render this page.
14365
09:15:38,339 --> 09:15:40,979
But right now we have no idea from where this authentication
14366
09:15:40,980 --> 09:15:43,140
is going to come to us and how this will work.
14367
09:15:43,140 --> 09:15:45,780
So obviously this is a little bit confusing point
14368
09:15:45,780 --> 09:15:48,460
at this point, but these are very common scenario
14369
09:15:48,460 --> 09:15:50,620
when you work with any React application.
14370
09:15:50,620 --> 09:15:53,520
You have some kind of protected page or an auth layout,
14371
09:15:53,559 --> 09:15:55,679
which helps you to render conditionally
14372
09:15:55,680 --> 09:15:57,480
whether this component should be rendered,
14373
09:15:57,480 --> 09:16:00,080
this page should be rendered or should not be rendered.
14374
09:16:00,080 --> 09:16:01,040
So we'll work on that.
14375
09:16:01,040 --> 09:16:02,480
We will also work on,
14376
09:16:02,480 --> 09:16:04,960
this will be responsible for navigating the people.
14377
09:16:04,960 --> 09:16:06,120
If you're not authenticated,
14378
09:16:06,120 --> 09:16:08,199
let's redirect you on the login page.
14379
09:16:08,199 --> 09:16:09,839
If you're trying to access any resource,
14380
09:16:09,839 --> 09:16:11,099
which you shouldn't be,
14381
09:16:11,100 --> 09:16:12,839
then let's redirect you to login page.
14382
09:16:12,839 --> 09:16:14,319
If you're already login page,
14383
09:16:14,320 --> 09:16:17,120
we will make sure that you don't access the login page
14384
09:16:17,120 --> 09:16:17,960
or sign up page.
14385
09:16:17,960 --> 09:16:19,519
So that logic will go in here.
14386
09:16:19,519 --> 09:16:21,759
But again, this is just the basic right now
14387
09:16:21,800 --> 09:16:23,640
just to help you to understand what is going on
14388
09:16:23,640 --> 09:16:25,640
with the flow of this application.
14389
09:16:25,640 --> 09:16:28,040
All right, this is all done.
14390
09:16:28,040 --> 09:16:29,400
We'll come back on to this one.
14391
09:16:29,400 --> 09:16:31,600
Right now, let's go into another part,
14392
09:16:31,600 --> 09:16:33,519
which is the Redux part of it.
14393
09:16:33,519 --> 09:16:35,079
A lot of people are afraid of Redux.
14394
09:16:35,080 --> 09:16:35,920
You shouldn't be.
14395
09:16:35,920 --> 09:16:38,160
We have played enough in this entire series.
14396
09:16:38,160 --> 09:16:40,379
And I'll walk you through how the Redux will work.
14397
09:16:40,379 --> 09:16:41,559
And we'll just manage one thing
14398
09:16:41,559 --> 09:16:43,559
and I'll give you assignment to manage more things.
14399
09:16:43,559 --> 09:16:46,119
That's how you learn when you painfully,
14400
09:16:46,120 --> 09:16:47,920
you take some pain and you try to work
14401
09:16:47,920 --> 09:16:49,239
with these assignments.
14402
09:16:49,239 --> 09:16:51,679
So right click on the source and create a new folder
14403
09:16:52,480 --> 09:16:54,400
and we're gonna call this one as simply store.
14404
09:16:54,400 --> 09:16:57,720
The name of this folder is not important at all.
14405
09:16:57,720 --> 09:16:59,080
You can call this one as Redux.
14406
09:16:59,080 --> 09:17:01,040
You can call it as a Superman Redux,
14407
09:17:01,040 --> 09:17:02,559
doesn't really matter.
14408
09:17:02,559 --> 09:17:04,399
We'll create two files into this one.
14409
09:17:04,400 --> 09:17:06,239
The next file is going to be store.
14410
09:17:06,239 --> 09:17:08,459
Again, some people like to have this store
14411
09:17:08,460 --> 09:17:11,120
in the root of the application, nothing wrong in that.
14412
09:17:11,120 --> 09:17:13,680
But I'll just keep it all separated up here.
14413
09:17:13,680 --> 09:17:16,640
I'll also create a slice in the Redux toolkit.
14414
09:17:16,640 --> 09:17:18,800
There is a concept of creating slices.
14415
09:17:18,800 --> 09:17:21,080
We discussed that in the previous video as well,
14416
09:17:21,120 --> 09:17:23,879
where I showed you the crash course on the Redux toolkit.
14417
09:17:23,879 --> 09:17:25,959
So please watch that in case you feel
14418
09:17:25,960 --> 09:17:27,879
a little bit uncomfortable here.
14419
09:17:27,879 --> 09:17:31,579
And we'll be having this auth slice.js of course.
14420
09:17:32,699 --> 09:17:35,079
Okay, first of all, let's manage the store part
14421
09:17:35,080 --> 09:17:37,360
because that's the easiest of all.
14422
09:17:37,360 --> 09:17:40,000
In this one, all we need to do is configure the store.
14423
09:17:40,000 --> 09:17:43,400
So we're going to simply say, hey, I want to confi,
14424
09:17:43,400 --> 09:17:48,400
confi, gur, store, no suggestion, configure store.
14425
09:17:49,280 --> 09:17:54,280
And that will come from Redux toolkit.
14426
09:17:54,559 --> 09:17:57,079
Bothering me a little bit, yeah, there we go.
14427
09:17:57,080 --> 09:17:59,360
Once I have this one, then I have to create a store
14428
09:17:59,360 --> 09:18:00,400
from this configure store.
14429
09:18:00,400 --> 09:18:03,040
So I'll just say that, hey, I created a store
14430
09:18:03,040 --> 09:18:04,519
from configure store.
14431
09:18:04,519 --> 09:18:07,599
This is a method which takes object as parameter.
14432
09:18:07,600 --> 09:18:09,519
Now what goes inside this one?
14433
09:18:09,519 --> 09:18:12,279
This takes slices, or you can say reducers as well,
14434
09:18:12,280 --> 09:18:15,140
but we don't actually make these reducers appear.
14435
09:18:15,140 --> 09:18:17,760
That's exactly this auth slice is being made for.
14436
09:18:17,760 --> 09:18:19,960
You create all of your reducers here.
14437
09:18:19,960 --> 09:18:22,600
The way how we create reducers in this one here
14438
09:18:22,600 --> 09:18:23,760
is pretty simple.
14439
09:18:23,760 --> 09:18:25,680
We simply go ahead and first say
14440
09:18:25,680 --> 09:18:27,440
that I want to create a slice.
14441
09:18:27,440 --> 09:18:31,519
So create slice, there we go.
14442
09:18:31,519 --> 09:18:33,539
And this one comes from the Redux toolkit.
14443
09:18:33,540 --> 09:18:36,559
Then every single slice needs to have an initial state
14444
09:18:36,559 --> 09:18:38,439
so that it knows when I get started,
14445
09:18:38,440 --> 09:18:41,040
what should I do or how I should behave.
14446
09:18:41,040 --> 09:18:43,000
So for this one, we'll just go ahead and say,
14447
09:18:43,000 --> 09:18:47,480
initial state.
14448
09:18:47,480 --> 09:18:49,879
Feel free to name it anything, doesn't really matter.
14449
09:18:49,879 --> 09:18:52,319
Initial states, the status is going to be false.
14450
09:18:52,320 --> 09:18:54,640
We are using it to keep a track of authentication
14451
09:18:54,640 --> 09:18:55,600
of the user.
14452
09:18:55,600 --> 09:18:56,760
So if the status is false,
14453
09:18:56,760 --> 09:18:59,480
we'll assume that the user is not authenticated
14454
09:18:59,480 --> 09:19:01,660
and we'll also have the user data.
14455
09:19:01,660 --> 09:19:03,199
So if the user data is there,
14456
09:19:03,199 --> 09:19:04,719
then obviously it will be filled up.
14457
09:19:04,720 --> 09:19:06,440
Otherwise, by default, it will be null.
14458
09:19:06,440 --> 09:19:08,040
There is nothing inside the user data.
14459
09:19:08,040 --> 09:19:11,559
User data is something which App Right will give us back.
14460
09:19:11,559 --> 09:19:14,440
For example, what's the username, what's the email,
14461
09:19:14,440 --> 09:19:17,480
what's the ID or any information you can just add up here.
14462
09:19:17,480 --> 09:19:18,840
Now this is the initial state,
14463
09:19:18,840 --> 09:19:21,120
but the next point is to create the slice.
14464
09:19:21,120 --> 09:19:23,840
Just like we created the store, it's exactly same.
14465
09:19:23,840 --> 09:19:26,040
So we go ahead and say auth slice
14466
09:19:26,040 --> 09:19:28,960
and that auth slice is being created by create slice.
14467
09:19:28,960 --> 09:19:30,840
Of course, lower create slice.
14468
09:19:30,840 --> 09:19:33,280
It's a method which takes an object as a parameter.
14469
09:19:33,280 --> 09:19:34,560
So that's what it does.
14470
09:19:34,560 --> 09:19:36,760
Now this takes couple of parameters,
14471
09:19:36,760 --> 09:19:38,920
not just one the initial state, couple of parameters.
14472
09:19:38,920 --> 09:19:40,540
First of all, you have to give it a name
14473
09:19:40,540 --> 09:19:43,380
so that although this is auth slice, it will be very unique,
14474
09:19:43,380 --> 09:19:45,820
but it is a good idea to give all of your slices a name
14475
09:19:45,820 --> 09:19:48,380
so that you can refer them back with this name.
14476
09:19:48,380 --> 09:19:49,980
Then passed up the initial state
14477
09:19:49,980 --> 09:19:52,620
of what the initial state of the slice is going to be.
14478
09:19:52,620 --> 09:19:54,660
And then you create your reducers.
14479
09:19:54,660 --> 09:19:56,700
So this is your reducers.
14480
09:19:56,700 --> 09:19:59,220
Now reducer is an object and inside this object,
14481
09:19:59,220 --> 09:20:03,460
you create all the methods or whatever you are tracking.
14482
09:20:03,460 --> 09:20:06,260
Now good thing is you don't have to worry about,
14483
09:20:06,260 --> 09:20:08,920
you might have heard the thing in the reducers
14484
09:20:08,920 --> 09:20:10,800
and especially the redux that,
14485
09:20:10,800 --> 09:20:12,680
hey, don't mutate your state or something.
14486
09:20:12,680 --> 09:20:13,800
You don't have to worry.
14487
09:20:13,800 --> 09:20:15,960
Redux has taken care of that behind the scene.
14488
09:20:15,960 --> 09:20:17,360
You just go all crazy now,
14489
09:20:17,360 --> 09:20:19,700
redux take care of that behind the scene.
14490
09:20:19,700 --> 09:20:20,960
That's a good thing.
14491
09:20:20,960 --> 09:20:22,880
So inside this reducers,
14492
09:20:22,880 --> 09:20:26,280
the first reducer or the method that I have is login.
14493
09:20:26,280 --> 09:20:28,280
As soon as somebody creates a login,
14494
09:20:28,280 --> 09:20:31,340
we'll give him an access of state and action.
14495
09:20:31,340 --> 09:20:34,000
So as soon as you create any method inside the reducer,
14496
09:20:34,000 --> 09:20:37,400
you have already an access to the state and the action.
14497
09:20:37,440 --> 09:20:41,240
State is that current state of what this store
14498
09:20:41,240 --> 09:20:42,600
is actually depicting right now.
14499
09:20:42,600 --> 09:20:43,880
So that's what it is.
14500
09:20:43,880 --> 09:20:45,960
Action is something,
14501
09:20:45,960 --> 09:20:48,400
when somebody wants to access the reducers,
14502
09:20:48,400 --> 09:20:50,760
they use actions to reach you out
14503
09:20:50,760 --> 09:20:53,340
so that they can provide you the payload,
14504
09:20:53,340 --> 09:20:55,200
they can invoke these actions and all these things.
14505
09:20:55,200 --> 09:20:56,920
So pretty easy.
14506
09:20:56,920 --> 09:20:57,880
This is a method.
14507
09:20:57,880 --> 09:21:00,520
Now just go ahead and somebody will pass us
14508
09:21:00,520 --> 09:21:02,440
in the state, the status.
14509
09:21:02,440 --> 09:21:03,560
So if he's logged in,
14510
09:21:03,560 --> 09:21:05,920
then obviously we need to change the status to true.
14511
09:21:05,920 --> 09:21:07,980
And they will also provide me a payload.
14512
09:21:07,980 --> 09:21:09,720
The payload is accessible in the action.
14513
09:21:09,720 --> 09:21:13,780
So I'll just go ahead and say state.action.
14514
09:21:14,640 --> 09:21:17,920
Actually, not the action like that, state.userData.
14515
09:21:17,920 --> 09:21:21,000
Somebody will be providing me this user data inside this.
14516
09:21:21,000 --> 09:21:22,600
And I'll just go ahead and say,
14517
09:21:22,600 --> 09:21:25,600
I'll access it via the action.payload.userData.
14518
09:21:28,960 --> 09:21:30,360
All right, so that is it.
14519
09:21:30,360 --> 09:21:33,560
So now something really nice to remember.
14520
09:21:33,560 --> 09:21:35,000
This is something that we are doing.
14521
09:21:35,000 --> 09:21:37,080
If somebody is calling this login
14522
09:21:37,080 --> 09:21:38,480
and is providing me the status,
14523
09:21:38,480 --> 09:21:40,840
that means, yes, after logging in,
14524
09:21:40,840 --> 09:21:43,780
once you hit that API, get the data back,
14525
09:21:43,780 --> 09:21:46,800
you are 100% sure that, okay, you are logged in.
14526
09:21:46,800 --> 09:21:48,720
Then you reach out, hit this reducer,
14527
09:21:48,720 --> 09:21:50,780
so I'll make the status as login.
14528
09:21:50,780 --> 09:21:53,700
And via the payload, you'll give me the user data
14529
09:21:53,700 --> 09:21:55,800
that I'll fulfill into this one.
14530
09:21:55,800 --> 09:21:58,360
This will now reach to the store
14531
09:21:58,360 --> 09:22:00,280
inside this configure store.
14532
09:22:00,280 --> 09:22:03,280
And it will be available to anybody from any component,
14533
09:22:03,280 --> 09:22:04,960
you could directly reach out to store
14534
09:22:04,960 --> 09:22:06,000
and can access that data.
14535
09:22:06,000 --> 09:22:08,360
That's why these are super helpful.
14536
09:22:08,360 --> 09:22:10,600
Similarly, we'll be having a logout reducer as well.
14537
09:22:10,600 --> 09:22:11,760
So we'll just go ahead and say,
14538
09:22:11,760 --> 09:22:13,080
hey, let's have a logout.
14539
09:22:13,080 --> 09:22:15,920
Same, exactly same, repetitive stuff.
14540
09:22:15,920 --> 09:22:17,120
We'll have the state.
14541
09:22:17,120 --> 09:22:19,520
You can optionally have the action as well,
14542
09:22:19,520 --> 09:22:20,760
but in this case, we don't require
14543
09:22:20,760 --> 09:22:22,640
because once somebody hits a logout,
14544
09:22:22,640 --> 09:22:24,320
we'll just flush out everything.
14545
09:22:24,320 --> 09:22:26,200
But still, there is nothing which is stopping you
14546
09:22:26,200 --> 09:22:29,160
to have an access to the action here and the payload here.
14547
09:22:29,160 --> 09:22:30,000
You can do that.
14548
09:22:31,140 --> 09:22:32,280
I'll just go like this,
14549
09:22:32,280 --> 09:22:33,740
and I'll just refresh the state.
14550
09:22:33,740 --> 09:22:36,480
So the status will go to false
14551
09:22:36,480 --> 09:22:39,000
and we'll just remove everything from the data as well.
14552
09:22:39,000 --> 09:22:41,560
So state.userData.
14553
09:22:41,560 --> 09:22:43,760
By the way, you can add more in the initial state
14554
09:22:43,760 --> 09:22:45,400
and have more data if you wish,
14555
09:22:45,400 --> 09:22:47,560
but right now we'll just keep it that much.
14556
09:22:47,560 --> 09:22:49,360
Simplistic stuff.
14557
09:22:49,360 --> 09:22:51,280
Okay, now once you are done with that,
14558
09:22:51,280 --> 09:22:54,160
the job is not done because you have created a auth slice,
14559
09:22:54,160 --> 09:22:56,000
but there is a little bit more to it, by the way,
14560
09:22:56,000 --> 09:22:59,600
in case you missed this, take a screenshot, pause it here.
14561
09:22:59,600 --> 09:23:00,440
This is not enough.
14562
09:23:00,440 --> 09:23:02,560
We need to export this as well.
14563
09:23:02,560 --> 09:23:06,020
The most important thing is what people are looking up for
14564
09:23:06,020 --> 09:23:08,280
is definitely these methods, login and logout,
14565
09:23:08,280 --> 09:23:09,380
so that they can access that,
14566
09:23:09,380 --> 09:23:12,340
but also some of the folks are looking
14567
09:23:12,340 --> 09:23:14,020
for this entire reducer.
14568
09:23:14,020 --> 09:23:15,340
Who are those some of the folks?
14569
09:23:15,340 --> 09:23:16,660
Your store, yes.
14570
09:23:16,660 --> 09:23:18,820
So we need to export not only these methods,
14571
09:23:18,820 --> 09:23:20,020
but also the reducer.
14572
09:23:20,020 --> 09:23:21,100
So let's go ahead and do that.
14573
09:23:21,100 --> 09:23:23,060
First of all, let's export the reducer.
14574
09:23:23,060 --> 09:23:24,620
That's my default.
14575
09:23:24,620 --> 09:23:27,700
Export default auth slice,
14576
09:23:27,720 --> 09:23:30,680
and just go ahead and export this reducer.
14577
09:23:30,680 --> 09:23:34,120
Reducer, reducers.
14578
09:23:34,120 --> 09:23:36,100
When did I named it as reducers?
14579
09:23:39,120 --> 09:23:40,680
Let me just quickly check this.
14580
09:23:40,680 --> 09:23:43,040
This is seems like a small bug.
14581
09:23:44,000 --> 09:23:45,360
All right, welcome back.
14582
09:23:45,360 --> 09:23:47,560
Yes, I had to look into the documentation,
14583
09:23:47,560 --> 09:23:49,560
and that's how the real world developer works.
14584
09:23:49,560 --> 09:23:50,660
We don't remember everything.
14585
09:23:50,660 --> 09:23:52,560
We always consult the docs,
14586
09:23:52,560 --> 09:23:54,320
maybe stack overflow these days,
14587
09:23:54,340 --> 09:23:56,020
which add GPT to figure it out.
14588
09:23:56,020 --> 09:23:57,980
And yes, this is how it works.
14589
09:23:57,980 --> 09:24:00,740
So we can see we are following almost exactly like that.
14590
09:24:00,740 --> 09:24:04,100
So notice here, here we are saying reducers,
14591
09:24:04,100 --> 09:24:05,420
but at the time of export,
14592
09:24:05,420 --> 09:24:07,520
we are actually saying counter slice dot reducer,
14593
09:24:07,520 --> 09:24:08,400
which does it.
14594
09:24:08,400 --> 09:24:11,580
So Redux in itself is kind of,
14595
09:24:11,580 --> 09:24:12,820
it's wrong to say library,
14596
09:24:12,820 --> 09:24:14,820
it's more of a framework in itself,
14597
09:24:14,820 --> 09:24:17,140
which has its own way of dealing with the things.
14598
09:24:17,140 --> 09:24:19,540
So we just export exactly like this,
14599
09:24:19,540 --> 09:24:20,980
like actions, reducers.
14600
09:24:20,980 --> 09:24:23,220
So yes, it might be a little bit confusing that,
14601
09:24:23,280 --> 09:24:25,240
hey, here it is reducers,
14602
09:24:25,240 --> 09:24:27,800
and there it is reducer only singular.
14603
09:24:27,800 --> 09:24:29,800
But yeah, this is how the documentation works.
14604
09:24:29,800 --> 09:24:31,800
So we'll just follow that, okay.
14605
09:24:31,800 --> 09:24:34,680
That reduce removes my confusion as well.
14606
09:24:34,680 --> 09:24:38,040
Yes, this is, but it's a good one, a good one.
14607
09:24:38,040 --> 09:24:40,600
I'll try to investigate it more to study more about it,
14608
09:24:40,600 --> 09:24:43,280
that why this is the case or how this is the case.
14609
09:24:43,280 --> 09:24:44,560
Okay, so the step one is done
14610
09:24:44,560 --> 09:24:46,680
that we have exported the reducer.
14611
09:24:46,680 --> 09:24:48,960
But as we know, we have to export these singular methods
14612
09:24:48,960 --> 09:24:52,420
so that any file can actually use these methods as well.
14613
09:24:52,420 --> 09:24:53,320
Pretty easy.
14614
09:24:53,320 --> 09:24:55,620
We're gonna go ahead and say export const
14615
09:24:55,620 --> 09:24:57,800
and then all the methods that you want to export,
14616
09:24:57,800 --> 09:25:00,240
like login, log out.
14617
09:25:00,240 --> 09:25:02,240
And we simply go ahead and say this one
14618
09:25:02,240 --> 09:25:06,860
is going to be auth slice dot actions.
14619
09:25:08,160 --> 09:25:10,240
There we go, bothering me a little bit.
14620
09:25:10,240 --> 09:25:13,200
We need to have a space around, there we go.
14621
09:25:13,200 --> 09:25:15,280
So this is what we have as of now.
14622
09:25:15,280 --> 09:25:16,480
So both the things are done.
14623
09:25:16,480 --> 09:25:19,080
Now step one is to get onto the store
14624
09:25:19,080 --> 09:25:20,080
and first of all,
14625
09:25:20,080 --> 09:25:22,580
import these reducers into the store
14626
09:25:22,580 --> 09:25:26,140
and make sure your store is aware of that.
14627
09:25:26,140 --> 09:25:28,080
Not really, but aware of that.
14628
09:25:28,080 --> 09:25:30,700
So we'll just go ahead and say auth slice from auth slice.
14629
09:25:30,700 --> 09:25:32,580
Now go into the configure store.
14630
09:25:32,580 --> 09:25:36,620
This store need to have the reducer, just like this.
14631
09:25:36,620 --> 09:25:38,220
And all the reducers that you have,
14632
09:25:38,220 --> 09:25:40,140
you have to actually mention it here.
14633
09:25:40,140 --> 09:25:43,780
So my reducer name is auth, that is my auth slice.
14634
09:25:43,780 --> 09:25:45,980
If you have more, you can just put a comma and have it.
14635
09:25:45,980 --> 09:25:48,380
Like for example, you're tracking a blog here.
14636
09:25:48,380 --> 09:25:52,600
So your blog slice, blog slice goes like that,
14637
09:25:52,600 --> 09:25:54,280
of course, with a space.
14638
09:25:54,280 --> 09:25:55,880
So you can just go ahead and work on with that.
14639
09:25:55,880 --> 09:25:57,960
I don't have it, I have just one.
14640
09:25:57,960 --> 09:25:59,520
So I'll just save it one.
14641
09:25:59,520 --> 09:26:02,480
I need to export that so that I can use it wherever I like.
14642
09:26:02,480 --> 09:26:07,480
I'll just go ahead and say export, export default and store.
14643
09:26:12,200 --> 09:26:14,400
Not like that, there we go.
14644
09:26:14,400 --> 09:26:16,960
So the two things, the major things are done
14645
09:26:16,960 --> 09:26:19,460
and we have this auth slice, we have store.
14646
09:26:19,460 --> 09:26:23,780
So at least the preparation part of our redux is all done.
14647
09:26:23,780 --> 09:26:26,140
Let's go ahead and work on with how we can actually
14648
09:26:26,140 --> 09:26:28,240
use these stores and work with that.
14649
09:26:28,240 --> 09:26:30,720
Now for this, we'll go into our,
14650
09:26:32,080 --> 09:26:34,160
where is our main.jsx?
14651
09:26:34,160 --> 09:26:35,740
This is where it is.
14652
09:26:35,740 --> 09:26:38,740
So inside the main.jsx, we can work with that.
14653
09:26:38,740 --> 09:26:41,220
If you are working on something like index.jsx,
14654
09:26:41,220 --> 09:26:42,060
that's also fine.
14655
09:26:42,060 --> 09:26:43,580
But what we are looking for is the main
14656
09:26:43,580 --> 09:26:45,000
where our application is loading.
14657
09:26:45,000 --> 09:26:46,820
This is where I have to work on.
14658
09:26:46,820 --> 09:26:49,320
Now, I'll first and foremost,
14659
09:26:49,320 --> 09:26:51,600
I don't want to wrap it like this.
14660
09:26:51,600 --> 09:26:53,940
I'll just create a router for this one
14661
09:26:53,940 --> 09:26:55,560
and then we'll work on with this one.
14662
09:26:55,560 --> 09:26:59,380
So first of all, let's go ahead and create a router.
14663
09:27:00,420 --> 09:27:02,580
So I'll just come here.
14664
09:27:02,580 --> 09:27:03,980
Okay, this is fine.
14665
09:27:03,980 --> 09:27:08,980
Okay, first of all, let's go ahead and create a router.
14666
09:27:09,640 --> 09:27:13,640
Router and router will be created by create browser router,
14667
09:27:14,120 --> 09:27:18,120
and this is a method which takes an array.
14668
09:27:18,960 --> 09:27:21,040
And we need to import this.
14669
09:27:21,040 --> 09:27:23,240
Right now there is nothing which is importing it.
14670
09:27:23,240 --> 09:27:28,240
So import create browser router,
14671
09:27:29,240 --> 09:27:34,240
and that will be coming from react router DOM.
14672
09:27:35,920 --> 09:27:37,080
So this is the first one.
14673
09:27:37,080 --> 09:27:38,920
So this is the first one.
14674
09:27:39,920 --> 09:27:42,800
React router DOM.
14675
09:27:42,800 --> 09:27:44,240
So this is the first part.
14676
09:27:45,240 --> 09:27:47,760
We haven't worked on how this will be taking care
14677
09:27:47,760 --> 09:27:50,320
of the pages yet, but we have a create browser router
14678
09:27:50,320 --> 09:27:53,580
and we have a router provider as well.
14679
09:27:53,580 --> 09:27:56,080
Router provider, okay.
14680
09:27:56,080 --> 09:27:58,480
So assuming that the router is all done,
14681
09:27:58,480 --> 09:28:01,480
of course it is not, but assuming that this is all done,
14682
09:28:01,480 --> 09:28:03,480
let's create this one first.
14683
09:28:03,480 --> 09:28:08,040
So the way how it works is now instead of just directly
14684
09:28:08,080 --> 09:28:10,720
rendering the app, we don't do this.
14685
09:28:10,720 --> 09:28:12,320
We actually remove this part.
14686
09:28:12,320 --> 09:28:14,320
This app will go inside the browser router
14687
09:28:14,320 --> 09:28:16,920
at the homepage that, hey, this is how we load the app.
14688
09:28:16,920 --> 09:28:19,920
But for a minute, just remove this one part.
14689
09:28:19,920 --> 09:28:23,840
And all we're going to do is have this router provider
14690
09:28:24,920 --> 09:28:26,760
self close it.
14691
09:28:26,760 --> 09:28:29,880
And now we'll say that, hey, router will be this router
14692
09:28:29,880 --> 09:28:31,100
that we have just created.
14693
09:28:31,100 --> 09:28:32,520
Right now there is nothing, but don't worry,
14694
09:28:32,520 --> 09:28:34,440
I'll walk you through that how this is being done.
14695
09:28:34,440 --> 09:28:37,360
So this is the step one, how you configure all of your router.
14696
09:28:37,440 --> 09:28:39,320
We'll go inside this array, provide the paths
14697
09:28:39,320 --> 09:28:40,920
that home is governed by app
14698
09:28:40,920 --> 09:28:43,080
and what all components basically we are loading
14699
09:28:43,080 --> 09:28:44,840
or we can say the pages that we are loading.
14700
09:28:44,840 --> 09:28:46,480
So that's the basic of it.
14701
09:28:46,480 --> 09:28:49,640
But we also want that we should have access to the store
14702
09:28:49,640 --> 09:28:51,900
as well, that's the most important part for us.
14703
09:28:51,900 --> 09:28:54,080
So how we can have the governing
14704
09:28:54,080 --> 09:28:58,280
that all of my components know that there is a store.
14705
09:28:58,280 --> 09:29:01,600
So for this, the major role is that everything
14706
09:29:01,600 --> 09:29:05,080
like all this router provider at every single time
14707
09:29:05,080 --> 09:29:06,760
there should be wrapped by the store.
14708
09:29:06,840 --> 09:29:08,520
That is the problem statement.
14709
09:29:09,380 --> 09:29:11,080
So let's go ahead and first import that.
14710
09:29:11,080 --> 09:29:14,440
So I'll just go ahead and say I need a provider
14711
09:29:14,440 --> 09:29:16,760
and that provider is not from the React,
14712
09:29:16,760 --> 09:29:20,120
we need from React Redux, there we go.
14713
09:29:20,120 --> 09:29:23,520
Now, the next step is really simple, absolutely simple.
14714
09:29:23,520 --> 09:29:27,200
This browser router, this whole thing needs to be wrapped
14715
09:29:27,200 --> 09:29:32,200
with this provider, provider, there we go, close it.
14716
09:29:33,780 --> 09:29:36,040
And this needs to go inside this.
14717
09:29:37,160 --> 09:29:38,000
There we go.
14718
09:29:38,000 --> 09:29:40,640
But just putting this doesn't means that it is already
14719
09:29:40,640 --> 09:29:42,080
automatically aware of the store,
14720
09:29:42,080 --> 09:29:44,020
we need to import the store as well.
14721
09:29:44,020 --> 09:29:47,440
So we'll just first say that, hey, let's bring up the store.
14722
09:29:47,440 --> 09:29:51,440
We can probably get it here, import store from
14723
09:29:53,280 --> 09:29:55,880
and the store is going to come up from,
14724
09:29:55,880 --> 09:29:57,880
we'll go inside the store
14725
09:29:57,880 --> 09:30:00,920
and there will be having store.js.
14726
09:30:00,920 --> 09:30:03,760
And now this provider can say that what is your store?
14727
09:30:03,760 --> 09:30:04,760
Just name the store.
14728
09:30:04,760 --> 09:30:08,920
So simply go ahead and say the store is going to be store.
14729
09:30:10,240 --> 09:30:11,440
There we go.
14730
09:30:11,440 --> 09:30:14,840
Now this is all done, properly configured that, hey,
14731
09:30:14,840 --> 09:30:17,500
the store, since this is my store,
14732
09:30:17,500 --> 09:30:19,800
this is my state of the application,
14733
09:30:19,800 --> 09:30:21,920
every page is going to be governed by the state.
14734
09:30:21,920 --> 09:30:25,080
That is why I'm wrapping provider first
14735
09:30:25,080 --> 09:30:27,280
and then everything is going to be governed by this.
14736
09:30:27,280 --> 09:30:28,240
So I'm just governing it.
14737
09:30:28,240 --> 09:30:30,840
So I'll just move it a tab so that it's easier.
14738
09:30:30,840 --> 09:30:32,240
Okay, this is the first part
14739
09:30:32,240 --> 09:30:33,880
of how this is going to be done.
14740
09:30:33,880 --> 09:30:36,440
And by the way, this browser router that you're creating,
14741
09:30:36,440 --> 09:30:38,300
that can be done by multiple ways.
14742
09:30:38,300 --> 09:30:42,640
There are kind of a sandwich method as well
14743
09:30:42,640 --> 09:30:45,320
in which you just create components inside the components
14744
09:30:45,320 --> 09:30:47,720
or you can also provide an object into this one.
14745
09:30:47,720 --> 09:30:49,160
So we'll go with the object one.
14746
09:30:49,160 --> 09:30:51,680
So here is our object that goes like this.
14747
09:30:51,680 --> 09:30:54,220
And then I'll just go ahead and say, hey, path,
14748
09:30:54,220 --> 09:30:55,060
what is the path?
14749
09:30:55,060 --> 09:30:56,800
I want to have a path of slash,
14750
09:30:56,800 --> 09:30:59,500
who should be the element which should be rendered
14751
09:30:59,500 --> 09:31:01,480
when somebody visits this path?
14752
09:31:01,480 --> 09:31:03,720
So obviously in this case, now we say the element
14753
09:31:03,800 --> 09:31:07,120
which will be rendered is going to be the app.
14754
09:31:07,120 --> 09:31:09,600
There we go, self-closing, there we go.
14755
09:31:09,600 --> 09:31:13,440
Now the next step is, do we have sub paths
14756
09:31:13,440 --> 09:31:15,400
after this application, after this slash,
14757
09:31:15,400 --> 09:31:16,640
do we have slash sign up?
14758
09:31:16,640 --> 09:31:17,960
Do we have slash login?
14759
09:31:17,960 --> 09:31:19,160
Do we have slash post?
14760
09:31:19,160 --> 09:31:20,280
Yes, we do have.
14761
09:31:20,280 --> 09:31:22,440
That all goes into the children.
14762
09:31:22,440 --> 09:31:24,560
So as you can see children right now it says object,
14763
09:31:24,560 --> 09:31:26,200
but no, it is not an object.
14764
09:31:26,200 --> 09:31:29,040
First of all, this is the proper syntax
14765
09:31:29,040 --> 09:31:32,800
and this is further down again an array.
14766
09:31:33,240 --> 09:31:35,040
What all the children do you have?
14767
09:31:35,040 --> 09:31:38,720
Okay, so inside this, I'll have multiple of these children.
14768
09:31:38,720 --> 09:31:40,880
All these are objects just like this.
14769
09:31:40,880 --> 09:31:43,760
First of all, what is the path that you want to grab?
14770
09:31:43,760 --> 09:31:46,080
So the path of the children is going to be,
14771
09:31:46,080 --> 09:31:49,380
first of all, the slash and wherever that slash is,
14772
09:31:49,380 --> 09:31:51,360
by the way, we need an access to the pages.
14773
09:31:51,360 --> 09:31:52,740
Yes, we have homepage.
14774
09:31:52,740 --> 09:31:54,640
On the slash we'll load the homepage.
14775
09:31:55,840 --> 09:31:57,280
We'll just say element,
14776
09:31:57,280 --> 09:31:59,360
who is the element you want to render here?
14777
09:31:59,360 --> 09:32:02,580
We want to render home, which is not yet imported.
14778
09:32:03,120 --> 09:32:06,400
Home is not yet imported.
14779
09:32:06,400 --> 09:32:10,080
So now we need a lot of list of these imports.
14780
09:32:10,080 --> 09:32:13,360
So import home and we'll be importing.
14781
09:32:13,360 --> 09:32:16,120
Now you guess the idea why I created the pages.
14782
09:32:16,120 --> 09:32:20,880
So inside these pages, we have home.jsx.
14783
09:32:20,880 --> 09:32:21,720
There we go.
14784
09:32:21,720 --> 09:32:24,000
You get this point that how this is all being done.
14785
09:32:24,000 --> 09:32:27,960
So this is my slash where the home component will be logged
14786
09:32:27,960 --> 09:32:28,800
in and all these things.
14787
09:32:28,800 --> 09:32:29,760
So that's fun.
14788
09:32:29,760 --> 09:32:31,160
That's basic.
14789
09:32:31,160 --> 09:32:35,040
But what about the elements like slash login?
14790
09:32:35,040 --> 09:32:38,240
We need to provide some kind of mechanism to find out
14791
09:32:38,240 --> 09:32:41,920
that should you be able to access the login or not?
14792
09:32:41,920 --> 09:32:43,160
Because if you're logged in,
14793
09:32:43,160 --> 09:32:46,720
you should not access the homepage, the login page.
14794
09:32:46,720 --> 09:32:49,000
But similarly, you get the point.
14795
09:32:49,000 --> 09:32:49,840
You get the point.
14796
09:32:49,840 --> 09:32:51,240
So I'll just go ahead and walk you through
14797
09:32:51,240 --> 09:32:52,760
that how this is being done.
14798
09:32:52,760 --> 09:32:55,480
This is another of my sub route.
14799
09:32:55,480 --> 09:32:59,680
Let's just say the path is going to be a slash login.
14800
09:32:59,680 --> 09:33:02,200
We know what component we want to mount onto this one.
14801
09:33:02,200 --> 09:33:04,640
So the element is going to be,
14802
09:33:04,640 --> 09:33:06,880
you might be wondering, hey, just go ahead and say,
14803
09:33:06,880 --> 09:33:09,520
you want to go ahead and have login into this one.
14804
09:33:11,760 --> 09:33:13,080
Just like this, but no,
14805
09:33:13,080 --> 09:33:16,400
this is where you are a little bit wrong, not wrong.
14806
09:33:16,400 --> 09:33:18,400
We haven't discussed these kinds of approach.
14807
09:33:18,400 --> 09:33:21,360
So we'll just first go ahead and say, hey, login.
14808
09:33:21,360 --> 09:33:22,800
Nope, this is not login.
14809
09:33:22,800 --> 09:33:27,800
I want it to be from pages slash login.
14810
09:33:28,120 --> 09:33:30,600
Okay, there's nothing wrong in this approach,
14811
09:33:30,600 --> 09:33:32,920
but what do we want to do in this one is,
14812
09:33:32,920 --> 09:33:35,960
instead of rendering this login directly,
14813
09:33:35,960 --> 09:33:37,280
which doesn't gives me control
14814
09:33:37,280 --> 09:33:39,520
whether should I show it to you or not,
14815
09:33:39,520 --> 09:33:42,080
I'll just go ahead and bring in one more component,
14816
09:33:42,080 --> 09:33:42,920
which I created.
14817
09:33:42,920 --> 09:33:45,520
So if you remember, we created this component auth layout.
14818
09:33:45,520 --> 09:33:48,880
It was doing nothing, but time to bring it now.
14819
09:33:48,880 --> 09:33:52,040
Let's go ahead and say import.
14820
09:33:53,000 --> 09:33:56,360
And this one is auth layout, I guess, yep.
14821
09:33:58,720 --> 09:34:03,720
Auth layout, and that will be coming from dot slash components
14822
09:34:04,520 --> 09:34:06,560
and we have just one auth layout.jsx.
14823
09:34:06,560 --> 09:34:08,960
Okay, what's so unique that you are going to do
14824
09:34:08,960 --> 09:34:10,720
with this one auth layout.
14825
09:34:10,720 --> 09:34:12,680
Now, instead of rendering this,
14826
09:34:12,680 --> 09:34:14,520
I'll just go ahead and say, first of all,
14827
09:34:14,520 --> 09:34:15,840
I'll wrap this up with parenthesis
14828
09:34:15,840 --> 09:34:17,800
so that it's easier for me to write.
14829
09:34:17,800 --> 09:34:20,200
And I'll say, hey, load this element,
14830
09:34:20,200 --> 09:34:23,320
which is auth layout, just like this.
14831
09:34:23,320 --> 09:34:24,800
And inside this auth layout,
14832
09:34:24,800 --> 09:34:27,080
now let's go ahead and use this login.
14833
09:34:28,520 --> 09:34:30,040
It could be self-closing.
14834
09:34:30,040 --> 09:34:30,880
But what's the point?
14835
09:34:30,880 --> 09:34:32,680
What's the point of having this?
14836
09:34:32,680 --> 09:34:35,560
Now inside this auth layout, I can provide a prop
14837
09:34:35,560 --> 09:34:37,520
and I can define whether this page
14838
09:34:37,520 --> 09:34:39,560
requires an authentication or not.
14839
09:34:39,560 --> 09:34:43,120
So I can just go ahead and say false, just like this.
14840
09:34:44,840 --> 09:34:46,480
I can say that this component
14841
09:34:46,480 --> 09:34:48,000
doesn't require an authentication
14842
09:34:48,000 --> 09:34:49,520
and I can, based on this logic,
14843
09:34:49,520 --> 09:34:52,240
I can work on with my auth layout.
14844
09:34:52,240 --> 09:34:54,080
So you get the idea.
14845
09:34:54,080 --> 09:34:57,280
Similarly, like login page, exactly same.
14846
09:34:57,280 --> 09:34:58,640
Similarly, sign up page.
14847
09:34:58,640 --> 09:35:00,120
Yes, exact copy of this one.
14848
09:35:00,120 --> 09:35:02,800
So let's go ahead and have a copy of this one.
14849
09:35:02,800 --> 09:35:04,640
Let's put up a comma.
14850
09:35:04,640 --> 09:35:06,820
We need to import this first.
14851
09:35:09,400 --> 09:35:14,400
Sign up from pages, dot slash pages,
14852
09:35:15,000 --> 09:35:16,960
and we have sign up.
14853
09:35:17,920 --> 09:35:21,920
And we'll say, no, sign up also, this route sign up,
14854
09:35:23,940 --> 09:35:26,040
also don't require any authentication
14855
09:35:26,040 --> 09:35:29,800
and you can load this one, sign up, there we go.
14856
09:35:29,800 --> 09:35:32,160
Right now, what we're going to do with those authentication
14857
09:35:32,160 --> 09:35:35,600
is not really important, but let me just show you.
14858
09:35:35,600 --> 09:35:37,360
And now let's also define one more
14859
09:35:37,360 --> 09:35:39,640
and you will understand the logic behind it.
14860
09:35:39,640 --> 09:35:42,120
Let's get one more, copy that.
14861
09:35:42,120 --> 09:35:47,120
And now the route that we want to go for is all post,
14862
09:35:47,840 --> 09:35:49,540
posts, maybe yes.
14863
09:35:49,540 --> 09:35:51,640
Now the element that I want to render for this
14864
09:35:51,640 --> 09:35:52,760
obviously is all posts.
14865
09:35:52,760 --> 09:35:54,240
So first let's bring this.
14866
09:35:55,240 --> 09:35:59,920
Import, and we're going to call this one as all posts,
14867
09:35:59,920 --> 09:36:04,920
and that will be coming up from pages and all posts,
14868
09:36:05,620 --> 09:36:07,280
dot JSX, okay.
14869
09:36:07,280 --> 09:36:10,500
Now for this one, I want that anybody who visits
14870
09:36:10,500 --> 09:36:14,220
the all posts should be accessible by all posts.
14871
09:36:14,220 --> 09:36:17,300
But this time the authentication is going to be true
14872
09:36:17,300 --> 09:36:20,720
because only who are logged in should be able to read
14873
09:36:20,720 --> 09:36:23,360
all of my posts, that's the logic I'm going for.
14874
09:36:23,360 --> 09:36:25,360
Now this is having a shortcut.
14875
09:36:25,360 --> 09:36:26,680
So you can just remove this one
14876
09:36:26,680 --> 09:36:28,720
if you pass on authentication just like this.
14877
09:36:28,720 --> 09:36:30,460
This also converts as a true.
14878
09:36:30,460 --> 09:36:33,300
So that's a shorthand, a lot of people use that.
14879
09:36:33,300 --> 09:36:35,160
But now I have two situations here.
14880
09:36:35,160 --> 09:36:37,840
People who will be coming up whose authentication is false
14881
09:36:37,840 --> 09:36:41,600
like login and sign up, and people who will also be coming up
14882
09:36:41,600 --> 09:36:43,960
whose the authentication is true.
14883
09:36:43,960 --> 09:36:46,120
So how can I handle this situation?
14884
09:36:46,120 --> 09:36:47,260
So there are a couple of ways.
14885
09:36:47,260 --> 09:36:49,700
Now we'll work on the functionality part
14886
09:36:49,700 --> 09:36:51,320
of how you're going to do that.
14887
09:36:51,320 --> 09:36:54,600
So notice carefully how we're going to do this one.
14888
09:36:54,600 --> 09:36:56,300
So a couple of things are there.
14889
09:36:56,300 --> 09:36:59,440
First of all, the page is having a requirement
14890
09:36:59,440 --> 09:37:01,240
that should you be authenticated or not.
14891
09:37:01,240 --> 09:37:03,240
There is also one more thing, one more variable
14892
09:37:03,240 --> 09:37:05,000
in the picture which is saying,
14893
09:37:05,000 --> 09:37:06,800
are you truly logged in or not?
14894
09:37:06,800 --> 09:37:08,500
Page requires a login is a different thing,
14895
09:37:08,500 --> 09:37:10,320
but are you logged in or not?
14896
09:37:10,320 --> 09:37:12,420
We can verify that you are logged in or not
14897
09:37:12,420 --> 09:37:14,640
by just making a query to the store.
14898
09:37:14,640 --> 09:37:17,000
That's where the two variables actually come up.
14899
09:37:17,000 --> 09:37:19,720
And we have to match the two conditions here.
14900
09:37:19,720 --> 09:37:22,440
All right, so what we're going to do is
14901
09:37:22,440 --> 09:37:24,120
let's go ahead and one by one.
14902
09:37:24,120 --> 09:37:26,320
So this authentication part is all good.
14903
09:37:26,320 --> 09:37:28,000
We are not going to touch that.
14904
09:37:28,000 --> 09:37:33,000
And just below up here, we'll make couple of queries
14905
09:37:33,760 --> 09:37:35,940
with the selectors here.
14906
09:37:35,940 --> 09:37:39,480
So first of all, let's bring up the important part.
14907
09:37:40,360 --> 09:37:43,760
In case you have not seen the Redux crash course,
14908
09:37:43,760 --> 09:37:45,800
please go ahead and watch that.
14909
09:37:45,800 --> 09:37:48,880
We'll be using use selector from the React Redux.
14910
09:37:48,880 --> 09:37:50,560
We need the navigation as well
14911
09:37:50,560 --> 09:37:55,560
because we will be redirecting the people use navigation
14912
09:37:55,680 --> 09:37:57,980
or navigate, yeah, navigate is good, React router DOM.
14913
09:37:57,980 --> 09:37:59,400
So these are the two ones.
14914
09:37:59,400 --> 09:38:00,920
Now let's make a query.
14915
09:38:00,920 --> 09:38:03,880
So we'll say auth status.
14916
09:38:03,880 --> 09:38:05,660
And we can just query the auth status
14917
09:38:05,660 --> 09:38:08,060
by using the use selector.
14918
09:38:08,060 --> 09:38:10,480
And from the use selector, we'll say that,
14919
09:38:10,480 --> 09:38:14,120
hey, there is a callback here, just like this.
14920
09:38:14,120 --> 09:38:17,880
And we can say, you give me access to state.
14921
09:38:17,880 --> 09:38:22,880
And inside this, I can say state dot auth dot status.
14922
09:38:24,400 --> 09:38:26,600
That's how we worked on it.
14923
09:38:26,600 --> 09:38:28,360
So this will give me a true and false value.
14924
09:38:28,360 --> 09:38:29,520
What is your auth status?
14925
09:38:29,520 --> 09:38:31,100
Is it true?
14926
09:38:31,100 --> 09:38:31,940
Is it false?
14927
09:38:31,940 --> 09:38:32,960
Whatever that is.
14928
09:38:32,960 --> 09:38:36,320
We'll also go and create a simple navigate.
14929
09:38:37,680 --> 09:38:41,400
Navigate, oops, navigate.
14930
09:38:41,400 --> 09:38:45,640
And we'll create a navigate from use navigate,
14931
09:38:45,640 --> 09:38:46,840
just like that.
14932
09:38:46,840 --> 09:38:47,720
Now we have access.
14933
09:38:48,360 --> 09:38:50,400
Now I hope you can see we have couple of variables
14934
09:38:50,400 --> 09:38:51,520
to check for.
14935
09:38:51,520 --> 09:38:53,520
The first one is authentication,
14936
09:38:53,520 --> 09:38:55,400
which is also a Boolean value.
14937
09:38:55,400 --> 09:38:59,000
We also have auth status, which is also a Boolean value.
14938
09:38:59,000 --> 09:39:00,760
So based on this, you have to figure out
14939
09:39:00,760 --> 09:39:03,200
that what do you want to do and how do you want to do.
14940
09:39:03,200 --> 09:39:04,680
Now, since this is a couple of queries
14941
09:39:04,680 --> 09:39:05,680
are going back and forth,
14942
09:39:05,680 --> 09:39:07,560
I would like to create a state for myself,
14943
09:39:07,560 --> 09:39:09,040
which is probably a loader state.
14944
09:39:09,040 --> 09:39:10,600
So let's go work with that.
14945
09:39:10,600 --> 09:39:14,240
So I'll just go ahead and say, I'll use loader.
14946
09:39:15,240 --> 09:39:19,080
And I'll say set loader.
14947
09:39:19,080 --> 09:39:24,080
And that will be coming up from use state, use state.
14948
09:39:25,200 --> 09:39:27,360
And by default, it will be true.
14949
09:39:27,360 --> 09:39:28,840
So your loader is going on.
14950
09:39:28,840 --> 09:39:30,760
By the way, yes, we have used state.
14951
09:39:30,760 --> 09:39:32,920
Okay, now comes the logic part,
14952
09:39:32,920 --> 09:39:34,480
how you are going to deal with that.
14953
09:39:34,480 --> 09:39:36,360
So as soon as this component loads,
14954
09:39:36,360 --> 09:39:37,560
you have to make some queries.
14955
09:39:37,560 --> 09:39:39,120
You have to run these auth status
14956
09:39:39,120 --> 09:39:41,520
and you have to figure out how this is all going on.
14957
09:39:41,520 --> 09:39:42,560
So that based on this,
14958
09:39:42,560 --> 09:39:43,840
you can render some other things.
14959
09:39:44,560 --> 09:39:46,000
Because right now this is not,
14960
09:39:46,000 --> 09:39:48,240
this is a simple children render right now.
14961
09:39:48,240 --> 09:39:49,960
But this is going to be changed
14962
09:39:49,960 --> 09:39:51,440
that whether the things are good
14963
09:39:51,440 --> 09:39:53,640
or what's the value of this.
14964
09:39:53,640 --> 09:39:55,720
Okay, let me show you how this is being done.
14965
09:39:55,720 --> 09:39:59,200
First of all, let's fire up a simple use state here.
14966
09:40:00,480 --> 09:40:03,680
Use effect, sorry, use effect.
14967
09:40:05,080 --> 09:40:07,400
Use effect, there we go.
14968
09:40:07,400 --> 09:40:08,920
No suggestions, no problem.
14969
09:40:10,080 --> 09:40:12,080
Okay, first of all, the callback.
14970
09:40:12,080 --> 09:40:13,160
And then we obviously know
14971
09:40:13,160 --> 09:40:15,000
there is a dependency area on that.
14972
09:40:15,000 --> 09:40:17,080
So based on what this is depending.
14973
09:40:17,080 --> 09:40:19,760
So first of all, it is dependent on auth status.
14974
09:40:19,760 --> 09:40:22,520
This is dependent on authentication as well.
14975
09:40:22,520 --> 09:40:25,440
And this is also dependent on the navigate as well.
14976
09:40:25,440 --> 09:40:26,360
So there we go.
14977
09:40:26,360 --> 09:40:28,640
These are our dependency array, okay.
14978
09:40:28,640 --> 09:40:29,840
Coming back onto this one,
14979
09:40:29,840 --> 09:40:31,440
how do you want to work with that?
14980
09:40:31,440 --> 09:40:34,520
We want to run a simple if and else condition in here
14981
09:40:34,520 --> 09:40:37,440
based on I will be navigating you to login
14982
09:40:37,440 --> 09:40:40,160
or I'll be navigating you to the slash page.
14983
09:40:40,160 --> 09:40:41,560
Okay, let's see.
14984
09:40:41,560 --> 09:40:46,560
Simple, if authentication is required
14985
09:40:48,040 --> 09:40:53,040
and your auth status is not equals to authentication.
14986
09:40:57,960 --> 09:41:00,880
Okay, very carefully, look at this.
14987
09:41:00,880 --> 09:41:04,480
If I require a page which is authenticated,
14988
09:41:04,480 --> 09:41:07,120
maybe you are visiting all post.
14989
09:41:07,120 --> 09:41:08,440
So I'm saying that, hey,
14990
09:41:08,440 --> 09:41:10,720
you are required an authentication there.
14991
09:41:10,720 --> 09:41:14,680
But your authentication status is not as true
14992
09:41:14,680 --> 09:41:17,680
because required means this will be converting as true.
14993
09:41:17,680 --> 09:41:19,640
Okay, listen to this very carefully.
14994
09:41:19,640 --> 09:41:20,680
When I say you are required,
14995
09:41:20,680 --> 09:41:23,000
that means I'm passing a true in here.
14996
09:41:23,000 --> 09:41:25,560
But what I'm also checking another side is
14997
09:41:25,560 --> 09:41:27,720
the auth status that you are providing me
14998
09:41:27,720 --> 09:41:30,080
is not equals to authentication or in terms,
14999
09:41:30,080 --> 09:41:33,280
in short, your authentication is not true.
15000
09:41:33,280 --> 09:41:35,360
In that case, where should I redirect you?
15001
09:41:35,360 --> 09:41:40,360
Simple question, you are supposed to be logged in
15002
09:41:40,480 --> 09:41:43,560
when you want to see all post, but you're not logged in.
15003
09:41:43,560 --> 09:41:45,960
So obviously I should redirect you to the login page.
15004
09:41:45,960 --> 09:41:46,800
Really simple.
15005
09:41:46,800 --> 09:41:48,040
So I'll just go ahead and say,
15006
09:41:48,040 --> 09:41:53,040
I use the navigate and redirect you to slash login.
15007
09:41:53,880 --> 09:41:55,320
This will take care.
15008
09:41:55,320 --> 09:41:56,720
The another condition that I'm checking
15009
09:41:56,720 --> 09:41:58,680
is not a simple else condition.
15010
09:41:58,680 --> 09:42:00,640
This is also another checker.
15011
09:42:00,640 --> 09:42:03,560
Okay, so I'll just go ahead and check this one.
15012
09:42:03,560 --> 09:42:05,840
If I don't require an authentication,
15013
09:42:05,840 --> 09:42:08,380
so this is my authentication,
15014
09:42:08,380 --> 09:42:10,280
I don't require authentication.
15015
09:42:11,240 --> 09:42:13,840
You can just visit these pages,
15016
09:42:13,840 --> 09:42:18,840
but you simply go ahead and say your auth status
15017
09:42:20,520 --> 09:42:25,520
is not equals to the authentication.
15018
09:42:28,560 --> 09:42:29,480
There we go.
15019
09:42:29,480 --> 09:42:31,720
What should I do in this case?
15020
09:42:31,720 --> 09:42:33,440
This is the second case where I'm saying,
15021
09:42:33,440 --> 09:42:36,640
hey, you are not supposed to be authenticated
15022
09:42:36,640 --> 09:42:37,480
to see these pages.
15023
09:42:37,480 --> 09:42:40,680
That means the login page, the signup page.
15024
09:42:40,680 --> 09:42:43,800
But what I'm also checking, hey, you are logged in.
15025
09:42:43,800 --> 09:42:47,260
Authentication is auth status is not equals to false.
15026
09:42:47,260 --> 09:42:49,680
So you are truly logged in.
15027
09:42:49,680 --> 09:42:52,360
And there are some pages which don't require authentication.
15028
09:42:52,360 --> 09:42:53,360
Who are those pages?
15029
09:42:53,360 --> 09:42:54,920
The login and signup.
15030
09:42:54,920 --> 09:42:59,000
So if you want to visit the login and signup page
15031
09:42:59,000 --> 09:43:00,120
and you're already logged in,
15032
09:43:00,120 --> 09:43:02,140
you're not supposed to see those pages.
15033
09:43:02,140 --> 09:43:03,760
So in that case, I'll just redirect you
15034
09:43:03,760 --> 09:43:06,200
to the simple navigate.
15035
09:43:06,200 --> 09:43:11,120
So navigate and you'll be redirected to the slash.
15036
09:43:11,120 --> 09:43:13,280
This is the basic logic that we have created.
15037
09:43:13,280 --> 09:43:16,480
Now based on this, we can actually render onto this one.
15038
09:43:16,480 --> 09:43:17,600
Once this is all done,
15039
09:43:17,600 --> 09:43:18,880
let's go ahead and do one more thing.
15040
09:43:18,880 --> 09:43:21,480
If we are done all these if and else cases,
15041
09:43:21,480 --> 09:43:24,600
let's go ahead and use a set loader and turn it into false.
15042
09:43:24,600 --> 09:43:27,600
So all the drama that we wanted to check and all of these,
15043
09:43:27,600 --> 09:43:28,440
this is all done.
15044
09:43:28,440 --> 09:43:31,360
Now here I'm changing the state of this loader.
15045
09:43:31,360 --> 09:43:34,060
Based on this, I can do a simple ternary operation
15046
09:43:34,060 --> 09:43:34,900
into this one.
15047
09:43:34,900 --> 09:43:36,580
I'll just remove this part
15048
09:43:36,580 --> 09:43:38,340
and I'll say first check my loader.
15049
09:43:39,260 --> 09:43:42,780
If loader is true, then we're going to show
15050
09:43:42,780 --> 09:43:44,540
maybe a loading, maybe a null.
15051
09:43:44,540 --> 09:43:46,740
I'll keep this as a simple exercise for you
15052
09:43:46,740 --> 09:43:48,260
to create a simple loading component,
15053
09:43:48,260 --> 09:43:50,980
maybe a spinner widget, just add it up here, simple.
15054
09:43:50,980 --> 09:43:52,900
I'll just use a null, not a good practice,
15055
09:43:52,900 --> 09:43:54,340
but I'll just keep it here.
15056
09:43:54,340 --> 09:43:57,100
And if the loader is false,
15057
09:43:57,100 --> 09:43:59,460
then go ahead and load the component,
15058
09:43:59,460 --> 09:44:01,460
which in my case is just the children.
15059
09:44:02,460 --> 09:44:06,060
Children, there we go, not like that, not like that.
15060
09:44:06,060 --> 09:44:07,780
Children, there we go.
15061
09:44:07,780 --> 09:44:10,500
So really simple, but this is a good mental exercise
15062
09:44:10,500 --> 09:44:13,380
to actually figure out that how things are going on.
15063
09:44:13,380 --> 09:44:15,420
By the way, it has couple of more ways
15064
09:44:15,420 --> 09:44:16,660
of how you can write that.
15065
09:44:16,660 --> 09:44:17,500
Let me walk you through.
15066
09:44:17,500 --> 09:44:20,060
Probably it will take a couple of more minutes,
15067
09:44:20,060 --> 09:44:22,420
but it will help you to understand how this is being done.
15068
09:44:22,420 --> 09:44:24,980
So for example, if you are checking something like this
15069
09:44:24,980 --> 09:44:27,660
and just rewriting the code to make it more understandable.
15070
09:44:27,660 --> 09:44:29,500
So let's just say there is an authentication.
15071
09:44:30,260 --> 09:44:32,300
If authentication is true,
15072
09:44:32,300 --> 09:44:34,740
then I go ahead and I'm checking another one,
15073
09:44:34,740 --> 09:44:36,500
if statement, something like this.
15074
09:44:36,500 --> 09:44:40,500
So in this, I'm checking if your auth status
15075
09:44:40,500 --> 09:44:45,500
is not equals to authentication.
15076
09:44:47,100 --> 09:44:47,980
So something like this.
15077
09:44:47,980 --> 09:44:50,660
So if you are having a problem in understanding
15078
09:44:50,660 --> 09:44:53,020
two condition at the same time using this,
15079
09:44:53,020 --> 09:44:54,500
you can also apply this one.
15080
09:44:54,500 --> 09:44:57,500
So in this case, notice here, let's understand this.
15081
09:44:57,500 --> 09:44:58,780
Authentication is required.
15082
09:44:59,220 --> 09:45:01,260
Where does the authentication is required?
15083
09:45:01,260 --> 09:45:03,820
Oh, this kind of pages means all posts.
15084
09:45:03,820 --> 09:45:05,820
Authentication is required in this one.
15085
09:45:05,820 --> 09:45:06,740
So it is true.
15086
09:45:06,740 --> 09:45:08,900
So this will be converted into as true.
15087
09:45:10,420 --> 09:45:12,180
Just for explanation purpose.
15088
09:45:12,180 --> 09:45:14,100
And the auth status, what is your auth status?
15089
09:45:14,100 --> 09:45:16,340
It is not equals to authentication.
15090
09:45:16,340 --> 09:45:18,820
That means authentication was required,
15091
09:45:18,820 --> 09:45:21,540
but you are not authenticated.
15092
09:45:21,540 --> 09:45:23,140
So where should I redirect you?
15093
09:45:23,140 --> 09:45:24,340
If you are not authenticated,
15094
09:45:24,340 --> 09:45:26,340
but the page requires authentication.
15095
09:45:26,340 --> 09:45:27,940
Simply you understood this part.
15096
09:45:27,940 --> 09:45:29,820
Now we should navigate you to which page?
15097
09:45:29,820 --> 09:45:31,140
Slash login.
15098
09:45:31,140 --> 09:45:35,140
And this is exactly what I have done in this one here.
15099
09:45:35,140 --> 09:45:37,460
So hope this helps you to understand the part.
15100
09:45:37,460 --> 09:45:38,300
I can understand.
15101
09:45:38,300 --> 09:45:40,100
This could be a little bit more
15102
09:45:40,100 --> 09:45:41,380
for the beginners and fresher,
15103
09:45:41,380 --> 09:45:42,980
but this is exactly what I did.
15104
09:45:42,980 --> 09:45:45,340
I'll just keep it here to make sure that
15105
09:45:45,340 --> 09:45:47,700
you know that how I explained this to you.
15106
09:45:47,700 --> 09:45:49,820
But I think now this gives you a much more clarity
15107
09:45:49,820 --> 09:45:52,660
of how things are done and how things are done.
15108
09:45:52,660 --> 09:45:55,060
Okay, so moving back.
15109
09:45:55,060 --> 09:45:57,900
You understand this part that all posts are being there,
15110
09:45:58,740 --> 09:46:00,540
but we have more elements.
15111
09:46:00,540 --> 09:46:02,420
So for example, I'll just go ahead
15112
09:46:02,420 --> 09:46:04,540
and copy and paste this one.
15113
09:46:04,540 --> 09:46:06,940
So the page is like add post.
15114
09:46:06,940 --> 09:46:09,180
Let's go ahead and have that one as well.
15115
09:46:11,340 --> 09:46:14,980
Import add post.
15116
09:46:14,980 --> 09:46:16,100
No suggestion.
15117
09:46:16,100 --> 09:46:16,940
Nah.
15118
09:46:17,900 --> 09:46:21,620
Pages and we have add post.jsx.
15119
09:46:21,620 --> 09:46:23,180
This also requires authentication.
15120
09:46:23,180 --> 09:46:24,620
So it's almost similar to that.
15121
09:46:24,620 --> 09:46:26,980
This one will be add post.
15122
09:46:28,140 --> 09:46:31,500
Add post, just like that.
15123
09:46:31,500 --> 09:46:33,100
Requires authentication, yes.
15124
09:46:33,100 --> 09:46:35,980
And we'll just simply say you are add post.
15125
09:46:35,980 --> 09:46:36,900
There we go.
15126
09:46:36,900 --> 09:46:37,980
So that's the one.
15127
09:46:37,980 --> 09:46:39,820
We also need the edit part as well.
15128
09:46:39,820 --> 09:46:42,220
Edit also needs a slug to be passed on.
15129
09:46:43,220 --> 09:46:44,060
Let's do that.
15130
09:46:44,060 --> 09:46:47,500
So we have edit post and we have a post individual as well.
15131
09:46:48,340 --> 09:46:49,900
Let's import them too much.
15132
09:46:51,580 --> 09:46:56,580
Import and this one will be edit post.
15133
09:46:56,700 --> 09:47:00,260
That will be coming up from pages
15134
09:47:00,260 --> 09:47:03,060
and inside the pages we have edit post.
15135
09:47:03,060 --> 09:47:05,260
We do have one more which is just the post.
15136
09:47:05,260 --> 09:47:06,420
Let me check that.
15137
09:47:07,300 --> 09:47:08,340
We have just the post.
15138
09:47:08,340 --> 09:47:10,220
Let's also import that.
15139
09:47:10,220 --> 09:47:11,380
We have post.
15140
09:47:12,300 --> 09:47:13,700
Come on.
15141
09:47:13,700 --> 09:47:16,740
Post and that will be importing from pages
15142
09:47:16,740 --> 09:47:21,740
and we do have post.jsx.
15143
09:47:21,780 --> 09:47:24,260
Both of them requires authentication.
15144
09:47:24,260 --> 09:47:26,220
So let's go ahead and work on with this.
15145
09:47:27,580 --> 09:47:30,140
Copy and paste it.
15146
09:47:30,140 --> 09:47:31,900
Put up a comma.
15147
09:47:31,900 --> 09:47:33,940
The path is going to be edit post,
15148
09:47:33,940 --> 09:47:36,380
but you cannot just go ahead and edit post just like this.
15149
09:47:36,380 --> 09:47:37,740
You need a slug value.
15150
09:47:37,740 --> 09:47:39,780
So slash colon and slug.
15151
09:47:40,780 --> 09:47:43,420
This will give us which post you want to go.
15152
09:47:43,420 --> 09:47:44,860
And this requires authentication.
15153
09:47:44,860 --> 09:47:47,620
Yes, this requires and this will be edit post.
15154
09:47:49,180 --> 09:47:50,020
All right.
15155
09:47:50,900 --> 09:47:51,740
What else?
15156
09:47:51,740 --> 09:47:54,420
We just need to work with one singular post as well.
15157
09:47:55,420 --> 09:47:59,260
This one also requires a simple post.
15158
09:47:59,260 --> 09:48:01,420
So we'll just remove the edit part from here.
15159
09:48:01,420 --> 09:48:04,340
We'll just say this is a post and you'll provide me a slug.
15160
09:48:04,340 --> 09:48:06,620
We're saying that you also require authentication.
15161
09:48:06,620 --> 09:48:07,700
It's just personal approach.
15162
09:48:07,700 --> 09:48:09,620
I don't want anybody to see my,
15163
09:48:09,620 --> 09:48:11,420
I'm kind of a medium, kind of a fan
15164
09:48:11,420 --> 09:48:12,260
where if you're not logged in,
15165
09:48:12,260 --> 09:48:13,620
you cannot read much of them.
15166
09:48:13,620 --> 09:48:15,140
Anyways, it's up to you.
15167
09:48:15,140 --> 09:48:16,260
And I'll just simply say,
15168
09:48:16,260 --> 09:48:18,540
hey, this one is going to be post.
15169
09:48:18,540 --> 09:48:19,380
That's it.
15170
09:48:19,380 --> 09:48:21,660
So at least our routing and pages are done.
15171
09:48:21,660 --> 09:48:22,820
You have understood the concept.
15172
09:48:23,340 --> 09:48:25,500
Of course, we might need to debug a little bit,
15173
09:48:25,500 --> 09:48:28,300
but the concepts are now perfectly fine with you
15174
09:48:28,300 --> 09:48:31,260
that how the auth layout and all these things works.
15175
09:48:31,260 --> 09:48:33,180
We now know how to protect our pages
15176
09:48:33,180 --> 09:48:34,580
with the help of this auth layout.
15177
09:48:34,580 --> 09:48:36,900
This is doing all the magic, making the queries.
15178
09:48:36,900 --> 09:48:38,980
Nothing is happening automatically or magically,
15179
09:48:38,980 --> 09:48:41,180
but pretty good start and pretty good stuff
15180
09:48:41,180 --> 09:48:42,100
that we have done.
15181
09:48:42,100 --> 09:48:43,820
So in the pages, all the pages are done,
15182
09:48:43,820 --> 09:48:45,460
but our components are not ready
15183
09:48:45,460 --> 09:48:48,820
that in what pages we'll be rendering, login, sign up.
15184
09:48:48,820 --> 09:48:49,660
We'll do that.
15185
09:48:49,660 --> 09:48:50,740
Nothing much deal.
15186
09:48:50,740 --> 09:48:53,700
Again, I'll be providing you all the details of that
15187
09:48:53,700 --> 09:48:56,660
and we'll not be writing any of the CSS for that.
15188
09:48:56,660 --> 09:48:58,140
I'll provide you the CSS directly.
15189
09:48:58,140 --> 09:49:00,700
You can just copy and paste them from my GitHub as well.
15190
09:49:00,700 --> 09:49:01,980
This is not a tailwind class.
15191
09:49:01,980 --> 09:49:03,860
We'll focus more on the React part.
15192
09:49:03,860 --> 09:49:04,740
That's it for this video
15193
09:49:04,740 --> 09:49:06,540
and let's catch up in the next one.
15194
09:49:09,060 --> 09:49:09,980
Hey there, everyone.
15195
09:49:09,980 --> 09:49:11,860
It is here back again with another video.
15196
09:49:11,860 --> 09:49:12,700
And in this video,
15197
09:49:12,700 --> 09:49:14,660
I just want to do the testing of what we did
15198
09:49:14,660 --> 09:49:15,700
in the last video.
15199
09:49:15,700 --> 09:49:16,740
It was a pretty big video.
15200
09:49:16,740 --> 09:49:20,420
So I thought, let's sip some water and come back here.
15201
09:49:20,420 --> 09:49:22,460
I don't want to do the testing behind the scene.
15202
09:49:22,460 --> 09:49:24,660
I want to do all the testing that if it is working,
15203
09:49:24,660 --> 09:49:26,220
if it is not working,
15204
09:49:26,220 --> 09:49:28,340
we'll probably pause the video, we'll debug together.
15205
09:49:28,340 --> 09:49:31,340
However it goes, we just want to do it all together.
15206
09:49:31,340 --> 09:49:34,700
So let me just share the screen and see this.
15207
09:49:34,700 --> 09:49:35,940
Okay, so now the goal is,
15208
09:49:35,940 --> 09:49:38,540
if I just go ahead and I simply run this application,
15209
09:49:38,540 --> 09:49:41,220
so I've just run the command, that's very basic.
15210
09:49:41,220 --> 09:49:43,900
So it's npm run dev and I go onto the page.
15211
09:49:43,900 --> 09:49:46,020
This is the page what I see.
15212
09:49:46,020 --> 09:49:48,580
Good enough, but in order to do the proper testing,
15213
09:49:48,580 --> 09:49:49,860
if you've watched the previous video
15214
09:49:49,860 --> 09:49:52,100
where we said the router and all these stuff,
15215
09:49:52,100 --> 09:49:54,980
you know that first we need to go into app.jsx.
15216
09:49:54,980 --> 09:49:58,860
And the step one is to just remove all this gibberish.
15217
09:49:58,860 --> 09:50:00,660
Not a big fan of this.
15218
09:50:00,660 --> 09:50:03,420
We'll just go ahead and remove this.
15219
09:50:03,420 --> 09:50:05,060
There's a small error.
15220
09:50:05,060 --> 09:50:07,140
We'll just go say dev.
15221
09:50:07,140 --> 09:50:08,900
Oh, just like this.
15222
09:50:08,900 --> 09:50:11,380
And there should be a paragraph here
15223
09:50:11,380 --> 09:50:12,780
or let's just go ahead and call this one
15224
09:50:12,780 --> 09:50:14,060
as inside the main.
15225
09:50:14,060 --> 09:50:15,620
We need an outlet into this one.
15226
09:50:15,620 --> 09:50:17,780
So otherwise, if we don't have an outlet
15227
09:50:17,780 --> 09:50:19,620
from React router DOM,
15228
09:50:19,620 --> 09:50:21,220
rest of the components will not be able
15229
09:50:21,220 --> 09:50:22,500
to render inside this.
15230
09:50:22,500 --> 09:50:23,700
So we need the outlets.
15231
09:50:23,700 --> 09:50:25,980
So make sure it's from the React router DOM.
15232
09:50:25,980 --> 09:50:29,460
And now technically we should be able to see the home here.
15233
09:50:29,460 --> 09:50:30,460
That's good.
15234
09:50:30,460 --> 09:50:33,140
And if I go ahead and see the login,
15235
09:50:33,140 --> 09:50:34,380
we see the login.
15236
09:50:34,380 --> 09:50:38,100
If I go ahead and see all posts,
15237
09:50:38,100 --> 09:50:39,700
it still goes for the login.
15238
09:50:39,700 --> 09:50:41,980
One more thing which I noticed is
15239
09:50:41,980 --> 09:50:44,660
there's a small inconsistency here.
15240
09:50:44,660 --> 09:50:47,780
Inside the auth layout, we actually called it as protected,
15241
09:50:47,780 --> 09:50:49,260
but here in the main.jsx,
15242
09:50:49,260 --> 09:50:50,620
we are calling it as auth layout.
15243
09:50:50,620 --> 09:50:51,700
Not a good idea.
15244
09:50:51,700 --> 09:50:54,700
I'll just go ahead and say this one should be protected.
15245
09:50:54,700 --> 09:50:55,660
That's a better one.
15246
09:50:55,660 --> 09:50:57,940
I'm pretty sure you might have already noticed it,
15247
09:50:57,940 --> 09:50:59,420
but I just noticed it.
15248
09:50:59,420 --> 09:51:01,060
Not a good idea.
15249
09:51:01,060 --> 09:51:02,260
Okay, auth layout.
15250
09:51:02,260 --> 09:51:06,780
Let's hit, let's select all the instances of auth layout.
15251
09:51:06,780 --> 09:51:08,660
By the way, these are just VS code shortcuts,
15252
09:51:08,660 --> 09:51:10,140
which I love.
15253
09:51:10,140 --> 09:51:11,780
And one more.
15254
09:51:11,780 --> 09:51:13,060
Okay, multi cursor.
15255
09:51:13,060 --> 09:51:16,020
Remove this, have the protected one.
15256
09:51:16,020 --> 09:51:17,660
It's not going to bother you anything,
15257
09:51:17,660 --> 09:51:19,220
but I think that's good one.
15258
09:51:19,940 --> 09:51:22,460
So now I think the testing is all good.
15259
09:51:22,460 --> 09:51:25,220
We are logging and rendering a login.
15260
09:51:25,220 --> 09:51:26,820
Too much white, I know.
15261
09:51:26,820 --> 09:51:27,780
Too much light mode.
15262
09:51:27,780 --> 09:51:29,820
I don't worry, I'll get rid of this one.
15263
09:51:29,820 --> 09:51:31,740
Sign up is good, but if I go ahead and see,
15264
09:51:31,740 --> 09:51:34,860
let's just say edit posts.
15265
09:51:34,860 --> 09:51:36,660
Oh, edit posts doesn't exist.
15266
09:51:36,660 --> 09:51:38,460
Edit posts exist.
15267
09:51:38,460 --> 09:51:40,820
And it says edit post.
15268
09:51:40,820 --> 09:51:43,180
Oh, we need to give some ID as well, slug.
15269
09:51:43,180 --> 09:51:45,820
Let's give it a test text.
15270
09:51:45,820 --> 09:51:46,660
It says login.
15271
09:51:46,660 --> 09:51:47,980
So we are not allowed to do so.
15272
09:51:47,980 --> 09:51:48,900
So there we go.
15273
09:51:48,940 --> 09:51:50,580
As of now, our testing goes good
15274
09:51:50,580 --> 09:51:52,260
that we have all these applications,
15275
09:51:52,260 --> 09:51:55,100
routing states, everything is working fine.
15276
09:51:55,100 --> 09:51:56,540
We have no errors.
15277
09:51:56,540 --> 09:51:58,420
Good testing in between.
15278
09:51:58,420 --> 09:51:59,580
While recording the videos,
15279
09:51:59,580 --> 09:52:00,980
it gives us rarely an occasion
15280
09:52:00,980 --> 09:52:02,100
that we can test in between.
15281
09:52:02,100 --> 09:52:05,260
But wherever I do get a chance to test along with you,
15282
09:52:05,260 --> 09:52:06,780
I try my best.
15283
09:52:06,780 --> 09:52:07,820
From the next video onwards,
15284
09:52:07,820 --> 09:52:09,100
we'll work on the components
15285
09:52:09,100 --> 09:52:11,260
so that I can show you what all the components
15286
09:52:11,260 --> 09:52:12,900
will be needing, how they'll be working.
15287
09:52:12,900 --> 09:52:14,980
Some of them are really boring, like footer.
15288
09:52:14,980 --> 09:52:16,980
There is absolutely nothing inside that.
15289
09:52:16,980 --> 09:52:19,700
There's copy paste of the tailwind classes.
15290
09:52:19,700 --> 09:52:21,540
A header could be a little bit interesting
15291
09:52:21,540 --> 09:52:23,700
because we are conditionally rendering some of the elements
15292
09:52:23,700 --> 09:52:26,420
like the logout button, the signup button and all of that.
15293
09:52:26,420 --> 09:52:27,860
So they can be a little bit interesting,
15294
09:52:27,860 --> 09:52:30,020
but footer's not really something.
15295
09:52:30,020 --> 09:52:31,820
All right, so that's it for this one.
15296
09:52:31,820 --> 09:52:34,300
I hope you have enjoyed this one.
15297
09:52:34,300 --> 09:52:36,140
Really short video, but really something
15298
09:52:36,140 --> 09:52:39,060
that helps us to understand the features of it.
15299
09:52:39,060 --> 09:52:40,100
Let's catch up in the next video
15300
09:52:40,100 --> 09:52:42,100
and work on the components part of it.
15301
09:52:44,580 --> 09:52:45,420
Hey there, everyone.
15302
09:52:45,420 --> 09:52:47,260
I'll always share back again with another video.
15303
09:52:47,260 --> 09:52:49,220
And from this video onwards,
15304
09:52:49,220 --> 09:52:50,380
we are going to have a journey
15305
09:52:50,380 --> 09:52:51,940
about building the components.
15306
09:52:51,940 --> 09:52:54,060
Now, some of these components are really great
15307
09:52:54,060 --> 09:52:56,540
because you understand a lot of logics behind it,
15308
09:52:56,540 --> 09:52:59,740
for example, how and why do we use forward reference
15309
09:52:59,740 --> 09:53:01,460
as a special hook in the React?
15310
09:53:01,460 --> 09:53:03,740
And some of them like conditional rendering,
15311
09:53:03,740 --> 09:53:06,140
but some of them are really truly boring.
15312
09:53:06,140 --> 09:53:09,260
They doesn't teach you anything from the React perspective.
15313
09:53:09,260 --> 09:53:11,780
They are just, you can say the logo component,
15314
09:53:11,780 --> 09:53:13,340
it just displays the logo.
15315
09:53:13,340 --> 09:53:15,300
That's it, it does nothing more than that.
15316
09:53:16,060 --> 09:53:17,180
The container, it's just a wrapper.
15317
09:53:17,180 --> 09:53:18,700
It just displays the element.
15318
09:53:18,700 --> 09:53:19,940
Nothing much more than that.
15319
09:53:19,940 --> 09:53:22,620
The footer component, lots of tailwind classes,
15320
09:53:22,620 --> 09:53:25,020
good for tailwind practice, nothing else,
15321
09:53:25,020 --> 09:53:26,380
nothing else at all.
15322
09:53:26,380 --> 09:53:28,900
But what we can do, we have to work with both of them.
15323
09:53:28,900 --> 09:53:31,260
So we'll start with some of the basic ones,
15324
09:53:31,260 --> 09:53:32,260
which doesn't do much.
15325
09:53:32,260 --> 09:53:33,540
And as we move forward,
15326
09:53:33,540 --> 09:53:35,780
we'll progressively work on some of the components,
15327
09:53:35,780 --> 09:53:37,580
which are really good and interesting
15328
09:53:37,580 --> 09:53:40,300
and helps you to understand the React part of it.
15329
09:53:40,300 --> 09:53:41,780
Let's go ahead and do that.
15330
09:53:41,780 --> 09:53:45,900
So we'll just go into the screen sharing first.
15331
09:53:45,900 --> 09:53:49,100
All right, once we're in the screen sharing mode,
15332
09:53:49,100 --> 09:53:53,020
then let's go ahead and go into components.
15333
09:53:53,020 --> 09:53:55,300
The first is, let's create a new folder
15334
09:53:55,300 --> 09:53:56,580
and keep it inside this.
15335
09:53:56,580 --> 09:53:59,940
So this one is going to be container.
15336
09:53:59,940 --> 09:54:01,700
And inside the container,
15337
09:54:01,700 --> 09:54:05,140
we'll have this simple container.jsx.
15338
09:54:05,140 --> 09:54:09,700
New file, container, and it should be all caps.
15339
09:54:10,700 --> 09:54:14,140
container.jsx.
15340
09:54:14,140 --> 09:54:17,700
Okay, what do we have in this container.jsx?
15341
09:54:17,700 --> 09:54:19,900
To be honest, there is absolutely nothing.
15342
09:54:19,900 --> 09:54:21,380
It's just as it is.
15343
09:54:21,380 --> 09:54:25,340
You can probably can do something like export default
15344
09:54:25,340 --> 09:54:28,940
just right here in case you wish, if you want to.
15345
09:54:28,940 --> 09:54:30,220
But that one is also fine.
15346
09:54:30,220 --> 09:54:31,500
So what do we have in this container?
15347
09:54:31,500 --> 09:54:33,500
We simply return a div,
15348
09:54:33,500 --> 09:54:35,940
which is going to render the children.
15349
09:54:36,220 --> 09:54:40,020
So let's go ahead and accept all the children.
15350
09:54:40,020 --> 09:54:43,660
And we are going to display these children just up here.
15351
09:54:44,740 --> 09:54:46,460
Why we are doing this?
15352
09:54:46,460 --> 09:54:47,300
What's the point of?
15353
09:54:47,300 --> 09:54:49,100
Because we want to add some additional classes.
15354
09:54:49,100 --> 09:54:50,420
That is the whole goal.
15355
09:54:50,420 --> 09:54:52,620
Nothing more than this.
15356
09:54:52,620 --> 09:54:55,140
We want to simply have a width of full
15357
09:54:55,140 --> 09:54:58,020
so that we can have a, we'll also have a max width.
15358
09:54:58,020 --> 09:55:00,900
So we'll just say max width of seven XL.
15359
09:55:00,900 --> 09:55:02,660
By the way, you can hover this one.
15360
09:55:02,660 --> 09:55:04,820
I didn't come up with them automatically.
15361
09:55:04,820 --> 09:55:07,260
I also worked tweaked a little bit
15362
09:55:07,260 --> 09:55:08,900
while we were designing this application.
15363
09:55:08,900 --> 09:55:12,140
So it's not some magic number that I came up with.
15364
09:55:12,140 --> 09:55:14,500
We'll just say max auto, simple,
15365
09:55:14,500 --> 09:55:17,020
and we'll just say px-4.
15366
09:55:17,020 --> 09:55:18,500
So these are the classes we came up
15367
09:55:18,500 --> 09:55:20,660
while displaying a container.
15368
09:55:20,660 --> 09:55:24,420
That's it, nothing more, nothing less onto this one.
15369
09:55:24,420 --> 09:55:26,460
Okay, we'll keep this one in a folder
15370
09:55:26,460 --> 09:55:28,940
so that it's a little bit separated out.
15371
09:55:28,940 --> 09:55:30,820
Now let's go ahead and move into,
15372
09:55:30,820 --> 09:55:33,100
let's close this one first.
15373
09:55:33,100 --> 09:55:36,380
And we'll go into container first source
15374
09:55:36,380 --> 09:55:39,180
and then container components.
15375
09:55:40,780 --> 09:55:43,860
Components, and let's create a couple of files first.
15376
09:55:43,860 --> 09:55:45,940
So I'll just try to create the files from here.
15377
09:55:45,940 --> 09:55:46,980
It's much more easier.
15378
09:55:46,980 --> 09:55:48,220
Otherwise, right click it.
15379
09:55:48,220 --> 09:55:50,140
Sometimes create files in the wrong place
15380
09:55:50,140 --> 09:55:51,540
where I don't want it to be.
15381
09:55:51,540 --> 09:55:55,220
So I'll just go with the logo.jsx.
15382
09:55:55,220 --> 09:55:57,500
And there we go, logo.
15383
09:55:57,500 --> 09:55:59,540
What do we have in this logo?
15384
09:55:59,540 --> 09:56:01,060
Honestly, nothing.
15385
09:56:01,060 --> 09:56:03,140
I'll just go with that of CE.
15386
09:56:03,140 --> 09:56:04,180
The logo is logo.
15387
09:56:04,180 --> 09:56:05,900
I don't even have a logo.
15388
09:56:05,900 --> 09:56:08,060
Otherwise, usually it's just the image.
15389
09:56:09,260 --> 09:56:11,580
But let's just say if we can have some logo.
15390
09:56:11,580 --> 09:56:13,500
Can we have some of the logo?
15391
09:56:13,500 --> 09:56:15,460
In the public, we have VTSVG.
15392
09:56:15,460 --> 09:56:17,580
We can probably use that.
15393
09:56:17,580 --> 09:56:18,900
Or can we have?
15394
09:56:18,900 --> 09:56:20,860
I'll just keep it as it is.
15395
09:56:20,860 --> 09:56:23,500
But we need to have some of the classes on this one.
15396
09:56:23,500 --> 09:56:25,300
Otherwise, it is going to give us
15397
09:56:26,580 --> 09:56:28,860
some of the issues with this one.
15398
09:56:28,860 --> 09:56:30,540
We'll figure out later one.
15399
09:56:30,540 --> 09:56:33,060
Right now, let's just display it inside this one.
15400
09:56:33,060 --> 09:56:36,660
And instead of a div itself, let's use an image.
15401
09:56:36,660 --> 09:56:38,260
I think that one would be good.
15402
09:56:39,740 --> 09:56:42,580
I'll just add an image in the later on videos.
15403
09:56:42,580 --> 09:56:43,540
Don't worry.
15404
09:56:43,540 --> 09:56:46,740
I'll just say I want to have an image just like this.
15405
09:56:46,740 --> 09:56:49,300
And this one is going to be an src.
15406
09:56:49,300 --> 09:56:50,340
Right now, there is nothing.
15407
09:56:50,340 --> 09:56:52,020
So I'll just keep it empty.
15408
09:56:52,020 --> 09:56:56,780
And inside this, if somebody doesn't pass me any parameter,
15409
09:56:56,780 --> 09:56:59,380
I'll make it a little bit more robust
15410
09:56:59,380 --> 09:57:02,420
so that people can pass me some values.
15411
09:57:02,420 --> 09:57:03,980
I'll just say 100%.
15412
09:57:03,980 --> 09:57:05,460
And whatever the width you give me,
15413
09:57:05,460 --> 09:57:07,700
I'll just use it as a style.
15414
09:57:07,700 --> 09:57:09,900
I'll make it a little bit fancy.
15415
09:57:09,900 --> 09:57:11,220
I'll just say give me a width.
15416
09:57:11,220 --> 09:57:13,620
If somebody gives me 80%, we'll use 80% width.
15417
09:57:13,620 --> 09:57:14,700
Otherwise, that's it.
15418
09:57:14,700 --> 09:57:16,300
Let's use at least an ELT
15419
09:57:16,300 --> 09:57:20,780
so that we know this is a place for a logo placeholder.
15420
09:57:21,740 --> 09:57:23,900
If I forget, later on, we can just work with that.
15421
09:57:23,900 --> 09:57:24,740
That's it.
15422
09:57:24,740 --> 09:57:25,900
That's your logo.
15423
09:57:25,900 --> 09:57:27,940
Next up is a little bit interesting.
15424
09:57:27,940 --> 09:57:29,740
Not too much, but a little bit interesting.
15425
09:57:29,740 --> 09:57:31,980
We'll have a simple button as well.
15426
09:57:31,980 --> 09:57:33,820
So we'll have a button.jsx.
15427
09:57:33,820 --> 09:57:34,900
Why do we have a button?
15428
09:57:35,860 --> 09:57:38,300
No such big need of having a button,
15429
09:57:38,300 --> 09:57:40,180
but I realize that if you have a button,
15430
09:57:40,180 --> 09:57:42,300
you can customize it a little bit easier.
15431
09:57:42,300 --> 09:57:44,580
In case you are familiar with something like shad cn
15432
09:57:44,580 --> 09:57:46,500
or something, that is fantastic.
15433
09:57:46,500 --> 09:57:48,700
Almost same kind of approach we are using.
15434
09:57:48,700 --> 09:57:50,260
I'll just have an rfce.
15435
09:57:50,260 --> 09:57:51,660
We have a button.
15436
09:57:51,660 --> 09:57:54,820
The button is going to take some of the parameters.
15437
09:57:54,820 --> 09:57:55,660
Oops.
15438
09:57:56,660 --> 09:57:57,500
There we go.
15439
09:57:58,500 --> 09:57:59,460
What all parameter?
15440
09:57:59,460 --> 09:58:01,660
First of all, you'll be taking children
15441
09:58:01,660 --> 09:58:03,500
so that you can render them.
15442
09:58:03,500 --> 09:58:05,580
You'll also have a type.
15443
09:58:05,580 --> 09:58:10,580
The type is going to be button and bgcolor.
15444
09:58:12,980 --> 09:58:16,660
bg, bgcolor.
15445
09:58:16,660 --> 09:58:18,140
That is going to be, by default,
15446
09:58:18,140 --> 09:58:22,300
this one is going to be background is going to be blue.
15447
09:58:22,300 --> 09:58:25,100
700, 600, whatever you wish.
15448
09:58:25,420 --> 09:58:28,700
Plain old tailwind colors, nothing more than that.
15449
09:58:28,700 --> 09:58:30,980
We'll also give it a text color
15450
09:58:30,980 --> 09:58:34,060
and the text color is going to be white.
15451
09:58:34,060 --> 09:58:36,380
So we'll say text-white
15452
09:58:36,380 --> 09:58:38,700
and we'll also have some of the class names.
15453
09:58:39,620 --> 09:58:43,180
Class name and that by default is going to be empty,
15454
09:58:43,180 --> 09:58:44,940
but you can pass me on more
15455
09:58:44,940 --> 09:58:46,940
and you can also pass me more props.
15456
09:58:46,940 --> 09:58:50,300
So we'll spread them around if we have props
15457
09:58:50,300 --> 09:58:52,420
and one comma is required.
15458
09:58:52,420 --> 09:58:54,180
Now the advantage of taking these props
15459
09:58:54,300 --> 09:58:56,580
is if you wish to have or to do something more,
15460
09:58:56,580 --> 09:58:58,380
you can just go ahead and do this.
15461
09:58:58,380 --> 09:59:00,500
I'll just remove this one
15462
09:59:00,500 --> 09:59:05,500
and I'll say I'll return you a button just like this.
15463
09:59:06,740 --> 09:59:08,860
Button is going to render the children.
15464
09:59:11,060 --> 09:59:13,860
You can also rename this actually to the button title
15465
09:59:13,860 --> 09:59:16,340
if you wish, but I think I'm happy with this one.
15466
09:59:16,340 --> 09:59:18,820
Okay, what else do you want inside this button?
15467
09:59:18,820 --> 09:59:20,220
Let's have the class name.
15468
09:59:21,060 --> 09:59:22,220
Class name.
15469
09:59:22,220 --> 09:59:23,980
We'll actually change this class name
15470
09:59:23,980 --> 09:59:27,020
into first of all backticks.
15471
09:59:27,020 --> 09:59:29,820
Actually first of all curly braces then a backtick
15472
09:59:29,820 --> 09:59:32,300
so that if we give PX dash four
15473
09:59:32,300 --> 09:59:34,260
padding on X axis to be four,
15474
09:59:34,260 --> 09:59:35,900
padding on Y axis to be two
15475
09:59:35,900 --> 09:59:37,620
so that it looks like buttonish
15476
09:59:37,620 --> 09:59:40,380
and we'll also go for rounded dash LG for rounded,
15477
09:59:40,380 --> 09:59:41,820
but if you have more properties,
15478
09:59:41,820 --> 09:59:44,500
you can just use the dollar and variables to have this one.
15479
09:59:44,500 --> 09:59:47,140
For example, the BG color, if you want to change it,
15480
09:59:47,140 --> 09:59:49,180
now you can easily change it.
15481
09:59:49,180 --> 09:59:51,060
More variables, text color,
15482
09:59:51,060 --> 09:59:52,620
maybe you want to change the text color,
15483
09:59:52,620 --> 09:59:54,180
go ahead and change it now.
15484
09:59:54,180 --> 09:59:57,140
And also some additional classes if you want to pass on,
15485
09:59:57,140 --> 09:59:59,460
I'll just respect that as well.
15486
09:59:59,460 --> 10:00:01,580
Okay, so right now we have basic default button.
15487
10:00:01,580 --> 10:00:04,660
Another advantage that we can have in this one is
15488
10:00:04,660 --> 10:00:06,380
if we have more props to be passed on,
15489
10:00:06,380 --> 10:00:08,820
maybe active, deactive, whatever you want to say,
15490
10:00:08,820 --> 10:00:11,100
I can just actually respect that as well.
15491
10:00:11,100 --> 10:00:14,940
I'll de-structure these props as well here.
15492
10:00:14,940 --> 10:00:17,860
So all these props actually goes directly here,
15493
10:00:17,860 --> 10:00:19,600
makes life a little bit easier.
15494
10:00:19,600 --> 10:00:22,000
Again, a good way of how we can have the button,
15495
10:00:22,000 --> 10:00:25,160
very generic button, but could be reused like anything.
15496
10:00:25,160 --> 10:00:26,680
Now let's close this one.
15497
10:00:26,680 --> 10:00:29,600
Let's study a little bit which is more interesting
15498
10:00:29,600 --> 10:00:31,960
and you'll repeat this quite often,
15499
10:00:31,960 --> 10:00:34,760
which is input.jsx.
15500
10:00:34,760 --> 10:00:38,120
Inputs are a little bit different and interesting
15501
10:00:38,120 --> 10:00:42,280
compared to the button because button doesn't have too much.
15502
10:00:42,280 --> 10:00:45,160
It just registered one event which is on click,
15503
10:00:45,160 --> 10:00:46,580
nothing much more than that,
15504
10:00:46,580 --> 10:00:50,140
but inputs have great number of deals with that
15505
10:00:50,140 --> 10:00:52,340
because if you think it carefully,
15506
10:00:52,340 --> 10:00:55,940
input is going to be used in some other component.
15507
10:00:55,940 --> 10:00:58,200
That component will have state.
15508
10:00:58,200 --> 10:01:00,100
So you have to somehow manage
15509
10:01:00,100 --> 10:01:02,220
that somebody's writing inside this component,
15510
10:01:02,220 --> 10:01:04,860
but that value goes outside of that
15511
10:01:04,860 --> 10:01:07,180
into upper level component.
15512
10:01:07,180 --> 10:01:08,260
I hope you are understanding this.
15513
10:01:08,260 --> 10:01:11,660
This is complex, but the solution is not that complex,
15514
10:01:11,660 --> 10:01:12,960
but imagine this.
15515
10:01:12,960 --> 10:01:15,500
The component, let's just say this is your form.
15516
10:01:15,500 --> 10:01:17,560
One level down is input.
15517
10:01:17,560 --> 10:01:21,860
Now this input needs to give information to its parent.
15518
10:01:21,860 --> 10:01:23,340
That is where the magic comes
15519
10:01:23,340 --> 10:01:26,280
and that's why I found input to be really amazing.
15520
10:01:26,280 --> 10:01:27,900
Now inputs, just like this,
15521
10:01:27,900 --> 10:01:30,260
I'll just actually rewrite this entirely.
15522
10:01:30,260 --> 10:01:32,140
So how do we actually manage this
15523
10:01:32,140 --> 10:01:34,940
that we can pass on some information to our parent itself?
15524
10:01:34,940 --> 10:01:36,500
Passing into child its prop,
15525
10:01:36,500 --> 10:01:38,300
but how can we pass on to the parent?
15526
10:01:38,300 --> 10:01:39,140
That is interesting.
15527
10:01:39,140 --> 10:01:41,520
That's why I found this one interesting while teaching.
15528
10:01:41,520 --> 10:01:43,320
So we have input just like this.
15529
10:01:43,360 --> 10:01:47,320
In order to do so, you have to use one hook from this React,
15530
10:01:47,320 --> 10:01:49,520
which is forward ref.
15531
10:01:49,520 --> 10:01:50,840
Yep, that's it.
15532
10:01:50,840 --> 10:01:52,000
That's it.
15533
10:01:52,000 --> 10:01:53,960
Forward ref, if you have this one, that's it.
15534
10:01:53,960 --> 10:01:56,680
It just pass everything to the parent component.
15535
10:01:56,680 --> 10:02:01,440
And now you can go ahead and say export default input.
15536
10:02:01,440 --> 10:02:02,280
There we go.
15537
10:02:02,280 --> 10:02:04,280
Now, how do we use this forward ref?
15538
10:02:04,280 --> 10:02:07,900
Now using forward ref again is fairly straightforward.
15539
10:02:07,900 --> 10:02:10,280
You just wrap up your component inside this.
15540
10:02:10,280 --> 10:02:11,920
And we also know the component is nothing.
15541
10:02:11,920 --> 10:02:13,160
It's just a function.
15542
10:02:14,040 --> 10:02:15,780
We call this one as input.
15543
10:02:16,720 --> 10:02:18,840
And this is how we work with it.
15544
10:02:18,840 --> 10:02:20,960
If you have anything to access,
15545
10:02:20,960 --> 10:02:22,000
you can just go ahead and say,
15546
10:02:22,000 --> 10:02:24,360
I will access a label for this one.
15547
10:02:24,360 --> 10:02:27,240
I'll also accept the type of this one.
15548
10:02:27,240 --> 10:02:30,480
Type is going to be text by default.
15549
10:02:30,480 --> 10:02:32,400
Otherwise you pass me on this one.
15550
10:02:32,400 --> 10:02:35,920
We'll have the class name, just like this.
15551
10:02:35,920 --> 10:02:37,640
And by default, it's going to be empty.
15552
10:02:37,640 --> 10:02:40,400
So that same concept of the buttons
15553
10:02:40,400 --> 10:02:41,400
will also have the props.
15554
10:02:41,400 --> 10:02:43,720
So let's just say props.
15555
10:02:43,720 --> 10:02:45,760
If you have more props, you can just give me.
15556
10:02:45,760 --> 10:02:48,520
Also, you have to give me a ref.
15557
10:02:48,520 --> 10:02:51,280
Otherwise I'll just pass on this ref.
15558
10:02:51,280 --> 10:02:55,040
Okay, let's go ahead and move it on to the next line
15559
10:02:55,040 --> 10:02:57,500
so that it's easier to read for everyone.
15560
10:02:58,440 --> 10:02:59,360
There we go.
15561
10:03:00,920 --> 10:03:03,640
Moving up, just like this.
15562
10:03:03,640 --> 10:03:04,640
You also go like this.
15563
10:03:04,640 --> 10:03:06,200
You also go like this.
15564
10:03:06,200 --> 10:03:07,040
Just arranging them.
15565
10:03:07,040 --> 10:03:09,760
Sometimes these things bother me a little bit.
15566
10:03:09,800 --> 10:03:12,640
Okay, there we go.
15567
10:03:12,640 --> 10:03:14,760
Now hopefully it makes sense.
15568
10:03:14,760 --> 10:03:17,580
Okay, much easier to read in this way.
15569
10:03:17,580 --> 10:03:19,720
Now in this one, all we have to do is return,
15570
10:03:19,720 --> 10:03:21,280
just like we return in the components.
15571
10:03:21,280 --> 10:03:24,400
So this one is going to be returning, just like this.
15572
10:03:24,400 --> 10:03:27,500
And I'll be returning a simple div, just like that.
15573
10:03:28,640 --> 10:03:30,240
This div will have a class name.
15574
10:03:31,240 --> 10:03:33,840
We are going to get width of full,
15575
10:03:33,840 --> 10:03:35,720
whatever is available to us.
15576
10:03:35,720 --> 10:03:38,880
And then we simply go ahead and use these labels
15577
10:03:39,120 --> 10:03:40,480
in all these inputs.
15578
10:03:40,480 --> 10:03:42,480
So let's start our JavaScript in here
15579
10:03:42,480 --> 10:03:46,280
and we'll say label, label, label.
15580
10:03:46,280 --> 10:03:47,120
There we go.
15581
10:03:47,120 --> 10:03:49,520
If label is there, then we are going to display the labels.
15582
10:03:49,520 --> 10:03:53,960
So use ampersand sign and another component just like this.
15583
10:03:53,960 --> 10:03:57,460
And in here, we are going to start a label component.
15584
10:03:57,460 --> 10:03:59,800
Label tag would be better name.
15585
10:03:59,800 --> 10:04:01,320
Label tag, just like this.
15586
10:04:01,320 --> 10:04:03,960
Inside the label tag, we'll display this label.
15587
10:04:03,960 --> 10:04:04,960
If the label is not there,
15588
10:04:04,960 --> 10:04:06,960
what's the point of displaying the label?
15589
10:04:06,960 --> 10:04:10,080
And we can have some of the HTML ID for it.
15590
10:04:10,080 --> 10:04:13,640
So HTML for, and we can actually give it an ID
15591
10:04:13,640 --> 10:04:16,360
and we can borrow the ID by the way from the React itself.
15592
10:04:16,360 --> 10:04:18,640
So I can just provide an ID just like this.
15593
10:04:18,640 --> 10:04:19,840
Right now I don't have an ID.
15594
10:04:19,840 --> 10:04:24,360
So I can just go ahead and create this ID by use ID,
15595
10:04:24,360 --> 10:04:26,640
which is given to me by React itself.
15596
10:04:26,640 --> 10:04:30,280
And I can actually go ahead and before I had returned,
15597
10:04:30,280 --> 10:04:34,560
I can just say const ID is going to be equal to use ID.
15598
10:04:34,560 --> 10:04:35,440
There we go.
15599
10:04:35,480 --> 10:04:38,780
Now you get from where this ID is coming up from.
15600
10:04:38,780 --> 10:04:40,200
All right, not bad.
15601
10:04:40,200 --> 10:04:41,920
We'll also add some of the class names.
15602
10:04:41,920 --> 10:04:44,560
Don't really like them, but we have to.
15603
10:04:44,560 --> 10:04:48,880
This one is going to be in line block.
15604
10:04:50,400 --> 10:04:52,680
And we'll have a margin bottom of one.
15605
10:04:52,680 --> 10:04:56,560
We'll have a margin, sorry, padding left of one.
15606
10:04:56,560 --> 10:04:59,400
Okay, if you wish to design it a little bit more,
15607
10:04:59,400 --> 10:05:00,760
you can just go ahead and do that.
15608
10:05:00,760 --> 10:05:02,600
Really doesn't bother us much.
15609
10:05:02,600 --> 10:05:06,680
So this whole thing is the label portion of our input.
15610
10:05:06,680 --> 10:05:08,320
We also need to give it an input
15611
10:05:08,320 --> 10:05:11,180
because that's what this is input, not the label.
15612
10:05:11,180 --> 10:05:13,160
Let's go ahead and provide an input.
15613
10:05:13,160 --> 10:05:15,340
It could be a self-closing one just like this.
15614
10:05:15,340 --> 10:05:18,160
Now we need to set up all the parameters here.
15615
10:05:18,160 --> 10:05:20,240
Like for example, we are taking type from the user.
15616
10:05:20,240 --> 10:05:23,640
Let's respect that and provide a type just like that.
15617
10:05:23,640 --> 10:05:25,480
We also need to provide a ref
15618
10:05:25,480 --> 10:05:28,260
because when any form will be using it,
15619
10:05:28,260 --> 10:05:32,040
they will be providing us this ref or references.
15620
10:05:32,040 --> 10:05:32,880
There we go.
15621
10:05:32,880 --> 10:05:35,480
And we'll say just add the ref here.
15622
10:05:35,480 --> 10:05:39,340
Let's restructure all the props and add them here as well.
15623
10:05:40,200 --> 10:05:41,180
There we go.
15624
10:05:41,180 --> 10:05:43,540
And also let's provide the ID.
15625
10:05:43,540 --> 10:05:46,040
So same ID can go up here.
15626
10:05:46,040 --> 10:05:49,280
Same variables, same unique ID will go here.
15627
10:05:49,280 --> 10:05:51,480
Then after that, we'll add some of the classes.
15628
10:05:51,480 --> 10:05:53,920
So the classes concept is exactly same.
15629
10:05:53,920 --> 10:05:56,000
There is nothing new that you are learning.
15630
10:05:56,000 --> 10:05:56,920
We'll have the classes,
15631
10:05:56,920 --> 10:06:00,000
but we'll wrap them in the curly braces and in the back text
15632
10:06:00,000 --> 10:06:01,600
so that if any variable comes up,
15633
10:06:01,600 --> 10:06:03,360
we can actually respect that.
15634
10:06:03,360 --> 10:06:06,040
So this is a new concept that you learn into this input,
15635
10:06:06,040 --> 10:06:08,200
which is how to pass on some data
15636
10:06:08,200 --> 10:06:10,440
from a lower component to upper component
15637
10:06:10,440 --> 10:06:13,760
or from a child component to a parent component.
15638
10:06:13,760 --> 10:06:15,140
That's interesting.
15639
10:06:15,140 --> 10:06:17,920
Similarly, like the input one, we'll create one more,
15640
10:06:17,920 --> 10:06:22,480
which is exact same replication, select form or select input.
15641
10:06:22,480 --> 10:06:27,120
Select.jsx, we'll go with this, so select.
15642
10:06:27,120 --> 10:06:28,480
Exactly same concept.
15643
10:06:28,480 --> 10:06:31,200
I think this will be a good reputation for us.
15644
10:06:31,200 --> 10:06:34,120
So let's go ahead and create a function
15645
10:06:34,120 --> 10:06:36,680
and this will be our function just like this.
15646
10:06:36,680 --> 10:06:41,520
And this function is going to be named as select.
15647
10:06:41,520 --> 10:06:42,440
There we go.
15648
10:06:42,440 --> 10:06:44,540
And we'll also grab the React.
15649
10:06:44,540 --> 10:06:47,940
Import, React, we know that we'll be using use ID.
15650
10:06:50,000 --> 10:06:54,000
Use ID and that will be coming from React.
15651
10:06:55,720 --> 10:06:57,680
Okay, the function is all done.
15652
10:06:57,680 --> 10:06:59,480
Now we just need to export that.
15653
10:06:59,480 --> 10:07:01,400
Again, it's up to you how you create a function
15654
10:07:01,400 --> 10:07:03,080
within inside that just like we created,
15655
10:07:03,080 --> 10:07:04,320
or you can do something like this.
15656
10:07:04,320 --> 10:07:09,320
Export default React.forwardref.
15657
10:07:10,960 --> 10:07:15,960
And here we can just say select this one.
15658
10:07:16,480 --> 10:07:18,800
Okay, both are same, exactly same.
15659
10:07:18,800 --> 10:07:21,120
It's just the way of writing the code here.
15660
10:07:21,120 --> 10:07:23,120
We're doing everything in line, whichever you prefer.
15661
10:07:23,120 --> 10:07:24,460
There is no right or wrong.
15662
10:07:24,460 --> 10:07:26,440
There is no optimization in this one.
15663
10:07:26,440 --> 10:07:29,260
You can actually just wrap this up and pass it on directly.
15664
10:07:29,300 --> 10:07:31,260
Here I created the function first
15665
10:07:31,260 --> 10:07:34,380
and then I'm passing it at the export time
15666
10:07:34,380 --> 10:07:35,900
in the forward ref.
15667
10:07:35,900 --> 10:07:37,500
The reason for showing you two ways
15668
10:07:37,500 --> 10:07:38,620
is so that you can understand
15669
10:07:38,620 --> 10:07:40,660
that some people write code this way.
15670
10:07:40,660 --> 10:07:42,660
Understanding the code is also really important.
15671
10:07:42,660 --> 10:07:44,700
So this is what we have as of now.
15672
10:07:44,700 --> 10:07:46,060
All right, moving further,
15673
10:07:47,100 --> 10:07:48,940
we'll take some of the parameters.
15674
10:07:48,940 --> 10:07:50,260
What all of the parameter?
15675
10:07:50,260 --> 10:07:51,800
We obviously need, this is a select.
15676
10:07:51,800 --> 10:07:54,380
So if we need options, we need the label.
15677
10:07:54,380 --> 10:07:56,380
Exactly same thing will happen to the label
15678
10:07:56,380 --> 10:08:01,180
just like we did a class name, just like this.
15679
10:08:01,180 --> 10:08:03,820
And we'll also have props.
15680
10:08:03,820 --> 10:08:05,580
We'll restructure them.
15681
10:08:05,580 --> 10:08:08,020
And once we are done with this,
15682
10:08:08,020 --> 10:08:10,020
these are all the first like objects
15683
10:08:10,020 --> 10:08:10,860
that you'll be passing me,
15684
10:08:10,860 --> 10:08:13,300
but you also have to give me the ref.
15685
10:08:13,300 --> 10:08:15,880
Okay, once we are here,
15686
10:08:15,880 --> 10:08:18,620
then obviously we need to first handle the ID part.
15687
10:08:18,620 --> 10:08:20,560
We know that, that's easy.
15688
10:08:20,560 --> 10:08:24,680
Use ID, there we go, unique ID generated return.
15689
10:08:24,680 --> 10:08:27,000
And there we go.
15690
10:08:27,000 --> 10:08:29,760
And inside this will just return a simple div.
15691
10:08:29,760 --> 10:08:32,120
Okay, first of all, class name, simple class,
15692
10:08:32,120 --> 10:08:34,560
we'll save it, get the fill width.
15693
10:08:34,560 --> 10:08:36,480
There we go, no big deal.
15694
10:08:36,480 --> 10:08:39,640
In here, the label thing will be exactly same.
15695
10:08:39,640 --> 10:08:41,480
So why don't we just copy and paste that,
15696
10:08:41,480 --> 10:08:43,960
save us some times, because it is exactly same.
15697
10:08:43,960 --> 10:08:46,080
There is nothing new we are learning here.
15698
10:08:46,080 --> 10:08:48,040
So we start our JavaScript.
15699
10:08:48,040 --> 10:08:49,800
We simply say, if you have labeled
15700
10:08:49,800 --> 10:08:51,680
and we'll display the label,
15701
10:08:51,680 --> 10:08:54,920
we'll use the HTML ID or HTML 4 for this one,
15702
10:08:54,920 --> 10:08:56,040
we'll have the label.
15703
10:08:57,080 --> 10:08:59,260
But right now here, this label is good.
15704
10:09:00,840 --> 10:09:03,320
But now the input form is different.
15705
10:09:03,320 --> 10:09:04,840
So this is okay.
15706
10:09:04,840 --> 10:09:06,560
Now let's start the select field.
15707
10:09:06,560 --> 10:09:08,500
This is where things gets a little bit interesting.
15708
10:09:08,500 --> 10:09:10,960
So this is my select field.
15709
10:09:10,960 --> 10:09:15,200
I'll keep it as, no, not self-closing.
15710
10:09:15,200 --> 10:09:19,160
Okay, now one by one, what goes inside this?
15711
10:09:19,200 --> 10:09:21,920
First of all, inside the select field,
15712
10:09:21,920 --> 10:09:25,440
first of all, let's display all the props that you have.
15713
10:09:25,440 --> 10:09:28,080
So let's get rid of this.
15714
10:09:28,080 --> 10:09:33,080
Oh, my bad, dot, dot, dot, props.
15715
10:09:33,120 --> 10:09:34,900
Okay, one part is done.
15716
10:09:34,900 --> 10:09:36,760
Scroll this a little bit.
15717
10:09:36,760 --> 10:09:39,440
Okay, we need ID, okay, easy part.
15718
10:09:39,440 --> 10:09:42,760
ID will be going like this, so ID, easy part.
15719
10:09:42,760 --> 10:09:45,380
We also have ref, easy part.
15720
10:09:45,380 --> 10:09:47,880
We also grab it like this, ref, okay.
15721
10:09:47,880 --> 10:09:49,000
This is easy part.
15722
10:09:49,000 --> 10:09:53,280
Now, the thing is, which is most important about this is
15723
10:09:53,280 --> 10:09:55,240
a lot of options will be given to you.
15724
10:09:55,240 --> 10:09:57,280
This is how the select field works.
15725
10:09:57,280 --> 10:09:59,800
In case, by the way, you forgot it
15726
10:09:59,800 --> 10:10:01,200
or maybe you want to jog the memory,
15727
10:10:01,200 --> 10:10:04,440
we can go select HTML,
15728
10:10:04,440 --> 10:10:05,840
and I'm pretty sure W3 schools
15729
10:10:05,840 --> 10:10:08,420
can help us to memorize, jog the value.
15730
10:10:08,420 --> 10:10:10,600
If I try this, this is how it looks like.
15731
10:10:10,600 --> 10:10:11,640
This is the select field.
15732
10:10:11,640 --> 10:10:13,440
A lot of options are being passed on,
15733
10:10:13,440 --> 10:10:15,040
and as soon as you select the option,
15734
10:10:15,040 --> 10:10:16,500
that option is being selected.
15735
10:10:16,500 --> 10:10:18,880
That's exactly what we want to get.
15736
10:10:19,640 --> 10:10:21,040
These options will obviously be an array.
15737
10:10:21,040 --> 10:10:22,840
Somebody who is using my component
15738
10:10:22,840 --> 10:10:24,840
should be already aware of this,
15739
10:10:24,840 --> 10:10:27,760
and now all I have to do is start a JavaScript here,
15740
10:10:27,760 --> 10:10:30,720
and I have to say, hey, options, I want to look through you.
15741
10:10:30,720 --> 10:10:33,400
So maybe you can use for each, maybe you can use map,
15742
10:10:33,400 --> 10:10:35,640
whatever is your favorite, you can use that.
15743
10:10:35,640 --> 10:10:38,920
In each one of them, you will get a callback just like this.
15744
10:10:38,920 --> 10:10:42,800
So we'll get an option, options, option, remember that,
15745
10:10:42,800 --> 10:10:45,940
and then we can simply use a callback just like this.
15746
10:10:45,980 --> 10:10:48,940
I'll start a parenthesis, not the curly braces,
15747
10:10:48,940 --> 10:10:51,340
so that I don't have to explicitly return,
15748
10:10:51,340 --> 10:10:52,960
and then inside this one,
15749
10:10:52,960 --> 10:10:57,960
I'll say I will start options here, not options, option,
15750
10:10:59,940 --> 10:11:02,140
and I'll close this one as well.
15751
10:11:02,140 --> 10:11:03,180
There we go.
15752
10:11:03,180 --> 10:11:07,140
Inside this one, I'll display each of these options, okay?
15753
10:11:07,140 --> 10:11:09,260
Half part is done because if you remember
15754
10:11:09,260 --> 10:11:11,820
the code part here, this is the option.
15755
10:11:11,820 --> 10:11:12,920
So this part is done,
15756
10:11:12,920 --> 10:11:15,420
but we need to also have the value being added.
15757
10:11:15,440 --> 10:11:17,700
Otherwise, it's just displaying here.
15758
10:11:17,700 --> 10:11:19,700
So we need to take care of the value part.
15759
10:11:19,700 --> 10:11:23,860
So we'll go up here and we'll say value,
15760
10:11:25,120 --> 10:11:29,460
and the value is going to be whatever the option is, simple.
15761
10:11:29,460 --> 10:11:31,300
We also need to do one more thing,
15762
10:11:31,300 --> 10:11:34,140
which is not required from the HTML perspective,
15763
10:11:34,140 --> 10:11:36,360
but from the React perspective, it's required.
15764
10:11:36,360 --> 10:11:39,260
Since the value is looping through, by default,
15765
10:11:39,260 --> 10:11:42,380
React Fiber has no way to knowing that
15766
10:11:42,380 --> 10:11:45,240
if it is repeating different values or the same values.
15767
10:11:45,260 --> 10:11:47,080
So we need to provide a key for it.
15768
10:11:47,080 --> 10:11:49,240
This is performance optimization,
15769
10:11:49,240 --> 10:11:51,640
and I know that each options are different,
15770
10:11:51,640 --> 10:11:53,920
so I can provide an option like this.
15771
10:11:53,920 --> 10:11:56,380
Really interesting, but this is all what we have.
15772
10:11:56,380 --> 10:11:58,760
Now, apart from this, there is just one more final thing,
15773
10:11:58,760 --> 10:12:01,400
which is just a class, so I'll just copy and paste this.
15774
10:12:01,400 --> 10:12:03,340
Doesn't really bother us much.
15775
10:12:03,340 --> 10:12:04,180
So there we go.
15776
10:12:04,180 --> 10:12:06,680
We have our select options being added.
15777
10:12:06,680 --> 10:12:07,840
This is something really interesting.
15778
10:12:07,840 --> 10:12:10,480
I hope it gave you some knowledge of forward ref.
15779
10:12:10,480 --> 10:12:12,560
If it does, do let me know in the comment section.
15780
10:12:12,560 --> 10:12:13,960
This is really important.
15781
10:12:13,960 --> 10:12:16,240
Okay, this is all done.
15782
10:12:16,240 --> 10:12:17,440
Input part is all done.
15783
10:12:17,440 --> 10:12:20,680
Now let's also do one more thing.
15784
10:12:20,680 --> 10:12:22,840
Actually, two more things we have to do in this video,
15785
10:12:22,840 --> 10:12:25,880
but this one is going to be a little bit interesting.
15786
10:12:25,880 --> 10:12:29,560
So what we're going to do is, let's open this up.
15787
10:12:29,560 --> 10:12:32,520
It's much easier to actually create components from here.
15788
10:12:32,520 --> 10:12:35,280
I want one more component, which is postcard.
15789
10:12:35,280 --> 10:12:37,640
Not really the postcard, like postcard,
15790
10:12:37,640 --> 10:12:41,180
but card for each of the posts that we have.
15791
10:12:41,180 --> 10:12:43,320
This is interesting because a lot of information
15792
10:12:43,400 --> 10:12:45,960
we need to grab and how we can actually grab this one.
15793
10:12:45,960 --> 10:12:48,840
So let's go ahead and an RFCE, react functional component.
15794
10:12:48,840 --> 10:12:50,680
We have postcard, just like this.
15795
10:12:50,680 --> 10:12:53,640
Now this postcard takes a couple of information.
15796
10:12:53,640 --> 10:12:54,640
Let me show you.
15797
10:12:54,640 --> 10:12:56,840
It takes a dollar ID.
15798
10:12:56,840 --> 10:12:59,300
If you're using MongoDB, you might have underscore ID
15799
10:12:59,300 --> 10:13:01,520
in the case of app write, it's dollar ID.
15800
10:13:01,520 --> 10:13:02,960
You also give me a title.
15801
10:13:02,960 --> 10:13:05,840
You also give me a featured image.
15802
10:13:05,840 --> 10:13:08,420
Featured image, okay.
15803
10:13:08,420 --> 10:13:10,920
Featured image, these all things are given to me.
15804
10:13:10,920 --> 10:13:14,800
Now, my responsibility is to simply have a card
15805
10:13:14,800 --> 10:13:19,720
on the homepage to take the user on the longer post
15806
10:13:19,720 --> 10:13:21,960
for that particular post, okay.
15807
10:13:21,960 --> 10:13:23,420
How we can do that?
15808
10:13:23,420 --> 10:13:25,000
First of all, let's remove this
15809
10:13:25,000 --> 10:13:27,560
because we want this entire card to be clickable.
15810
10:13:27,560 --> 10:13:31,000
So we need to grab the link just like this.
15811
10:13:31,000 --> 10:13:32,560
So we'll grab it like this.
15812
10:13:32,560 --> 10:13:35,040
But this link obviously doesn't come directly.
15813
10:13:35,040 --> 10:13:37,680
We need to have it from the React router.
15814
10:13:37,680 --> 10:13:42,680
Import, give me a link, no suggestions, no.
15815
10:13:44,240 --> 10:13:47,120
From React router DOM.
15816
10:13:47,120 --> 10:13:49,680
Okay, now anything inside this will take us to this.
15817
10:13:49,680 --> 10:13:52,440
But again, we have to provide where do you want to take me?
15818
10:13:52,440 --> 10:13:54,780
For this, we have to use the to keyword.
15819
10:13:54,780 --> 10:13:57,280
I'll use back text.
15820
10:13:57,280 --> 10:13:59,920
We'll go wherever we are, obviously on the homepage.
15821
10:13:59,920 --> 10:14:03,520
So we'll go on to slash post and slash the slug ID,
15822
10:14:03,520 --> 10:14:07,360
which in this case is dollar, just like this.
15823
10:14:07,360 --> 10:14:09,220
And we'll provide dollar ID.
15824
10:14:10,400 --> 10:14:12,040
ID, yeah, that one.
15825
10:14:12,040 --> 10:14:14,480
Okay, now we know the link part is sorted.
15826
10:14:14,480 --> 10:14:16,600
Now all we have to do is grab a simple div,
15827
10:14:16,600 --> 10:14:18,760
which is going to display the information.
15828
10:14:18,760 --> 10:14:21,080
So inside this div, obviously some of the class names
15829
10:14:21,080 --> 10:14:23,480
will go, I'll just copy paste these classes,
15830
10:14:23,480 --> 10:14:25,720
doesn't really bother us much.
15831
10:14:25,720 --> 10:14:29,280
And we'll use class names just like this.
15832
10:14:29,280 --> 10:14:30,960
So let me just copy and paste these classes.
15833
10:14:30,960 --> 10:14:35,300
You can also copy and paste them from, okay,
15834
10:14:35,300 --> 10:14:36,720
from the GitHub itself.
15835
10:14:36,720 --> 10:14:37,640
So there we go.
15836
10:14:37,640 --> 10:14:39,480
And inside this, we'll have another div.
15837
10:14:39,480 --> 10:14:41,400
Yeah, that's how we designed it.
15838
10:14:41,400 --> 10:14:44,600
Okay, this div also has an image.
15839
10:14:44,600 --> 10:14:46,080
So this is the image.
15840
10:14:46,080 --> 10:14:48,280
Now, where the interesting part lies
15841
10:14:48,280 --> 10:14:50,480
is how you're going to grab the source
15842
10:14:50,480 --> 10:14:53,000
because you have this featured image only.
15843
10:14:53,000 --> 10:14:54,880
Now let me jog a little bit of your memory.
15844
10:14:54,880 --> 10:14:57,060
If I go on to the config part,
15845
10:14:58,020 --> 10:15:03,020
notice here we created a simple method where it is.
15846
10:15:04,280 --> 10:15:05,760
Yeah, get preview.
15847
10:15:05,760 --> 10:15:07,300
So this featured image is nothing.
15848
10:15:07,300 --> 10:15:09,280
It's a file ID that you will pass me.
15849
10:15:09,280 --> 10:15:10,560
So here in the postcard,
15850
10:15:10,560 --> 10:15:12,020
you will provide me this featured image.
15851
10:15:12,020 --> 10:15:13,080
This is nothing.
15852
10:15:13,080 --> 10:15:14,500
This is the file ID.
15853
10:15:14,500 --> 10:15:17,640
So I can actually use this get file preview method
15854
10:15:17,640 --> 10:15:19,320
and pass it on file ID.
15855
10:15:19,320 --> 10:15:22,380
And what it gives you is directly a link of the image.
15856
10:15:22,380 --> 10:15:24,200
Notice here we send href.
15857
10:15:24,200 --> 10:15:25,640
So this is a link of the image.
15858
10:15:25,640 --> 10:15:27,560
So I can actually utilize these features.
15859
10:15:27,560 --> 10:15:30,360
And that's why I say these services actually helps you
15860
10:15:30,360 --> 10:15:34,700
to lot of work that is already, that can be reduced down.
15861
10:15:34,700 --> 10:15:36,580
So all I have to do is import.
15862
10:15:36,580 --> 10:15:40,460
Let's call this one as app right service.
15863
10:15:42,100 --> 10:15:43,220
App right service.
15864
10:15:43,220 --> 10:15:46,220
And that will be coming up from.slash app.
15865
10:15:47,420 --> 10:15:49,620
Nope, dot.slash.
15866
10:15:49,620 --> 10:15:50,460
Yeah, there we go.
15867
10:15:50,460 --> 10:15:54,420
App right slash config.js.
15868
10:15:54,420 --> 10:15:56,440
Probably don't need a JS, but anyways.
15869
10:15:57,980 --> 10:15:59,740
So we have the app right.
15870
10:15:59,740 --> 10:16:02,940
Okay, now in this source, I can just use it directly.
15871
10:16:02,940 --> 10:16:04,420
So I'll just remove this one.
15872
10:16:05,580 --> 10:16:09,060
Inject it like this and I'll say app right service.
15873
10:16:09,060 --> 10:16:13,020
I'll want to use a method which is get file preview.
15874
10:16:13,020 --> 10:16:14,500
And in order to run this method,
15875
10:16:14,500 --> 10:16:16,800
I have to provide you the featured image.
15876
10:16:16,800 --> 10:16:17,880
That's it.
15877
10:16:17,880 --> 10:16:19,540
Automatically it will call this
15878
10:16:19,540 --> 10:16:21,340
and do everything that I want to do.
15879
10:16:21,340 --> 10:16:22,180
All right.
15880
10:16:22,180 --> 10:16:23,980
In this one image itself,
15881
10:16:23,980 --> 10:16:26,260
I will inject the title optionally,
15882
10:16:26,260 --> 10:16:28,980
but if you wish, you can just go ahead and do that.
15883
10:16:28,980 --> 10:16:30,500
Now time to add some classes.
15884
10:16:30,540 --> 10:16:35,100
And this one is going to be rounded dash xl.
15885
10:16:35,100 --> 10:16:37,940
And we do have some of the classes onto this div as well.
15886
10:16:39,940 --> 10:16:42,620
We'll have the class name just like this.
15887
10:16:42,620 --> 10:16:44,700
And again, these classes are nothing too much
15888
10:16:44,700 --> 10:16:45,740
to be worried about.
15889
10:16:47,180 --> 10:16:49,860
Basic tailwind classes.
15890
10:16:49,860 --> 10:16:53,500
Okay, next part is how we are going to display the title.
15891
10:16:53,500 --> 10:16:54,380
Totally up to you.
15892
10:16:54,380 --> 10:16:57,700
And what I want to do is just below this div,
15893
10:16:57,700 --> 10:17:01,240
we'll have an simple H2 and inside the H12 displayed.
15894
10:17:03,140 --> 10:17:04,460
Title.
15895
10:17:04,460 --> 10:17:05,300
There we go.
15896
10:17:05,300 --> 10:17:08,220
We do have some classes for this one as well.
15897
10:17:08,220 --> 10:17:12,540
So we'll have a class name and we'll have a text dash xl.
15898
10:17:12,540 --> 10:17:14,420
We also have font bold.
15899
10:17:16,140 --> 10:17:17,220
All right.
15900
10:17:17,220 --> 10:17:19,060
So I hope you understand a lot of things
15901
10:17:19,060 --> 10:17:21,300
that are learned from the React perspective,
15902
10:17:21,300 --> 10:17:23,360
as well as good software engineering perspective
15903
10:17:23,360 --> 10:17:25,860
that creating a service, it helps us a lot.
15904
10:17:25,860 --> 10:17:27,620
We don't need to do things 1000 times.
15905
10:17:27,620 --> 10:17:29,740
It just works out of the box.
15906
10:17:29,740 --> 10:17:31,460
Okay, now one more thing.
15907
10:17:31,460 --> 10:17:34,380
Final thing that we are going to do for this video
15908
10:17:34,380 --> 10:17:39,380
is we'll create a new folder, which will be a footer.
15909
10:17:39,940 --> 10:17:40,820
Again, nothing much.
15910
10:17:40,820 --> 10:17:44,040
This is really the most boring file.
15911
10:17:44,040 --> 10:17:45,320
It has nothing.
15912
10:17:45,320 --> 10:17:49,300
It will be simple footer.jsx.
15913
10:17:50,580 --> 10:17:53,740
Okay, simple rfce, React functional component.
15914
10:17:53,740 --> 10:17:55,920
And all we're going to do is just copy paste
15915
10:17:55,920 --> 10:17:57,640
some of the HTML code.
15916
10:17:57,640 --> 10:17:59,740
Remember, this is not an HTML tutorial.
15917
10:17:59,740 --> 10:18:01,600
There is nothing much we are doing.
15918
10:18:01,600 --> 10:18:05,560
Just a lot of CSS classes, logos and whatnot.
15919
10:18:05,560 --> 10:18:07,600
Only thing we have to do is import a link
15920
10:18:08,560 --> 10:18:11,160
because all these are wrapped around the link.
15921
10:18:11,160 --> 10:18:13,800
Link and that link come from React router DOM
15922
10:18:13,800 --> 10:18:15,560
that you already know.
15923
10:18:15,560 --> 10:18:17,240
And that's it.
15924
10:18:17,240 --> 10:18:18,080
That's it.
15925
10:18:18,080 --> 10:18:19,760
Your footer is ready.
15926
10:18:19,760 --> 10:18:22,240
Now all you have to do is go into an app,
15927
10:18:22,240 --> 10:18:25,860
display the footer, see how it looks like and all of that.
15928
10:18:25,860 --> 10:18:27,900
Whatever the things we wanted to study in this one,
15929
10:18:27,900 --> 10:18:29,860
we have studied most of it.
15930
10:18:29,860 --> 10:18:32,300
Still, there are few more left,
15931
10:18:32,300 --> 10:18:33,740
but we're going to do that in the next video.
15932
10:18:33,740 --> 10:18:35,700
Already the video is half over long.
15933
10:18:35,700 --> 10:18:37,500
So let's go ahead, move on to the next video
15934
10:18:37,500 --> 10:18:40,320
and see that how we can work on the rest of the components.
15935
10:18:40,320 --> 10:18:41,220
They're pretty interesting.
15936
10:18:41,220 --> 10:18:42,820
Let's catch up in the next video.
15937
10:18:45,000 --> 10:18:45,840
Hey there, everyone.
15938
10:18:45,840 --> 10:18:47,980
Hitesh here, back again with another video
15939
10:18:47,980 --> 10:18:50,660
and welcome to continuing our journey
15940
10:18:50,660 --> 10:18:53,060
for building a full stack application,
15941
10:18:53,060 --> 10:18:54,620
which is our blog app.
15942
10:18:54,620 --> 10:18:57,160
In this video, we're going to take down two approaches
15943
10:18:57,160 --> 10:18:59,820
and in fact, two pathways at the same time.
15944
10:18:59,820 --> 10:19:02,620
The first, we're going to take the tiny MCE,
15945
10:19:02,620 --> 10:19:05,680
which is a VisiVig editor, what you see, what you get.
15946
10:19:05,680 --> 10:19:09,620
So you will get the ability to simply have
15947
10:19:09,620 --> 10:19:12,140
the bold applications, italics, underlines,
15948
10:19:12,140 --> 10:19:13,700
all that you see in a fancy editor.
15949
10:19:13,700 --> 10:19:15,360
You're going to see all of that.
15950
10:19:15,360 --> 10:19:16,200
And in the second part,
15951
10:19:16,200 --> 10:19:20,220
we're going to take a lead into understanding
15952
10:19:20,220 --> 10:19:21,860
the React forms.
15953
10:19:21,860 --> 10:19:24,360
Now, React forms can be directly handled.
15954
10:19:24,360 --> 10:19:26,020
There is nothing wrong in that,
15955
10:19:26,020 --> 10:19:29,020
but there is a industry standard way of handling the things.
15956
10:19:29,020 --> 10:19:30,840
So I'll show you what is being used
15957
10:19:30,840 --> 10:19:33,580
in majority of the production grade application.
15958
10:19:33,580 --> 10:19:35,860
At first, it might look a little bit too much,
15959
10:19:35,860 --> 10:19:38,220
but as you move into the production grade application
15960
10:19:38,220 --> 10:19:39,900
or when you will be working in the job,
15961
10:19:39,900 --> 10:19:41,280
you'll notice that most of the people
15962
10:19:41,280 --> 10:19:43,060
actually prefer these kinds of form
15963
10:19:43,060 --> 10:19:45,820
instead of just handling every state manually.
15964
10:19:45,820 --> 10:19:46,780
Again, there is nothing wrong
15965
10:19:46,780 --> 10:19:48,080
in handling the state manually,
15966
10:19:48,080 --> 10:19:49,360
but this is the industry standard.
15967
10:19:49,360 --> 10:19:52,320
So I thought that let's introduce that.
15968
10:19:52,320 --> 10:19:54,320
It might be a little bit challenging at first,
15969
10:19:54,320 --> 10:19:56,740
but this is the good way and good approach to get started.
15970
10:19:56,740 --> 10:19:58,360
So that's what we'll be doing.
15971
10:19:58,360 --> 10:19:59,960
So let me just walk you through.
15972
10:19:59,960 --> 10:20:02,120
Let me first share the screen.
15973
10:20:02,120 --> 10:20:03,760
So this is the editor that we'll be using.
15974
10:20:03,760 --> 10:20:04,960
This is TinyMCE.
15975
10:20:04,960 --> 10:20:07,600
This comes up in both free plans and the plate plans.
15976
10:20:07,600 --> 10:20:09,320
Of course, we'll be using the free ones,
15977
10:20:09,320 --> 10:20:11,000
and that's what we'll be going through.
15978
10:20:11,000 --> 10:20:12,600
And then we'll be also going through
15979
10:20:12,600 --> 10:20:14,020
with the controllers as well.
15980
10:20:14,020 --> 10:20:15,260
So we'll be going through with that.
15981
10:20:15,260 --> 10:20:16,480
So let me walk you through.
15982
10:20:16,480 --> 10:20:20,120
So this is the TinyMCE, which is an editor.
15983
10:20:20,120 --> 10:20:22,720
It, of course, can take a parameter of API key,
15984
10:20:22,720 --> 10:20:25,080
which will not be giving it to one.
15985
10:20:25,080 --> 10:20:26,440
We'll be using the free version.
15986
10:20:26,440 --> 10:20:29,260
A couple of parameters that are important to pass on
15987
10:20:29,260 --> 10:20:32,680
are like what's init value, initialized value.
15988
10:20:32,680 --> 10:20:34,760
Then we can provide what should be the init.
15989
10:20:34,760 --> 10:20:36,200
Then we have to provide the plugin
15990
10:20:36,200 --> 10:20:39,540
that what all do you want to support in your editor,
15991
10:20:39,540 --> 10:20:43,800
like auto links, list, visual blocks, code, full screen,
15992
10:20:43,800 --> 10:20:44,800
what mode you want to give,
15993
10:20:44,800 --> 10:20:47,360
and in the toolbar, what options you want to give.
15994
10:20:47,360 --> 10:20:48,760
Undo, redo, all of these.
15995
10:20:48,760 --> 10:20:49,680
So these are the things.
15996
10:20:49,680 --> 10:20:52,320
And in the content body, we'll be actually using as it is.
15997
10:20:52,320 --> 10:20:55,200
So what are all options available?
15998
10:20:55,200 --> 10:20:57,700
So this is the editor, which we'll be using
15999
10:20:57,700 --> 10:21:00,720
by installing after this TinyMCE as an editor.
16000
10:21:00,720 --> 10:21:01,720
That's the first step.
16001
10:21:01,720 --> 10:21:04,640
And after that, we'll also have a look onto this one,
16002
10:21:04,640 --> 10:21:07,360
which is a React hook form.
16003
10:21:07,360 --> 10:21:09,880
Pretty interesting library to work on with this one.
16004
10:21:09,880 --> 10:21:12,100
All the things are available in their docs,
16005
10:21:12,100 --> 10:21:13,720
that what all things you're available,
16006
10:21:13,720 --> 10:21:16,160
set errors, controllers, forms.
16007
10:21:16,160 --> 10:21:18,200
In this couple of months, we are going to use,
16008
10:21:18,200 --> 10:21:19,960
and I'll walk you through how to read the docs
16009
10:21:19,960 --> 10:21:21,600
and how to work with them.
16010
10:21:21,600 --> 10:21:23,080
This could be a little bit challenging,
16011
10:21:23,080 --> 10:21:26,100
and I think this requires a standalone crash course
16012
10:21:26,100 --> 10:21:28,660
or a video in itself, which I'll try to upload
16013
10:21:28,660 --> 10:21:29,500
on my channel.
16014
10:21:29,500 --> 10:21:30,420
If you haven't yet subscribed,
16015
10:21:30,420 --> 10:21:31,600
go ahead and hit that subscribe.
16016
10:21:31,600 --> 10:21:33,720
I'll, if I'll get enough requests,
16017
10:21:33,720 --> 10:21:35,760
I'll definitely do a proper crash course
16018
10:21:35,760 --> 10:21:37,560
on the React hook forms as well.
16019
10:21:37,560 --> 10:21:39,800
Pretty interesting subject, and I love this quite a lot.
16020
10:21:39,800 --> 10:21:41,440
So we'll be using that.
16021
10:21:41,440 --> 10:21:43,960
All right, so now let's go one by one
16022
10:21:43,960 --> 10:21:46,040
and try to install them first.
16023
10:21:46,040 --> 10:21:48,000
So installation is pretty straightforward.
16024
10:21:48,000 --> 10:21:50,480
There is nothing too much going on with that.
16025
10:21:50,480 --> 10:21:52,540
Let me just go onto VS Code.
16026
10:21:53,560 --> 10:21:56,440
First, let's go into TinyMCE.
16027
10:21:56,440 --> 10:22:01,120
So installation, React, let's go there.
16028
10:22:01,120 --> 10:22:03,800
And the installation that we need is this one,
16029
10:22:03,800 --> 10:22:07,280
which is at the rate TinyMC, TinyMC React.
16030
10:22:07,280 --> 10:22:11,200
Let's go back up here and have the installation
16031
10:22:11,200 --> 10:22:12,040
for this one.
16032
10:22:12,040 --> 10:22:17,040
So npm install, and this one is for the editor part.
16033
10:22:17,600 --> 10:22:22,360
All right, and we also need the React form as well.
16034
10:22:22,360 --> 10:22:26,280
So let's go back and let's go get started.
16035
10:22:27,280 --> 10:22:30,000
And here is a React hook form.
16036
10:22:30,000 --> 10:22:33,440
So let's copy this and install this one as well.
16037
10:22:34,880 --> 10:22:36,600
So I think these are the two
16038
10:22:36,600 --> 10:22:38,880
which we are going to need as of now.
16039
10:22:38,880 --> 10:22:39,860
I think that's enough.
16040
10:22:39,860 --> 10:22:41,900
Let's go ahead and get one by one
16041
10:22:41,900 --> 10:22:43,700
up and running with this one.
16042
10:22:43,700 --> 10:22:47,060
All right, so first, let's go ahead and create,
16043
10:22:47,060 --> 10:22:48,460
we'll create one by one.
16044
10:22:48,460 --> 10:22:50,380
Let's start with the simple nav bar,
16045
10:22:50,380 --> 10:22:51,220
which we are going to have.
16046
10:22:51,220 --> 10:22:54,220
So we'll be having a logout button and a navigation bar.
16047
10:22:54,220 --> 10:22:56,220
Then we'll work on the real time editor.
16048
10:22:56,220 --> 10:22:58,780
And then we'll be working on the post format as well,
16049
10:22:58,780 --> 10:23:01,100
which is going to utilize all the hooks and all of that.
16050
10:23:01,100 --> 10:23:03,740
So let's go ahead and start one by one.
16051
10:23:03,740 --> 10:23:07,380
So first of all, let's create a new folder
16052
10:23:07,380 --> 10:23:08,620
inside the component.
16053
10:23:08,620 --> 10:23:10,780
We are going to call this one as simply nav bar
16054
10:23:10,780 --> 10:23:12,700
or let's call this one as header.
16055
10:23:12,700 --> 10:23:17,380
So inside the header, we'll be having two files.
16056
10:23:17,380 --> 10:23:22,380
The first one is going to be header.jsx, header.jsx.
16057
10:23:22,520 --> 10:23:26,020
And another one is going to be a standalone component itself
16058
10:23:26,020 --> 10:23:27,500
which is going to be logout.
16059
10:23:30,420 --> 10:23:33,620
Logout or logout button.jsx.
16060
10:23:34,700 --> 10:23:36,940
The reason for creating a logout button itself
16061
10:23:36,940 --> 10:23:39,260
because it is going to make a query
16062
10:23:39,260 --> 10:23:40,620
and we'll be using some services
16063
10:23:40,620 --> 10:23:41,900
from Auth service and all of that.
16064
10:23:41,900 --> 10:23:44,900
That's why we are just keeping it separate one here.
16065
10:23:44,900 --> 10:23:46,420
All right, so what do we need?
16066
10:23:46,420 --> 10:23:47,340
We need dispatch.
16067
10:23:47,340 --> 10:23:51,780
So we're going to say, I need use dispatch.
16068
10:23:54,340 --> 10:23:56,820
No, no suggestions.
16069
10:23:56,820 --> 10:23:58,180
All right.
16070
10:23:58,180 --> 10:23:59,220
I use dispatch.
16071
10:23:59,220 --> 10:24:01,940
The dispatch is going to come up from React Redux.
16072
10:24:03,060 --> 10:24:03,900
There we go.
16073
10:24:03,900 --> 10:24:06,500
After that, we need the Auth service as well.
16074
10:24:07,220 --> 10:24:08,620
Auth service.
16075
10:24:10,700 --> 10:24:14,340
And that's going to come up from couple directories back
16076
10:24:14,340 --> 10:24:16,100
inside the app, right?
16077
10:24:16,100 --> 10:24:20,180
Inside this auth.js.
16078
10:24:20,180 --> 10:24:21,420
Yep, that's the one.
16079
10:24:21,420 --> 10:24:23,460
And we're going to need a couple of services
16080
10:24:23,460 --> 10:24:24,980
from store as well.
16081
10:24:24,980 --> 10:24:29,980
So we need to import log, logout.
16082
10:24:31,260 --> 10:24:33,200
And this logout will come up from,
16083
10:24:34,340 --> 10:24:36,260
we need to go one directory back
16084
10:24:36,340 --> 10:24:38,380
and inside the store.
16085
10:24:38,380 --> 10:24:42,080
And from that, we are going to need auth slice.js.
16086
10:24:43,860 --> 10:24:46,260
All right, so now we have the logout.
16087
10:24:46,260 --> 10:24:49,060
The reason why we are having this logout functionality
16088
10:24:49,060 --> 10:24:52,480
in itself alone, so that we can make a request
16089
10:24:52,480 --> 10:24:55,660
using the slice and that request can just clear
16090
10:24:55,660 --> 10:24:56,500
out everything.
16091
10:24:56,500 --> 10:24:57,460
That's what we designed it.
16092
10:24:57,460 --> 10:25:00,900
So in case you forgot that, let me jog the memory again.
16093
10:25:00,900 --> 10:25:05,020
So this is what we have imported after exporting this one.
16094
10:25:05,020 --> 10:25:06,500
So once we actually hit this one,
16095
10:25:06,500 --> 10:25:08,420
it will create the status as false
16096
10:25:08,420 --> 10:25:11,140
and we can have a simply user data as null.
16097
10:25:11,140 --> 10:25:13,220
That's what the goal is.
16098
10:25:13,220 --> 10:25:14,620
Okay.
16099
10:25:14,620 --> 10:25:16,660
First of all, let's create a dispatch.
16100
10:25:16,660 --> 10:25:18,980
Otherwise we won't be able to access it.
16101
10:25:18,980 --> 10:25:20,420
We won't be able to send a message
16102
10:25:20,420 --> 10:25:22,300
that we are using this method.
16103
10:25:22,300 --> 10:25:27,300
So const dispatch and that will be designed
16104
10:25:27,540 --> 10:25:30,380
or created using use dispatch hook.
16105
10:25:30,380 --> 10:25:31,420
There we go.
16106
10:25:31,420 --> 10:25:32,720
Now we have access to this one.
16107
10:25:32,720 --> 10:25:34,100
Let's create a logout handler.
16108
10:25:34,100 --> 10:25:36,140
Anybody who clicks on this button,
16109
10:25:36,140 --> 10:25:37,980
we will be handling it with this one.
16110
10:25:39,260 --> 10:25:42,760
Logout handler, handler.
16111
10:25:42,760 --> 10:25:46,840
And using this, a simple method, let's fire this up.
16112
10:25:46,840 --> 10:25:48,980
And we'll be saying, hey auth service,
16113
10:25:48,980 --> 10:25:52,100
give us a method which is a logout.
16114
10:25:52,100 --> 10:25:55,300
And once we are having this logout method being called,
16115
10:25:55,300 --> 10:25:57,860
which is in our service, let's use a promise
16116
10:25:57,860 --> 10:26:00,000
and we'll simply get a then.
16117
10:26:00,000 --> 10:26:01,660
If then happens, then we are going
16118
10:26:01,660 --> 10:26:04,160
to successfully cater that one.
16119
10:26:04,160 --> 10:26:07,640
And we're going to then dispatch an event
16120
10:26:07,640 --> 10:26:10,440
which is going to be a logout event.
16121
10:26:10,440 --> 10:26:11,600
There we go.
16122
10:26:11,600 --> 10:26:15,200
And since this is a method, let's run this and that's it.
16123
10:26:15,200 --> 10:26:17,520
In case you wish, you can handle the catch part as well,
16124
10:26:17,520 --> 10:26:20,200
but I don't think it's required in this case,
16125
10:26:20,200 --> 10:26:21,040
but that's it.
16126
10:26:21,040 --> 10:26:22,640
That's how we are going to logout.
16127
10:26:22,640 --> 10:26:25,360
Notice here, if I'm able to successfully handle the logout,
16128
10:26:25,360 --> 10:26:27,640
then only I'm dispatching an event of logout.
16129
10:26:27,640 --> 10:26:30,040
And that's what we have designed in our store as well
16130
10:26:30,060 --> 10:26:32,500
that as soon as this is being called up,
16131
10:26:32,500 --> 10:26:34,340
are we going to set the status as null
16132
10:26:34,340 --> 10:26:37,220
and the user data to set status as to false
16133
10:26:37,220 --> 10:26:39,020
and user data as to null.
16134
10:26:39,020 --> 10:26:40,260
Okay.
16135
10:26:40,260 --> 10:26:41,840
Time to design a button.
16136
10:26:41,840 --> 10:26:44,660
There is nothing much that we are doing is,
16137
10:26:44,660 --> 10:26:46,600
let's go ahead and return a button.
16138
10:26:48,380 --> 10:26:49,220
There we go.
16139
10:26:49,220 --> 10:26:53,420
Inside the button, we just say logout.
16140
10:26:54,340 --> 10:26:56,100
And rest of the stuff is pretty obvious.
16141
10:26:56,100 --> 10:26:58,420
Only one thing is important that is on click.
16142
10:26:59,320 --> 10:27:01,200
On click and inside this one,
16143
10:27:01,200 --> 10:27:03,880
we just simply say logout handler.
16144
10:27:03,880 --> 10:27:05,180
Please don't say it like this.
16145
10:27:05,180 --> 10:27:06,200
We don't want to execute it.
16146
10:27:06,200 --> 10:27:08,360
We just want to pass a reference.
16147
10:27:08,360 --> 10:27:10,780
And then our basic class names.
16148
10:27:10,780 --> 10:27:13,300
Again, I'll be just giving you these class names.
16149
10:27:13,300 --> 10:27:15,760
If you want to design your button your own way,
16150
10:27:15,760 --> 10:27:18,160
be my guest, please do that.
16151
10:27:18,160 --> 10:27:19,000
All right.
16152
10:27:19,000 --> 10:27:20,680
So now you understand the logic behind it,
16153
10:27:20,680 --> 10:27:23,480
that how the logout button is being designed.
16154
10:27:23,480 --> 10:27:26,800
Let's go into the header.jsx because that is the file
16155
10:27:26,820 --> 10:27:30,260
which will be having the entire navigation items.
16156
10:27:30,260 --> 10:27:33,740
Most of them are just tailwinds and loops, nothing much,
16157
10:27:33,740 --> 10:27:36,320
but there are some reactive part of it.
16158
10:27:36,320 --> 10:27:37,580
So I'll just say RFCE.
16159
10:27:37,580 --> 10:27:39,180
So we have a header.
16160
10:27:39,180 --> 10:27:41,860
We'll be requiring a couple of import statements
16161
10:27:41,860 --> 10:27:43,500
in this one as well.
16162
10:27:43,500 --> 10:27:47,720
First of all, let's import container.
16163
10:27:47,720 --> 10:27:50,300
In fact, what we can do is,
16164
10:27:50,300 --> 10:27:52,000
since we need a couple of more things
16165
10:27:52,000 --> 10:27:53,660
from this component itself,
16166
10:27:53,660 --> 10:27:55,860
we can design an index file
16167
10:27:55,880 --> 10:27:58,680
and have an import and export statement from there as well.
16168
10:27:58,680 --> 10:28:00,920
But in this case, let's go ahead
16169
10:28:00,920 --> 10:28:05,460
and do container separately.
16170
10:28:05,460 --> 10:28:10,000
And we'll be bringing them from .slash.
16171
10:28:10,000 --> 10:28:12,600
Oh, we need to go inside one directory.
16172
10:28:12,600 --> 10:28:17,200
Yeah, .slash container.
16173
10:28:19,680 --> 10:28:22,520
Oh, we need to go one directory back, my bad.
16174
10:28:22,520 --> 10:28:24,760
One directory back, container.
16175
10:28:24,780 --> 10:28:28,060
And inside that we have this container.jsx.
16176
10:28:28,060 --> 10:28:29,740
We don't need that.
16177
10:28:29,740 --> 10:28:31,700
And we also need a logo
16178
10:28:33,020 --> 10:28:35,000
and we don't have anything inside logo,
16179
10:28:35,000 --> 10:28:36,820
but still we'll get this one.
16180
10:28:36,820 --> 10:28:39,980
So this one is from one directory back
16181
10:28:39,980 --> 10:28:41,420
and we'll just say logo.
16182
10:28:41,420 --> 10:28:43,240
Okay, two of the components that are required
16183
10:28:43,240 --> 10:28:45,020
for navigation bar are here.
16184
10:28:45,020 --> 10:28:47,420
Since we'll be redirecting a lot of stuff,
16185
10:28:47,420 --> 10:28:48,380
link is required.
16186
10:28:48,380 --> 10:28:51,860
Of course, that comes from React Router DOM.
16187
10:28:52,720 --> 10:28:53,720
And what else?
16188
10:28:53,720 --> 10:28:54,760
We need a logout button.
16189
10:28:54,760 --> 10:28:56,060
That's why we designed it.
16190
10:28:57,840 --> 10:29:01,240
Logout button and that comes from a logout button
16191
10:29:01,240 --> 10:29:04,820
and we'll be forcing people to use navigate here and there.
16192
10:29:04,820 --> 10:29:07,600
So let's go ahead and do use that as well.
16193
10:29:07,600 --> 10:29:11,440
Use navigate, that comes from a React Router DOM.
16194
10:29:11,440 --> 10:29:14,120
Okay, how do we design this header?
16195
10:29:14,120 --> 10:29:15,560
That's the important part.
16196
10:29:15,560 --> 10:29:18,600
Again, this is going to be based on something.
16197
10:29:18,600 --> 10:29:20,400
First of all, we need auth status,
16198
10:29:20,420 --> 10:29:22,420
whether user is logged in or not,
16199
10:29:22,420 --> 10:29:23,380
because based on that,
16200
10:29:23,380 --> 10:29:27,180
we are going to display the sign in or the logout button.
16201
10:29:27,180 --> 10:29:31,700
So why not we create a simple const which says auth status.
16202
10:29:31,700 --> 10:29:35,780
And this status is going to come from the use selector.
16203
10:29:35,780 --> 10:29:36,980
Do we have use selectors?
16204
10:29:36,980 --> 10:29:37,980
Have we imported that?
16205
10:29:40,220 --> 10:29:41,500
So we need use selector.
16206
10:29:43,500 --> 10:29:47,980
Import, use selector, there we go.
16207
10:29:48,040 --> 10:29:49,720
And once we have this,
16208
10:29:49,720 --> 10:29:52,660
now I can use the use selector and can make a query.
16209
10:29:53,800 --> 10:29:55,280
Give me the state.
16210
10:29:55,280 --> 10:29:59,400
And I'll just ask you that state has this auth
16211
10:29:59,400 --> 10:30:01,920
and has got a status.
16212
10:30:01,920 --> 10:30:03,640
Status.
16213
10:30:03,640 --> 10:30:06,120
This will fulfill a value of true and false.
16214
10:30:06,120 --> 10:30:07,480
And also in the meanwhile,
16215
10:30:07,480 --> 10:30:10,820
let's also use the use navigate as well, nothing much.
16216
10:30:11,860 --> 10:30:16,860
Navigate, and that will be coming from use navigate hook.
16217
10:30:18,680 --> 10:30:19,840
There we go.
16218
10:30:19,840 --> 10:30:23,000
Okay, now we need to design a simple constant
16219
10:30:23,000 --> 10:30:25,100
of navigation items.
16220
10:30:25,100 --> 10:30:26,080
That is better way.
16221
10:30:26,080 --> 10:30:28,360
Once we have these navigation items as an array,
16222
10:30:28,360 --> 10:30:29,280
we can loop through them
16223
10:30:29,280 --> 10:30:32,800
and can simply generate our HTML from that.
16224
10:30:32,800 --> 10:30:35,920
Let's call this one as nav items.
16225
10:30:35,920 --> 10:30:37,600
That's going to be a basic array
16226
10:30:37,600 --> 10:30:39,640
and we will have multiple objects into them.
16227
10:30:39,640 --> 10:30:41,960
If you wish more, you can have more.
16228
10:30:41,960 --> 10:30:43,120
I'll have something like this.
16229
10:30:43,120 --> 10:30:44,820
Name is going to be home.
16230
10:30:45,740 --> 10:30:48,720
Not only that, I'll also provide a slug for that.
16231
10:30:50,080 --> 10:30:52,240
And that slug is going to be where you are.
16232
10:30:52,240 --> 10:30:53,840
So slash for that.
16233
10:30:53,840 --> 10:30:56,560
And we'll also provide an active status for that.
16234
10:30:59,120 --> 10:31:03,680
And active is going to be true in this case.
16235
10:31:03,680 --> 10:31:07,360
Okay, this active status right now looks true,
16236
10:31:07,360 --> 10:31:11,080
but it's going to be based on the auth status.
16237
10:31:11,080 --> 10:31:12,880
So what's the auth status and all of that?
16238
10:31:12,880 --> 10:31:15,740
So let me show you what do I mean by that.
16239
10:31:15,740 --> 10:31:17,060
This will be getting clear here.
16240
10:31:17,060 --> 10:31:18,460
So let's just say we have a name
16241
10:31:18,460 --> 10:31:20,380
and this time we have a login.
16242
10:31:22,580 --> 10:31:26,260
Login, the slug is going to be,
16243
10:31:26,260 --> 10:31:27,620
I can actually copy this.
16244
10:31:29,500 --> 10:31:34,240
I can copy the slug, which could be slash login.
16245
10:31:34,240 --> 10:31:36,780
Come on, there we go.
16246
10:31:36,780 --> 10:31:39,140
Now, interesting part, is it active or not?
16247
10:31:39,140 --> 10:31:44,140
That is going to be based on not auth status.
16248
10:31:44,440 --> 10:31:46,440
So what do I mean by not auth status?
16249
10:31:46,440 --> 10:31:48,640
So not auth status simply means,
16250
10:31:48,640 --> 10:31:52,240
if your login, your authentication status is true,
16251
10:31:52,240 --> 10:31:53,500
that is you're logged in,
16252
10:31:53,500 --> 10:31:55,960
so the active status will automatically become false.
16253
10:31:55,960 --> 10:31:59,780
So in that case, I don't want to display this login to you.
16254
10:31:59,780 --> 10:32:00,740
That's the whole idea.
16255
10:32:00,740 --> 10:32:03,480
That's the whole game of this situation.
16256
10:32:03,480 --> 10:32:05,840
Similarly, we'll be having a signup exactly same.
16257
10:32:05,840 --> 10:32:10,060
So let's go ahead, copy and paste, put up a comma.
16258
10:32:10,060 --> 10:32:12,640
We simply want to say this one as signup.
16259
10:32:14,860 --> 10:32:18,980
Signup, we'll copy and paste this.
16260
10:32:18,980 --> 10:32:21,180
So smaller signup, same.
16261
10:32:21,180 --> 10:32:22,740
Auth status will be not.
16262
10:32:22,740 --> 10:32:25,460
That means if your authentication is true,
16263
10:32:25,460 --> 10:32:26,700
I don't want to display this.
16264
10:32:26,700 --> 10:32:30,220
So that means active will automatically become false.
16265
10:32:30,220 --> 10:32:33,060
Similar to this, we have a couple of more pages for that.
16266
10:32:34,040 --> 10:32:38,360
Let's put up a comma and we'll have all posts.
16267
10:32:42,400 --> 10:32:46,400
The slug is going to be all dash posts.
16268
10:32:46,400 --> 10:32:47,760
A routing will take care of that,
16269
10:32:47,760 --> 10:32:50,360
but this time I want this auth status to be true.
16270
10:32:50,360 --> 10:32:53,940
If your auth status is true, that means you are logged in,
16271
10:32:53,940 --> 10:32:58,280
then only I want to show you this all post.
16272
10:32:59,260 --> 10:33:01,440
So otherwise you'll just see the login and log out.
16273
10:33:01,440 --> 10:33:02,280
So that's it.
16274
10:33:02,540 --> 10:33:04,540
Add post is similar one such thing.
16275
10:33:04,540 --> 10:33:06,220
So you are able to see all post
16276
10:33:06,220 --> 10:33:07,980
and you are able to see add post.
16277
10:33:07,980 --> 10:33:10,620
That's how we are designing our navigation bar.
16278
10:33:10,620 --> 10:33:15,560
This one is going to be simply add post.
16279
10:33:15,560 --> 10:33:18,900
This one is going to be add post, auth status is true.
16280
10:33:18,900 --> 10:33:21,260
Okay, so now I hope you understand that why
16281
10:33:21,260 --> 10:33:23,660
and how we are designing this nav items.
16282
10:33:23,660 --> 10:33:26,420
All we have to do in this one is now simply have couple
16283
10:33:26,420 --> 10:33:28,380
of design items just like there.
16284
10:33:28,380 --> 10:33:30,300
And then we can simply loop through the values.
16285
10:33:30,300 --> 10:33:31,540
The looping part is important.
16286
10:33:31,640 --> 10:33:34,160
The rest of this is fancy design, nothing more than that.
16287
10:33:34,160 --> 10:33:35,960
Let's go ahead and have a header.
16288
10:33:35,960 --> 10:33:38,880
This header will have a class name, a simple classes,
16289
10:33:38,880 --> 10:33:41,600
padding on y-axis is three.
16290
10:33:41,600 --> 10:33:44,200
Or when we designed it, we simply had a shadow.
16291
10:33:44,200 --> 10:33:46,480
A shadow will just be like that.
16292
10:33:46,480 --> 10:33:51,400
And we have a background of gray, 500 is good enough.
16293
10:33:52,560 --> 10:33:53,920
Okay, inside this header,
16294
10:33:53,920 --> 10:33:56,800
we have this container as a component.
16295
10:33:56,800 --> 10:34:00,000
So this wraps up automatically and gives you the space.
16296
10:34:00,000 --> 10:34:02,780
And then we have a couple of nav items.
16297
10:34:02,780 --> 10:34:04,700
So let's just have a nav.
16298
10:34:04,700 --> 10:34:08,460
And this nav is going to have class again,
16299
10:34:08,460 --> 10:34:11,960
couple of classes we have, we'll be getting a flex.
16300
10:34:11,960 --> 10:34:14,780
The first item inside the nav is going to be a simple div
16301
10:34:14,780 --> 10:34:17,160
which will be for logo, nothing more.
16302
10:34:17,160 --> 10:34:20,200
And for this, we will be having a class name,
16303
10:34:20,200 --> 10:34:23,460
margin on right side will be four.
16304
10:34:23,460 --> 10:34:26,380
While designing this, this is what we found it to be best.
16305
10:34:26,380 --> 10:34:28,760
Let's wrap the logo inside the link.
16306
10:34:28,760 --> 10:34:31,060
So we'll be having a link just like this.
16307
10:34:32,120 --> 10:34:33,780
Where does it go to nowhere?
16308
10:34:35,040 --> 10:34:38,120
So we'll be saying it like that slash.
16309
10:34:38,120 --> 10:34:40,200
And inside the link, let's place the logo.
16310
10:34:40,200 --> 10:34:42,000
Right now we don't have any image for the logo,
16311
10:34:42,000 --> 10:34:45,480
but whenever we'll be having, we'll be happy with that.
16312
10:34:45,480 --> 10:34:47,440
Okay, once we have this div item,
16313
10:34:47,440 --> 10:34:49,400
that means the logo is all done.
16314
10:34:49,400 --> 10:34:53,040
And then we'll be having a UL after this one,
16315
10:34:53,040 --> 10:34:54,200
so unordered lists.
16316
10:34:55,360 --> 10:34:58,420
And it will have a couple of class names.
16317
10:34:58,420 --> 10:35:03,260
And we'll be having a flex and margin left of auto,
16318
10:35:03,260 --> 10:35:06,460
so that everything is pushed onto the very right side.
16319
10:35:06,460 --> 10:35:08,660
Okay, this is where the things get interesting.
16320
10:35:08,660 --> 10:35:11,940
And now we need to start our JavaScript
16321
10:35:11,940 --> 10:35:13,540
because we want to loop through the values.
16322
10:35:13,540 --> 10:35:16,660
So looping is not that much difficult in this case.
16323
10:35:16,660 --> 10:35:19,180
I have these nav items, I can use any loop.
16324
10:35:19,180 --> 10:35:21,100
My favorite one is map.
16325
10:35:21,100 --> 10:35:22,600
And I'll go like this.
16326
10:35:22,600 --> 10:35:25,660
Then again, we need a couple of values into this one.
16327
10:35:25,660 --> 10:35:26,500
We have items.
16328
10:35:26,580 --> 10:35:29,180
So each object inside the array,
16329
10:35:29,180 --> 10:35:31,060
we are calling it as an item.
16330
10:35:31,060 --> 10:35:33,260
And based on this item, we'll be looping through.
16331
10:35:33,260 --> 10:35:36,780
Okay, let's go ahead and work on with this one.
16332
10:35:36,780 --> 10:35:40,220
So now we can directly go ahead and start this,
16333
10:35:40,220 --> 10:35:42,820
but I don't want to directly start this.
16334
10:35:42,820 --> 10:35:44,480
I want to display the element
16335
10:35:44,480 --> 10:35:47,300
only if it's property active is there.
16336
10:35:47,300 --> 10:35:48,760
So what can I do?
16337
10:35:48,760 --> 10:35:49,940
I can evaluate this.
16338
10:35:49,940 --> 10:35:54,660
If item is active, there will be two cases.
16339
10:35:54,660 --> 10:35:56,980
Item will be active or might not be active.
16340
10:35:56,980 --> 10:36:00,700
If the item is active, let's do something.
16341
10:36:00,700 --> 10:36:02,620
Otherwise we'll do something.
16342
10:36:02,620 --> 10:36:04,340
Okay, that's interesting.
16343
10:36:04,340 --> 10:36:06,420
So again, this might give you a little bit
16344
10:36:06,420 --> 10:36:08,260
of the ternary operation.
16345
10:36:08,260 --> 10:36:09,500
Yeah, that is this.
16346
10:36:09,500 --> 10:36:10,820
And in the other case,
16347
10:36:10,820 --> 10:36:12,620
we are simply going to refer it as null.
16348
10:36:12,620 --> 10:36:13,580
We don't want to do anything.
16349
10:36:13,580 --> 10:36:15,620
You can just generate an empty component as well.
16350
10:36:15,620 --> 10:36:17,100
That's fine too.
16351
10:36:17,100 --> 10:36:20,060
In this place, we'll just remove this
16352
10:36:20,060 --> 10:36:21,540
and display a component.
16353
10:36:21,540 --> 10:36:23,580
So let's place a curly braces here.
16354
10:36:23,580 --> 10:36:25,700
Now, in this curly brace,
16355
10:36:25,700 --> 10:36:27,380
how do we want to display the item?
16356
10:36:27,380 --> 10:36:29,300
Obviously we want to, in an unordered list,
16357
10:36:29,300 --> 10:36:30,580
I want to display a list item.
16358
10:36:30,580 --> 10:36:33,460
So I'll just go ahead and grab a li list item.
16359
10:36:33,460 --> 10:36:35,860
Since the list item is the one that is getting repeated,
16360
10:36:35,860 --> 10:36:38,260
it's good that we pass on the key here.
16361
10:36:38,260 --> 10:36:42,140
Item.name is the unique value that we will be having.
16362
10:36:42,140 --> 10:36:44,560
Okay, inside this list item,
16363
10:36:44,560 --> 10:36:46,180
we will be having a button
16364
10:36:46,180 --> 10:36:48,580
which can actually get these clicks.
16365
10:36:48,580 --> 10:36:51,220
So we'll be having a button just like this.
16366
10:36:51,220 --> 10:36:52,780
And in each of the button,
16367
10:36:52,820 --> 10:36:54,420
we'll be having an on click
16368
10:36:54,420 --> 10:36:57,260
which is going to just navigate the value.
16369
10:36:57,260 --> 10:37:00,460
So I'll just say on click.
16370
10:37:00,460 --> 10:37:01,580
There we go.
16371
10:37:01,580 --> 10:37:03,780
What do I want to happen when the click is there?
16372
10:37:03,780 --> 10:37:05,100
First of all, a callback
16373
10:37:05,100 --> 10:37:08,100
because I want to pass a value just like this.
16374
10:37:08,100 --> 10:37:10,280
And then I will use the navigate.
16375
10:37:11,180 --> 10:37:13,340
So navigate, where do we want to navigate?
16376
10:37:13,340 --> 10:37:15,060
We have already taken care of that
16377
10:37:15,060 --> 10:37:16,860
by having the slug value.
16378
10:37:16,860 --> 10:37:20,460
So navigate the user to a place
16379
10:37:20,460 --> 10:37:22,940
where it is item.slug.
16380
10:37:25,660 --> 10:37:26,700
Item.slug.
16381
10:37:26,700 --> 10:37:28,660
So this is the place where you will be navigating.
16382
10:37:28,660 --> 10:37:30,500
And after that is just a class name
16383
10:37:30,500 --> 10:37:32,900
to make it look decently beautiful.
16384
10:37:32,900 --> 10:37:34,460
I have these class names with me.
16385
10:37:34,460 --> 10:37:36,780
So I'll just copy and paste this one.
16386
10:37:36,780 --> 10:37:37,940
I hope now you understand.
16387
10:37:37,940 --> 10:37:39,180
It's not really difficult.
16388
10:37:39,180 --> 10:37:41,580
It looks difficult, but it is not.
16389
10:37:41,580 --> 10:37:43,260
The button doesn't have any name right now.
16390
10:37:43,260 --> 10:37:45,940
So let's go ahead and give it really simple item.name.
16391
10:37:46,940 --> 10:37:48,000
That's it.
16392
10:37:48,000 --> 10:37:49,900
So now that entire thing is there
16393
10:37:49,940 --> 10:37:51,500
and we are happy with that.
16394
10:37:51,500 --> 10:37:52,620
But you might have noticed
16395
10:37:52,620 --> 10:37:55,340
that we are not actually giving any logout.
16396
10:37:55,340 --> 10:37:56,620
We have designed the logout button,
16397
10:37:56,620 --> 10:37:58,940
but we are not giving this logout to the user.
16398
10:37:58,940 --> 10:38:02,420
We have only worked with this unordered list, which is nice.
16399
10:38:02,420 --> 10:38:05,420
Now what I want to do is after this,
16400
10:38:05,420 --> 10:38:08,260
all the allies and everything is being generated.
16401
10:38:08,260 --> 10:38:11,860
Now I want to have this one here.
16402
10:38:11,860 --> 10:38:14,380
I think this is where I start my JavaScript.
16403
10:38:14,380 --> 10:38:16,000
I want to have another ally,
16404
10:38:16,000 --> 10:38:19,240
but this ally is going to be conditionally rendered.
16405
10:38:19,280 --> 10:38:22,560
Only show the logout button to the people who are logged in.
16406
10:38:22,560 --> 10:38:25,160
So that means I can get the access of that
16407
10:38:25,160 --> 10:38:28,000
by a simple variable that I've designed auth status.
16408
10:38:28,000 --> 10:38:30,360
If the auth status is true, then only do it.
16409
10:38:30,360 --> 10:38:32,620
So I can use ternary operator.
16410
10:38:32,620 --> 10:38:34,240
If it is true, do something.
16411
10:38:34,240 --> 10:38:36,340
Otherwise go ahead and do show null.
16412
10:38:36,340 --> 10:38:37,960
That is also a good approach.
16413
10:38:37,960 --> 10:38:40,640
Or I can use another approach with the M% sign.
16414
10:38:40,640 --> 10:38:43,800
If it is true, then only we are going to render this
16415
10:38:43,800 --> 10:38:44,860
just like this.
16416
10:38:44,860 --> 10:38:46,920
And we can say, let's grab an ally.
16417
10:38:49,280 --> 10:38:50,480
Yeah, there we go.
16418
10:38:50,480 --> 10:38:55,480
And inside this ally, let's load a simple logout component,
16419
10:38:56,120 --> 10:38:57,320
just like that.
16420
10:38:57,320 --> 10:39:01,000
So I hope you can see it was a little bit lengthy,
16421
10:39:01,000 --> 10:39:02,280
but it's not really difficult.
16422
10:39:02,280 --> 10:39:05,360
That's how we simply have our headers and navigation bar.
16423
10:39:05,360 --> 10:39:08,320
Don't worry, we will be assembling that in the app.js.
16424
10:39:08,320 --> 10:39:11,720
So if you see this app.jsx, just about the outlet,
16425
10:39:11,720 --> 10:39:15,040
we will have the headers and we'll have the footers as well.
16426
10:39:15,040 --> 10:39:16,120
But right now this is good enough.
16427
10:39:16,120 --> 10:39:18,000
It has to understand that how things are going.
16428
10:39:18,040 --> 10:39:20,280
Already it's too much, but that's it.
16429
10:39:20,280 --> 10:39:22,320
So that's our part one, the phase one,
16430
10:39:22,320 --> 10:39:25,360
where we have handled the authentication part
16431
10:39:25,360 --> 10:39:26,880
and the logins and whatnot.
16432
10:39:26,880 --> 10:39:30,360
Now let's move on to something which is TinyMCE.
16433
10:39:30,360 --> 10:39:33,080
This could be a little bit difficult at first,
16434
10:39:33,080 --> 10:39:35,320
but it's not, it's really, really easy.
16435
10:39:35,320 --> 10:39:38,520
The first thing is that the TinyMCE is a component
16436
10:39:38,520 --> 10:39:42,160
which is not the usual form, it's a third party form.
16437
10:39:42,160 --> 10:39:44,120
And we're already using a third party form,
16438
10:39:44,120 --> 10:39:46,200
which is the React hook form.
16439
10:39:46,200 --> 10:39:48,120
So React hook form also knows that,
16440
10:39:48,120 --> 10:39:50,400
hey, these kinds of things are really, really common.
16441
10:39:50,400 --> 10:39:52,680
And if you look at their docs,
16442
10:39:52,680 --> 10:39:54,720
you'll see that there is a hook that they give you,
16443
10:39:54,720 --> 10:39:56,160
which is use controller.
16444
10:39:56,160 --> 10:39:58,080
If you look at this, it says,
16445
10:39:58,080 --> 10:40:00,800
React hook form embrace uncontrolled components
16446
10:40:00,800 --> 10:40:01,640
and native input.
16447
10:40:01,640 --> 10:40:03,480
However, it is hard to avoid
16448
10:40:03,480 --> 10:40:05,960
working with external controlled component.
16449
10:40:05,960 --> 10:40:08,440
And we are into this exact same situation.
16450
10:40:08,440 --> 10:40:11,000
React select is one of the selection library
16451
10:40:11,000 --> 10:40:13,920
which helps you to get selection based components.
16452
10:40:13,920 --> 10:40:15,560
And D, very, very popular.
16453
10:40:15,560 --> 10:40:17,800
So we are into one such situation.
16454
10:40:17,800 --> 10:40:19,840
In that case, we can actually wrap everything
16455
10:40:19,840 --> 10:40:21,840
using this component controller.
16456
10:40:21,840 --> 10:40:24,560
And this controller gives back the control
16457
10:40:24,560 --> 10:40:27,760
of these third party forms to the React hook form.
16458
10:40:27,760 --> 10:40:29,680
That's exactly what we want.
16459
10:40:29,680 --> 10:40:30,800
So let's go ahead and see
16460
10:40:30,800 --> 10:40:32,840
that how we are going to handle that.
16461
10:40:32,840 --> 10:40:35,000
So let's close the header.
16462
10:40:35,000 --> 10:40:37,960
And let's create a new file into this one.
16463
10:40:38,800 --> 10:40:41,240
And this time we'll call this one as realtime editor.
16464
10:40:41,240 --> 10:40:45,800
So RTE dot JSX.
16465
10:40:45,800 --> 10:40:49,760
Okay, let's go ahead and do it one by one.
16466
10:40:49,760 --> 10:40:52,880
React functional component export just like that.
16467
10:40:52,880 --> 10:40:54,720
Okay, this is basic.
16468
10:40:54,720 --> 10:40:57,240
Okay, now we need just the two things.
16469
10:40:57,240 --> 10:40:58,820
First is our controller.
16470
10:41:00,960 --> 10:41:02,520
Controller.
16471
10:41:02,520 --> 10:41:06,880
And this controller will come up from React hook form.
16472
10:41:06,880 --> 10:41:09,400
And another one is we need to import editor.
16473
10:41:10,240 --> 10:41:11,400
This is interesting.
16474
10:41:12,240 --> 10:41:13,080
Editor.
16475
10:41:14,000 --> 10:41:16,920
And that editor is going to come up from
16476
10:41:16,920 --> 10:41:18,840
the tiny library that we have installed.
16477
10:41:18,840 --> 10:41:21,840
So tiny mce react.
16478
10:41:21,840 --> 10:41:25,320
Okay, so how does this one work?
16479
10:41:25,320 --> 10:41:27,840
Component we know that we can wrap it around.
16480
10:41:27,840 --> 10:41:29,720
But what's interesting is this tiny MC.
16481
10:41:29,720 --> 10:41:31,720
So what you'll notice is
16482
10:41:31,720 --> 10:41:34,000
there is nothing too much to be worried about this.
16483
10:41:34,000 --> 10:41:35,440
All you have to do is worry about
16484
10:41:35,440 --> 10:41:37,640
where you're going to load your editor
16485
10:41:37,640 --> 10:41:39,320
and pass on these initial values.
16486
10:41:40,120 --> 10:41:40,960
That's all it takes.
16487
10:41:40,960 --> 10:41:41,760
So let me walk you through.
16488
10:41:41,760 --> 10:41:44,040
And once you see this happening up here,
16489
10:41:44,040 --> 10:41:45,560
you'll be pretty much comfortable.
16490
10:41:45,560 --> 10:41:47,720
So whenever anybody is using an RTE,
16491
10:41:47,720 --> 10:41:49,200
he'll be providing couple of values.
16492
10:41:49,200 --> 10:41:51,520
So what is the name of this one?
16493
10:41:51,520 --> 10:41:53,000
Name is good enough.
16494
10:41:53,000 --> 10:41:55,520
We'll also get some of the control from the user.
16495
10:41:55,520 --> 10:41:58,480
If it doesn't provide, we can also pass on default ones.
16496
10:41:58,480 --> 10:42:00,280
It actually uses default one.
16497
10:42:00,280 --> 10:42:02,840
And then we'll also say the label.
16498
10:42:02,840 --> 10:42:05,220
Oops, label just like that.
16499
10:42:05,220 --> 10:42:07,380
And we'll also have the default values.
16500
10:42:10,320 --> 10:42:12,360
Default value.
16501
10:42:13,280 --> 10:42:16,000
I'll show you what these default values and everything are.
16502
10:42:16,000 --> 10:42:18,600
Okay, now time to get into this one.
16503
10:42:18,600 --> 10:42:19,960
So what we're going to do is,
16504
10:42:19,960 --> 10:42:22,640
first of all, our label logic will remain as it is.
16505
10:42:22,640 --> 10:42:24,960
Exactly same, just like we have used in the past as well.
16506
10:42:24,960 --> 10:42:28,240
So let's create a div and have couple of class name.
16507
10:42:28,240 --> 10:42:29,920
And this one is going to be widthful.
16508
10:42:29,920 --> 10:42:31,120
That's it.
16509
10:42:31,120 --> 10:42:32,560
Now let's first display the label.
16510
10:42:32,560 --> 10:42:35,000
Again, start your JavaScript like this.
16511
10:42:35,000 --> 10:42:37,760
If the label is given by the user, that's great.
16512
10:42:37,800 --> 10:42:40,200
Then only we are going to display it.
16513
10:42:40,200 --> 10:42:43,640
And if the label is present,
16514
10:42:43,640 --> 10:42:45,000
then we can just simply go ahead
16515
10:42:45,000 --> 10:42:46,600
and use a label just like that.
16516
10:42:47,560 --> 10:42:50,720
Okay, this label will have couple of classes,
16517
10:42:50,720 --> 10:42:55,720
mainly inline block.
16518
10:42:56,320 --> 10:42:57,160
There we go.
16519
10:42:58,000 --> 10:43:00,000
And margin bottom of one
16520
10:43:00,000 --> 10:43:02,000
and padding on the left side of one.
16521
10:43:02,000 --> 10:43:03,200
That's it.
16522
10:43:03,200 --> 10:43:05,920
Okay, what is the value that we want to add into this one?
16523
10:43:05,920 --> 10:43:06,800
Simply label.
16524
10:43:08,760 --> 10:43:10,600
There we go.
16525
10:43:10,600 --> 10:43:11,640
So label part is done.
16526
10:43:11,640 --> 10:43:12,480
We know that part.
16527
10:43:12,480 --> 10:43:14,440
We have done that, handled this one.
16528
10:43:14,440 --> 10:43:16,440
Now comes up is the wrapper.
16529
10:43:16,440 --> 10:43:17,960
First of all, the wrapper.
16530
10:43:17,960 --> 10:43:20,000
So controller, there we go.
16531
10:43:20,000 --> 10:43:21,280
We can make it self-closing.
16532
10:43:21,280 --> 10:43:23,360
No bad, nothing bad.
16533
10:43:23,360 --> 10:43:25,080
Nothing bad into this one.
16534
10:43:25,080 --> 10:43:26,920
Since it doesn't take any values or something,
16535
10:43:26,920 --> 10:43:29,080
we can just go ahead and make it a self-closing.
16536
10:43:29,080 --> 10:43:31,320
Now this controller takes couple of values.
16537
10:43:31,320 --> 10:43:34,520
If you wish to read more about it, you can read in the docs.
16538
10:43:34,520 --> 10:43:36,000
That's why we passed it up.
16539
10:43:36,000 --> 10:43:38,040
Name, the unique name of your input.
16540
10:43:38,040 --> 10:43:39,600
That's why we said it name.
16541
10:43:39,600 --> 10:43:41,400
It also gives you the control here.
16542
10:43:41,400 --> 10:43:44,960
The control object is from the invoking user use form.
16543
10:43:44,960 --> 10:43:46,960
So again, the exact same thing I mentioned
16544
10:43:46,960 --> 10:43:49,480
that control is to make sure
16545
10:43:49,480 --> 10:43:52,680
that if parent is invoking any child form,
16546
10:43:52,680 --> 10:43:56,400
that child can again pass on some data back to it.
16547
10:43:56,400 --> 10:43:57,520
Then we have the render,
16548
10:43:57,520 --> 10:44:00,800
which is what is that you want to render into this one?
16549
10:44:01,640 --> 10:44:03,760
These values and default values.
16550
10:44:03,760 --> 10:44:05,200
You want to study more.
16551
10:44:05,280 --> 10:44:06,640
You can just go ahead and do this.
16552
10:44:06,640 --> 10:44:08,040
These are the required ones.
16553
10:44:08,040 --> 10:44:09,680
Nothing else you have to worry.
16554
10:44:09,680 --> 10:44:12,080
Okay, let's do them one by one.
16555
10:44:12,080 --> 10:44:14,480
So we'll say the name, the first prop.
16556
10:44:14,480 --> 10:44:16,640
Now I will inject a JavaScript here
16557
10:44:16,640 --> 10:44:18,400
that I'll just keep it as name.
16558
10:44:18,400 --> 10:44:22,840
If the name is there, otherwise we'll just say content.
16559
10:44:23,920 --> 10:44:25,760
Okay, if somebody passes me this name
16560
10:44:25,760 --> 10:44:28,440
to make it this form reusable, that's great.
16561
10:44:28,440 --> 10:44:30,480
Otherwise we'll call it as content.
16562
10:44:30,480 --> 10:44:33,000
So control, this is something that you have to pass on
16563
10:44:33,000 --> 10:44:35,680
when you actually design a form like that.
16564
10:44:35,680 --> 10:44:37,200
Notice here, this control is something
16565
10:44:37,200 --> 10:44:40,200
that is a control object from the invoking use form.
16566
10:44:40,200 --> 10:44:42,920
Right now there is nothing which is using the hook use form,
16567
10:44:42,920 --> 10:44:45,360
but if there is one, this is where it,
16568
10:44:45,360 --> 10:44:48,040
or this is how it takes the control of it.
16569
10:44:48,040 --> 10:44:52,080
Then next one is the render, render.
16570
10:44:52,080 --> 10:44:54,080
This render is interesting one
16571
10:44:54,080 --> 10:44:56,840
because it's actually a callback.
16572
10:44:56,840 --> 10:44:59,040
So just goes like this.
16573
10:44:59,040 --> 10:45:00,840
And I don't want to use the return keyword.
16574
10:45:00,840 --> 10:45:02,280
So I'll just go like this.
16575
10:45:02,280 --> 10:45:04,240
Inside this render itself,
16576
10:45:04,240 --> 10:45:05,760
you need to provide what fields
16577
10:45:05,760 --> 10:45:07,800
you are interested in working with.
16578
10:45:07,800 --> 10:45:11,880
So first of all, I'll say field just like that.
16579
10:45:11,880 --> 10:45:16,880
And the field that we are interested in working is on change.
16580
10:45:18,280 --> 10:45:21,320
Okay, a little bit weird as of now, but don't worry.
16581
10:45:21,320 --> 10:45:23,840
It will be all good in just a second.
16582
10:45:23,840 --> 10:45:27,040
Now this is the field that what do you want to control
16583
10:45:27,040 --> 10:45:29,400
like on change because we'll be having a state
16584
10:45:29,400 --> 10:45:30,920
in the state we'll be staring.
16585
10:45:30,920 --> 10:45:32,680
So this all will come from who,
16586
10:45:32,680 --> 10:45:35,040
somebody who will invoke the use hook form.
16587
10:45:35,040 --> 10:45:36,160
Right now it's not there.
16588
10:45:36,160 --> 10:45:38,360
So where we'll be designing the major form,
16589
10:45:38,360 --> 10:45:40,760
that's where this will come in, okay?
16590
10:45:40,760 --> 10:45:42,200
Now coming back in here,
16591
10:45:42,200 --> 10:45:44,680
here I want to render the editor.
16592
10:45:44,680 --> 10:45:45,840
That's the one.
16593
10:45:45,840 --> 10:45:47,640
And it can be self-closing as well.
16594
10:45:47,640 --> 10:45:48,540
That's it.
16595
10:45:48,540 --> 10:45:51,720
Now the editor right now, it looks like just one element,
16596
10:45:51,720 --> 10:45:53,960
but it requires more fields and more properties.
16597
10:45:53,960 --> 10:45:55,720
That's what we are going to provide to it.
16598
10:45:55,720 --> 10:45:57,840
Otherwise, this is the only code.
16599
10:45:57,840 --> 10:46:00,520
So notice here we are controlling the third party forms
16600
10:46:00,560 --> 10:46:03,200
just using the controller with a couple of fields only.
16601
10:46:03,200 --> 10:46:04,480
That's it.
16602
10:46:04,480 --> 10:46:06,760
You'll understand the importance of it as we create
16603
10:46:06,760 --> 10:46:08,960
and we'll be using this use forms and all of that.
16604
10:46:08,960 --> 10:46:11,280
So we will be very soon using them as well.
16605
10:46:11,280 --> 10:46:12,120
Rest is all good.
16606
10:46:12,120 --> 10:46:13,160
So this part is all done.
16607
10:46:13,160 --> 10:46:15,640
Now we can go back to the tiny MCE
16608
10:46:15,640 --> 10:46:17,040
and provide all these values.
16609
10:46:17,040 --> 10:46:20,760
So all these values, like you have some initial values,
16610
10:46:20,760 --> 10:46:21,960
provide that.
16611
10:46:21,960 --> 10:46:25,640
If you have init, just provide that.
16612
10:46:25,640 --> 10:46:28,040
If you have plugins, provide that.
16613
10:46:28,040 --> 10:46:29,200
Toolbar, provide that.
16614
10:46:29,200 --> 10:46:30,240
Content style, provide that.
16615
10:46:30,840 --> 10:46:32,120
Most of them is exactly copy paste
16616
10:46:32,120 --> 10:46:33,680
from the documentation itself.
16617
10:46:33,680 --> 10:46:35,360
That's exactly what I'll be doing,
16618
10:46:35,360 --> 10:46:36,880
but let me show you that.
16619
10:46:36,880 --> 10:46:39,520
First of all, the prop initial value.
16620
10:46:39,520 --> 10:46:41,040
Initial value, I don't have anything.
16621
10:46:41,040 --> 10:46:42,600
So I'll just pass on the default value.
16622
10:46:42,600 --> 10:46:45,640
Whoever is using, just pass on that as it is.
16623
10:46:45,640 --> 10:46:47,440
Then we have this init.
16624
10:46:47,440 --> 10:46:49,640
This init, we need to provide the object
16625
10:46:49,640 --> 10:46:51,040
that what do you want all to have?
16626
10:46:51,040 --> 10:46:53,840
Like for example, you have option of branding as false.
16627
10:46:53,840 --> 10:46:55,640
I don't want to show the branding,
16628
10:46:55,640 --> 10:46:58,160
but it still shows it because it's in the free version.
16629
10:46:58,160 --> 10:47:00,080
Otherwise, if you pay to them,
16630
10:47:00,080 --> 10:47:02,000
then it's just like that.
16631
10:47:02,000 --> 10:47:05,520
And then you can also provide a couple of more parameters,
16632
10:47:05,520 --> 10:47:09,720
like height and the menu bar, just like that.
16633
10:47:09,720 --> 10:47:11,080
Then comes up is the plugin.
16634
10:47:11,080 --> 10:47:12,960
So go ahead and grab as it is,
16635
10:47:12,960 --> 10:47:14,720
whatever the plugin values are.
16636
10:47:14,720 --> 10:47:16,800
Again, it's up to you how you grab them.
16637
10:47:16,800 --> 10:47:18,600
Do you want to use all of them?
16638
10:47:18,600 --> 10:47:20,680
Do you want to not use all of them?
16639
10:47:20,680 --> 10:47:22,760
Totally up to you, no force there.
16640
10:47:22,760 --> 10:47:24,520
I'm just gonna be using all as it is.
16641
10:47:24,520 --> 10:47:26,160
So in the plugin, I'm saying,
16642
10:47:26,160 --> 10:47:28,520
give me image plugin, list plugin, everything.
16643
10:47:28,520 --> 10:47:30,000
So that's how you do that.
16644
10:47:30,000 --> 10:47:31,960
Next up is simply the toolbar.
16645
10:47:31,960 --> 10:47:35,080
So just go ahead and grab everything
16646
10:47:35,080 --> 10:47:36,640
that's there in the toolbar.
16647
10:47:36,640 --> 10:47:38,120
And in fact, grab everything
16648
10:47:38,120 --> 10:47:40,720
that's inside the content body as well.
16649
10:47:40,720 --> 10:47:42,280
Totally up to you, totally up to you
16650
10:47:42,280 --> 10:47:43,920
that how you want to have it.
16651
10:47:43,920 --> 10:47:45,880
I just want to have everything of it.
16652
10:47:45,880 --> 10:47:47,560
So I'll just grab this one
16653
10:47:47,560 --> 10:47:50,480
and let's grab everything from here.
16654
10:47:50,480 --> 10:47:51,760
And we'll just paste this.
16655
10:47:52,800 --> 10:47:54,500
And this all thing,
16656
10:47:56,960 --> 10:47:58,480
can actually, oops,
16657
10:48:00,120 --> 10:48:01,560
why is it not moving?
16658
10:48:03,480 --> 10:48:05,920
Okay, so toolbar looks good.
16659
10:48:05,920 --> 10:48:08,520
Probably there's something inside the copy paste
16660
10:48:08,520 --> 10:48:09,960
that I've missed.
16661
10:48:09,960 --> 10:48:11,800
Let me try that one more time.
16662
10:48:14,400 --> 10:48:16,000
Usually it's not that bad.
16663
10:48:17,480 --> 10:48:18,880
Oh, it's bad.
16664
10:48:18,880 --> 10:48:19,720
Anyways.
16665
10:48:22,520 --> 10:48:23,760
Yep, toolbar.
16666
10:48:24,760 --> 10:48:28,560
Now the value is too big, it's just a one long string.
16667
10:48:28,560 --> 10:48:29,720
I don't know how they do it.
16668
10:48:29,720 --> 10:48:31,680
Anyways, and then after that,
16669
10:48:31,680 --> 10:48:36,400
we have ending trailing comma and we have this one.
16670
10:48:36,400 --> 10:48:38,140
Come on, there's my cursor.
16671
10:48:39,720 --> 10:48:40,720
Ooh, difficult.
16672
10:48:43,280 --> 10:48:44,840
Okay, let's move this one.
16673
10:48:45,960 --> 10:48:48,440
Okay, decently adjustable.
16674
10:48:48,440 --> 10:48:50,680
I need to change the setting of my VS code a little bit
16675
10:48:50,680 --> 10:48:52,600
to accomplish that.
16676
10:48:52,640 --> 10:48:54,920
Okay, but anyways, it's good enough.
16677
10:48:54,920 --> 10:48:57,080
And the last thing that you want to do is
16678
10:48:57,080 --> 10:48:58,900
once you are outside of this one,
16679
10:48:58,900 --> 10:49:02,320
then we'll be having an on editor change.
16680
10:49:02,320 --> 10:49:03,680
And this is where we just say
16681
10:49:03,680 --> 10:49:05,520
that I will pass on an on change
16682
10:49:06,600 --> 10:49:08,520
so that anybody can control this.
16683
10:49:09,380 --> 10:49:11,540
Okay, this is good.
16684
10:49:11,540 --> 10:49:14,140
And I think that is all what we want.
16685
10:49:14,140 --> 10:49:16,800
So a little bit difficult in the first run
16686
10:49:16,800 --> 10:49:18,700
that hey, why are we doing this, all of this,
16687
10:49:18,700 --> 10:49:20,280
why is it all of that?
16688
10:49:20,360 --> 10:49:22,640
But remember, this is a bit of an advanced part
16689
10:49:22,640 --> 10:49:23,480
of the tutorial.
16690
10:49:23,480 --> 10:49:26,320
I think it helps you understand a lot here.
16691
10:49:26,320 --> 10:49:28,720
Okay, now the preparation is done.
16692
10:49:28,720 --> 10:49:31,480
Now we'll be building one of the most important form
16693
10:49:31,480 --> 10:49:34,040
in itself, which is the post form.
16694
10:49:34,040 --> 10:49:36,200
So right click and create a new folder.
16695
10:49:36,200 --> 10:49:41,040
And we'll be calling this one as post dash form.
16696
10:49:41,040 --> 10:49:43,240
This is our most important form
16697
10:49:43,240 --> 10:49:44,800
because it uses almost everything
16698
10:49:44,800 --> 10:49:46,160
that we have built so far.
16699
10:49:47,160 --> 10:49:52,040
Post form dot JSX.
16700
10:49:52,040 --> 10:49:53,240
All right.
16701
10:49:53,240 --> 10:49:56,080
A lot of logic is also involved in this one,
16702
10:49:56,080 --> 10:49:57,040
but it's good, it's good.
16703
10:49:57,040 --> 10:49:58,760
You'll learn a lot of things in this one,
16704
10:49:58,760 --> 10:50:01,040
have patience, take a break if you wish,
16705
10:50:01,040 --> 10:50:02,380
but I'll continue here.
16706
10:50:02,380 --> 10:50:05,800
So first of all, we'll be needing react
16707
10:50:05,800 --> 10:50:07,760
and we'll also need some of the,
16708
10:50:07,760 --> 10:50:09,440
you can actually use callback
16709
10:50:10,400 --> 10:50:12,600
to make it a little bit more optimized.
16710
10:50:12,600 --> 10:50:14,880
We'll be needing now the hook
16711
10:50:14,880 --> 10:50:17,000
that we have been waiting to use,
16712
10:50:17,000 --> 10:50:18,880
which is use form.
16713
10:50:20,560 --> 10:50:21,400
No suggestion?
16714
10:50:21,400 --> 10:50:22,420
Okay, no worries.
16715
10:50:24,040 --> 10:50:26,880
And that will come up from react hook form.
16716
10:50:26,880 --> 10:50:29,320
This is the most invocation part and important part.
16717
10:50:29,320 --> 10:50:31,840
We need all the things that we have designed so far.
16718
10:50:31,840 --> 10:50:34,960
So we'll be needing a button
16719
10:50:34,960 --> 10:50:37,600
and the button that we have designed,
16720
10:50:37,600 --> 10:50:42,120
one directory back and it's actually button.
16721
10:50:42,120 --> 10:50:43,920
We need to go one directory back.
16722
10:50:43,920 --> 10:50:45,280
Oh my goodness.
16723
10:50:45,280 --> 10:50:48,960
I actually accidentally made this form
16724
10:50:48,960 --> 10:50:50,080
outside of the component.
16725
10:50:50,080 --> 10:50:51,880
It should be inside in here.
16726
10:50:51,880 --> 10:50:55,020
Let's drag and drop into the components.
16727
10:50:55,020 --> 10:50:56,360
Yes, please move that.
16728
10:50:57,440 --> 10:50:59,560
Post form, post form, just like that.
16729
10:50:59,560 --> 10:51:01,440
Hopefully now it should be good.
16730
10:51:01,440 --> 10:51:02,520
One directory back.
16731
10:51:02,520 --> 10:51:04,160
Yep, that's my button.
16732
10:51:05,360 --> 10:51:06,200
Okay, what else?
16733
10:51:06,200 --> 10:51:07,040
Input.
16734
10:51:08,080 --> 10:51:08,980
Import.
16735
10:51:11,420 --> 10:51:12,260
Input.
16736
10:51:14,480 --> 10:51:15,320
From.
16737
10:51:16,880 --> 10:51:18,440
Input.
16738
10:51:18,440 --> 10:51:20,460
And we need RTE as well.
16739
10:51:22,400 --> 10:51:24,400
And that's going to come up from RTE.
16740
10:51:28,040 --> 10:51:29,600
And select also.
16741
10:51:32,600 --> 10:51:34,280
And that's going to also come from,
16742
10:51:34,280 --> 10:51:38,160
oh my bad, one directory back and RTE.
16743
10:51:38,160 --> 10:51:40,900
This one also, oh sorry, select.
16744
10:51:40,900 --> 10:51:41,740
My bad.
16745
10:51:42,700 --> 10:51:44,540
Select.
16746
10:51:44,540 --> 10:51:48,660
This one also, one directory back, RTE.
16747
10:51:52,420 --> 10:51:54,540
One directory back, input.
16748
10:51:55,780 --> 10:51:57,260
And this one is okay.
16749
10:51:57,260 --> 10:51:59,380
Okay, so these are our components that we'll be using.
16750
10:51:59,380 --> 10:52:02,780
We also need the service because this one is a form.
16751
10:52:02,780 --> 10:52:04,380
It will be submitting some data.
16752
10:52:04,380 --> 10:52:06,740
So we need the app right service here as well.
16753
10:52:06,740 --> 10:52:09,060
Let's use app right.
16754
10:52:09,060 --> 10:52:12,860
Service.
16755
10:52:12,860 --> 10:52:14,980
And that service is going to come from
16756
10:52:14,980 --> 10:52:17,140
a lot of back directories.
16757
10:52:17,140 --> 10:52:19,060
Yeah, app right.
16758
10:52:19,060 --> 10:52:21,200
And inside that we need a config.
16759
10:52:21,200 --> 10:52:22,860
I think that will do the job.
16760
10:52:22,860 --> 10:52:25,780
We'll be navigating and selecting some of the information.
16761
10:52:25,780 --> 10:52:28,140
Like we need, we need Redux.
16762
10:52:28,140 --> 10:52:33,140
So for that we'll be saying use selector.
16763
10:52:33,780 --> 10:52:36,260
And the selector is going to come up from
16764
10:52:37,180 --> 10:52:39,780
the React Redux.
16765
10:52:39,780 --> 10:52:42,260
And we need navigation as well.
16766
10:52:42,260 --> 10:52:43,940
Import.
16767
10:52:43,940 --> 10:52:44,780
Why navigation?
16768
10:52:44,780 --> 10:52:45,900
You might be thinking.
16769
10:52:45,900 --> 10:52:47,840
Once the form is actually submitted,
16770
10:52:47,840 --> 10:52:49,840
we want to redirect user back on the homepage.
16771
10:52:49,840 --> 10:52:51,540
That is why we need that.
16772
10:52:51,540 --> 10:52:53,740
Use navigate.
16773
10:52:53,740 --> 10:52:58,740
And that's going to come up from React Router DOM.
16774
10:52:59,260 --> 10:53:00,100
All right.
16775
10:53:00,100 --> 10:53:02,740
Quite a lot of import that we have done here.
16776
10:53:02,740 --> 10:53:04,500
But I think that's good.
16777
10:53:04,540 --> 10:53:06,620
We didn't actually start it with the template.
16778
10:53:06,620 --> 10:53:07,860
We should have done that.
16779
10:53:07,860 --> 10:53:12,300
But anyways, I'll just write that export default.
16780
10:53:12,300 --> 10:53:17,300
And let's call this one as function post form.
16781
10:53:17,460 --> 10:53:19,040
And there we go.
16782
10:53:20,260 --> 10:53:21,100
Should be good.
16783
10:53:21,100 --> 10:53:23,860
Now, interesting part, as soon as we have form,
16784
10:53:23,860 --> 10:53:26,020
we might receive a post in that.
16785
10:53:26,020 --> 10:53:28,340
So we are actually reusing the form in this case.
16786
10:53:28,340 --> 10:53:31,060
So if somebody gives us the post,
16787
10:53:31,060 --> 10:53:34,160
we'll use the same form in which we want to edit
16788
10:53:34,160 --> 10:53:35,400
our post.
16789
10:53:35,400 --> 10:53:37,800
And if somebody doesn't give me this post,
16790
10:53:37,800 --> 10:53:39,720
that's okay, we'll handle it accordingly
16791
10:53:39,720 --> 10:53:42,980
and we'll use it as for creating a new post.
16792
10:53:42,980 --> 10:53:44,600
That's how we are going to use.
16793
10:53:44,600 --> 10:53:46,120
Now, most important thing, first of all,
16794
10:53:46,120 --> 10:53:48,160
we need to register that what all values
16795
10:53:48,160 --> 10:53:50,800
and everything that you are going to use in the use form.
16796
10:53:50,800 --> 10:53:52,560
We have this use form now.
16797
10:53:52,560 --> 10:53:54,640
This is a very, very powerful hook.
16798
10:53:54,640 --> 10:53:56,640
Instead of managing each of your input
16799
10:53:56,640 --> 10:53:59,880
into its own individual state, it could be nightmare.
16800
10:53:59,880 --> 10:54:02,640
Maybe you have 20 input forms
16801
10:54:02,640 --> 10:54:04,880
and you want to maintain each one in the state.
16802
10:54:04,880 --> 10:54:06,480
This could be challenging in this one.
16803
10:54:06,480 --> 10:54:09,040
So that's why we use something like this.
16804
10:54:09,040 --> 10:54:11,520
Give all of your values and then simply go ahead
16805
10:54:11,520 --> 10:54:13,640
and use a hook, which is use form.
16806
10:54:13,640 --> 10:54:16,000
This use form can have all the values.
16807
10:54:16,000 --> 10:54:18,000
So in here, we can provide all these values
16808
10:54:18,000 --> 10:54:19,300
like what are my default values.
16809
10:54:19,300 --> 10:54:21,280
So let's go ahead and have,
16810
10:54:21,280 --> 10:54:24,560
let's provide these default values as an object.
16811
10:54:24,560 --> 10:54:27,460
Let's just say we have a default value for the title.
16812
10:54:27,460 --> 10:54:28,580
Oops, not like that.
16813
10:54:29,520 --> 10:54:31,400
I'll show you where the title is.
16814
10:54:31,400 --> 10:54:33,600
So I have a default value for title.
16815
10:54:33,600 --> 10:54:34,720
If you give me post,
16816
10:54:34,720 --> 10:54:38,360
then optionally we'll extract it from the post title.
16817
10:54:38,360 --> 10:54:41,760
If it is not there, then we'll just say it's empty.
16818
10:54:41,760 --> 10:54:45,380
Similar to this, we'll just go like this.
16819
10:54:45,380 --> 10:54:46,900
Similarly, we have a slug.
16820
10:54:47,880 --> 10:54:50,800
We'll say this one and you'll be very fascinated
16821
10:54:50,800 --> 10:54:53,540
about how the slug's values are being handled in this one.
16822
10:54:53,540 --> 10:54:56,240
We'll say optionally extract the slug from it.
16823
10:54:56,240 --> 10:54:57,880
If it is not there, then just go ahead
16824
10:54:57,880 --> 10:55:00,040
and provide an empty one.
16825
10:55:00,040 --> 10:55:03,360
Similar to this, we'll be having a content.
16826
10:55:03,360 --> 10:55:06,120
If the content is there, let's optionally extract that.
16827
10:55:08,080 --> 10:55:09,060
Forgot a dot.
16828
10:55:11,860 --> 10:55:14,920
Otherwise, let's go ahead and keep it empty as well.
16829
10:55:14,920 --> 10:55:16,760
And we have also have a status as well.
16830
10:55:16,760 --> 10:55:21,420
So status, if post is provided,
16831
10:55:21,420 --> 10:55:25,480
then optionally unwrap that as a status.
16832
10:55:25,480 --> 10:55:29,160
If it is not there, then just use active
16833
10:55:29,200 --> 10:55:31,320
because that's the default state of this one.
16834
10:55:31,320 --> 10:55:33,120
Okay, so we have provided the default form,
16835
10:55:33,120 --> 10:55:36,020
but what all the input fields that you are creating
16836
10:55:36,020 --> 10:55:37,800
are going to be managed up here.
16837
10:55:37,800 --> 10:55:40,280
So first of all, we'll have a register.
16838
10:55:40,280 --> 10:55:42,100
I'll walk you through what these registers
16839
10:55:42,100 --> 10:55:43,520
and everything's are.
16840
10:55:43,520 --> 10:55:45,640
Another one is handle a submit.
16841
10:55:47,240 --> 10:55:49,840
Sub submit.
16842
10:55:49,840 --> 10:55:52,020
This will obviously be submit handler.
16843
10:55:52,020 --> 10:55:53,800
We'll be writing our code for this one.
16844
10:55:53,800 --> 10:55:55,260
There's interesting one which is watch.
16845
10:55:55,260 --> 10:55:56,100
I'll walk you through.
16846
10:55:56,100 --> 10:55:57,440
This is the most important thing
16847
10:55:57,440 --> 10:56:00,960
and very interesting thing in the use forms as well.
16848
10:56:00,960 --> 10:56:03,360
We'll be also having a set value
16849
10:56:03,360 --> 10:56:05,720
and we'll also have a control.
16850
10:56:05,720 --> 10:56:07,680
I'll walk you through all of this, don't worry.
16851
10:56:07,680 --> 10:56:10,000
And we'll have get values.
16852
10:56:10,000 --> 10:56:12,320
Okay, quite a lot of stuff that we have.
16853
10:56:12,320 --> 10:56:15,280
Now let's learn and understand them one by one
16854
10:56:15,280 --> 10:56:17,840
how these things are being managed or being done.
16855
10:56:17,840 --> 10:56:21,760
Okay, so this is use hook form.
16856
10:56:23,360 --> 10:56:25,760
Okay, this is where it ends.
16857
10:56:25,760 --> 10:56:27,280
All right, let's go one by one
16858
10:56:27,280 --> 10:56:29,280
how things are going to unwrap.
16859
10:56:29,280 --> 10:56:31,840
First, let's focus on writing the logic part
16860
10:56:31,840 --> 10:56:34,520
and then one by one we'll be focusing on building
16861
10:56:34,520 --> 10:56:37,320
the UI part of the app as well.
16862
10:56:37,320 --> 10:56:42,320
Okay, so first of all, let's grab navigate
16863
10:56:42,760 --> 10:56:45,960
from the hook, use navigate, just like that.
16864
10:56:45,960 --> 10:56:48,460
Right now it does nothing, but we have an option.
16865
10:56:48,460 --> 10:56:50,080
And then we have user data.
16866
10:56:50,080 --> 10:56:51,600
How we are going to grab the user data,
16867
10:56:51,600 --> 10:56:54,060
that's exactly why we have use selector.
16868
10:56:54,060 --> 10:56:57,060
Selector will give me a state just like that.
16869
10:56:57,060 --> 10:56:59,900
And we can just extract the data by saying
16870
10:56:59,900 --> 10:57:04,900
state dot auth dot user data.
16871
10:57:05,580 --> 10:57:09,180
All right, so my user data is now in the user data field.
16872
10:57:09,180 --> 10:57:10,820
There are a couple of things I need.
16873
10:57:10,820 --> 10:57:15,260
For example, I need to have a submit action as well.
16874
10:57:15,260 --> 10:57:17,620
So people will be submitting the form.
16875
10:57:17,620 --> 10:57:21,620
We'll create an async form for that.
16876
10:57:21,860 --> 10:57:23,700
And it will give us the data.
16877
10:57:23,700 --> 10:57:25,340
Right now we are not doing anything in that.
16878
10:57:25,340 --> 10:57:27,620
We will come back onto this one and figure it out.
16879
10:57:27,620 --> 10:57:30,920
The most important part is the slug.
16880
10:57:30,920 --> 10:57:33,340
So the way in case you saw the application
16881
10:57:33,340 --> 10:57:34,980
when I was showing you the demo,
16882
10:57:34,980 --> 10:57:36,780
the slug is a very interesting thing.
16883
10:57:36,780 --> 10:57:40,580
We actually are transforming the title into the slug.
16884
10:57:40,580 --> 10:57:42,820
So everything in the title is being converted
16885
10:57:42,820 --> 10:57:45,540
into the lowercase, we are trimming the spaces
16886
10:57:45,540 --> 10:57:48,620
and spaces are being converted into dashes,
16887
10:57:48,620 --> 10:57:49,700
rest everything are ignored.
16888
10:57:49,700 --> 10:57:53,140
So the way how I did it is, let me show you that.
16889
10:57:53,140 --> 10:57:55,780
It's actually just a method slug transform.
16890
10:57:57,560 --> 10:58:00,260
And we'll be using a use callback to optimize it.
16891
10:58:00,260 --> 10:58:03,780
Otherwise it will be keep on wasting the resource.
16892
10:58:03,780 --> 10:58:06,340
Either if in case you don't want to use the use callback,
16893
10:58:06,340 --> 10:58:08,460
that's totally fine, by the way.
16894
10:58:08,460 --> 10:58:12,100
Okay, so I did a, took a help of a little bit of the chat
16895
10:58:12,100 --> 10:58:14,120
GPT, I'll show you where I took that.
16896
10:58:14,120 --> 10:58:16,940
First of all, the way how we actually use that,
16897
10:58:16,940 --> 10:58:19,500
you cannot directly actually go ahead and monitor
16898
10:58:20,540 --> 10:58:21,940
or get any values from it.
16899
10:58:21,940 --> 10:58:25,340
So we have to actually grab a value out of it.
16900
10:58:25,340 --> 10:58:29,580
So notice here, I'll be controlling these set values
16901
10:58:29,580 --> 10:58:30,420
and get values.
16902
10:58:30,420 --> 10:58:33,380
I'll walk you through that as well in just a minute.
16903
10:58:33,380 --> 10:58:34,940
We'll be holding that part.
16904
10:58:37,540 --> 10:58:40,280
All right, so we're designing this slug transform.
16905
10:58:40,280 --> 10:58:44,120
And what's this doing is anybody can call this method.
16906
10:58:44,120 --> 10:58:45,860
The only thing is you have to pass me a value.
16907
10:58:45,860 --> 10:58:47,220
What is this value?
16908
10:58:47,220 --> 10:58:50,340
It's nothing, it's just the value in the current form
16909
10:58:50,340 --> 10:58:52,340
that you're using, just pass me on that
16910
10:58:52,340 --> 10:58:53,460
and I'll extract the value.
16911
10:58:53,460 --> 10:58:56,160
So I'll walk you through, don't worry, in a minute,
16912
10:58:56,160 --> 10:58:58,140
you'll understand everything of it.
16913
10:58:58,140 --> 10:59:00,380
I'll say if the value is there
16914
10:59:00,380 --> 10:59:02,940
and the type of value we need is a specific one,
16915
10:59:02,940 --> 10:59:07,940
if the type of value is string, then only we can proceed.
16916
10:59:08,300 --> 10:59:11,120
If that is the case, if we are having that,
16917
10:59:11,120 --> 10:59:14,020
then we can simply go ahead and return a value out of it.
16918
10:59:14,020 --> 10:59:16,300
So I'll just move it to the next line
16919
10:59:16,300 --> 10:59:19,500
and then I'll come back and put it into this one later on.
16920
10:59:19,500 --> 10:59:22,540
So what we can do is we can return a value
16921
10:59:22,540 --> 10:59:25,340
and we can provide a couple of methods on this one.
16922
10:59:25,340 --> 10:59:29,380
So this value can have a method of .trim.
16923
10:59:29,380 --> 10:59:31,020
First of all, let's do that.
16924
10:59:31,020 --> 10:59:31,960
Once we are done with that,
16925
10:59:31,960 --> 10:59:33,620
let's convert everything to lowercase.
16926
10:59:33,620 --> 10:59:38,100
So we'll use to lowercase, all right.
16927
10:59:38,100 --> 10:59:40,220
And then we'll be using a simple regex
16928
10:59:40,220 --> 10:59:41,540
to replace some of the stuff.
16929
10:59:41,540 --> 10:59:42,900
And this is the regex part
16930
10:59:42,900 --> 10:59:45,260
where I took a help of a little bit of chat GPT.
16931
10:59:45,260 --> 10:59:47,540
Otherwise I used to use a website regexr,
16932
10:59:47,540 --> 10:59:50,440
but this time I took a help from a chat GPT.
16933
10:59:50,440 --> 10:59:54,100
So we'll say replace, there we go.
16934
10:59:54,100 --> 10:59:57,700
And in this replace, I'll provide what value
16935
10:59:57,700 --> 11:00:00,140
I'm looking up for, that's the regex value.
16936
11:00:00,140 --> 11:00:02,940
And the second parameter is what to replace with.
16937
11:00:03,820 --> 11:00:06,100
And I'll just use the dash.
16938
11:00:06,100 --> 11:00:08,220
So what to replace with, this is something
16939
11:00:08,220 --> 11:00:11,780
that I grabbed actually directly for chat GPT.
16940
11:00:11,780 --> 11:00:13,900
Put up a prompt that I want a value
16941
11:00:13,900 --> 11:00:17,080
that converts everything, spaces and everything
16942
11:00:17,080 --> 11:00:17,980
that selects everything.
16943
11:00:17,980 --> 11:00:21,300
So I'm just saying that, hey, this is a negate by the way.
16944
11:00:21,300 --> 11:00:25,000
Don't select lowercase, uppercase, any digits,
16945
11:00:25,000 --> 11:00:29,340
or any spaces, rest everything are converted into this one.
16946
11:00:29,340 --> 11:00:32,020
And then optionally what you can do in case,
16947
11:00:32,020 --> 11:00:33,400
although it does the job,
16948
11:00:33,400 --> 11:00:35,060
but I found in some of the edge cases
16949
11:00:35,060 --> 11:00:36,180
it was still bothering me.
16950
11:00:36,180 --> 11:00:40,380
So I didn't found out any particular solution as of now.
16951
11:00:40,380 --> 11:00:42,820
So I just went into replace.
16952
11:00:42,820 --> 11:00:44,200
And I wrote another simple query,
16953
11:00:44,200 --> 11:00:45,900
which is a basic regex by the way.
16954
11:00:46,940 --> 11:00:48,620
It simply goes ahead and say,
16955
11:00:52,780 --> 11:00:54,580
a little bit itchy throat.
16956
11:00:54,580 --> 11:00:56,620
So it simply goes ahead and say that, hey,
16957
11:00:56,620 --> 11:00:58,460
I want to select all the spaces.
16958
11:00:58,460 --> 11:01:00,820
So slash S is for the spaces.
16959
11:01:00,820 --> 11:01:03,140
And I want to look at for the globally.
16960
11:01:03,140 --> 11:01:08,020
And then just want to just double short B, it converted.
16961
11:01:08,020 --> 11:01:09,500
Although in most cases I've found
16962
11:01:09,500 --> 11:01:11,980
that this alone works nicely,
16963
11:01:11,980 --> 11:01:14,840
but in some cases this was problematic.
16964
11:01:14,840 --> 11:01:18,540
So I just wanted to make sure that at the final end,
16965
11:01:18,540 --> 11:01:21,180
I'm just replacing all the spaces with the dash
16966
11:01:21,180 --> 11:01:24,420
and I'm ignoring all these digits
16967
11:01:24,420 --> 11:01:28,100
and lowercase A to Z, uppercase A to Z and slashes.
16968
11:01:28,100 --> 11:01:32,540
I'm not really that great or good into these regex.
16969
11:01:32,540 --> 11:01:34,900
I accept that, but hey, this works fine.
16970
11:01:34,900 --> 11:01:36,100
So there we go.
16971
11:01:36,100 --> 11:01:38,000
So we are returning the value and that's it.
16972
11:01:38,820 --> 11:01:39,660
That's your slug transform.
16973
11:01:39,660 --> 11:01:40,840
That is all it takes.
16974
11:01:40,840 --> 11:01:42,880
Now we also need to pass on a dependency array
16975
11:01:42,880 --> 11:01:43,720
onto this one.
16976
11:01:43,720 --> 11:01:44,600
We don't have any dependency,
16977
11:01:44,600 --> 11:01:47,280
but optimize this as much as possible.
16978
11:01:47,280 --> 11:01:50,200
Okay, so this is my slug transform that we have.
16979
11:01:50,200 --> 11:01:53,760
Okay, now you might be wondering that,
16980
11:01:53,760 --> 11:01:56,180
hey, that's great, we have slug transform,
16981
11:01:56,180 --> 11:01:59,640
but we want it to run as soon as somebody types something
16982
11:01:59,640 --> 11:02:01,020
into the title form.
16983
11:02:01,020 --> 11:02:02,480
How can I do that?
16984
11:02:02,480 --> 11:02:04,400
That's an interesting one actually.
16985
11:02:04,400 --> 11:02:05,560
You cannot do that directly
16986
11:02:05,560 --> 11:02:06,920
if you are using any of the React
16987
11:02:06,960 --> 11:02:08,880
or you have to monitor a lot of things.
16988
11:02:08,880 --> 11:02:10,120
But if you look at this one,
16989
11:02:10,120 --> 11:02:14,080
there is a component being given to you that is watch.
16990
11:02:14,080 --> 11:02:17,520
And what it says is this method will watch specified inputs
16991
11:02:17,520 --> 11:02:19,240
and return their values.
16992
11:02:19,240 --> 11:02:22,840
So not only it can watch my input in the name field,
16993
11:02:22,840 --> 11:02:24,280
it can also return me that value.
16994
11:02:24,280 --> 11:02:25,920
So I can use this.
16995
11:02:25,920 --> 11:02:28,400
And where can I use this or how can I use this?
16996
11:02:28,400 --> 11:02:29,320
Really, really simple.
16997
11:02:29,320 --> 11:02:31,240
Let me walk you through with that as well.
16998
11:02:31,240 --> 11:02:34,860
I can use actually it inside the use effect hook.
16999
11:02:34,860 --> 11:02:36,680
Oh, that's interesting.
17000
11:02:36,680 --> 11:02:40,240
So I'll just say react dot use effect.
17001
11:02:40,240 --> 11:02:41,360
There we go.
17002
11:02:41,360 --> 11:02:43,420
And this is our callback.
17003
11:02:44,920 --> 11:02:49,060
And looks like just use a callback like this
17004
11:02:49,060 --> 11:02:50,600
and we need a dependency array.
17005
11:02:51,480 --> 11:02:53,920
Okay, first of all, let's worry about the dependency array.
17006
11:02:53,920 --> 11:02:55,920
On what fields this should be dependent.
17007
11:02:55,920 --> 11:02:59,200
First of all, we'll obviously use watch, that's the one.
17008
11:02:59,200 --> 11:03:01,400
Also keep on watching onto the slug transform.
17009
11:03:01,400 --> 11:03:02,840
If it changes a little bit,
17010
11:03:02,840 --> 11:03:05,200
also I want to render, re-render the things.
17011
11:03:05,200 --> 11:03:06,880
And also the set value.
17012
11:03:06,880 --> 11:03:09,360
Now you might be wondering, what are these set values?
17013
11:03:09,360 --> 11:03:10,900
Can you explain that a little bit?
17014
11:03:10,900 --> 11:03:13,720
Because you're using this set values, get values
17015
11:03:13,720 --> 11:03:15,360
and quite a number of things.
17016
11:03:15,360 --> 11:03:17,960
These are actually coming up from the use form itself.
17017
11:03:17,960 --> 11:03:19,520
When we're using use form,
17018
11:03:19,520 --> 11:03:22,140
you don't need to create the states.
17019
11:03:22,140 --> 11:03:23,620
That is the one advantage.
17020
11:03:23,620 --> 11:03:24,960
I'll show you how these are useful
17021
11:03:24,960 --> 11:03:27,340
when we'll be designing the input field itself,
17022
11:03:27,340 --> 11:03:29,260
then it will get much more clear.
17023
11:03:29,260 --> 11:03:31,220
But the whole idea is you don't want to create
17024
11:03:31,220 --> 11:03:33,760
thousand different states or variables.
17025
11:03:33,800 --> 11:03:35,280
We can just use it directly like that.
17026
11:03:35,280 --> 11:03:37,200
I'll show you that, don't you worry?
17027
11:03:37,200 --> 11:03:39,980
Okay, so the dependency array part is done.
17028
11:03:39,980 --> 11:03:43,200
Now let's go into the use effect, this one.
17029
11:03:43,200 --> 11:03:44,400
Now here's the interesting thing.
17030
11:03:44,400 --> 11:03:46,440
How do we use this watch?
17031
11:03:46,440 --> 11:03:47,280
Really simple.
17032
11:03:47,280 --> 11:03:49,960
You just simply go ahead and use a watch just like this.
17033
11:03:49,960 --> 11:03:54,880
This watch gives you a callback and you can provide the value.
17034
11:03:54,880 --> 11:03:58,520
By the way, these value are all the values
17035
11:03:58,520 --> 11:04:00,280
that you can have in the form itself.
17036
11:04:00,280 --> 11:04:01,360
These are the values.
17037
11:04:01,360 --> 11:04:03,300
And out of that, I'm looking up for one value,
17038
11:04:03,300 --> 11:04:04,260
which is name.
17039
11:04:04,260 --> 11:04:07,100
So watch out, out of all these values,
17040
11:04:07,100 --> 11:04:10,020
the fields that you have, watch out the name for me.
17041
11:04:10,020 --> 11:04:13,740
And once you're here, let's go ahead and have a callback.
17042
11:04:14,640 --> 11:04:15,980
Just like this.
17043
11:04:15,980 --> 11:04:17,480
And there we go.
17044
11:04:17,480 --> 11:04:19,000
Now, what do you want to do?
17045
11:04:20,100 --> 11:04:25,100
So if the name is title,
17046
11:04:25,740 --> 11:04:28,760
I haven't created this yet, but I'll do that very soon.
17047
11:04:28,760 --> 11:04:31,980
If the name of the object, because as you can see,
17048
11:04:31,980 --> 11:04:33,940
the values are having so many properties,
17049
11:04:33,940 --> 11:04:36,160
title, slug, and all of these ones.
17050
11:04:36,160 --> 11:04:40,720
If the value is name, that means the name of the post itself
17051
11:04:40,720 --> 11:04:43,260
is the title, then only we want to run it.
17052
11:04:43,260 --> 11:04:44,260
So what do you want to do?
17053
11:04:44,260 --> 11:04:46,740
In that case, I want to use a set value.
17054
11:04:46,740 --> 11:04:49,500
So again, set value can be used not just for setting
17055
11:04:49,500 --> 11:04:51,740
one value, but in any field itself.
17056
11:04:51,740 --> 11:04:53,020
So set value is here.
17057
11:04:53,020 --> 11:04:55,620
Now in the set value, what do I want to use?
17058
11:04:55,620 --> 11:04:56,960
Set value in what field?
17059
11:04:56,960 --> 11:04:59,340
You have provided me number of fields here.
17060
11:04:59,340 --> 11:05:02,020
I haven't given them yet, but there will be many.
17061
11:05:02,020 --> 11:05:03,660
As you can just have input fields,
17062
11:05:03,660 --> 11:05:06,260
all of them are governed by the use form.
17063
11:05:06,260 --> 11:05:08,580
I just want to set one field, which is my slug.
17064
11:05:08,580 --> 11:05:10,420
So I'll provide you slug like this.
17065
11:05:10,420 --> 11:05:11,340
There we go.
17066
11:05:11,340 --> 11:05:12,620
How do you want to set it?
17067
11:05:12,620 --> 11:05:16,140
I want to set it by using the slug transform method.
17068
11:05:16,140 --> 11:05:20,020
I'll provide you the value dot title.
17069
11:05:20,020 --> 11:05:21,340
Okay, once I give you the title,
17070
11:05:21,340 --> 11:05:23,960
that means that will act as a value for you.
17071
11:05:23,960 --> 11:05:26,660
And you can just use that value,
17072
11:05:26,660 --> 11:05:28,060
then run all of this operation.
17073
11:05:28,060 --> 11:05:30,140
And since you returned me that,
17074
11:05:30,140 --> 11:05:32,500
I'll just use that to set the value.
17075
11:05:32,500 --> 11:05:34,700
A couple of more fields and parameters
17076
11:05:34,700 --> 11:05:37,700
you want to provide in here is should validate
17077
11:05:37,700 --> 11:05:40,880
because there are ways to provide a validation
17078
11:05:40,880 --> 11:05:44,020
inside the use form using the joey and other libraries.
17079
11:05:44,020 --> 11:05:45,580
We are not doing that as of now.
17080
11:05:45,580 --> 11:05:47,420
It's already too much.
17081
11:05:47,420 --> 11:05:50,500
We'll just use should validate as true.
17082
11:05:50,500 --> 11:05:52,620
So all our basic validations will kick in.
17083
11:05:52,620 --> 11:05:55,300
We don't want to go too much in depth of that.
17084
11:05:55,300 --> 11:05:57,420
All right, why is it bothering?
17085
11:05:57,460 --> 11:05:58,660
Title may not exist.
17086
11:05:58,660 --> 11:06:00,400
Yeah, it doesn't exist as of now,
17087
11:06:00,400 --> 11:06:03,060
but it will vary soon in the future.
17088
11:06:03,060 --> 11:06:05,880
Quite a lot of intense work that we have done.
17089
11:06:05,880 --> 11:06:08,060
And by the way, we haven't worked on submit yet.
17090
11:06:08,060 --> 11:06:09,020
We'll do that.
17091
11:06:09,020 --> 11:06:12,460
But first, I think now it's time to get more clarity
17092
11:06:12,460 --> 11:06:15,620
because these things will keep on adding to the confusion.
17093
11:06:15,620 --> 11:06:17,460
So let me just go ahead and render,
17094
11:06:17,460 --> 11:06:20,860
provide a render here so that you can understand that.
17095
11:06:20,860 --> 11:06:25,460
All right, so we'll just say, okay, let's minimize this.
17096
11:06:26,460 --> 11:06:28,300
Post form, looks good.
17097
11:06:28,300 --> 11:06:31,180
Here we should be returning the render element.
17098
11:06:31,180 --> 11:06:33,460
Return, what do you want to return?
17099
11:06:33,460 --> 11:06:35,080
I want to simply return a form.
17100
11:06:36,220 --> 11:06:40,020
Okay, this form is not going to have any action,
17101
11:06:40,020 --> 11:06:41,700
but rather on submit.
17102
11:06:42,940 --> 11:06:44,020
What do you want to do?
17103
11:06:44,020 --> 11:06:46,260
I want to use handle submit in that case.
17104
11:06:47,220 --> 11:06:52,220
Okay, handle submit should not be used directly like this,
17105
11:06:52,740 --> 11:06:55,620
because if you're using a use form,
17106
11:06:55,620 --> 11:06:58,740
the handle submit should be used from the use form.
17107
11:06:58,740 --> 11:07:00,220
This is the handle submit,
17108
11:07:00,220 --> 11:07:02,060
but actually it doesn't magically knows
17109
11:07:02,060 --> 11:07:03,420
what to do with the data.
17110
11:07:03,420 --> 11:07:04,900
So this is going to be the method
17111
11:07:04,900 --> 11:07:06,980
which is actually going to submit the data.
17112
11:07:06,980 --> 11:07:09,340
The way how you do it is a little bit weird,
17113
11:07:09,340 --> 11:07:10,380
but this is a method,
17114
11:07:10,380 --> 11:07:11,980
and in this you pass on another method.
17115
11:07:11,980 --> 11:07:15,300
So yeah, higher order functions, JavaScript at its peak.
17116
11:07:15,300 --> 11:07:17,720
Yeah, this is how the React hook form,
17117
11:07:17,720 --> 11:07:20,060
but don't worry if you'll watch these videos couple of times,
17118
11:07:20,060 --> 11:07:23,140
you will be used to with the React hook forms.
17119
11:07:23,140 --> 11:07:25,500
Very powerful, very useful.
17120
11:07:25,500 --> 11:07:28,260
Okay, let's go back and use some of the class names
17121
11:07:29,300 --> 11:07:30,900
to make it beautiful.
17122
11:07:30,900 --> 11:07:33,500
Flex, and this one is going to be flex wrap.
17123
11:07:35,860 --> 11:07:37,380
All right.
17124
11:07:37,380 --> 11:07:39,900
Okay, next up is the most interesting part
17125
11:07:39,900 --> 11:07:41,020
after the div of course.
17126
11:07:41,020 --> 11:07:44,740
So we'll have a div, we'll have a class name,
17127
11:07:44,740 --> 11:07:47,460
nothing much, we want to use the width of two by three,
17128
11:07:48,380 --> 11:07:52,020
and we'll be using padding on x-axis of two, that's it.
17129
11:07:52,020 --> 11:07:53,900
Okay, now comes the interesting part
17130
11:07:53,900 --> 11:07:56,220
is we'll be designing our first input.
17131
11:07:56,220 --> 11:07:58,160
Notice here, I'm using the input field
17132
11:07:58,160 --> 11:08:01,280
that I designed earlier, that's it.
17133
11:08:01,280 --> 11:08:03,420
But how we are controlling this input field,
17134
11:08:03,420 --> 11:08:05,220
that is the most important part.
17135
11:08:05,220 --> 11:08:06,940
First of all, let's pass on a label
17136
11:08:06,940 --> 11:08:10,260
which we designed as a prop into this input.
17137
11:08:10,260 --> 11:08:12,680
We'll be calling this one as simple title.
17138
11:08:14,620 --> 11:08:16,160
All right.
17139
11:08:16,160 --> 11:08:21,160
Placeholder, why are no suggestions coming in?
17140
11:08:22,000 --> 11:08:24,140
Oh, these are props, my bad.
17141
11:08:25,400 --> 11:08:27,040
Placeholder, oh, suggestions are not coming
17142
11:08:27,040 --> 11:08:29,920
because this is not a regular HTML form,
17143
11:08:29,920 --> 11:08:31,200
this is my custom component,
17144
11:08:31,200 --> 11:08:33,760
that's why suggestions are not coming in.
17145
11:08:33,760 --> 11:08:37,440
And we'll say title, we will be having a class name
17146
11:08:37,440 --> 11:08:42,440
of margin bottom of four, there we go.
17147
11:08:43,360 --> 11:08:47,680
Okay, now comes up the part
17148
11:08:47,680 --> 11:08:50,920
where we actually use the use forms.
17149
11:08:50,920 --> 11:08:54,280
Let me show you that, let me take you onto the website.
17150
11:08:54,280 --> 11:08:56,840
So this is the register and the register and whatnot,
17151
11:08:56,840 --> 11:08:58,920
use form, let's go ahead and use that.
17152
11:08:58,920 --> 11:09:03,160
So if there is any example of the forms
17153
11:09:03,160 --> 11:09:06,600
that would help us to understand this so much better.
17154
11:09:06,600 --> 11:09:10,440
Okay, get started, and here it is.
17155
11:09:10,960 --> 11:09:15,880
Okay, so how, oh, this is the one that I wanted to show you.
17156
11:09:15,880 --> 11:09:17,480
So whenever you're using any input,
17157
11:09:17,480 --> 11:09:18,760
this is the one which we discussed,
17158
11:09:18,760 --> 11:09:22,060
handle, submit, and on submit, exactly like that.
17159
11:09:22,060 --> 11:09:24,780
But when you're actually using any input field,
17160
11:09:24,780 --> 11:09:28,200
this is the way how you actually monitor or govern that.
17161
11:09:28,200 --> 11:09:30,880
Notice here, register your input into hooks,
17162
11:09:30,880 --> 11:09:33,120
so we have to explicitly register these,
17163
11:09:33,120 --> 11:09:34,920
each input inside the hooks
17164
11:09:34,920 --> 11:09:37,160
so that they are available as values
17165
11:09:37,160 --> 11:09:39,040
by invoking the register function.
17166
11:09:39,040 --> 11:09:41,840
So we have to actually use this JavaScript,
17167
11:09:41,840 --> 11:09:46,760
then have to extract or we can say de-structure the register
17168
11:09:46,760 --> 11:09:47,600
and then provide that,
17169
11:09:47,600 --> 11:09:49,200
hey, this is the example that I'm using.
17170
11:09:49,200 --> 11:09:51,080
So yeah, this is the one.
17171
11:09:51,080 --> 11:09:53,680
Let me go back onto the code part.
17172
11:09:53,680 --> 11:09:55,800
So this is where we start our JavaScript.
17173
11:09:55,800 --> 11:09:59,800
We simply say register, there we go.
17174
11:09:59,800 --> 11:10:02,740
This register is a method, that's how we register it.
17175
11:10:02,740 --> 11:10:04,680
We are gonna call this one as title.
17176
11:10:04,680 --> 11:10:06,640
Now it is registered as a title
17177
11:10:06,640 --> 11:10:09,280
and we can provide more fields like required.
17178
11:10:09,280 --> 11:10:10,500
There's a lot more that you can do,
17179
11:10:10,500 --> 11:10:12,680
but we'll just go with the required as true.
17180
11:10:12,680 --> 11:10:13,960
This is the part.
17181
11:10:13,960 --> 11:10:17,540
Now notice here, now this input field is registered as title.
17182
11:10:17,540 --> 11:10:20,700
So I'll go back and notice here when I say value
17183
11:10:20,700 --> 11:10:24,480
and the name is title because every input field has a name
17184
11:10:24,480 --> 11:10:26,000
and I gave it a name of title.
17185
11:10:26,000 --> 11:10:27,860
Now, this will be monitored here.
17186
11:10:27,860 --> 11:10:31,160
So wherever you pass on the value inside this
17187
11:10:31,160 --> 11:10:34,160
into this use effect, it will keep on watching the values.
17188
11:10:34,200 --> 11:10:37,160
If the name is a title, which it is,
17189
11:10:37,160 --> 11:10:39,360
then only the set value will here.
17190
11:10:39,360 --> 11:10:40,920
And again, watch will be responsible
17191
11:10:40,920 --> 11:10:45,120
for continuously watching or monitoring this input field.
17192
11:10:45,120 --> 11:10:46,600
Very interesting.
17193
11:10:46,600 --> 11:10:48,280
So much difficult to do with the core,
17194
11:10:48,280 --> 11:10:50,960
but this is much, much easier.
17195
11:10:50,960 --> 11:10:53,040
Okay, now let's have another input field,
17196
11:10:53,040 --> 11:10:54,740
which is slug, interesting one.
17197
11:10:55,760 --> 11:10:58,480
Input, self-closing, just like that.
17198
11:10:58,480 --> 11:10:59,760
Okay, let's do one by one.
17199
11:10:59,760 --> 11:11:01,400
First of all, label.
17200
11:11:01,400 --> 11:11:05,280
That label is going to be slug
17201
11:11:06,840 --> 11:11:09,080
and the space colon, something like that.
17202
11:11:09,080 --> 11:11:11,860
And then we'll be having placeholder.
17203
11:11:11,860 --> 11:11:14,200
Placeholder is going to be slug as well.
17204
11:11:15,340 --> 11:11:18,480
And then we have class names, nothing much.
17205
11:11:18,480 --> 11:11:20,880
Margin bottom of four, good enough.
17206
11:11:20,880 --> 11:11:22,600
Okay, now let's come up onto the part
17207
11:11:22,600 --> 11:11:24,720
where we registered it into the use form.
17208
11:11:24,720 --> 11:11:26,000
How do we do that?
17209
11:11:26,000 --> 11:11:29,760
We first of all, start our JavaScript, register,
17210
11:11:29,760 --> 11:11:31,400
just like that, inside the register,
17211
11:11:31,400 --> 11:11:33,640
we name it as slug, okay?
17212
11:11:33,640 --> 11:11:34,620
And what should happen?
17213
11:11:34,620 --> 11:11:36,840
How this slug should actually work?
17214
11:11:36,840 --> 11:11:39,800
That automatically is being taken care by the watch itself.
17215
11:11:39,800 --> 11:11:44,800
So I just go ahead and say this is required as true.
17216
11:11:46,400 --> 11:11:48,200
All right, so this should be there.
17217
11:11:48,200 --> 11:11:50,640
Okay, one more thing that we can do here is
17218
11:11:50,640 --> 11:11:54,280
that we can actually have this input
17219
11:11:54,280 --> 11:11:55,560
as slug transform as well.
17220
11:11:55,560 --> 11:11:58,180
So let me just go ahead and work with that.
17221
11:11:58,180 --> 11:12:03,140
So on input, what do we want to do?
17222
11:12:03,140 --> 11:12:04,440
That's interesting one.
17223
11:12:04,440 --> 11:12:07,380
Okay, let's start our JavaScript first.
17224
11:12:07,380 --> 11:12:10,540
We will capture an event onto this one.
17225
11:12:10,540 --> 11:12:13,220
And then we'll just go like this, curly braces,
17226
11:12:13,220 --> 11:12:14,100
just like that.
17227
11:12:14,100 --> 11:12:16,940
So I'll just go ahead and use set values
17228
11:12:16,940 --> 11:12:19,820
because just because you have used the slug,
17229
11:12:19,820 --> 11:12:23,260
remember, this slug is just returning the value.
17230
11:12:23,260 --> 11:12:25,740
It's not doing anything, it just says set values.
17231
11:12:25,740 --> 11:12:28,140
It's just returning everything to set values.
17232
11:12:28,980 --> 11:12:29,820
But there is nothing we have said
17233
11:12:29,820 --> 11:12:31,820
that what should be the value inside it?
17234
11:12:31,820 --> 11:12:34,020
This is registering, giving the values,
17235
11:12:34,020 --> 11:12:36,380
but we haven't said how to take the values back
17236
11:12:36,380 --> 11:12:37,940
into this form and fill it up.
17237
11:12:37,940 --> 11:12:39,900
That's what we are taking care of right now.
17238
11:12:39,900 --> 11:12:41,180
So set value.
17239
11:12:41,180 --> 11:12:43,620
Now we'll say that, hey, I'll set the value
17240
11:12:43,620 --> 11:12:46,480
and my field name is slug, okay?
17241
11:12:46,480 --> 11:12:48,620
And how do I get these values?
17242
11:12:48,620 --> 11:12:51,740
So use the slug transform here.
17243
11:12:51,740 --> 11:12:54,780
And then we'll be, in order to use the slug transform,
17244
11:12:54,780 --> 11:12:57,620
we have to provide a value, okay?
17245
11:12:58,300 --> 11:13:03,300
What we'll do is we'll say e.current target.value.
17246
11:13:08,460 --> 11:13:09,800
And that's it.
17247
11:13:11,900 --> 11:13:13,900
And we'll simply say should validate,
17248
11:13:17,580 --> 11:13:19,540
and we'll be saying true.
17249
11:13:19,540 --> 11:13:21,660
Let me walk you through one more time.
17250
11:13:21,660 --> 11:13:25,380
Okay, notice here, right now we are not actually
17251
11:13:25,380 --> 11:13:26,440
exporting the values.
17252
11:13:26,440 --> 11:13:28,760
This is where we have done already this part.
17253
11:13:28,760 --> 11:13:33,760
But now this input field is going to set some values into it
17254
11:13:34,400 --> 11:13:37,260
and the setting of the value is going to happen
17255
11:13:37,260 --> 11:13:39,140
via this on input only.
17256
11:13:39,140 --> 11:13:40,540
That's the case.
17257
11:13:40,540 --> 11:13:42,480
In the on input, we are saying that, hey,
17258
11:13:42,480 --> 11:13:46,480
as soon as some inputs are being put into this input field,
17259
11:13:46,480 --> 11:13:49,800
use the set value, which is given to us as a hook
17260
11:13:49,800 --> 11:13:54,800
inside this hook, just a second.
17261
11:13:56,520 --> 11:13:57,400
And here it is.
17262
11:13:57,400 --> 11:13:58,480
So this was given to us.
17263
11:13:58,480 --> 11:14:01,800
So notice here, we are not using thousands of set values
17264
11:14:01,800 --> 11:14:04,520
or set field, set input field, set slug, get slug.
17265
11:14:04,520 --> 11:14:07,080
No, we just use one thing, which is set value,
17266
11:14:07,080 --> 11:14:08,900
and we use get values.
17267
11:14:08,900 --> 11:14:11,440
To get any values out of any field,
17268
11:14:11,440 --> 11:14:13,800
we just provide the name of that.
17269
11:14:13,800 --> 11:14:16,240
To set any value in any of these fields,
17270
11:14:16,240 --> 11:14:18,400
we just use one hook, which is set value.
17271
11:14:18,400 --> 11:14:19,560
That is the advantage.
17272
11:14:19,560 --> 11:14:23,360
Just two of these methods, set values, get values.
17273
11:14:23,360 --> 11:14:25,800
And you can actually set and get values
17274
11:14:25,820 --> 11:14:28,000
from pretty much any field at all.
17275
11:14:28,000 --> 11:14:31,240
That is what makes me like, wow, this is too much
17276
11:14:31,240 --> 11:14:33,360
how we are actually using this.
17277
11:14:33,360 --> 11:14:34,520
All right.
17278
11:14:34,520 --> 11:14:37,080
So now we have the set values.
17279
11:14:37,080 --> 11:14:40,440
We actually use the set values here as well to provide that.
17280
11:14:40,440 --> 11:14:42,460
But here we are actually using the set values
17281
11:14:42,460 --> 11:14:44,760
on this particular input field.
17282
11:14:44,760 --> 11:14:46,940
All right, quite an interesting one.
17283
11:14:46,940 --> 11:14:49,520
Now let's use another one, which is our RTE.
17284
11:14:49,520 --> 11:14:51,120
So that is easy one.
17285
11:14:51,120 --> 11:14:53,560
We have already worked onto this one.
17286
11:14:53,560 --> 11:14:57,640
So RTE could be self-closing, just like that.
17287
11:14:57,640 --> 11:15:00,320
Interesting.
17288
11:15:00,320 --> 11:15:03,360
Oh, we need to get out of it.
17289
11:15:03,360 --> 11:15:06,880
RTE, self-closing, just like that.
17290
11:15:06,880 --> 11:15:08,040
Pass on a couple of values.
17291
11:15:08,040 --> 11:15:09,120
First of all, label.
17292
11:15:09,120 --> 11:15:14,560
The label is going to be content, colon, just like that.
17293
11:15:14,560 --> 11:15:17,480
We need to provide a name to this one.
17294
11:15:17,480 --> 11:15:20,040
And the name is going to be just like that.
17295
11:15:20,040 --> 11:15:22,800
And we'll say content.
17296
11:15:22,800 --> 11:15:25,920
And then we have to provide a control.
17297
11:15:25,920 --> 11:15:27,920
And we'll say control, just like that.
17298
11:15:27,920 --> 11:15:30,860
Control, again, is given to us from here.
17299
11:15:30,860 --> 11:15:32,640
Notice here, we got the control.
17300
11:15:32,640 --> 11:15:35,120
This is exactly specifically designed
17301
11:15:35,120 --> 11:15:37,720
to take control of the input fields, which
17302
11:15:37,720 --> 11:15:40,660
are outside or third party inputs.
17303
11:15:40,660 --> 11:15:43,200
And then we simply have some of the default values.
17304
11:15:43,200 --> 11:15:45,200
If you have, give them.
17305
11:15:45,200 --> 11:15:47,880
But right now, the default value is only for one thing,
17306
11:15:47,880 --> 11:15:50,840
which is get values.
17307
11:15:50,840 --> 11:15:53,520
Remember, I told you, get values.
17308
11:15:53,520 --> 11:15:56,840
So if you want to get values from any field, just like that,
17309
11:15:56,840 --> 11:15:58,240
let's call this one as content.
17310
11:16:01,880 --> 11:16:04,360
Now imagine, if you have to deal up with these many forms,
17311
11:16:04,360 --> 11:16:06,560
how many states you would be designing?
17312
11:16:06,560 --> 11:16:07,880
So easy.
17313
11:16:07,880 --> 11:16:09,800
OK, this value is all done.
17314
11:16:09,800 --> 11:16:12,360
So now we'll close this div, which
17315
11:16:12,360 --> 11:16:14,120
is the first portion of it.
17316
11:16:14,120 --> 11:16:17,760
Now we need to go in the one third part of this one.
17317
11:16:18,400 --> 11:16:21,680
And we'll go with the class name on the right part of it.
17318
11:16:21,680 --> 11:16:23,760
So we'll just say 1 by 3.
17319
11:16:23,760 --> 11:16:29,000
And we'll say, fix dash 2.
17320
11:16:29,000 --> 11:16:31,240
All right.
17321
11:16:31,240 --> 11:16:33,880
And in here, we are having two fields.
17322
11:16:33,880 --> 11:16:36,040
One is the input field for the images.
17323
11:16:36,040 --> 11:16:39,520
And another one is simply the field,
17324
11:16:39,520 --> 11:16:42,040
which is just saying, is it active?
17325
11:16:42,040 --> 11:16:43,040
Is it inactive?
17326
11:16:43,040 --> 11:16:43,880
Something like that.
17327
11:16:43,880 --> 11:16:45,480
So that's basic.
17328
11:16:45,480 --> 11:16:48,880
OK, let's start with the input.
17329
11:16:48,880 --> 11:16:52,680
And inside the input, it could be self-closing.
17330
11:16:52,680 --> 11:17:00,640
OK, label, featured image.
17331
11:17:00,640 --> 11:17:06,880
And the type is going to be changed to file, file selector.
17332
11:17:06,880 --> 11:17:13,080
And the class name is going to be margin bottom dash 4.
17333
11:17:13,080 --> 11:17:16,440
Class name margin bottom dash 4.
17334
11:17:16,440 --> 11:17:19,400
All right, what do you want to accept?
17335
11:17:19,400 --> 11:17:20,280
That's the idea.
17336
11:17:20,280 --> 11:17:23,080
We can pass on as many props as we want.
17337
11:17:23,080 --> 11:17:24,320
So what do we want to accept?
17338
11:17:24,320 --> 11:17:29,040
We want to accept image, which is PNG.
17339
11:17:29,040 --> 11:17:34,360
We also want to image, which is JPGR.
17340
11:17:34,360 --> 11:17:38,600
We also want to accept image, which is JPG.
17341
11:17:38,600 --> 11:17:40,280
If you have more, you can just provide
17342
11:17:40,280 --> 11:17:41,720
more of these acceptance fields.
17343
11:17:41,720 --> 11:17:44,320
Basic HTML, nothing more in there.
17344
11:17:44,320 --> 11:17:46,240
Then we have to register this field as well.
17345
11:17:46,240 --> 11:17:50,200
So let's go ahead and do that, dot dot dot register.
17346
11:17:50,200 --> 11:17:54,280
And this field will be known as image in the registration
17347
11:17:54,280 --> 11:17:55,160
field.
17348
11:17:55,160 --> 11:17:56,800
Again, basic required is true.
17349
11:18:00,120 --> 11:18:04,120
Required, that's going to be true.
17350
11:18:04,120 --> 11:18:06,680
I hope you notice the difference in here as well.
17351
11:18:06,680 --> 11:18:09,360
All the fields are easily being registered in here.
17352
11:18:09,360 --> 11:18:11,120
So this is just register.
17353
11:18:11,120 --> 11:18:12,920
This is also just register.
17354
11:18:12,920 --> 11:18:16,240
Only difference is when we don't have a control on that.
17355
11:18:16,240 --> 11:18:19,120
Then we pass on the control to get the values from it
17356
11:18:19,120 --> 11:18:19,680
automatically.
17357
11:18:19,680 --> 11:18:20,720
Otherwise, the rest of the fields
17358
11:18:20,720 --> 11:18:21,840
are just very straightforward.
17359
11:18:21,840 --> 11:18:23,800
Register, register, just like that.
17360
11:18:23,800 --> 11:18:27,160
OK, we can actually have it as required as true.
17361
11:18:27,160 --> 11:18:31,480
But we can just simply say, if the post is there,
17362
11:18:31,480 --> 11:18:32,600
then we don't want it.
17363
11:18:32,600 --> 11:18:35,720
So if post is no post, just like that.
17364
11:18:35,720 --> 11:18:38,720
OK, once we are done with this, then
17365
11:18:38,760 --> 11:18:42,400
depends on the post, whether we are going to actually get
17366
11:18:42,400 --> 11:18:44,280
a file preview or not, just like that.
17367
11:18:44,280 --> 11:18:46,480
So let's also try that.
17368
11:18:46,480 --> 11:18:49,880
So we'll say, if the post is there, then only we'll
17369
11:18:49,880 --> 11:18:51,480
get a file preview.
17370
11:18:51,480 --> 11:18:53,080
So we'll just go like that.
17371
11:18:53,080 --> 11:19:01,200
And we'll say, inside this div, we'll have a class name.
17372
11:19:01,200 --> 11:19:04,000
We'll say width is going to be full inside in here.
17373
11:19:04,000 --> 11:19:06,840
And margin bottom is going to be 4.
17374
11:19:06,840 --> 11:19:10,000
And inside this div, we'll be having an image.
17375
11:19:10,000 --> 11:19:13,600
The source of the image, that is where things get interesting.
17376
11:19:13,600 --> 11:19:18,360
We'll be using app write service, get file preview.
17377
11:19:18,360 --> 11:19:24,680
And pass on this post dot featured image.
17378
11:19:24,680 --> 11:19:25,480
Let's pass on that.
17379
11:19:25,480 --> 11:19:27,840
If that will come up, if post is there,
17380
11:19:27,840 --> 11:19:30,040
we will obviously get the featured image.
17381
11:19:30,040 --> 11:19:34,080
And in the alt, let's use the title.
17382
11:19:34,080 --> 11:19:37,000
Post dot title.
17383
11:19:37,000 --> 11:19:39,120
We should be, technically, we don't
17384
11:19:39,120 --> 11:19:41,760
need to use a question mark here because we're already
17385
11:19:41,760 --> 11:19:42,640
checking it up here.
17386
11:19:42,640 --> 11:19:44,560
So that is good enough.
17387
11:19:44,560 --> 11:19:45,400
I think that's good.
17388
11:19:45,400 --> 11:19:46,560
Let's add a class name here.
17389
11:19:53,000 --> 11:19:54,400
Let's use a class name.
17390
11:19:54,400 --> 11:19:56,840
And that should be rounded.
17391
11:19:56,840 --> 11:19:59,720
Dash l g.
17392
11:19:59,720 --> 11:20:01,120
There we go.
17393
11:20:01,120 --> 11:20:02,040
All right.
17394
11:20:02,040 --> 11:20:04,320
So this is the case when the post and featured image is
17395
11:20:04,320 --> 11:20:04,800
there.
17396
11:20:04,800 --> 11:20:08,440
Now we need to have to work with one more thing.
17397
11:20:08,440 --> 11:20:11,560
We need to select the options for the user as well.
17398
11:20:11,560 --> 11:20:13,080
Quite a lot.
17399
11:20:13,080 --> 11:20:15,760
But this is what happens when you design complex applications.
17400
11:20:15,760 --> 11:20:16,800
We have a select field.
17401
11:20:16,800 --> 11:20:18,960
We can use it as self-closing.
17402
11:20:18,960 --> 11:20:19,640
All right.
17403
11:20:19,640 --> 11:20:21,040
Move it up here.
17404
11:20:21,040 --> 11:20:22,520
Let's provide the options.
17405
11:20:22,520 --> 11:20:24,880
That's the first parameter we have to pass on.
17406
11:20:24,880 --> 11:20:27,360
The options is going to be an array.
17407
11:20:27,360 --> 11:20:29,000
So let's pass on an array.
17408
11:20:29,000 --> 11:20:31,520
The first value is active.
17409
11:20:31,600 --> 11:20:32,840
The second value is inactive.
17410
11:20:35,840 --> 11:20:36,600
That's it.
17411
11:20:36,600 --> 11:20:38,040
That's your option.
17412
11:20:38,040 --> 11:20:40,040
The label is going to be status.
17413
11:20:42,680 --> 11:20:45,800
And the class name.
17414
11:20:45,800 --> 11:20:49,960
We just need some margin from bottom in all of these cases.
17415
11:20:49,960 --> 11:20:52,760
And last but not the least is register it
17416
11:20:52,760 --> 11:20:57,680
into the React form, React hook form, dot dot dot, register.
17417
11:20:57,680 --> 11:21:01,680
And we want to register it with the status.
17418
11:21:01,680 --> 11:21:02,520
Register it.
17419
11:21:02,520 --> 11:21:04,320
And now let's provide.
17420
11:21:04,320 --> 11:21:05,360
This is very optional.
17421
11:21:05,360 --> 11:21:07,240
Required is going to be true.
17422
11:21:09,800 --> 11:21:10,360
There we go.
17423
11:21:10,360 --> 11:21:10,880
That's it.
17424
11:21:10,880 --> 11:21:12,280
So select form is required.
17425
11:21:12,280 --> 11:21:15,280
Now let's go ahead and use a button to submit it.
17426
11:21:15,280 --> 11:21:17,080
OK.
17427
11:21:17,080 --> 11:21:21,000
So inside the div, let's keep it inside the div itself,
17428
11:21:21,000 --> 11:21:23,240
we'll be using a button.
17429
11:21:23,240 --> 11:21:25,840
We'll be using our own button.
17430
11:21:25,840 --> 11:21:29,120
So there we go.
17431
11:21:29,120 --> 11:21:29,920
OK.
17432
11:21:29,920 --> 11:21:31,400
This is the button that we have.
17433
11:21:31,400 --> 11:21:34,400
And inside this button, we can have childrens.
17434
11:21:34,400 --> 11:21:35,960
That's how we designed it.
17435
11:21:35,960 --> 11:21:38,240
So if the post is there, then we'll
17436
11:21:38,240 --> 11:21:40,920
call this button as update.
17437
11:21:40,920 --> 11:21:42,760
If the post is not there, then we'll
17438
11:21:42,760 --> 11:21:47,160
call it one as create or submit, whatever you like.
17439
11:21:47,160 --> 11:21:47,680
All right.
17440
11:21:47,680 --> 11:21:49,920
So this is the button.
17441
11:21:49,920 --> 11:21:52,320
And inside the button, we can pass on more values.
17442
11:21:52,320 --> 11:21:56,040
Like type of the button is going to be submit.
17443
11:21:56,040 --> 11:21:57,040
And what else?
17444
11:21:57,040 --> 11:21:59,880
Background color.
17445
11:21:59,880 --> 11:22:01,320
BG color.
17446
11:22:01,320 --> 11:22:03,720
These are the properties which we have given.
17447
11:22:03,720 --> 11:22:05,960
So let's also use JavaScript here.
17448
11:22:05,960 --> 11:22:10,760
If the post is there, then we'll be using BG green.
17449
11:22:10,760 --> 11:22:16,520
So we'll say BG dash green suggestions, please.
17450
11:22:16,520 --> 11:22:17,160
No suggestions.
17451
11:22:17,160 --> 11:22:21,880
BG dash green dash 500.
17452
11:22:21,880 --> 11:22:26,960
Otherwise, we'll just say undefined.
17453
11:22:26,960 --> 11:22:27,600
All right.
17454
11:22:27,600 --> 11:22:30,120
We can use another color as well, by the way.
17455
11:22:30,120 --> 11:22:32,600
And one more thing we can just provide in here
17456
11:22:32,600 --> 11:22:38,120
is class name with dash full.
17457
11:22:38,120 --> 11:22:38,600
All right.
17458
11:22:38,600 --> 11:22:40,280
So this is the form that we have.
17459
11:22:40,280 --> 11:22:42,920
Again, we have studied a lot into this one.
17460
11:22:42,920 --> 11:22:46,680
I totally, totally understand that piece, that part.
17461
11:22:46,680 --> 11:22:48,520
But there is one more thing still remaining,
17462
11:22:48,520 --> 11:22:50,120
which is the easy one, by the way.
17463
11:22:50,120 --> 11:22:52,320
We haven't yet submitted anything.
17464
11:22:52,320 --> 11:22:54,320
The submission part is definitely easiest
17465
11:22:54,320 --> 11:22:55,960
among the all.
17466
11:22:55,960 --> 11:22:58,000
But definitely, this is something
17467
11:22:58,000 --> 11:23:00,720
you need to understand one by one how things are going up.
17468
11:23:00,720 --> 11:23:03,480
Now, if the post is there, then obviously based on this,
17469
11:23:03,480 --> 11:23:04,680
we'll be getting the value.
17470
11:23:04,680 --> 11:23:06,480
So first of all, we have all the data.
17471
11:23:06,480 --> 11:23:08,400
And by the way, all the data now we have,
17472
11:23:08,400 --> 11:23:11,640
as soon as you submit the form, the values are being called
17473
11:23:11,640 --> 11:23:13,240
and we have the data.
17474
11:23:13,240 --> 11:23:16,520
We need to extract the data from a couple of resources.
17475
11:23:16,520 --> 11:23:17,560
Let me show you that.
17476
11:23:17,560 --> 11:23:20,600
It's easier to actually write the code than to explain that.
17477
11:23:20,600 --> 11:23:24,800
So if the post is there, OK.
17478
11:23:24,800 --> 11:23:26,720
If post is there, then we have to do something.
17479
11:23:26,720 --> 11:23:28,680
Otherwise, we have to do something else.
17480
11:23:28,680 --> 11:23:29,160
OK.
17481
11:23:29,160 --> 11:23:30,480
So post was there already.
17482
11:23:30,480 --> 11:23:30,960
OK.
17483
11:23:30,960 --> 11:23:32,840
So first, let's extract the file.
17484
11:23:32,840 --> 11:23:34,400
Let's get the file.
17485
11:23:34,400 --> 11:23:35,960
File will be coming up from the data.
17486
11:23:35,960 --> 11:23:38,360
Everything is stored inside the data.
17487
11:23:38,360 --> 11:23:40,840
And we'll be having an image.
17488
11:23:40,840 --> 11:23:42,320
And we'll be extracting this.
17489
11:23:42,320 --> 11:23:44,240
OK.
17490
11:23:44,240 --> 11:23:47,080
Now, what we're going to do is we
17491
11:23:47,080 --> 11:23:49,800
are going to do something if we find the file.
17492
11:23:49,800 --> 11:23:54,240
Otherwise, we'll be just putting a null inside this one.
17493
11:23:54,240 --> 11:23:55,560
Rest of the checking automatically
17494
11:23:55,560 --> 11:23:57,520
can be done by the app write itself.
17495
11:23:57,520 --> 11:24:00,720
If it is there, then we want to use an app write service
17496
11:24:00,720 --> 11:24:01,680
to upload the file.
17497
11:24:01,680 --> 11:24:04,640
So let's go ahead and await this because this service takes
17498
11:24:04,640 --> 11:24:05,560
time.
17499
11:24:05,560 --> 11:24:07,880
And we're going to use app write service.
17500
11:24:07,880 --> 11:24:11,480
We are going to use upload file.
17501
11:24:11,480 --> 11:24:16,640
And in the upload file, we just pass on this data.image.
17502
11:24:16,640 --> 11:24:20,000
And obviously, the path, which is in the first field.
17503
11:24:20,000 --> 11:24:20,520
OK.
17504
11:24:20,520 --> 11:24:21,920
So that's the part one.
17505
11:24:21,920 --> 11:24:24,080
And this is the part.
17506
11:24:24,080 --> 11:24:28,680
Now, again, we need to continue further if the file is there.
17507
11:24:28,680 --> 11:24:33,560
If the file is there, then let's go ahead and delete this.
17508
11:24:33,560 --> 11:24:39,160
If the file is there, then we are
17509
11:24:39,160 --> 11:24:44,520
going to use app write service.delete file
17510
11:24:44,520 --> 11:24:46,320
because we want to delete the previous file.
17511
11:24:46,320 --> 11:24:49,080
Previous file is inside still in the post.
17512
11:24:49,080 --> 11:24:53,440
So we'll say post.featured image.
17513
11:24:53,440 --> 11:24:55,360
If file is there, go ahead and delete that.
17514
11:24:55,360 --> 11:24:58,160
You can also go ahead and use an await here as well,
17515
11:24:58,160 --> 11:24:58,800
if you wish.
17516
11:24:58,800 --> 11:25:00,040
But I think it's good enough.
17517
11:25:00,040 --> 11:25:02,800
It can do its job behind the scene as well.
17518
11:25:02,800 --> 11:25:05,080
Depends on when we do more thorough checking,
17519
11:25:05,080 --> 11:25:08,400
we can actually go ahead and work on with this.
17520
11:25:08,400 --> 11:25:13,640
Now, let's call this one as DB post.
17521
11:25:13,640 --> 11:25:18,480
And what we want to do is await app write service.
17522
11:25:18,480 --> 11:25:20,880
And this one is going to be responsible for updating
17523
11:25:20,880 --> 11:25:21,360
the post.
17524
11:25:21,360 --> 11:25:23,680
For updating the post, provide me the ID first.
17525
11:25:23,680 --> 11:25:27,600
So that can be extracted from post.dollarID.
17526
11:25:27,600 --> 11:25:28,520
There we go.
17527
11:25:28,520 --> 11:25:31,320
And then provide me all the data that you have.
17528
11:25:31,320 --> 11:25:32,760
OK, what data do you have?
17529
11:25:32,760 --> 11:25:36,080
I can just extract everything from the data itself.
17530
11:25:36,080 --> 11:25:37,560
And one thing that you have to give me
17531
11:25:37,560 --> 11:25:40,080
is the featured image to overwrite that featured image
17532
11:25:40,080 --> 11:25:41,760
because we just uploaded that.
17533
11:25:41,760 --> 11:25:44,840
That will be coming up from file if we have that.
17534
11:25:44,840 --> 11:25:53,440
If we have the file, then give it file.dollarID.
17535
11:25:53,440 --> 11:25:55,960
Otherwise, if you don't have it, just give me undefined
17536
11:25:55,960 --> 11:26:00,280
so that if it is compulsory, app write can throw me an error.
17537
11:26:00,280 --> 11:26:03,400
Now, continuing further, in this case,
17538
11:26:03,400 --> 11:26:05,440
if the post was updated successfully,
17539
11:26:05,440 --> 11:26:06,840
then let's redirect the user.
17540
11:26:06,840 --> 11:26:08,720
So let's go ahead and work with that.
17541
11:26:08,720 --> 11:26:13,360
If we have the DB post, if that's the case,
17542
11:26:13,360 --> 11:26:16,520
we have the DB post, then let's use the navigate,
17543
11:26:16,520 --> 11:26:19,960
which we created from use navigate.
17544
11:26:19,960 --> 11:26:25,560
And we'll say go to slash post slash the slug of it, which
17545
11:26:25,560 --> 11:26:28,520
we can get from like this.
17546
11:26:28,520 --> 11:26:32,480
And we'll be having not the post, DB post, the newer one,
17547
11:26:32,480 --> 11:26:34,120
DB post.
17548
11:26:34,120 --> 11:26:36,360
And we'll get a dot dollar ID.
17549
11:26:36,360 --> 11:26:37,520
There we go.
17550
11:26:37,520 --> 11:26:38,320
Nice and easy.
17551
11:26:38,320 --> 11:26:40,640
Keep on talking, keep on writing the code.
17552
11:26:40,640 --> 11:26:42,680
That makes life so much easier.
17553
11:26:42,680 --> 11:26:45,800
OK, this is the part where we have the post.
17554
11:26:45,800 --> 11:26:48,320
What about when we don't have the post?
17555
11:26:48,320 --> 11:26:50,240
In that case, we'll go with the else part.
17556
11:26:50,240 --> 11:26:52,720
That means we are creating a fresh post.
17557
11:26:52,720 --> 11:26:55,160
So let's upload the file first.
17558
11:26:55,160 --> 11:26:56,080
Go like this.
17559
11:26:56,080 --> 11:26:59,320
File, await, no, question.
17560
11:26:59,320 --> 11:27:03,200
Like this, await, and then app write service.
17561
11:27:03,200 --> 11:27:06,520
Please help me to upload a file.
17562
11:27:06,520 --> 11:27:08,080
OK, how do we upload a file?
17563
11:27:08,160 --> 11:27:13,480
By extracting it from data dot data dot image.
17564
11:27:13,480 --> 11:27:16,560
And out of that image, the first value, which is the path,
17565
11:27:16,560 --> 11:27:19,800
once you have uploaded that, then what should I do next?
17566
11:27:19,800 --> 11:27:25,200
If I have the file, let's get that field properly set.
17567
11:27:25,200 --> 11:27:26,200
Let's use this.
17568
11:27:26,200 --> 11:27:29,000
If I have file, then what I want to do
17569
11:27:29,000 --> 11:27:34,880
is I want to create a field ID, a file ID, sorry, field ID,
17570
11:27:34,880 --> 11:27:42,240
file ID as file dot dollar ID.
17571
11:27:42,240 --> 11:27:45,800
And then inside this data that I have access,
17572
11:27:45,800 --> 11:27:49,680
I will create a new field, which is featured image, which
17573
11:27:49,680 --> 11:27:52,240
will have this one, file ID.
17574
11:27:52,240 --> 11:27:54,120
Could have done that in one line as well,
17575
11:27:54,120 --> 11:27:56,960
but I'm more comfortable with this one.
17576
11:27:56,960 --> 11:27:58,920
Now that you have all the data, you
17577
11:27:58,920 --> 11:28:01,200
have also the access to featured image, which
17578
11:28:01,200 --> 11:28:02,680
you uploaded first.
17579
11:28:02,680 --> 11:28:04,120
Let's create a new post.
17580
11:28:04,200 --> 11:28:11,440
So obviously, I'll say await app write service dot create post.
17581
11:28:11,440 --> 11:28:13,120
Provide me all the data that you have.
17582
11:28:13,120 --> 11:28:15,920
So first of all, let's give it all the data
17583
11:28:15,920 --> 11:28:20,200
by destructuring it, and then also give it a user ID.
17584
11:28:20,200 --> 11:28:23,240
A user ID can be given to you by simply user data.
17585
11:28:23,240 --> 11:28:26,040
Remember, we have access to it in every component.
17586
11:28:26,040 --> 11:28:32,480
And we can actually have a user data dot dollar ID.
17587
11:28:32,480 --> 11:28:34,120
That's how you grab the ID.
17588
11:28:34,120 --> 11:28:35,880
OK, now once you have done that, let's
17589
11:28:35,880 --> 11:28:37,080
store that into a variable.
17590
11:28:37,080 --> 11:28:40,640
Let's call this one as DB post.
17591
11:28:40,640 --> 11:28:44,120
OK, once this is done, that means DB post is created.
17592
11:28:44,120 --> 11:28:48,320
Now inside this, I want to check for another condition.
17593
11:28:48,320 --> 11:28:55,120
If by this time the DB post is being created, let's navigate.
17594
11:28:55,120 --> 11:28:57,920
Navigate, where do you want to navigate to?
17595
11:28:57,920 --> 11:29:01,240
We want to navigate to slash post to the newer.
17596
11:29:01,240 --> 11:29:06,440
There's only one post ID that we have, which is DB DB post.
17597
11:29:06,440 --> 11:29:09,200
We need to use variables.
17598
11:29:09,200 --> 11:29:11,880
We need to have DB post.
17599
11:29:11,880 --> 11:29:14,480
And we'll extract the ID out of it.
17600
11:29:14,480 --> 11:29:17,400
All right, so this is not too much,
17601
11:29:17,400 --> 11:29:20,360
but you need to be very careful with what you are doing.
17602
11:29:20,360 --> 11:29:24,960
That's why I always say don't code with the mouth shut.
17603
11:29:24,960 --> 11:29:28,120
Always code by thinking of it.
17604
11:29:28,120 --> 11:29:30,800
You can do one by one step by step all these process.
17605
11:29:30,840 --> 11:29:32,920
This is almost kind of a standard practice.
17606
11:29:32,920 --> 11:29:34,400
We always upload the files first.
17607
11:29:34,400 --> 11:29:37,400
We usually create helpers for them, upload the file,
17608
11:29:37,400 --> 11:29:40,400
get back the URL of the file, set your object properly,
17609
11:29:40,400 --> 11:29:42,480
and then use helper files to upload the file,
17610
11:29:42,480 --> 11:29:46,160
create the files, create the post, whatever you want to do.
17611
11:29:46,160 --> 11:29:49,400
Quite an intensive video in itself, I would say that.
17612
11:29:49,400 --> 11:29:52,840
And definitely took us a little bit while, well over one hour
17613
11:29:52,840 --> 11:29:55,000
onto this video, but I think it's good enough.
17614
11:29:55,000 --> 11:29:58,320
And that's majorly it, what we wanted to do.
17615
11:29:58,320 --> 11:30:00,280
Now it's time that we actually assemble
17616
11:30:00,440 --> 11:30:03,280
all of our components and start debugging them one by one.
17617
11:30:03,280 --> 11:30:04,880
Obviously there are mistakes in it,
17618
11:30:04,880 --> 11:30:06,000
but we'll figure them out.
17619
11:30:06,000 --> 11:30:07,600
Let's catch up in the next video.
17620
11:30:10,440 --> 11:30:12,000
Hey there everyone, Hithai Sheer,
17621
11:30:12,000 --> 11:30:13,640
back again with another video.
17622
11:30:13,640 --> 11:30:16,520
And in this video, we're going to continue our journey.
17623
11:30:16,520 --> 11:30:18,000
We'll create two more components,
17624
11:30:18,000 --> 11:30:20,080
which is sign up and the login.
17625
11:30:20,080 --> 11:30:22,360
Now this could be done either in the pages
17626
11:30:22,360 --> 11:30:24,840
or in the component, both are absolutely correct.
17627
11:30:24,840 --> 11:30:26,640
I prefer to do it in the component,
17628
11:30:26,640 --> 11:30:29,120
so that in the page, I just have to load one component
17629
11:30:29,120 --> 11:30:31,320
and that's it, it brings all the functionality,
17630
11:30:31,320 --> 11:30:32,520
but it's totally your choice.
17631
11:30:32,520 --> 11:30:34,200
Maybe you want to just keep the components
17632
11:30:34,200 --> 11:30:35,840
as purely just the UI part.
17633
11:30:35,840 --> 11:30:38,760
I want to keep it as both the logic and the UI part,
17634
11:30:38,760 --> 11:30:40,120
totally your decision.
17635
11:30:40,120 --> 11:30:42,400
Now, once we are done with the login and sign up,
17636
11:30:42,400 --> 11:30:44,160
then we'll be working on the posts
17637
11:30:44,160 --> 11:30:46,000
because there are many posts,
17638
11:30:46,000 --> 11:30:48,160
which will be available in the post page.
17639
11:30:48,160 --> 11:30:50,000
So basically we'll be making a query,
17640
11:30:50,000 --> 11:30:52,560
we'll get the data and we'll be just passing on
17641
11:30:52,560 --> 11:30:55,120
to another component so that it can loop through it.
17642
11:30:55,120 --> 11:30:57,920
Let me just share the screen, it will be much more easier.
17643
11:30:57,960 --> 11:30:59,880
Hope you recovered well from the last video,
17644
11:30:59,880 --> 11:31:01,480
it was quite intense.
17645
11:31:01,480 --> 11:31:04,760
And that video requires you to spend at least one or two day
17646
11:31:04,760 --> 11:31:07,760
with the documentation of React hook form,
17647
11:31:07,760 --> 11:31:10,000
understand it better or probably repeat that,
17648
11:31:10,000 --> 11:31:12,200
that always helps to understand code more.
17649
11:31:12,200 --> 11:31:13,320
The more you see the code,
17650
11:31:13,320 --> 11:31:14,720
the more you read the documentation,
17651
11:31:14,720 --> 11:31:16,680
it gets much more clear with that.
17652
11:31:16,680 --> 11:31:18,880
Over the time, things requires reputations,
17653
11:31:18,880 --> 11:31:20,880
so that's why I highly, highly recommend
17654
11:31:20,880 --> 11:31:24,080
that once you are done with this series,
17655
11:31:24,080 --> 11:31:27,520
go it again for one more time, that will surely help you.
17656
11:31:28,520 --> 11:31:30,720
Let me share the screen and let me walk you through
17657
11:31:30,720 --> 11:31:32,720
that how and where we are going to work through.
17658
11:31:32,720 --> 11:31:35,360
So this is the docs, I still read it to this day
17659
11:31:35,360 --> 11:31:37,800
and there's always something more interesting
17660
11:31:37,800 --> 11:31:39,080
going on in here.
17661
11:31:39,080 --> 11:31:41,160
Now, one thing that we are not going to focus
17662
11:31:41,160 --> 11:31:42,680
in this video is this part.
17663
11:31:42,680 --> 11:31:44,880
We have already seen that how we can register
17664
11:31:44,880 --> 11:31:47,520
any input field with the React hook form
17665
11:31:47,520 --> 11:31:50,560
by this method and then everything is available in the data
17666
11:31:50,560 --> 11:31:52,800
and that's why we have this data available.
17667
11:31:52,800 --> 11:31:56,880
So register form states and watch and handle submit
17668
11:31:56,880 --> 11:31:58,680
and whatnot, this is the data.
17669
11:31:58,680 --> 11:32:00,320
So this is what we are having.
17670
11:32:00,320 --> 11:32:02,480
All right, so we'll not worry on that part,
17671
11:32:02,480 --> 11:32:05,600
rest of the part we will walk through again.
17672
11:32:05,600 --> 11:32:08,680
Okay, so first of all, let's go into components,
17673
11:32:08,680 --> 11:32:11,880
right click and new and this will be our first,
17674
11:32:11,880 --> 11:32:13,800
let's start with the signup.
17675
11:32:14,920 --> 11:32:19,040
Come on, write that, signup.jsx.
17676
11:32:21,600 --> 11:32:24,040
Okay, so what goes into the signup?
17677
11:32:24,040 --> 11:32:26,840
First of all, let's do rfce to get
17678
11:32:26,840 --> 11:32:28,560
a React functional component.
17679
11:32:28,560 --> 11:32:30,880
Now in this one, since this is a signup,
17680
11:32:30,880 --> 11:32:34,640
we definitely 100% requires the auth service.
17681
11:32:34,640 --> 11:32:36,760
So let's go ahead and grab the auth service.
17682
11:32:38,280 --> 11:32:41,600
Auth service and that obviously is going to come
17683
11:32:41,600 --> 11:32:44,800
from one directory back inside the app right
17684
11:32:44,800 --> 11:32:46,200
and inside the auth.
17685
11:32:46,200 --> 11:32:47,920
So that's our app service.
17686
11:32:47,920 --> 11:32:50,560
We'll also be using some of the links in this one,
17687
11:32:50,560 --> 11:32:53,160
we'll navigate the user forcefully once this is done,
17688
11:32:53,160 --> 11:32:56,160
signup will either redirect him into the application
17689
11:32:56,160 --> 11:32:59,320
or to login page, but that is going to be required.
17690
11:32:59,320 --> 11:33:02,400
Let's go ahead and grab link and navigate,
17691
11:33:02,400 --> 11:33:06,840
rather use navigate, use navigate.
17692
11:33:08,520 --> 11:33:09,880
Come on, navigate.
17693
11:33:10,880 --> 11:33:14,480
And these are going to come from React Router Dom.
17694
11:33:14,480 --> 11:33:18,120
All right, we also will be using React, that is obvious.
17695
11:33:18,120 --> 11:33:21,480
We will be managing some of the states as well.
17696
11:33:21,480 --> 11:33:23,040
I'll walk you through not too much states
17697
11:33:23,560 --> 11:33:26,480
because we'll be dependent majorly on the React hook form,
17698
11:33:26,480 --> 11:33:28,440
but still there is a place we'll be using it.
17699
11:33:28,440 --> 11:33:29,880
I'll walk you through with that.
17700
11:33:29,880 --> 11:33:32,800
All right, so this is the all and obviously we'll be needing
17701
11:33:32,800 --> 11:33:35,160
some of the buttons and all these basic components.
17702
11:33:35,160 --> 11:33:37,640
So let's go ahead and grab a button
17703
11:33:37,640 --> 11:33:40,080
and that button is going to come up from,
17704
11:33:41,000 --> 11:33:44,640
we need to go in the same and the button.jsx.
17705
11:33:44,640 --> 11:33:46,560
We need input and logo as well.
17706
11:33:47,920 --> 11:33:52,920
So import, input, come on.
17707
11:33:53,760 --> 11:33:57,560
Input from the same current directory that we are.
17708
11:33:57,560 --> 11:34:00,920
Just grab input and the logo as well.
17709
11:34:00,920 --> 11:34:02,400
Although there's nothing in our logo,
17710
11:34:02,400 --> 11:34:05,120
but still we'll just import this.
17711
11:34:05,120 --> 11:34:09,800
Logo from dot slash logo.
17712
11:34:09,800 --> 11:34:11,280
All right, so components are there
17713
11:34:11,280 --> 11:34:15,240
and obviously we'll be requesting some of the features.
17714
11:34:15,240 --> 11:34:16,280
We'll be using use form.
17715
11:34:16,280 --> 11:34:17,640
So let's bring them as well.
17716
11:34:18,520 --> 11:34:20,760
First one, use form because I'll be using
17717
11:34:20,760 --> 11:34:23,560
this left and right, use form.
17718
11:34:24,520 --> 11:34:29,520
And that is going to come up from React hook form.
17719
11:34:30,040 --> 11:34:32,840
And a little bit Redux also is required.
17720
11:34:32,840 --> 11:34:35,680
Mainly use dispatch because I'll be dispatching
17721
11:34:35,680 --> 11:34:37,440
some of the actions.
17722
11:34:37,440 --> 11:34:42,440
Dispatch and that dispatch is from React Redux.
17723
11:34:45,520 --> 11:34:48,000
All right, quite a lot of stuff that we have imported,
17724
11:34:48,000 --> 11:34:50,120
but that's good, we got this one.
17725
11:34:50,120 --> 11:34:51,560
Now let's see how we're going to do that.
17726
11:34:51,560 --> 11:34:55,080
First of all, the easiest part is to use the use navigate.
17727
11:34:55,080 --> 11:34:56,440
So I think let's do that.
17728
11:34:56,440 --> 11:35:01,040
Easy part, I always love to do first, navigate.
17729
11:35:01,040 --> 11:35:05,800
And that simply says, use navigate.
17730
11:35:05,800 --> 11:35:08,280
There we go, that's it, easy part done.
17731
11:35:08,280 --> 11:35:10,600
Let's create a state for the errors.
17732
11:35:10,600 --> 11:35:13,320
And that's the reason why we are using use a state.
17733
11:35:13,320 --> 11:35:15,240
Because right now the form, all the form
17734
11:35:15,240 --> 11:35:18,160
has the capability to handle the errors as well.
17735
11:35:18,160 --> 11:35:20,000
There are validations and whatnot
17736
11:35:20,760 --> 11:35:22,640
and all of that, like there is a specific dedicated
17737
11:35:22,640 --> 11:35:24,760
how to handle the errors as well.
17738
11:35:24,760 --> 11:35:27,240
But I think I'll handle them better in the state.
17739
11:35:27,240 --> 11:35:30,040
So I'll just use the state in this one.
17740
11:35:30,040 --> 11:35:33,600
Error and that will be set, error.
17741
11:35:33,600 --> 11:35:37,080
And for this, we'll be using use state.
17742
11:35:37,080 --> 11:35:40,600
And by default, there will be nothing, no errors at all.
17743
11:35:40,600 --> 11:35:42,200
We'll be also using the dispatch.
17744
11:35:42,200 --> 11:35:44,280
So easy part, just like navigate,
17745
11:35:44,280 --> 11:35:46,840
let's go ahead and use dispatch.
17746
11:35:46,840 --> 11:35:49,240
And that will be coming up from use dispatch.
17747
11:35:49,240 --> 11:35:52,360
So that whenever we want, we can just now use it.
17748
11:35:52,360 --> 11:35:54,560
All right, now the next thing is
17749
11:35:54,560 --> 11:35:57,760
that we obviously will be registering the user.
17750
11:35:57,760 --> 11:36:00,800
So for registering the user, we need to use the use form.
17751
11:36:00,800 --> 11:36:02,880
So I'll just go ahead and say const
17752
11:36:02,880 --> 11:36:05,520
and we'll be saying register.
17753
11:36:05,520 --> 11:36:09,440
And then there is handle submit.
17754
11:36:11,280 --> 11:36:14,560
And this will be use form.
17755
11:36:15,580 --> 11:36:17,480
All right, I hope now by this point,
17756
11:36:17,520 --> 11:36:20,120
you understand the part that register is something
17757
11:36:20,120 --> 11:36:23,080
which is what we use for dot dot dot register.
17758
11:36:23,080 --> 11:36:24,000
I guess that one.
17759
11:36:24,000 --> 11:36:27,960
And handle submit is the method by which we actually pass up.
17760
11:36:27,960 --> 11:36:31,000
So anytime you use something like this handle submit,
17761
11:36:31,000 --> 11:36:34,960
anytime you use the form, the React hook form,
17762
11:36:34,960 --> 11:36:37,720
you cannot just directly pass on on submit.
17763
11:36:37,720 --> 11:36:40,120
You have to have to go through with the handle submit,
17764
11:36:40,120 --> 11:36:42,240
which further takes a function of on submit.
17765
11:36:42,240 --> 11:36:46,200
And that's how basically it controls the entire form.
17766
11:36:46,200 --> 11:36:47,520
So keep that in mind.
17767
11:36:47,520 --> 11:36:49,320
Really sometimes when you create this,
17768
11:36:49,320 --> 11:36:51,720
it's easy to actually forget that.
17769
11:36:51,720 --> 11:36:54,040
Okay, so this is the basic.
17770
11:36:54,040 --> 11:36:56,040
Now how we're going to create the user
17771
11:36:56,040 --> 11:36:58,800
because handle submit requires a method to be passed on.
17772
11:36:58,800 --> 11:37:00,400
We'll call this one as create.
17773
11:37:00,400 --> 11:37:02,160
You can call this one as create user,
17774
11:37:02,160 --> 11:37:03,480
create user on app, right?
17775
11:37:03,480 --> 11:37:05,260
Totally your choice how you do it.
17776
11:37:05,260 --> 11:37:09,160
I'm gonna call this one as simply create, create.
17777
11:37:09,160 --> 11:37:11,920
And this one will be a sync operation.
17778
11:37:11,920 --> 11:37:14,080
And this one is going to take data.
17779
11:37:14,080 --> 11:37:16,320
Data obviously will come from the React hook forms.
17780
11:37:16,320 --> 11:37:17,320
There we go.
17781
11:37:17,320 --> 11:37:19,840
Now, first and foremost that what we're going to do,
17782
11:37:19,840 --> 11:37:21,200
as soon as somebody clicks that,
17783
11:37:21,200 --> 11:37:24,320
we are going to use set error to set the error
17784
11:37:24,320 --> 11:37:27,640
or to reset the error basically to onto the initial state.
17785
11:37:27,640 --> 11:37:30,120
Now let's go ahead and use a try catch.
17786
11:37:30,120 --> 11:37:31,560
The catch part is easy.
17787
11:37:31,560 --> 11:37:33,920
The catch part, we can just go ahead and say set error.
17788
11:37:33,920 --> 11:37:37,840
We can use the state and we can say, hey, error,
17789
11:37:37,840 --> 11:37:39,120
give me your message.
17790
11:37:40,520 --> 11:37:43,600
That's it, super easy to handle in the try part.
17791
11:37:44,040 --> 11:37:46,140
In the try part, we'll await obviously
17792
11:37:46,140 --> 11:37:47,620
because that takes time.
17793
11:37:47,620 --> 11:37:49,880
And we are going to use a service from the app, right?
17794
11:37:49,880 --> 11:37:51,840
So let's call this one as auth service.
17795
11:37:51,840 --> 11:37:53,280
That's what we called it.
17796
11:37:53,280 --> 11:37:56,320
And from this, we are going to use the create account
17797
11:37:56,320 --> 11:37:58,000
and we'll be passing on the data.
17798
11:37:58,000 --> 11:37:59,000
That's it.
17799
11:37:59,000 --> 11:38:01,120
Now let's hold this into a variable.
17800
11:38:01,120 --> 11:38:06,120
Let's call this one as const user data.
17801
11:38:07,800 --> 11:38:12,440
Once this is completed, then if we have the user data,
17802
11:38:12,480 --> 11:38:15,440
then we can actually invoke a dispatch
17803
11:38:15,440 --> 11:38:18,040
to save all of this data in our Redux.
17804
11:38:18,040 --> 11:38:19,920
Otherwise, the error is there.
17805
11:38:19,920 --> 11:38:21,800
So let's validate this.
17806
11:38:21,800 --> 11:38:26,800
If we have user data, then we can simply go ahead and say,
17807
11:38:27,600 --> 11:38:30,460
let's go ahead and get the current user.
17808
11:38:30,460 --> 11:38:31,760
How can we get the current user?
17809
11:38:31,760 --> 11:38:32,920
It's pretty simple actually.
17810
11:38:32,920 --> 11:38:35,120
You can use auth service again.
17811
11:38:35,120 --> 11:38:39,480
And from this, you can run the method of get current user
17812
11:38:39,560 --> 11:38:41,040
just like this.
17813
11:38:41,040 --> 11:38:42,320
And you will be having the access
17814
11:38:42,320 --> 11:38:43,720
to whoever is the current user.
17815
11:38:43,720 --> 11:38:45,120
This operation might take some time.
17816
11:38:45,120 --> 11:38:47,000
So let's go ahead and use an await.
17817
11:38:47,000 --> 11:38:50,160
In fact, I missed a couple of places await.
17818
11:38:50,160 --> 11:38:51,080
And if you find them,
17819
11:38:51,080 --> 11:38:53,160
just go ahead and add await for that.
17820
11:38:53,160 --> 11:38:56,120
All of the upright operations should be awaited.
17821
11:38:56,120 --> 11:38:59,680
Okay, let's go ahead and say further down.
17822
11:38:59,680 --> 11:39:01,680
We can call this one as user data, no problem.
17823
11:39:01,680 --> 11:39:03,600
We are inside the if block.
17824
11:39:03,600 --> 11:39:05,720
Okay, now if we have user data,
17825
11:39:06,720 --> 11:39:11,200
if we have user data at this point,
17826
11:39:11,200 --> 11:39:13,000
which is our current user,
17827
11:39:13,000 --> 11:39:14,960
we'll go ahead and fire up a dispatch.
17828
11:39:14,960 --> 11:39:17,280
I don't think we need this one.
17829
11:39:17,280 --> 11:39:18,840
We'll just do it a single line.
17830
11:39:20,080 --> 11:39:23,440
We'll say dispatch, what event do you want to dispatch?
17831
11:39:23,440 --> 11:39:25,760
I want to dispatch a login event.
17832
11:39:25,760 --> 11:39:30,720
And the login event is going to be coming up with the data.
17833
11:39:30,720 --> 11:39:33,920
So I'll just go ahead and say user data.
17834
11:39:33,920 --> 11:39:34,760
So that's it.
17835
11:39:34,760 --> 11:39:36,640
Fixing it up all in the user data.
17836
11:39:37,560 --> 11:39:39,280
Did we brought in the login?
17837
11:39:41,880 --> 11:39:44,400
I think we didn't brought the login.
17838
11:39:46,360 --> 11:39:48,560
Doesn't look like, let's bring the login.
17839
11:39:49,960 --> 11:39:52,800
Import, and we want to bring in the login.
17840
11:39:54,200 --> 11:39:56,640
Come on, write that.
17841
11:39:58,120 --> 11:40:01,240
Oh, looks like this is freezing.
17842
11:40:01,600 --> 11:40:04,920
Nope.
17843
11:40:04,920 --> 11:40:06,400
Oh, now it's working.
17844
11:40:06,400 --> 11:40:07,240
Keyboards.
17845
11:40:08,120 --> 11:40:11,400
And we will bring this up from,
17846
11:40:11,400 --> 11:40:14,080
let's go one directory back inside the store,
17847
11:40:14,080 --> 11:40:16,280
inside the auth slice.
17848
11:40:16,280 --> 11:40:18,000
This is where we want to bring the login.
17849
11:40:18,000 --> 11:40:20,720
And this is exactly the login that we are using in here.
17850
11:40:20,720 --> 11:40:22,040
Once this is all done,
17851
11:40:22,040 --> 11:40:25,040
let's force the user to navigate on the homepage.
17852
11:40:25,040 --> 11:40:26,840
Maybe if you want to navigate to some other place,
17853
11:40:26,840 --> 11:40:28,040
that's up to you.
17854
11:40:28,040 --> 11:40:30,120
I'll use navigate.
17855
11:40:30,160 --> 11:40:31,360
Where do you want to navigate?
17856
11:40:31,360 --> 11:40:34,280
I'll just go ahead and say navigate to slash.
17857
11:40:34,280 --> 11:40:35,720
All right, not a big deal.
17858
11:40:35,720 --> 11:40:38,880
That's all what we wanted to do for this part.
17859
11:40:38,880 --> 11:40:40,600
Now for this return part,
17860
11:40:40,600 --> 11:40:42,880
I'll just copy and paste and give you the entire code
17861
11:40:42,880 --> 11:40:45,520
because there is nothing more we are learning in this one.
17862
11:40:45,520 --> 11:40:47,120
So I'll just go ahead and copy paste.
17863
11:40:47,120 --> 11:40:49,960
All we are doing in this one is some flex box
17864
11:40:49,960 --> 11:40:51,280
and classes and all of that.
17865
11:40:51,280 --> 11:40:52,960
The important part we have already discussed
17866
11:40:52,960 --> 11:40:55,480
that whenever we want to have these input fields,
17867
11:40:55,480 --> 11:40:57,240
how to actually link them up.
17868
11:40:57,240 --> 11:40:59,520
So notice here, this is how we are linking them up.
17869
11:40:59,600 --> 11:41:01,720
We are saying dot dot dot register
17870
11:41:01,720 --> 11:41:04,760
and then the name field is being registered.
17871
11:41:04,760 --> 11:41:07,280
The email field is getting registered.
17872
11:41:07,280 --> 11:41:09,000
The password field is getting registered
17873
11:41:09,000 --> 11:41:12,800
and then a simple button which just says create account.
17874
11:41:12,800 --> 11:41:14,320
And once we have this one,
17875
11:41:14,320 --> 11:41:18,440
this form actually has, so notice here,
17876
11:41:18,440 --> 11:41:21,360
we have the errors being handled here at this point.
17877
11:41:21,360 --> 11:41:22,920
And notice here, the form is,
17878
11:41:22,920 --> 11:41:24,440
as soon as the form is being submitted,
17879
11:41:24,440 --> 11:41:25,720
we are using handle submit,
17880
11:41:25,720 --> 11:41:27,600
which comes from the React hook form
17881
11:41:27,600 --> 11:41:29,080
and we use the method create here.
17882
11:41:29,800 --> 11:41:32,160
And that's how we designed it.
17883
11:41:32,160 --> 11:41:35,080
The login is exactly same, almost exactly same.
17884
11:41:35,080 --> 11:41:37,560
So that would be a good exercise for you to repeat.
17885
11:41:37,560 --> 11:41:40,360
In case if you wish, you can pause the video right here
17886
11:41:40,360 --> 11:41:41,720
and try this out.
17887
11:41:41,720 --> 11:41:44,800
Again, it's not about all the time writing the live code.
17888
11:41:44,800 --> 11:41:47,560
It's also about how you understand the code
17889
11:41:47,560 --> 11:41:48,400
which is already written.
17890
11:41:48,400 --> 11:41:49,960
That's also a good practice.
17891
11:41:49,960 --> 11:41:52,200
So we just did that.
17892
11:41:52,200 --> 11:41:54,880
All right, so signup is ready almost as component.
17893
11:41:54,880 --> 11:41:56,920
Now we can go ahead and work on with another one,
17894
11:41:56,920 --> 11:41:57,960
which is the login.
17895
11:41:57,960 --> 11:42:01,400
Exactly same, nothing much to be differentiated there.
17896
11:42:01,400 --> 11:42:04,440
And let's call this one as login.jsx.
17897
11:42:05,760 --> 11:42:07,720
Okay, so rfce.
17898
11:42:07,720 --> 11:42:10,760
And again, this return part will be copying and pasting,
17899
11:42:10,760 --> 11:42:12,960
so nothing much more than that.
17900
11:42:12,960 --> 11:42:14,360
Let's go ahead and borrow some stuff
17901
11:42:14,360 --> 11:42:16,440
from the signup as well.
17902
11:42:16,440 --> 11:42:18,720
Okay, let's in fact borrow everything
17903
11:42:18,720 --> 11:42:21,120
because it's almost exactly same.
17904
11:42:21,120 --> 11:42:23,480
And let's go ahead and work on with this one.
17905
11:42:23,480 --> 11:42:26,120
Okay, instead of the login,
17906
11:42:26,120 --> 11:42:28,040
this one is actually login,
17907
11:42:28,040 --> 11:42:30,560
so we're using the login same.
17908
11:42:30,560 --> 11:42:32,400
Dispatch, we are going to require,
17909
11:42:32,400 --> 11:42:34,720
we are going to require auth service as well.
17910
11:42:34,720 --> 11:42:37,200
Button inputs, pretty much all of them
17911
11:42:37,200 --> 11:42:39,800
are going to be using just like this.
17912
11:42:39,800 --> 11:42:42,080
And we're going to use login here,
17913
11:42:42,080 --> 11:42:45,240
but this login might create some of the issues here.
17914
11:42:45,240 --> 11:42:49,000
So let's just rename this one as auth login.
17915
11:42:50,400 --> 11:42:53,920
Okay, makes the life a little bit easier, not much.
17916
11:42:53,920 --> 11:42:56,960
But I think the rest of them are pretty good
17917
11:42:56,960 --> 11:42:58,520
and pretty okay.
17918
11:42:59,720 --> 11:43:02,720
All right, let's see how we're going to deal with that.
17919
11:43:02,720 --> 11:43:05,520
First, the easy parts, let's go ahead and do that.
17920
11:43:05,520 --> 11:43:06,960
Const, navigate.
17921
11:43:09,080 --> 11:43:12,480
Navigate, that's going to become a from use.
17922
11:43:12,480 --> 11:43:15,640
Navigate, there we go, this is ready.
17923
11:43:15,640 --> 11:43:17,040
We need dispatch as well.
17924
11:43:17,040 --> 11:43:20,120
So we're going to say dispatch,
17925
11:43:20,120 --> 11:43:22,280
and that's going to come up from use.
17926
11:43:22,280 --> 11:43:24,880
Dispatch, just like that, easy part.
17927
11:43:24,880 --> 11:43:27,680
Then we need use form, so we'll be needing register,
17928
11:43:27,680 --> 11:43:30,280
of course, that always goes.
17929
11:43:30,280 --> 11:43:32,360
And we need to have handle, submit.
17930
11:43:34,440 --> 11:43:38,520
And that's going to come up from use form.
17931
11:43:38,520 --> 11:43:40,440
We have done that many times now.
17932
11:43:40,440 --> 11:43:41,560
Okay, what else?
17933
11:43:41,560 --> 11:43:42,920
We will be managing the errors,
17934
11:43:42,920 --> 11:43:45,160
so let's go ahead and use a state for that.
17935
11:43:45,160 --> 11:43:48,400
Error, set, error.
17936
11:43:48,400 --> 11:43:50,880
And that's going to come up from use state,
17937
11:43:50,960 --> 11:43:51,800
just like that.
17938
11:43:51,800 --> 11:43:54,200
By default, the errors are going to be empty.
17939
11:43:54,200 --> 11:43:56,880
Now we need to work on a method which says login.
17940
11:43:56,880 --> 11:43:58,760
How do we handle the login part?
17941
11:43:58,760 --> 11:44:03,120
Exactly same, nothing much different or difficult.
17942
11:44:03,120 --> 11:44:05,800
Let's go ahead and say const login.
17943
11:44:05,800 --> 11:44:06,920
We can say to login,
17944
11:44:06,920 --> 11:44:09,640
because now we have renamed this one as auth login.
17945
11:44:09,640 --> 11:44:11,360
In case you wish to call something else,
17946
11:44:11,360 --> 11:44:13,160
that's totally on you.
17947
11:44:13,160 --> 11:44:15,840
We'll say async, and this is going to say,
17948
11:44:15,840 --> 11:44:18,080
hey, give me all the data.
17949
11:44:18,080 --> 11:44:20,120
Call back just like this.
17950
11:44:20,120 --> 11:44:22,520
And first step is to set the error.
17951
11:44:22,520 --> 11:44:24,880
Very repetitive, very repetitive.
17952
11:44:24,880 --> 11:44:27,440
Let's go ahead and fire up a try catch.
17953
11:44:27,440 --> 11:44:29,360
The catch part is easy, as you all know.
17954
11:44:29,360 --> 11:44:31,840
We can just simply go ahead and set error,
17955
11:44:31,840 --> 11:44:34,040
and we'll say error.message.
17956
11:44:34,040 --> 11:44:36,600
And you might be thinking a pattern here, repetitive.
17957
11:44:36,600 --> 11:44:39,000
That's exactly what I want in the course itself,
17958
11:44:39,000 --> 11:44:42,000
that, hey, things are repeated and you can try them.
17959
11:44:42,000 --> 11:44:43,360
And once you build enough application,
17960
11:44:43,360 --> 11:44:45,160
you will figure out, I can build anything.
17961
11:44:45,160 --> 11:44:47,000
These are exactly the same thing.
17962
11:44:47,000 --> 11:44:48,680
It's just the way how we handle the data
17963
11:44:48,680 --> 11:44:49,880
and how we get that.
17964
11:44:50,880 --> 11:44:53,440
So what we're going to call this one and this one,
17965
11:44:53,440 --> 11:44:56,040
first of all, let's go ahead and use await.
17966
11:44:57,160 --> 11:45:00,280
And the await is going to utilize an auth service.
17967
11:45:01,200 --> 11:45:02,800
There we go, from the auth service,
17968
11:45:02,800 --> 11:45:06,120
we are going to use a method of login,
17969
11:45:06,120 --> 11:45:09,440
and we'll be providing all the data that you have.
17970
11:45:09,440 --> 11:45:11,000
Let's call this one as session.
17971
11:45:13,040 --> 11:45:14,840
Session, there we go.
17972
11:45:14,840 --> 11:45:15,800
Feel free to call it anything.
17973
11:45:15,800 --> 11:45:17,840
It doesn't really mean that you have to call it session.
17974
11:45:17,840 --> 11:45:19,720
I'm just saying that, hey, this is session.
17975
11:45:19,720 --> 11:45:23,600
Now, if we have the session or any data session,
17976
11:45:24,920 --> 11:45:26,000
if we have the session,
17977
11:45:26,000 --> 11:45:30,200
now, can I get a current user from the auth service?
17978
11:45:30,200 --> 11:45:33,320
Because if there is a session, the login was successful.
17979
11:45:33,320 --> 11:45:35,600
Technically, there should be a current user
17980
11:45:35,600 --> 11:45:37,200
that I'm able to grab.
17981
11:45:37,200 --> 11:45:41,440
So let's go ahead and say await auth service,
17982
11:45:41,440 --> 11:45:46,200
come on, not that, auth service dot get current user.
17983
11:45:46,200 --> 11:45:47,040
There we go.
17984
11:45:47,040 --> 11:45:49,120
If I get that and I hold that into a variable,
17985
11:45:49,120 --> 11:45:50,760
call this one as user data,
17986
11:45:50,760 --> 11:45:52,640
feel free to call it whatever you like.
17987
11:45:52,640 --> 11:45:56,920
If I have user data, then I can dispatch a login action.
17988
11:45:56,920 --> 11:45:58,040
So I can just go ahead and say,
17989
11:45:58,040 --> 11:46:03,040
if I have user data, then we can dispatch
17990
11:46:04,320 --> 11:46:05,840
and I can do that in one line.
17991
11:46:07,600 --> 11:46:09,640
I can go ahead and say dispatch.
17992
11:46:09,640 --> 11:46:11,440
What do you want to dispatch?
17993
11:46:11,440 --> 11:46:13,520
You might be thinking we'll be dispatched login,
17994
11:46:13,520 --> 11:46:15,320
but remember, we actually login
17995
11:46:15,320 --> 11:46:18,260
is now being known as auth login.
17996
11:46:18,260 --> 11:46:21,420
So just go ahead and call this one as auth login.
17997
11:46:21,420 --> 11:46:23,740
And auth login is a method
17998
11:46:23,740 --> 11:46:27,580
which we are going to pass on user data.
17999
11:46:27,580 --> 11:46:28,420
That's it.
18000
11:46:28,420 --> 11:46:31,100
And user data is being passed on, so that's all good.
18001
11:46:31,100 --> 11:46:35,740
Now let's redirect the user as well, navigate.
18002
11:46:35,740 --> 11:46:36,900
Where do you want to navigate?
18003
11:46:36,900 --> 11:46:39,100
Probably on slash, that's it.
18004
11:46:39,100 --> 11:46:41,260
So there we go, told you it's not really difficult.
18005
11:46:41,260 --> 11:46:43,860
At first, it looks difficult, but it is not very much.
18006
11:46:43,860 --> 11:46:45,500
And in the login page,
18007
11:46:45,500 --> 11:46:47,760
since we are using some of the tailwinds and other features,
18008
11:46:47,780 --> 11:46:49,560
that's why I'm just copy-pasting.
18009
11:46:49,560 --> 11:46:50,800
Otherwise, if you see that,
18010
11:46:50,800 --> 11:46:53,760
there is nothing big that we are doing in here.
18011
11:46:53,760 --> 11:46:56,760
So this whole thing at this point is nothing.
18012
11:46:56,760 --> 11:46:59,960
It's just hard-coded values, just HTML and CSS.
18013
11:46:59,960 --> 11:47:03,760
Even this portion till here, till this portion,
18014
11:47:03,760 --> 11:47:06,440
everything is just hard-coded CSS, nothing more.
18015
11:47:06,440 --> 11:47:07,840
Here we are handling the error.
18016
11:47:07,840 --> 11:47:09,020
If the error is present,
18017
11:47:09,020 --> 11:47:12,300
we are displaying the error in some red squiggly lines,
18018
11:47:12,300 --> 11:47:13,440
just like that.
18019
11:47:13,440 --> 11:47:15,280
And this is the form, this is the important part,
18020
11:47:15,280 --> 11:47:17,680
which we discussed in the last video quite a lot.
18021
11:47:18,440 --> 11:47:20,360
And we saw that how input could be registered
18022
11:47:20,360 --> 11:47:22,760
or could be binded with the use form
18023
11:47:22,760 --> 11:47:26,080
using this piece of code, which is nothing,
18024
11:47:26,080 --> 11:47:27,620
dot, dot, dot, register.
18025
11:47:27,620 --> 11:47:30,880
And we named this field as email required as true.
18026
11:47:30,880 --> 11:47:32,980
That is it, that is it.
18027
11:47:32,980 --> 11:47:35,200
This one is password field required, that's it.
18028
11:47:35,200 --> 11:47:37,540
And as soon as the form is submitted,
18029
11:47:37,540 --> 11:47:39,940
we have this form here.
18030
11:47:39,940 --> 11:47:42,680
We use handle submit, which comes from the React hook form.
18031
11:47:42,680 --> 11:47:45,440
We provide that method who is handling it actually.
18032
11:47:45,440 --> 11:47:47,000
And that's it, that's it.
18033
11:47:48,280 --> 11:47:50,740
Our component and everything is all done.
18034
11:47:50,740 --> 11:47:53,240
Now, one more thing that we are going to do in this video
18035
11:47:53,240 --> 11:47:55,900
is now moving on to the pages part,
18036
11:47:55,900 --> 11:47:57,960
because now almost all the components,
18037
11:47:57,960 --> 11:48:00,080
we have discussed that what we wanted to build.
18038
11:48:00,080 --> 11:48:02,400
Now let's work with the pages one by one.
18039
11:48:02,400 --> 11:48:05,120
And again, for the login and the signup page,
18040
11:48:05,120 --> 11:48:07,200
there is nothing, we'll be just importing the values,
18041
11:48:07,200 --> 11:48:09,960
but there is one page, which is post.
18042
11:48:09,960 --> 11:48:12,040
This is something interesting.
18043
11:48:12,040 --> 11:48:14,400
In the post, what we're going to do is,
18044
11:48:14,400 --> 11:48:16,320
we're going to grab some data,
18045
11:48:16,320 --> 11:48:20,920
and then we are going to simply kind of iterate
18046
11:48:20,920 --> 11:48:22,880
over the values, and there's a lot of stuff
18047
11:48:22,880 --> 11:48:25,840
that needs to go into this post as a page.
18048
11:48:25,840 --> 11:48:28,960
Let me show you one by one how we are dealing with this
18049
11:48:28,960 --> 11:48:30,520
and how we are working with this.
18050
11:48:32,120 --> 11:48:35,560
All right, so the reason why this one post page
18051
11:48:35,560 --> 11:48:39,560
that you see up there, yeah, there, is important,
18052
11:48:39,560 --> 11:48:42,400
because this requires a little bit more of knowledge
18053
11:48:42,400 --> 11:48:44,580
of how we are building this application.
18054
11:48:44,580 --> 11:48:46,300
The way how we are building our application
18055
11:48:46,300 --> 11:48:48,900
is we upload an image, no problem at all.
18056
11:48:48,900 --> 11:48:52,260
Then we use an editor, which we brought from TinyMCE.
18057
11:48:52,260 --> 11:48:54,580
That editor allows us to have an ordered list,
18058
11:48:54,580 --> 11:48:58,620
ordered list, and bold, italics, colors, all these things,
18059
11:48:58,620 --> 11:49:00,500
and save them in the database.
18060
11:49:00,500 --> 11:49:02,260
Now how it saves in the database?
18061
11:49:02,260 --> 11:49:07,220
It actually writes simple HTML with some inline elements
18062
11:49:07,220 --> 11:49:10,140
and inline style sheets, and just store that as a text
18063
11:49:10,140 --> 11:49:12,740
inside your database, that's how it works.
18064
11:49:12,740 --> 11:49:15,780
In fact, every single element that you see around,
18065
11:49:15,780 --> 11:49:16,900
which provides you VisiVic,
18066
11:49:16,900 --> 11:49:18,720
that's how they work and they save.
18067
11:49:18,720 --> 11:49:22,380
But the problem is that if you bring in just the pure HTML,
18068
11:49:22,380 --> 11:49:26,220
you cannot display the pure HTML in any React component.
18069
11:49:26,220 --> 11:49:27,820
So we need some more work to be done,
18070
11:49:27,820 --> 11:49:30,760
and in fact, we need a little bit of help from this.
18071
11:49:30,760 --> 11:49:32,860
So this is the package that is going to help,
18072
11:49:32,860 --> 11:49:35,420
which is a HTML React parser.
18073
11:49:36,500 --> 11:49:39,660
It's published three days ago, but it's pretty popular.
18074
11:49:39,660 --> 11:49:42,180
You can see the weekly downloads, it's pretty crazy.
18075
11:49:42,340 --> 11:49:45,140
What it does is now you can actually use a method parse
18076
11:49:45,140 --> 11:49:47,500
once you actually import that and install that.
18077
11:49:47,500 --> 11:49:51,600
And this is going to allow you to have HTML code,
18078
11:49:51,600 --> 11:49:53,940
and in fact, inline CSS as well.
18079
11:49:53,940 --> 11:49:56,540
And it works like this, react.createElement,
18080
11:49:56,540 --> 11:49:58,100
in case you saw the previous videos
18081
11:49:58,100 --> 11:50:00,380
where we discussed how React works internally,
18082
11:50:00,380 --> 11:50:02,140
how JSX works internally.
18083
11:50:02,140 --> 11:50:03,740
So this actually breaks down everything
18084
11:50:03,740 --> 11:50:06,100
and helps you to just work with that.
18085
11:50:06,100 --> 11:50:07,660
I found it really, really useful,
18086
11:50:07,660 --> 11:50:09,280
so that's why we are going to install this.
18087
11:50:09,280 --> 11:50:11,900
Let's go ahead and copy this and work with this.
18088
11:50:11,900 --> 11:50:15,500
And this will be super helpful for us in the post as well.
18089
11:50:15,500 --> 11:50:17,380
Let me go back.
18090
11:50:17,380 --> 11:50:19,960
And first, let's go ahead and install this.
18091
11:50:21,120 --> 11:50:23,300
Probably I'm not in the proper folder.
18092
11:50:23,300 --> 11:50:24,940
Let's go ahead and open up.
18093
11:50:27,500 --> 11:50:28,820
Okay.
18094
11:50:28,820 --> 11:50:30,640
Let's verify this one more time
18095
11:50:30,640 --> 11:50:34,580
that are we having installation properly or not?
18096
11:50:34,580 --> 11:50:37,340
So we have React, HTML React parser.
18097
11:50:37,340 --> 11:50:39,300
That's exactly what we want.
18098
11:50:39,300 --> 11:50:41,260
Now coming back onto the post page,
18099
11:50:41,260 --> 11:50:44,220
because rest of the things are pretty comparatively easy.
18100
11:50:44,220 --> 11:50:47,440
The singular page, how we display the singular page,
18101
11:50:47,440 --> 11:50:50,800
and the concept that only if you're author of the page,
18102
11:50:50,800 --> 11:50:53,060
then you have the ability to edit it
18103
11:50:53,060 --> 11:50:56,980
or to simply have a delete functionality.
18104
11:50:56,980 --> 11:50:58,800
That is also a little tricky, not too much,
18105
11:50:58,800 --> 11:51:02,060
but little bit something that we should explore together.
18106
11:51:02,060 --> 11:51:04,400
So we'll be needing React.
18107
11:51:04,400 --> 11:51:06,980
Obviously we'll be using useEffect.
18108
11:51:06,980 --> 11:51:08,520
Come on, write it.
18109
11:51:08,520 --> 11:51:13,520
UseEffect and we'll be using useState.
18110
11:51:15,920 --> 11:51:16,880
All right.
18111
11:51:16,880 --> 11:51:18,480
We'll be needing some of the elements
18112
11:51:18,480 --> 11:51:20,400
from React Router as well.
18113
11:51:20,400 --> 11:51:24,400
So we'll be needing them from React Router DOM.
18114
11:51:26,880 --> 11:51:27,720
Okay.
18115
11:51:27,720 --> 11:51:28,540
What do we need?
18116
11:51:28,540 --> 11:51:33,200
We need link, we need useNavigate,
18117
11:51:33,200 --> 11:51:35,560
and we need useParams.
18118
11:51:35,560 --> 11:51:36,640
That is the most important.
18119
11:51:36,640 --> 11:51:38,200
What is this useParams?
18120
11:51:38,640 --> 11:51:40,140
It's really simple.
18121
11:51:40,140 --> 11:51:42,520
Anything that you see in the URL,
18122
11:51:42,520 --> 11:51:44,800
you can actually grab the value of it
18123
11:51:44,800 --> 11:51:46,240
by using the useParams.
18124
11:51:46,240 --> 11:51:49,240
It's super simple, super easy to work on with this one.
18125
11:51:49,240 --> 11:51:51,260
We'll be needing app write service.
18126
11:51:53,520 --> 11:51:55,840
App write service.
18127
11:51:55,840 --> 11:51:56,680
Come on.
18128
11:51:57,720 --> 11:52:00,200
App write service.
18129
11:52:00,200 --> 11:52:03,440
If I can write that service, there we go.
18130
11:52:03,440 --> 11:52:06,420
And this one is going to come up from one directory back.
18131
11:52:06,420 --> 11:52:10,260
We'll go into app write and we'll go into config.
18132
11:52:10,260 --> 11:52:11,300
Okay, what else?
18133
11:52:11,300 --> 11:52:13,780
We need couple of components as well,
18134
11:52:13,780 --> 11:52:15,820
specifically the button and the container.
18135
11:52:16,820 --> 11:52:21,820
Import button from one directory back
18136
11:52:24,100 --> 11:52:25,700
component and the button.
18137
11:52:25,700 --> 11:52:27,380
We'll be needing container as well.
18138
11:52:28,960 --> 11:52:31,980
Container and that container will come
18139
11:52:31,980 --> 11:52:34,500
from one directory back inside the components,
18140
11:52:34,500 --> 11:52:38,140
inside the container, inside that we have this container.
18141
11:52:38,140 --> 11:52:40,920
Pretty long name, but we have that.
18142
11:52:40,920 --> 11:52:43,460
Most importantly, let's have parts
18143
11:52:43,460 --> 11:52:46,940
that is going to come up from the newly installed
18144
11:52:46,940 --> 11:52:51,940
HTML React parser, and let's also have the use selector.
18145
11:52:55,240 --> 11:52:58,380
I usually like to have all of them as I go as I need.
18146
11:52:58,380 --> 11:53:00,100
I just work with them, but I know these things
18147
11:53:00,100 --> 11:53:01,980
are going to come handy within a minute.
18148
11:53:01,980 --> 11:53:04,020
So I just know let's have them.
18149
11:53:04,060 --> 11:53:06,900
So React Redux, all right.
18150
11:53:06,900 --> 11:53:08,780
If we need anything else, we can just work with that.
18151
11:53:08,780 --> 11:53:10,380
Now how the post actually work,
18152
11:53:10,380 --> 11:53:13,660
this post especially in the page.
18153
11:53:13,660 --> 11:53:15,780
Now, if you are in the page, first of all,
18154
11:53:15,780 --> 11:53:19,200
let's create a state to handle the post.
18155
11:53:19,200 --> 11:53:21,400
So let's go ahead and say this is my post.
18156
11:53:21,400 --> 11:53:23,460
This one is going to be set post.
18157
11:53:24,360 --> 11:53:27,480
And that is going to come up from use state.
18158
11:53:29,100 --> 11:53:30,900
By default, let's call it as null.
18159
11:53:30,900 --> 11:53:32,820
There is nothing inside it.
18160
11:53:32,820 --> 11:53:36,020
Then what we need is we need to extract the slug.
18161
11:53:36,020 --> 11:53:39,900
So we say the slug, and the slug is going to come up
18162
11:53:39,900 --> 11:53:43,460
from use params, that's it.
18163
11:53:43,460 --> 11:53:45,120
One more thing you need to understand,
18164
11:53:45,120 --> 11:53:47,380
the reason why we are calling this one as slug,
18165
11:53:47,380 --> 11:53:49,220
that is something really important and useful
18166
11:53:49,220 --> 11:53:51,140
for interview perspectives as well.
18167
11:53:51,140 --> 11:53:54,300
If you go into main.jsx, notice here,
18168
11:53:54,300 --> 11:53:57,980
we are calling this one up here as colon slug.
18169
11:53:57,980 --> 11:54:02,800
This colon slug is the reason why I'm able to grab
18170
11:54:02,920 --> 11:54:04,360
a slug from the use params.
18171
11:54:04,360 --> 11:54:07,200
So keep that in mind, super important to know.
18172
11:54:07,200 --> 11:54:08,700
Let's also grab the navigate.
18173
11:54:09,920 --> 11:54:13,700
Const, navigate, navigate.
18174
11:54:14,800 --> 11:54:17,420
And that's going to come from use, navigate,
18175
11:54:17,420 --> 11:54:19,440
just like that, super easy.
18176
11:54:19,440 --> 11:54:22,880
Okay, now how can I grab the user data?
18177
11:54:22,880 --> 11:54:24,900
Okay, because why do we need user data?
18178
11:54:24,900 --> 11:54:29,080
Because if you are a user and you are author,
18179
11:54:29,080 --> 11:54:31,200
then we'll see that do you,
18180
11:54:31,200 --> 11:54:33,520
should you get the delete and the edit button?
18181
11:54:33,520 --> 11:54:36,300
First of all, let's grab the user data.
18182
11:54:36,300 --> 11:54:40,040
User data, and that can come to me
18183
11:54:40,040 --> 11:54:43,560
by using the use selector, simple react redux,
18184
11:54:43,560 --> 11:54:45,180
and we'll simply say state.
18185
11:54:46,960 --> 11:54:50,600
State.auth.userdata.
18186
11:54:52,480 --> 11:54:54,400
User data.
18187
11:54:54,400 --> 11:54:56,840
Okay, now I have the access to user data.
18188
11:54:56,840 --> 11:55:00,520
Now, how can I verify that this post is written
18189
11:55:00,520 --> 11:55:01,720
by you or not?
18190
11:55:01,720 --> 11:55:05,480
Because post is also storing a user ID,
18191
11:55:05,480 --> 11:55:08,480
and we can extract the user ID from the user data as well,
18192
11:55:08,480 --> 11:55:10,320
so we can match both of them.
18193
11:55:10,320 --> 11:55:12,960
So let's just say if we have the post,
18194
11:55:12,960 --> 11:55:14,600
because post might be null.
18195
11:55:14,600 --> 11:55:17,600
If the post is there, let's,
18196
11:55:17,600 --> 11:55:21,920
and we have the user data as well, user data,
18197
11:55:21,920 --> 11:55:26,920
then we can do something, otherwise we'll do something.
18198
11:55:26,920 --> 11:55:31,440
Okay, we want to check if you have post,
18199
11:55:31,440 --> 11:55:34,260
if you have user data, then we want to match it,
18200
11:55:34,260 --> 11:55:35,760
that will be a true part,
18201
11:55:35,760 --> 11:55:37,640
and otherwise it will be a false part.
18202
11:55:37,640 --> 11:55:39,360
So we'll say this as a false.
18203
11:55:40,280 --> 11:55:43,240
All right, how can we verify the true part?
18204
11:55:43,240 --> 11:55:46,480
The true part can be verified by simply comparing them.
18205
11:55:46,480 --> 11:55:51,480
So let's say post is going to have a field known as user ID.
18206
11:55:53,240 --> 11:55:55,740
Is it equals to the user data?
18207
11:55:57,760 --> 11:56:02,000
Which also has a field of ID, so dot dollar ID.
18208
11:56:02,000 --> 11:56:03,360
So if both of them match,
18209
11:56:03,360 --> 11:56:05,840
we'll be getting a result of true, otherwise false.
18210
11:56:05,840 --> 11:56:07,920
Let's store that into a variable.
18211
11:56:07,920 --> 11:56:12,320
So let's call this one as is author, and there we go.
18212
11:56:12,320 --> 11:56:14,160
Now we are checking for the condition,
18213
11:56:14,160 --> 11:56:16,800
if post is present, if user data is present,
18214
11:56:16,800 --> 11:56:20,560
then if they matches, that's great, that's true,
18215
11:56:20,560 --> 11:56:22,040
otherwise it's just a false.
18216
11:56:22,040 --> 11:56:24,120
So now we have an access of the field
18217
11:56:24,120 --> 11:56:27,240
that hey, this is how it works, and all of that.
18218
11:56:27,240 --> 11:56:30,120
Okay, now we want to do something
18219
11:56:30,120 --> 11:56:31,880
a little bit more onto that.
18220
11:56:31,880 --> 11:56:34,600
We want to work with how the delete post will work,
18221
11:56:34,600 --> 11:56:37,720
because deleting is interesting, okay.
18222
11:56:37,720 --> 11:56:39,720
Let's write a simple method for that.
18223
11:56:41,360 --> 11:56:45,120
Delete post, it's actually super simple,
18224
11:56:45,120 --> 11:56:47,000
that's why we are handling it first.
18225
11:56:47,000 --> 11:56:49,320
So how does a post gets deleted?
18226
11:56:49,320 --> 11:56:51,940
Really simple, you just query to app write.
18227
11:56:51,940 --> 11:56:56,340
So app write service has a method of delete file,
18228
11:56:56,340 --> 11:56:59,380
not delete file, delete post, yep.
18229
11:56:59,380 --> 11:57:01,340
You just have to provide the post ID to it,
18230
11:57:01,340 --> 11:57:05,100
and I can extract this from the post dot dollar ID.
18231
11:57:05,100 --> 11:57:08,620
So once I actually pass it on, I can use an await here,
18232
11:57:08,620 --> 11:57:12,180
or if you wish, I can use a dot then, just like this.
18233
11:57:12,180 --> 11:57:15,020
And if I receive a status,
18234
11:57:15,020 --> 11:57:17,620
then I can go ahead and delete the file as well,
18235
11:57:17,620 --> 11:57:19,540
because remember, we are not keeping the file
18236
11:57:19,540 --> 11:57:20,800
at the same time.
18237
11:57:20,840 --> 11:57:23,840
If the post is deleted, then let's go ahead and delete this.
18238
11:57:23,840 --> 11:57:25,640
So I'll fire a callback.
18239
11:57:27,800 --> 11:57:30,480
So in this case, if I receive that,
18240
11:57:30,480 --> 11:57:34,300
hey, the status is there, it gives me a status,
18241
11:57:34,300 --> 11:57:35,960
by the way, if you'll read the docs,
18242
11:57:35,960 --> 11:57:38,600
once anything is deleted, it gives you back a status.
18243
11:57:38,600 --> 11:57:43,100
So let's check in here, if the status is there,
18244
11:57:46,520 --> 11:57:49,040
if status is present, then I'll go ahead and delete that.
18245
11:57:49,040 --> 11:57:51,320
So we'll use app right service,
18246
11:57:51,320 --> 11:57:54,240
and we'll say delete file,
18247
11:57:54,240 --> 11:57:57,640
and still you have access to this post dot,
18248
11:57:57,640 --> 11:58:00,920
and this time extract featured image,
18249
11:58:02,040 --> 11:58:04,440
and now this image will be deleted.
18250
11:58:04,440 --> 11:58:07,200
If you wish, you can put an await on this one,
18251
11:58:07,200 --> 11:58:09,640
but if it does it in the behind the scene,
18252
11:58:09,640 --> 11:58:12,560
I'm really okay with that, and I can just navigate.
18253
11:58:14,560 --> 11:58:16,580
Totally up to you how you're designing your application.
18254
11:58:16,580 --> 11:58:18,000
If this is really important step,
18255
11:58:18,000 --> 11:58:20,000
you don't want to move it before this,
18256
11:58:20,000 --> 11:58:23,080
you can put an await onto this one, that's also fine.
18257
11:58:23,080 --> 11:58:24,400
Totally up to you that how you want
18258
11:58:24,400 --> 11:58:25,820
to design your application.
18259
11:58:26,920 --> 11:58:30,540
Okay, so far it's good, but there's one more thing.
18260
11:58:30,540 --> 11:58:32,800
We got this slug, but we are not using this slug,
18261
11:58:32,800 --> 11:58:34,800
because this is a post page.
18262
11:58:34,800 --> 11:58:38,560
Individual post should be loaded as soon as the page,
18263
11:58:38,560 --> 11:58:39,880
or somebody comes to this page,
18264
11:58:39,880 --> 11:58:42,920
or this page loads, or this component loads.
18265
11:58:42,920 --> 11:58:44,000
So yes, you guessed it right,
18266
11:58:44,000 --> 11:58:46,400
we'll be using something known as use effect
18267
11:58:46,400 --> 11:58:48,440
to actually do the exact same job.
18268
11:58:48,440 --> 11:58:50,600
Use effect, and there we go,
18269
11:58:50,600 --> 11:58:52,340
we'll be having our callback,
18270
11:58:53,320 --> 11:58:55,160
and we need a dependency array as well.
18271
11:58:55,160 --> 11:58:57,380
So this will be dependent on either the slug,
18272
11:58:57,380 --> 11:58:59,980
there's any change, or if somebody navigates here,
18273
11:58:59,980 --> 11:59:02,440
so we'll be running it on the both side.
18274
11:59:02,440 --> 11:59:04,440
Now, how do we grab a slug?
18275
11:59:04,440 --> 11:59:07,800
So if the slug is present, if we have slug,
18276
11:59:08,880 --> 11:59:11,800
then go ahead and just query the app write.
18277
11:59:11,800 --> 11:59:14,800
Hey app write, give me a post, so get post,
18278
11:59:14,800 --> 11:59:16,600
not posts, only one,
18279
11:59:16,600 --> 11:59:19,160
and for that you have to provide me a slug.
18280
11:59:19,160 --> 11:59:21,760
Let's use promises.then.
18281
11:59:21,760 --> 11:59:24,880
So if you get the post, let's go ahead and use a callback,
18282
11:59:24,880 --> 11:59:28,960
if you get a post, what do you want to do?
18283
11:59:28,960 --> 11:59:31,320
So if I get the post, I'll set the post,
18284
11:59:31,320 --> 11:59:36,320
if post is there, then I'll go ahead and say set post,
18285
11:59:41,380 --> 11:59:44,520
and in the post we'll be posting a post, too many posts.
18286
11:59:45,520 --> 11:59:47,000
What in the else case?
18287
11:59:47,000 --> 11:59:49,920
If we don't get this one, so in the else part,
18288
11:59:49,920 --> 11:59:52,780
we can just go ahead and say, let's navigate.
18289
11:59:53,840 --> 11:59:55,680
Let's navigate back onto the home
18290
11:59:55,680 --> 11:59:57,240
because I was not able to grab that,
18291
11:59:57,240 --> 11:59:59,460
so there is no point of loading anything.
18292
11:59:59,460 --> 12:00:02,560
So that's it, pretty easy, now we were able to grab it.
18293
12:00:02,560 --> 12:00:06,280
So delete post is pretty nice, nothing much we have to do.
18294
12:00:06,280 --> 12:00:08,840
Okay, now let's go ahead and work on with this one.
18295
12:00:08,840 --> 12:00:13,840
So return, I don't want to return anything just like this.
18296
12:00:14,040 --> 12:00:16,880
I want to return only in the case of post.
18297
12:00:16,880 --> 12:00:18,280
If the post is there,
18298
12:00:18,280 --> 12:00:20,600
then let's go ahead and do something,
18299
12:00:20,600 --> 12:00:23,400
otherwise you can go ahead and do something else.
18300
12:00:23,400 --> 12:00:25,880
What something else do you want to do?
18301
12:00:25,880 --> 12:00:28,280
You can put a message, couldn't find the post or something,
18302
12:00:28,280 --> 12:00:30,200
but I'll just go ahead and do a null
18303
12:00:30,200 --> 12:00:32,040
because rest of the things will be taken care
18304
12:00:32,040 --> 12:00:35,060
by my use effect, but totally up to you.
18305
12:00:35,060 --> 12:00:38,480
The reason why I'm actually explaining this so much
18306
12:00:38,480 --> 12:00:40,700
is so that you understand the flow of the application,
18307
12:00:40,700 --> 12:00:41,920
not just these memorized thing,
18308
12:00:41,920 --> 12:00:43,200
that we have to always do this.
18309
12:00:43,600 --> 12:00:45,840
It's your application, how you want to design it,
18310
12:00:45,840 --> 12:00:47,720
how you want to handle the edge cases,
18311
12:00:47,720 --> 12:00:49,400
this is how things are designed.
18312
12:00:49,400 --> 12:00:51,080
So that's why I'm actually mentioning all this
18313
12:00:51,080 --> 12:00:52,480
in such a detail.
18314
12:00:52,480 --> 12:00:54,040
Okay, let's go up here.
18315
12:00:54,040 --> 12:00:56,040
What do you want to do in this case?
18316
12:00:56,040 --> 12:00:57,560
I'll first have a simple div,
18317
12:00:57,560 --> 12:01:01,600
which will be having a class of py-8.
18318
12:01:01,600 --> 12:01:05,540
Okay, now inside this, let's open up a container.
18319
12:01:06,840 --> 12:01:09,000
Container, there we go.
18320
12:01:09,000 --> 12:01:10,880
Now inside this container,
18321
12:01:10,880 --> 12:01:13,520
we'll be having a simple div with just post an image.
18322
12:01:13,520 --> 12:01:15,560
So I'll just have a div
18323
12:01:15,560 --> 12:01:18,480
and we'll be having some of the class names onto this one.
18324
12:01:18,480 --> 12:01:20,360
Not really much interested in the classes
18325
12:01:20,360 --> 12:01:21,480
or writing in front of you.
18326
12:01:21,480 --> 12:01:24,560
I'll just copy and paste my classes, you get that.
18327
12:01:24,560 --> 12:01:27,960
Now, once you're into this div,
18328
12:01:27,960 --> 12:01:30,600
the first thing that we want to do is display an image.
18329
12:01:30,600 --> 12:01:31,980
Now, how do we display an image?
18330
12:01:31,980 --> 12:01:33,320
That's the question.
18331
12:01:33,320 --> 12:01:35,120
Again, we can use our JavaScript
18332
12:01:35,120 --> 12:01:38,480
and use app write for getting the image.
18333
12:01:38,480 --> 12:01:40,900
So we can use an app write service
18334
12:01:40,900 --> 12:01:43,960
and we can get a file preview.
18335
12:01:43,960 --> 12:01:46,320
To get a file preview, we can use the post,
18336
12:01:46,320 --> 12:01:49,200
which I already have for this particular page.
18337
12:01:49,200 --> 12:01:52,640
And from this, I can use the featured image.
18338
12:01:52,640 --> 12:01:54,680
There we go, we got our image.
18339
12:01:54,680 --> 12:01:57,560
Now in the alt, let's use post title, maybe.
18340
12:01:59,400 --> 12:02:03,480
We can simply say post.title, there we go.
18341
12:02:04,480 --> 12:02:05,680
And it looks good.
18342
12:02:05,680 --> 12:02:08,460
We have some of the class names as well into this one.
18343
12:02:09,300 --> 12:02:11,340
And the class name is just rounded XL.
18344
12:02:11,340 --> 12:02:13,100
Rounded dash XL.
18345
12:02:13,100 --> 12:02:15,020
All right, so the image part is all done
18346
12:02:15,020 --> 12:02:17,620
and this div looks great.
18347
12:02:17,620 --> 12:02:20,340
Now, we also need to display the content.
18348
12:02:20,340 --> 12:02:24,540
So just below this div, I'll open another div,
18349
12:02:24,540 --> 12:02:28,460
which also has a class of W dash full
18350
12:02:28,460 --> 12:02:32,400
and one more class of margin bottom dash six.
18351
12:02:32,400 --> 12:02:35,340
All right, so this is my second div.
18352
12:02:35,340 --> 12:02:36,820
And in this, I'll just do two things.
18353
12:02:36,860 --> 12:02:39,540
I'll display the title as well as the content.
18354
12:02:39,540 --> 12:02:40,660
Title is easy part.
18355
12:02:40,660 --> 12:02:42,660
There is nothing big deal on to this.
18356
12:02:42,660 --> 12:02:43,680
Again, one more.
18357
12:02:44,820 --> 12:02:47,780
Div, let's use an H1 directly.
18358
12:02:47,780 --> 12:02:49,220
I'll not get a div.
18359
12:02:49,220 --> 12:02:54,020
H1 dot text dash to XL.
18360
12:02:54,020 --> 12:02:54,860
Anything else?
18361
12:02:54,860 --> 12:02:55,700
Font bold.
18362
12:02:58,180 --> 12:02:59,140
Font bold.
18363
12:02:59,140 --> 12:03:00,460
Now, how can I display this?
18364
12:03:00,460 --> 12:03:01,460
Text, super easy.
18365
12:03:01,460 --> 12:03:05,180
Use your JavaScript and simply say post dot title.
18366
12:03:05,180 --> 12:03:06,660
Okay, no big deal.
18367
12:03:06,660 --> 12:03:08,420
But how can I display the content?
18368
12:03:08,420 --> 12:03:12,220
Because content is something where we have used editor
18369
12:03:12,220 --> 12:03:14,220
and editor is storing all of this.
18370
12:03:14,220 --> 12:03:17,220
So what we're going to do is in this case,
18371
12:03:17,220 --> 12:03:20,520
what we're going to do is let's use a div,
18372
12:03:20,520 --> 12:03:24,900
which will be having a class of browser dash CSS.
18373
12:03:24,900 --> 12:03:25,940
These are custom classes.
18374
12:03:25,940 --> 12:03:27,520
You can write them as well.
18375
12:03:27,520 --> 12:03:29,460
But the most important thing is user JavaScript,
18376
12:03:29,460 --> 12:03:31,060
but not ordinarily.
18377
12:03:31,060 --> 12:03:32,700
You have to use a parse,
18378
12:03:32,700 --> 12:03:35,500
which comes from the HTML react parser.
18379
12:03:35,500 --> 12:03:38,600
And in this, I have to say post dot content.
18380
12:03:40,260 --> 12:03:41,580
There we go.
18381
12:03:41,580 --> 12:03:42,900
Told you it's super easy.
18382
12:03:42,900 --> 12:03:44,100
Everything that we are storing,
18383
12:03:44,100 --> 12:03:46,720
this is all thanks to this parse,
18384
12:03:46,720 --> 12:03:49,020
which allows me to display the HTML content
18385
12:03:49,020 --> 12:03:50,260
and everything that's inside there.
18386
12:03:50,260 --> 12:03:53,800
So all of your formatting, like bold, italic, your colors,
18387
12:03:53,800 --> 12:03:56,020
everything is being parsed properly.
18388
12:03:56,020 --> 12:03:58,500
Now, one more thing that we have to do is,
18389
12:03:58,500 --> 12:04:00,900
okay, this part you understand nicely,
18390
12:04:00,900 --> 12:04:02,500
but there's one more thing.
18391
12:04:02,500 --> 12:04:04,280
Now, on top of this image,
18392
12:04:04,280 --> 12:04:06,140
I want to show the user that,
18393
12:04:06,140 --> 12:04:10,720
can you actually delete this post,
18394
12:04:10,720 --> 12:04:14,080
or can you just have an edit button, something like this,
18395
12:04:14,080 --> 12:04:16,280
delete post or edit post, something like this.
18396
12:04:16,280 --> 12:04:18,720
So for this, we'll optionally render something.
18397
12:04:18,720 --> 12:04:20,360
So here is my JavaScript,
18398
12:04:20,360 --> 12:04:23,520
and is author will give us a true or false.
18399
12:04:23,520 --> 12:04:26,280
And based on this, we will display this.
18400
12:04:26,280 --> 12:04:29,760
So let's use this one, just goes like this.
18401
12:04:29,760 --> 12:04:34,760
We'll simply have a div, which has absolute dash right
18402
12:04:39,160 --> 12:04:41,360
dash six.
18403
12:04:41,360 --> 12:04:43,680
And these are classes to keep it at the very right top.
18404
12:04:43,680 --> 12:04:45,120
That's it.
18405
12:04:45,120 --> 12:04:46,960
Top dash six.
18406
12:04:46,960 --> 12:04:48,200
So we have this div.
18407
12:04:48,200 --> 12:04:50,880
Now inside this div, we'll have a simple link.
18408
12:04:50,880 --> 12:04:54,800
The first one is going to allow the user to update this post.
18409
12:04:54,800 --> 12:04:56,340
How can I update that?
18410
12:04:56,340 --> 12:04:58,520
Super easy, nothing too much.
18411
12:04:58,520 --> 12:04:59,560
I'll have the link.
18412
12:05:00,560 --> 12:05:01,400
Okay.
18413
12:05:01,400 --> 12:05:03,440
The most important part in this link is too,
18414
12:05:03,440 --> 12:05:05,920
because this is something which does all the magic.
18415
12:05:05,920 --> 12:05:08,460
So I'll use a back text where I want to go.
18416
12:05:08,460 --> 12:05:13,460
I want to go to slash edit dash post.
18417
12:05:13,800 --> 12:05:15,080
And to edit any post,
18418
12:05:15,080 --> 12:05:17,400
I have to provide the slug after that, that's it.
18419
12:05:17,400 --> 12:05:20,960
So I'll just use a slash and we'll provide an ID
18420
12:05:20,960 --> 12:05:21,960
just like that.
18421
12:05:21,960 --> 12:05:24,680
Suppose to dot dollar ID, that's it.
18422
12:05:24,680 --> 12:05:27,200
Now you'll be redirected to slash edit post
18423
12:05:27,200 --> 12:05:29,760
and edit post we haven't yet handled,
18424
12:05:29,760 --> 12:05:31,520
but this will be handled here in the post.
18425
12:05:31,520 --> 12:05:32,360
So that's it.
18426
12:05:32,360 --> 12:05:34,640
All we have to do is just load all the things in the data.
18427
12:05:34,640 --> 12:05:35,760
That's it.
18428
12:05:35,760 --> 12:05:37,620
So this is the post that we have grabbed.
18429
12:05:37,620 --> 12:05:38,680
Okay.
18430
12:05:38,680 --> 12:05:41,400
The next thing is let's name this button as something.
18431
12:05:41,400 --> 12:05:45,080
So let's call this one as inside this,
18432
12:05:45,080 --> 12:05:46,280
let's give it a button.
18433
12:05:48,280 --> 12:05:50,360
The button component that we have designed
18434
12:05:50,360 --> 12:05:52,560
and let's call this one as edit.
18435
12:05:52,560 --> 12:05:54,720
We have some classes for this one as well.
18436
12:05:55,720 --> 12:05:56,960
All right.
18437
12:05:58,660 --> 12:06:00,400
Actually not the classes.
18438
12:06:00,400 --> 12:06:02,360
We have some of the properties onto this one.
18439
12:06:02,360 --> 12:06:04,000
So I'll just paste this.
18440
12:06:04,000 --> 12:06:05,440
So we have the background color green
18441
12:06:05,440 --> 12:06:07,160
and the class name just like this.
18442
12:06:07,160 --> 12:06:09,920
So one part is done that how this is being actually done
18443
12:06:09,920 --> 12:06:11,000
in design.
18444
12:06:11,000 --> 12:06:13,980
Similar to this, we also have a button.
18445
12:06:13,980 --> 12:06:16,240
This time not the link, but we need just a button.
18446
12:06:16,240 --> 12:06:19,600
So I'll just copy this, move outside of the link
18447
12:06:19,600 --> 12:06:22,160
and we'll also keep this one.
18448
12:06:22,160 --> 12:06:24,160
This one is going to be a delete button.
18449
12:06:25,640 --> 12:06:29,240
And this button will have a simple on click.
18450
12:06:29,240 --> 12:06:31,540
This one is going to be red.
18451
12:06:31,540 --> 12:06:32,500
That's fine.
18452
12:06:33,460 --> 12:06:34,300
Margin right.
18453
12:06:34,300 --> 12:06:37,880
We don't need this into this one margin right.
18454
12:06:37,880 --> 12:06:39,240
We just need one thing here.
18455
12:06:40,680 --> 12:06:41,520
On click.
18456
12:06:42,620 --> 12:06:44,900
Suggestions, no suggestions.
18457
12:06:46,160 --> 12:06:48,280
Anyways, on click just like this
18458
12:06:48,280 --> 12:06:50,840
and simply run delete post.
18459
12:06:50,840 --> 12:06:51,960
That's it.
18460
12:06:51,960 --> 12:06:54,100
Delete post already is handling things up here.
18461
12:06:54,100 --> 12:06:55,940
So I think that is good enough.
18462
12:06:55,940 --> 12:06:58,420
So this is something that is worth discussing
18463
12:06:58,420 --> 12:06:59,700
of how things are being done,
18464
12:06:59,700 --> 12:07:01,780
how you are able to parse these things.
18465
12:07:01,780 --> 12:07:04,060
I hope that gives you a little bit of extra knowledge
18466
12:07:04,060 --> 12:07:06,940
of how these professional applications are designed.
18467
12:07:06,940 --> 12:07:08,260
And once you understand this,
18468
12:07:08,260 --> 12:07:10,800
you can now build anything that you want basically.
18469
12:07:10,800 --> 12:07:12,900
Something that's storing the code part or anything.
18470
12:07:12,900 --> 12:07:15,020
You can just store them in using the editors
18471
12:07:15,020 --> 12:07:17,820
and using the parts you can just display them.
18472
12:07:17,820 --> 12:07:19,220
So that is it.
18473
12:07:19,220 --> 12:07:21,140
Quite a long journey about this one.
18474
12:07:21,140 --> 12:07:23,100
Still almost like half an hour.
18475
12:07:23,100 --> 12:07:25,500
But I hope this has helped you to understand a lot
18476
12:07:25,500 --> 12:07:27,460
about how applications are designed,
18477
12:07:27,460 --> 12:07:29,460
how the workflow of the application works
18478
12:07:29,460 --> 12:07:31,620
and you are building it along with me.
18479
12:07:31,620 --> 12:07:33,740
I highly recommend that once you watch these videos,
18480
12:07:33,740 --> 12:07:35,480
try to build them on your own.
18481
12:07:35,480 --> 12:07:38,060
If you need help, take help from my GitHub.
18482
12:07:38,060 --> 12:07:39,140
Not directly from the video,
18483
12:07:39,140 --> 12:07:41,180
but if you feel uncomfortable even after that,
18484
12:07:41,180 --> 12:07:43,780
then only take help from the videos itself.
18485
12:07:43,780 --> 12:07:44,660
That's it for this one.
18486
12:07:44,660 --> 12:07:46,220
Let's catch up in the next one.
18487
12:07:48,680 --> 12:07:49,520
Hey there everyone.
18488
12:07:49,520 --> 12:07:52,140
Hittai Sheer back again with another video.
18489
12:07:52,140 --> 12:07:54,940
And in this video, we'll try to finish our app.
18490
12:07:54,940 --> 12:07:56,700
It's almost done.
18491
12:07:56,700 --> 12:07:59,340
We don't have anything major that we want to explain
18492
12:07:59,340 --> 12:08:01,340
or we want to go through along with this.
18493
12:08:01,340 --> 12:08:03,460
Rest of them is just importing the component,
18494
12:08:03,460 --> 12:08:05,380
display them, that's pretty much it.
18495
12:08:05,380 --> 12:08:06,980
Only couple of things are remaining,
18496
12:08:06,980 --> 12:08:08,340
which I'll walk you through in this video.
18497
12:08:08,340 --> 12:08:09,600
So let's go ahead and do that.
18498
12:08:09,600 --> 12:08:11,140
And probably after that,
18499
12:08:11,140 --> 12:08:12,820
we might need some kind of debugging,
18500
12:08:12,820 --> 12:08:15,780
maybe some CSS is here and there, just minus stuff.
18501
12:08:15,780 --> 12:08:18,220
Nothing much to be worried about.
18502
12:08:18,220 --> 12:08:20,260
So one final thing to walk you through
18503
12:08:20,260 --> 12:08:22,500
with the flow of the code is something.
18504
12:08:22,500 --> 12:08:25,340
So let me share the screen and walk you through with that.
18505
12:08:25,340 --> 12:08:26,700
So this is our screen.
18506
12:08:26,700 --> 12:08:31,260
So in case you did notice that we have this post
18507
12:08:31,260 --> 12:08:32,780
and inside this in the last video,
18508
12:08:32,780 --> 12:08:35,360
we created this button which says edit,
18509
12:08:35,360 --> 12:08:38,440
which takes you to slash edit slash slug.
18510
12:08:38,440 --> 12:08:39,940
So in case you want to know,
18511
12:08:39,940 --> 12:08:42,300
you forgot about how that works.
18512
12:08:42,300 --> 12:08:44,320
We have this edit post slash slug
18513
12:08:44,320 --> 12:08:48,460
in which the edit post is going to be the page
18514
12:08:48,460 --> 12:08:49,900
that will be loaded.
18515
12:08:49,900 --> 12:08:51,860
So if I just go ahead and click on this,
18516
12:08:51,860 --> 12:08:54,220
this is something that we are importing from here.
18517
12:08:54,220 --> 12:08:55,760
So page is edit post.
18518
12:08:55,760 --> 12:08:58,160
So let's go into the edit post
18519
12:08:58,160 --> 12:09:00,720
and see how we can actually manage that.
18520
12:09:00,720 --> 12:09:02,700
So as you reach to the edit post,
18521
12:09:02,700 --> 12:09:04,420
the first thing that should come to your mind
18522
12:09:04,420 --> 12:09:06,660
is that I'm getting a slug
18523
12:09:06,660 --> 12:09:09,380
and I can extract that slug using use params
18524
12:09:09,380 --> 12:09:13,260
and I can use use effect to query the app right
18525
12:09:13,260 --> 12:09:14,220
to bring that post.
18526
12:09:14,220 --> 12:09:16,460
And that's exactly what you should be doing.
18527
12:09:16,460 --> 12:09:18,180
So let's go ahead and grab it.
18528
12:09:18,180 --> 12:09:19,140
I'll walk you through with the,
18529
12:09:19,220 --> 12:09:22,500
usually what I do is I just go up here and start writing.
18530
12:09:22,500 --> 12:09:23,900
So I need a post obviously.
18531
12:09:23,900 --> 12:09:26,340
So let's go ahead and work with the post
18532
12:09:26,340 --> 12:09:28,660
and that will be set post.
18533
12:09:28,660 --> 12:09:33,200
And usually I rely too much on the auto import statements,
18534
12:09:33,200 --> 12:09:34,540
just like this.
18535
12:09:34,540 --> 12:09:36,700
In some cases, it doesn't work automatically.
18536
12:09:36,700 --> 12:09:38,360
So I hate that part.
18537
12:09:38,360 --> 12:09:39,640
All right.
18538
12:09:39,640 --> 12:09:41,500
Next thing is we need to extract the slug.
18539
12:09:41,500 --> 12:09:44,420
So let's go ahead and grab our slug
18540
12:09:44,420 --> 12:09:48,260
and that slug is going to come up from use params.
18541
12:09:49,980 --> 12:09:51,540
It doesn't give me.
18542
12:09:51,540 --> 12:09:53,340
I hate it why it's not giving me suggestions.
18543
12:09:53,340 --> 12:09:54,720
In most cases it does,
18544
12:09:54,720 --> 12:09:56,940
but today it's not really happy with me.
18545
12:09:56,940 --> 12:09:59,460
Okay, so we need a use params.
18546
12:09:59,460 --> 12:10:01,300
So how we're going to get the use params,
18547
12:10:01,300 --> 12:10:02,860
that's the question.
18548
12:10:02,860 --> 12:10:04,660
I think that's from React Router DOM.
18549
12:10:04,660 --> 12:10:09,180
So use params, no suggestions.
18550
12:10:10,660 --> 12:10:15,320
Import from React Router DOM.
18551
12:10:15,320 --> 12:10:17,060
Did I made a mistake?
18552
12:10:17,060 --> 12:10:18,640
Yes.
18553
12:10:18,640 --> 12:10:20,620
Use params.
18554
12:10:20,620 --> 12:10:22,480
Yep, now it makes sense.
18555
12:10:22,480 --> 12:10:24,980
Since we are here, let's also grab use navigate.
18556
12:10:26,520 --> 12:10:29,480
Use navigate and let's also grab it.
18557
12:10:29,480 --> 12:10:31,900
So navigate.
18558
12:10:33,480 --> 12:10:37,600
And that's going to come up from use navigate,
18559
12:10:37,600 --> 12:10:38,440
just like that.
18560
12:10:38,440 --> 12:10:39,280
Okay.
18561
12:10:39,280 --> 12:10:40,480
So these are the things that I have.
18562
12:10:40,480 --> 12:10:42,640
Now the first thing that I would love to do now
18563
12:10:42,640 --> 12:10:45,400
is to use the slug
18564
12:10:45,400 --> 12:10:48,480
and get something from app right services.
18565
12:10:48,480 --> 12:10:51,080
So we need to get app right services first.
18566
12:10:51,080 --> 12:10:52,680
All right.
18567
12:10:52,680 --> 12:10:56,920
Import app right service.
18568
12:10:56,920 --> 12:10:59,460
And that's going to come up from one directory back
18569
12:10:59,460 --> 12:11:02,640
inside the app right, inside the config.
18570
12:11:02,640 --> 12:11:05,380
Let's now use use effect.
18571
12:11:06,920 --> 12:11:08,840
And the use effect goes like this.
18572
12:11:08,840 --> 12:11:11,160
It gives me a callback, just like that.
18573
12:11:11,160 --> 12:11:13,360
And we have a dependency array.
18574
12:11:13,360 --> 12:11:15,400
All right, so what's the dependency?
18575
12:11:15,400 --> 12:11:17,320
Maybe if you change anything into the slug
18576
12:11:17,320 --> 12:11:19,640
or if you navigate from here and there,
18577
12:11:19,640 --> 12:11:21,400
these are my two dependency.
18578
12:11:21,400 --> 12:11:25,200
Now coming up onto the part where we can go with that.
18579
12:11:25,200 --> 12:11:28,280
Okay, so if I have a slug, then make a request.
18580
12:11:28,280 --> 12:11:29,560
So let's check this.
18581
12:11:29,560 --> 12:11:33,200
If you have a slug, then only make that request.
18582
12:11:33,200 --> 12:11:35,080
So app right.
18583
12:11:35,080 --> 12:11:40,080
And we are going to say get post one only, not the posts.
18584
12:11:40,160 --> 12:11:43,200
And post can be taken up by the slug.
18585
12:11:43,200 --> 12:11:44,320
We can use await here
18586
12:11:44,320 --> 12:11:47,520
or you can use .then for the promise part.
18587
12:11:47,520 --> 12:11:50,160
And then we'll say inside this, if you get a post,
18588
12:11:50,160 --> 12:11:52,560
just like this, let's go here.
18589
12:11:52,560 --> 12:11:57,560
Now, if we have post, let's set that post into my state.
18590
12:11:57,600 --> 12:12:01,560
So if I have a post,
18591
12:12:01,560 --> 12:12:05,900
let's go ahead and set this into set post.
18592
12:12:05,900 --> 12:12:07,720
Post, there we go.
18593
12:12:07,720 --> 12:12:10,480
If I don't have any post, so in that case,
18594
12:12:10,480 --> 12:12:13,100
I'll just go ahead and say navigate.
18595
12:12:13,700 --> 12:12:14,620
Where do you want to navigate?
18596
12:12:14,620 --> 12:12:15,580
Totally up to you.
18597
12:12:15,580 --> 12:12:17,500
I'm happy with the slash.
18598
12:12:17,500 --> 12:12:20,180
All right, so this is the part where it's easily.
18599
12:12:20,180 --> 12:12:23,940
Now this part here is even much more easy.
18600
12:12:23,940 --> 12:12:27,380
The reason for that is I can just bring in container
18601
12:12:27,380 --> 12:12:28,220
and the post form,
18602
12:12:28,220 --> 12:12:30,460
which I've already created as a component.
18603
12:12:30,460 --> 12:12:32,580
So that makes my life much more easier.
18604
12:12:32,580 --> 12:12:33,940
Let's bring them.
18605
12:12:33,940 --> 12:12:38,380
So import container and that's going to come up
18606
12:12:38,380 --> 12:12:41,980
from one directory back inside the component.
18607
12:12:41,980 --> 12:12:45,100
We have container and we have container.
18608
12:12:45,100 --> 12:12:48,020
And we also need the post form.
18609
12:12:48,020 --> 12:12:51,820
So import post form and that's going to come
18610
12:12:51,820 --> 12:12:55,180
from one directory back inside the components.
18611
12:12:55,180 --> 12:13:00,180
And we do have post form and inside that we have post form.
18612
12:13:02,220 --> 12:13:03,380
Post form, there we go.
18613
12:13:04,260 --> 12:13:07,960
And all I have to do is I can keep this stiff as it is,
18614
12:13:07,960 --> 12:13:11,400
if you wish, and I'll say the padding on y-axis,
18615
12:13:11,440 --> 12:13:13,680
let's be at six.
18616
12:13:13,680 --> 12:13:17,640
We don't need this and we can say wrap everything
18617
12:13:17,640 --> 12:13:20,880
inside the container, just like that.
18618
12:13:20,880 --> 12:13:25,600
And inside this we'll be having a post form
18619
12:13:25,600 --> 12:13:27,680
and it could be self-closing and we need to pass
18620
12:13:27,680 --> 12:13:31,640
on one param, which is post, which is post.
18621
12:13:31,640 --> 12:13:33,800
All right, so post is coming up from my state.
18622
12:13:33,800 --> 12:13:35,680
So that's it, told you.
18623
12:13:35,680 --> 12:13:39,840
After this point, almost everything is super, super easy.
18624
12:13:40,120 --> 12:13:41,600
Let me tell you one more thing.
18625
12:13:41,600 --> 12:13:44,720
What happens when you simply go ahead and do add post?
18626
12:13:44,720 --> 12:13:47,080
Now, I don't have to do too much of the things.
18627
12:13:47,080 --> 12:13:50,920
I can just go ahead and say I want to import container
18628
12:13:50,920 --> 12:13:54,080
and that container is going to come from one directory back
18629
12:13:54,080 --> 12:13:56,240
inside the components.
18630
12:13:56,240 --> 12:13:59,840
Container should have done an index.js there.
18631
12:13:59,840 --> 12:14:02,280
I'll probably leave that as an exercise for you.
18632
12:14:02,280 --> 12:14:05,320
There should be just one index file inside the components
18633
12:14:05,320 --> 12:14:06,680
and I could have bring everything here,
18634
12:14:06,680 --> 12:14:09,680
make my life much, much easier.
18635
12:14:09,880 --> 12:14:14,640
But anyways, and we do have a post form
18636
12:14:14,640 --> 12:14:16,960
and that's going to come from one directory back
18637
12:14:16,960 --> 12:14:21,960
inside the component slash post form slash post form.
18638
12:14:24,000 --> 12:14:28,080
And in here, I can just go and remove this.
18639
12:14:28,080 --> 12:14:30,960
Again, same class name padding y6.
18640
12:14:32,560 --> 12:14:35,080
And in here, wrap everything inside the container,
18641
12:14:35,080 --> 12:14:36,960
just like always.
18642
12:14:36,960 --> 12:14:38,880
And in here, you can just go ahead and say,
18643
12:14:38,880 --> 12:14:40,760
hey, I'll have a post form.
18644
12:14:42,800 --> 12:14:47,800
Post form, why did it brought it again?
18645
12:14:48,640 --> 12:14:50,800
No idea, but anyways, we'll remove this one.
18646
12:14:52,520 --> 12:14:54,920
Okay, so I told you it's super easy now
18647
12:14:54,920 --> 12:14:57,360
because the post form component that we created
18648
12:14:57,360 --> 12:14:59,040
in case you forgot that, it's okay.
18649
12:14:59,040 --> 12:15:02,040
It's totally normal to understand that you forgot that.
18650
12:15:02,040 --> 12:15:03,880
Remember everything is being done in here.
18651
12:15:03,880 --> 12:15:05,760
So submit everything is there.
18652
12:15:05,760 --> 12:15:08,080
We're just loading this component inside this one.
18653
12:15:08,080 --> 12:15:10,240
So super, super easy.
18654
12:15:10,240 --> 12:15:14,000
Now what happens when you actually work with the all post?
18655
12:15:14,880 --> 12:15:16,800
Okay, in the all post,
18656
12:15:16,800 --> 12:15:19,360
we'll just grab all the posts that are possible
18657
12:15:19,360 --> 12:15:21,640
and we'll be working with that like.
18658
12:15:21,640 --> 12:15:25,640
So let's first import app right service, service.
18659
12:15:29,240 --> 12:15:32,880
And that's going to come from one directory back
18660
12:15:32,880 --> 12:15:35,920
inside the app right, we need a config.
18661
12:15:35,920 --> 12:15:37,360
And what else do we need?
18662
12:15:37,360 --> 12:15:38,720
Probably that's it.
18663
12:15:38,720 --> 12:15:43,720
I want to have all the posts, so const posts set posts.
18664
12:15:46,280 --> 12:15:49,400
That's going to be use state.
18665
12:15:50,720 --> 12:15:53,360
And by default, it's going to be an empty array.
18666
12:15:53,360 --> 12:15:55,040
We want it to be tradable
18667
12:15:55,040 --> 12:15:57,000
because there are many posts inside that.
18668
12:15:57,000 --> 12:15:58,880
First thing is use effect.
18669
12:15:59,840 --> 12:16:04,080
Use effect, just like that, have a callback.
18670
12:16:05,000 --> 12:16:09,240
And there is probably nothing as a dependency array.
18671
12:16:09,240 --> 12:16:11,120
When you put nothing inside the dependency array,
18672
12:16:11,120 --> 12:16:12,080
that's also a good thing.
18673
12:16:12,080 --> 12:16:14,160
That means it will run only and only once
18674
12:16:14,160 --> 12:16:16,960
when the component mounts and that's it.
18675
12:16:16,960 --> 12:16:19,800
So let's go up here and as soon as the component mounts,
18676
12:16:19,800 --> 12:16:22,000
we'll use app right service.
18677
12:16:22,000 --> 12:16:25,160
We'll say get posts this time S
18678
12:16:25,160 --> 12:16:27,120
because we want to grab all of it.
18679
12:16:27,120 --> 12:16:30,560
And we'll say that, hey, we'll get all the posts.
18680
12:16:30,560 --> 12:16:33,040
We'll just take it in the array.
18681
12:16:33,040 --> 12:16:35,240
And dot them.
18682
12:16:35,240 --> 12:16:38,120
And if everything goes right, we'll be having the posts.
18683
12:16:39,280 --> 12:16:42,720
And all we have to do that, if we have posts,
18684
12:16:42,720 --> 12:16:47,720
if we have posts, just go ahead and use set posts
18685
12:16:48,560 --> 12:16:49,960
just like that.
18686
12:16:49,960 --> 12:16:52,720
And we'll say posts dot document.
18687
12:16:52,720 --> 12:16:56,880
That's a little bit part on the app right side
18688
12:16:56,880 --> 12:17:00,840
because the post in itself has an object or document.
18689
12:17:00,840 --> 12:17:01,760
It has a couple of more things.
18690
12:17:01,760 --> 12:17:03,960
By the way, if you wish to see more of it,
18691
12:17:03,960 --> 12:17:05,880
just do a console log of the post.
18692
12:17:05,880 --> 12:17:08,080
And then once you have the dot documents,
18693
12:17:08,080 --> 12:17:09,480
that actually gives you an array.
18694
12:17:09,480 --> 12:17:12,160
And again, by the way, I didn't vent it up
18695
12:17:12,160 --> 12:17:14,960
on the very first go, I had to do a console log
18696
12:17:14,960 --> 12:17:16,400
to understand what kind of document
18697
12:17:16,400 --> 12:17:18,720
is something that I'm receiving back.
18698
12:17:18,720 --> 12:17:20,560
And then I worked on this one.
18699
12:17:20,560 --> 12:17:22,680
By the way, app right does a fantastic job
18700
12:17:22,680 --> 12:17:25,400
in showing you what is something that you are receiving back
18701
12:17:25,400 --> 12:17:28,000
when you're making a query or something like that.
18702
12:17:28,000 --> 12:17:29,240
So fantastic job there.
18703
12:17:29,240 --> 12:17:33,040
But yes, I needed to do a little bit of console log there.
18704
12:17:33,040 --> 12:17:34,800
Now, the interesting part is
18705
12:17:34,800 --> 12:17:36,360
we would be needing a postcard.
18706
12:17:36,360 --> 12:17:39,000
So if you remember, we created this postcard
18707
12:17:39,000 --> 12:17:42,000
in which you pass on the ID title and featured image
18708
12:17:42,000 --> 12:17:43,280
and it displays that.
18709
12:17:43,280 --> 12:17:44,480
So we'll be using this.
18710
12:17:44,480 --> 12:17:46,280
So let's go ahead and bring that.
18711
12:17:46,280 --> 12:17:49,920
I will bring container to container.
18712
12:17:49,920 --> 12:17:51,560
Oh, nice suggestions.
18713
12:17:51,560 --> 12:17:53,280
Finally, you are awake.
18714
12:17:53,280 --> 12:17:55,800
And we'll be needing a postcard.
18715
12:17:56,720 --> 12:18:00,080
Postcard, no suggestions.
18716
12:18:01,560 --> 12:18:04,080
Ah, it's just understanding the things
18717
12:18:04,080 --> 12:18:05,520
which are already being designed.
18718
12:18:05,520 --> 12:18:06,360
Hate this.
18719
12:18:06,360 --> 12:18:08,520
Should have been done auto, anyways,
18720
12:18:08,520 --> 12:18:10,280
not complaining too much.
18721
12:18:10,280 --> 12:18:14,400
Components and then we have postcard, okay.
18722
12:18:15,400 --> 12:18:19,680
Moving back, this is going to require a couple of classes.
18723
12:18:19,680 --> 12:18:24,000
We are gonna set the width of full and padding on Y8.
18724
12:18:25,000 --> 12:18:28,720
Okay, so now moving ahead, let's clean this.
18725
12:18:28,720 --> 12:18:31,600
First of all, let's wrap everything inside the container,
18726
12:18:31,600 --> 12:18:32,720
just like that.
18727
12:18:32,720 --> 12:18:34,920
Inside the container, we'll have a simple div.
18728
12:18:34,920 --> 12:18:40,560
And in fact, this div can have a class of flex and flex dash wrap
18729
12:18:40,560 --> 12:18:42,080
so that everything becomes a card
18730
12:18:42,080 --> 12:18:45,120
and we can just easily shrink them up.
18731
12:18:45,120 --> 12:18:47,400
Okay, now what we have to do, start your JavaScript
18732
12:18:47,400 --> 12:18:49,880
because now we want to loop through the posts.
18733
12:18:49,880 --> 12:18:51,440
Remember this?
18734
12:18:51,440 --> 12:18:53,440
The posts, which is an array.
18735
12:18:54,040 --> 12:18:57,320
So we'll be rendering this but conditionally.
18736
12:18:57,320 --> 12:19:01,240
So we'll be saying that, hey, what we can do is
18737
12:19:01,240 --> 12:19:06,240
posts.map and inside this, each post,
18738
12:19:06,480 --> 12:19:08,480
we are going to call post.
18739
12:19:08,480 --> 12:19:11,520
This is individual one, just goes like this.
18740
12:19:11,520 --> 12:19:12,960
And I'm not gonna use curly braces,
18741
12:19:12,960 --> 12:19:14,640
otherwise I have to explicitly return.
18742
12:19:14,640 --> 12:19:16,720
So I'll use parenthesis for that.
18743
12:19:16,720 --> 12:19:19,720
And I'll say, I'll be returning you a div
18744
12:19:19,720 --> 12:19:23,160
with a class of padding dash two.
18745
12:19:23,160 --> 12:19:28,160
And a width of one by four, dot width of one by four.
18746
12:19:28,880 --> 12:19:29,720
I don't think so.
18747
12:19:29,720 --> 12:19:33,200
It automatically takes it as emit abbreviation.
18748
12:19:33,200 --> 12:19:34,120
Ah, it takes it.
18749
12:19:34,120 --> 12:19:35,320
That's nice.
18750
12:19:35,320 --> 12:19:36,640
By the way, it's dash.
18751
12:19:38,360 --> 12:19:40,640
And since this is the one which is iterating over,
18752
12:19:40,640 --> 12:19:42,520
so we will put a key onto this one
18753
12:19:42,520 --> 12:19:45,960
and key is super easy post dot dollar IT.
18754
12:19:46,840 --> 12:19:49,720
And once I'm in this, the component that I want to loop through
18755
12:19:49,720 --> 12:19:54,160
is my post card, self-closing, of course.
18756
12:19:54,160 --> 12:19:55,680
It takes one prop.
18757
12:19:55,680 --> 12:19:59,640
So what we're gonna do is, if you notice it carefully,
18758
12:19:59,640 --> 12:20:01,240
I could have given it like this.
18759
12:20:01,240 --> 12:20:04,640
So I can just go ahead and say, hey, post is equals to post,
18760
12:20:04,640 --> 12:20:07,520
but it's not accepting these kinds of parameter
18761
12:20:07,520 --> 12:20:08,360
in this way.
18762
12:20:08,360 --> 12:20:11,600
So remember, the way how you design these components
18763
12:20:11,600 --> 12:20:13,320
and what they expect the data,
18764
12:20:13,320 --> 12:20:14,880
make sure you're careful about that.
18765
12:20:14,880 --> 12:20:18,220
In our case, the post is expecting an object
18766
12:20:18,220 --> 12:20:19,820
which has all these information.
18767
12:20:19,820 --> 12:20:23,260
So don't pass it on directly in case you want to do so.
18768
12:20:23,260 --> 12:20:25,820
So you have to pass on just an object
18769
12:20:25,820 --> 12:20:27,880
and we are gonna de-structure it.
18770
12:20:27,880 --> 12:20:29,740
That's the important part.
18771
12:20:29,740 --> 12:20:30,580
And that's it.
18772
12:20:30,580 --> 12:20:31,660
It's gonna do the job.
18773
12:20:31,660 --> 12:20:35,340
So I told you, it's very minute details now.
18774
12:20:35,340 --> 12:20:36,900
We are all happy with this.
18775
12:20:36,900 --> 12:20:39,340
Edit post we have worked on and home,
18776
12:20:39,340 --> 12:20:41,340
there is nothing inside the home.
18777
12:20:41,340 --> 12:20:45,900
What we can do is, home can also have the card.
18778
12:20:46,900 --> 12:20:49,220
This is my all post, same.
18779
12:20:49,220 --> 12:20:51,740
And on the home also, let's grab all the cards
18780
12:20:51,740 --> 12:20:53,500
and do the same stuff.
18781
12:20:53,500 --> 12:20:56,200
Okay, so let's go ahead and say all post.
18782
12:20:57,340 --> 12:21:00,300
And we'll copy all of this.
18783
12:21:00,300 --> 12:21:02,460
Home will also display the same stuff.
18784
12:21:02,460 --> 12:21:05,100
So we'll paste it, all post.
18785
12:21:05,100 --> 12:21:06,340
What do we need?
18786
12:21:06,340 --> 12:21:08,140
The same stuff.
18787
12:21:08,140 --> 12:21:09,580
Copy this.
18788
12:21:09,580 --> 12:21:11,820
And in here, we'll just paste it.
18789
12:21:11,820 --> 12:21:14,780
So we have post and all these stuff.
18790
12:21:14,860 --> 12:21:18,900
Get post, blah, blah, stuff, looks okay.
18791
12:21:18,900 --> 12:21:23,300
Now in this one, what we can do is,
18792
12:21:23,300 --> 12:21:26,900
there are a couple of more things that we should have done.
18793
12:21:26,900 --> 12:21:31,420
Okay, on the home page, if you have,
18794
12:21:31,420 --> 12:21:34,040
like we haven't taken care of the cases in the all post
18795
12:21:34,040 --> 12:21:36,400
when the array is zero.
18796
12:21:36,400 --> 12:21:38,380
We can actually do that in the home
18797
12:21:38,380 --> 12:21:41,420
and I can give that as a sample exercise for you.
18798
12:21:41,420 --> 12:21:44,220
Okay, so this part is all okay.
18799
12:21:44,220 --> 12:21:47,060
But what do you want to return when the array is zero?
18800
12:21:47,060 --> 12:21:49,180
So let me just handle that case.
18801
12:21:49,180 --> 12:21:54,180
If the post.length is actually zero,
18802
12:21:55,980 --> 12:21:58,820
that means there is nothing inside the array,
18803
12:21:58,820 --> 12:22:01,900
then you can simply go ahead and return
18804
12:22:01,900 --> 12:22:03,500
that there is nothing to read.
18805
12:22:03,500 --> 12:22:05,700
Otherwise, we can just wrap up the container,
18806
12:22:05,700 --> 12:22:06,540
something like that.
18807
12:22:06,540 --> 12:22:10,300
So let's go ahead and remove this part.
18808
12:22:10,420 --> 12:22:14,900
Return, what do you want to return?
18809
12:22:14,900 --> 12:22:15,940
No post to display,
18810
12:22:15,940 --> 12:22:18,620
but let's actually do that in a better way.
18811
12:22:18,620 --> 12:22:21,420
Let's grab everything from the all post.
18812
12:22:21,420 --> 12:22:26,020
I'll grab this, copy this and I'll paste it.
18813
12:22:26,940 --> 12:22:30,300
Okay, so container and we don't have this one
18814
12:22:30,300 --> 12:22:31,220
to actually load.
18815
12:22:31,220 --> 12:22:32,660
So we'll just remove this
18816
12:22:32,660 --> 12:22:36,520
and we probably will have a simple H1,
18817
12:22:36,560 --> 12:22:40,960
which says login to read posts.
18818
12:22:40,960 --> 12:22:43,200
So probably there is nothing inside it
18819
12:22:43,200 --> 12:22:45,200
or we can say there is no post to read,
18820
12:22:45,200 --> 12:22:47,080
better message is login to read.
18821
12:22:47,080 --> 12:22:50,840
So this is all the case when the if statement is working.
18822
12:22:50,840 --> 12:22:53,840
If the statement doesn't get invoked,
18823
12:22:53,840 --> 12:22:56,100
that means there is something inside the length.
18824
12:22:56,100 --> 12:22:59,000
So in that case, we can actually use the same all post,
18825
12:22:59,000 --> 12:23:02,800
copy that and we can just paste it up here
18826
12:23:02,800 --> 12:23:04,760
that hey, the container is there
18827
12:23:04,760 --> 12:23:06,440
and we are iterating through.
18828
12:23:07,240 --> 12:23:11,280
So post.map, everything, postcard, it's exactly same.
18829
12:23:11,280 --> 12:23:13,440
So now that you know how to handle the situation
18830
12:23:13,440 --> 12:23:14,400
when the post is zero,
18831
12:23:14,400 --> 12:23:16,880
you can do exactly same in the all post as well.
18832
12:23:16,880 --> 12:23:19,960
Just write a simple if statement at line number 19.
18833
12:23:19,960 --> 12:23:21,680
I can just mark it as to do for you.
18834
12:23:23,400 --> 12:23:28,400
To do add case for array length zero.
18835
12:23:32,560 --> 12:23:35,080
Yeah, not really the best sentence,
18836
12:23:35,080 --> 12:23:36,680
but I think you can do the job.
18837
12:23:36,680 --> 12:23:39,160
Okay, so the home part is done.
18838
12:23:39,160 --> 12:23:40,360
What about the login part?
18839
12:23:40,360 --> 12:23:41,840
This is the most easy part,
18840
12:23:41,840 --> 12:23:45,540
but I think you will find a couple of bugs in this one.
18841
12:23:45,540 --> 12:23:47,120
Let me show you why.
18842
12:23:47,120 --> 12:23:50,200
The reason for that is we did everything inside this login.
18843
12:23:50,200 --> 12:23:52,640
So we just need to import this component,
18844
12:23:52,640 --> 12:23:55,000
but you will find it a little bit difficult
18845
12:23:55,000 --> 12:23:56,760
if you don't know one simple thing,
18846
12:23:56,760 --> 12:23:58,700
which is how to import this.
18847
12:23:58,700 --> 12:24:01,040
So you probably might think that I'll just go ahead
18848
12:24:01,040 --> 12:24:03,240
and say I'll import login
18849
12:24:03,240 --> 12:24:07,040
and that will come up as one directory back
18850
12:24:07,040 --> 12:24:10,160
inside the component, we do have login.
18851
12:24:10,160 --> 12:24:13,740
The problem is our page is also called as login.
18852
12:24:13,740 --> 12:24:14,680
This is really bad.
18853
12:24:14,680 --> 12:24:15,760
So which one to use,
18854
12:24:15,760 --> 12:24:18,120
which one not to use something like this.
18855
12:24:18,120 --> 12:24:21,240
The easiest fixes, just use an aliasing.
18856
12:24:21,240 --> 12:24:24,920
And let's call this one as login component.
18857
12:24:24,920 --> 12:24:28,160
And notice here, this is what is giving you a problem
18858
12:24:28,160 --> 12:24:30,880
that hey, import login, this is not how it works.
18859
12:24:30,880 --> 12:24:33,320
So we need to actually change this a little bit.
18860
12:24:33,320 --> 12:24:35,980
And I think this is the reason why I always say
18861
12:24:35,980 --> 12:24:38,640
that it's always a good idea that these kinds of situations
18862
12:24:38,640 --> 12:24:40,440
might happen with your component.
18863
12:24:40,440 --> 12:24:43,200
So it's always a good idea to actually grab things
18864
12:24:43,200 --> 12:24:44,040
like this.
18865
12:24:44,040 --> 12:24:45,520
So let me show you an easy fix of that
18866
12:24:45,520 --> 12:24:49,000
because that's a common scalability problem.
18867
12:24:49,000 --> 12:24:50,080
Let me just show you that.
18868
12:24:50,080 --> 12:24:53,000
We will just create a simple index file
18869
12:24:53,000 --> 12:24:56,040
inside the component, new file,
18870
12:24:56,040 --> 12:25:00,040
and call this one as index.js.
18871
12:25:00,080 --> 12:25:02,200
And one by one, we'll be just importing everything
18872
12:25:02,200 --> 12:25:03,280
and we'll be exporting that.
18873
12:25:03,280 --> 12:25:05,380
That's all what we'll be doing in this one.
18874
12:25:05,380 --> 12:25:07,000
This is much better of an approach.
18875
12:25:07,000 --> 12:25:09,040
So if I go ahead and say login,
18876
12:25:09,040 --> 12:25:13,120
and that login is going to come from ./login.
18877
12:25:13,120 --> 12:25:16,120
Now I can go ahead and say export.
18878
12:25:16,120 --> 12:25:19,020
And I can export all of this is like that.
18879
12:25:19,020 --> 12:25:20,960
And I can export login.
18880
12:25:20,960 --> 12:25:22,960
Now, once you do this kind of a thing,
18881
12:25:22,960 --> 12:25:24,280
it's much easier.
18882
12:25:24,280 --> 12:25:27,820
And you will notice that this import statement
18883
12:25:27,820 --> 12:25:31,540
is not going to work because it's not export default.
18884
12:25:31,540 --> 12:25:33,540
So you can actually just wrap this up
18885
12:25:33,540 --> 12:25:34,500
inside the parentheses.
18886
12:25:34,500 --> 12:25:36,460
And every time you bring that,
18887
12:25:36,460 --> 12:25:37,420
it comes up like this.
18888
12:25:37,420 --> 12:25:40,420
And this gives you the ability to call it as login.
18889
12:25:40,420 --> 12:25:43,200
So you can rename the structures like this,
18890
12:25:43,200 --> 12:25:46,260
or rename the page as login page, something like that.
18891
12:25:46,260 --> 12:25:47,760
So that's also workable.
18892
12:25:47,760 --> 12:25:48,780
But I think you get the idea
18893
12:25:48,780 --> 12:25:51,160
that how to avoid these kinds of problems,
18894
12:25:51,160 --> 12:25:53,460
good stuff to discuss.
18895
12:25:53,460 --> 12:25:55,620
We'll have a simple class name
18896
12:25:55,620 --> 12:25:57,740
and we'll say padding by eight.
18897
12:25:58,820 --> 12:26:01,740
And now in here, I can just hit and enter
18898
12:26:01,740 --> 12:26:04,680
and can say I'll have a login component.
18899
12:26:05,620 --> 12:26:06,700
Self-closing of course.
18900
12:26:06,700 --> 12:26:07,540
So there we go.
18901
12:26:07,540 --> 12:26:09,260
Much easier, much easier fix.
18902
12:26:10,100 --> 12:26:13,420
Post page, we have already worked with that.
18903
12:26:13,420 --> 12:26:14,900
Sign up exactly same.
18904
12:26:14,900 --> 12:26:18,060
So for this sign up also, we'll import the sign up.
18905
12:26:18,060 --> 12:26:21,620
Import sign up from pages.
18906
12:26:21,620 --> 12:26:23,420
Nope, not from pages.
18907
12:26:23,420 --> 12:26:28,220
Sign up from current directory and sign up.
18908
12:26:28,220 --> 12:26:31,560
All we have to do is comma and say sign up.
18909
12:26:31,560 --> 12:26:34,660
Now the advantage is I can actually bring the sign up
18910
12:26:34,660 --> 12:26:36,420
and can rename them.
18911
12:26:36,420 --> 12:26:40,340
So I can just go ahead and say import sign up
18912
12:26:41,420 --> 12:26:43,260
from components, that's nice.
18913
12:26:43,260 --> 12:26:47,260
And I can just say, get it as sign up component.
18914
12:26:49,160 --> 12:26:52,300
And in here, we can just have a class name,
18915
12:26:52,300 --> 12:26:55,100
which says padding by eight.
18916
12:26:56,300 --> 12:26:59,540
And this one can hit and enter.
18917
12:27:02,080 --> 12:27:05,900
And we can say sign up component.
18918
12:27:05,900 --> 12:27:07,340
Self-closing of course.
18919
12:27:07,340 --> 12:27:08,720
So all right, a lot of stuff.
18920
12:27:08,720 --> 12:27:12,420
And actually the better way of handling this entire thing
18921
12:27:12,420 --> 12:27:15,020
in the component would be to grab everything
18922
12:27:15,020 --> 12:27:17,220
that's there in the component and export in this way
18923
12:27:17,220 --> 12:27:18,780
so that there is a consistency.
18924
12:27:18,780 --> 12:27:21,660
And I don't have to name this because if you notice it,
18925
12:27:21,680 --> 12:27:24,240
when we were building something like in the edit post,
18926
12:27:24,240 --> 12:27:27,580
when we were bringing these things like post form,
18927
12:27:27,580 --> 12:27:30,380
container, this is coming up from different.
18928
12:27:30,380 --> 12:27:32,840
So there is a missing piece of consistency here.
18929
12:27:32,840 --> 12:27:34,980
So at least one thing would be consistent is
18930
12:27:34,980 --> 12:27:38,320
everything will come from dot slash components, that's it.
18931
12:27:38,320 --> 12:27:41,140
So good stuff, but I think you get the perspective
18932
12:27:41,140 --> 12:27:42,740
of how things are being done.
18933
12:27:42,740 --> 12:27:45,700
And I'm happy that I was able to share all these details,
18934
12:27:45,700 --> 12:27:48,060
production grades, scalability issues with you.
18935
12:27:48,060 --> 12:27:50,420
The only thing remaining is to test the application
18936
12:27:50,460 --> 12:27:52,100
and we're gonna do that in the next video.
18937
12:27:52,100 --> 12:27:53,260
Let's catch up there.
18938
12:27:55,820 --> 12:27:56,660
Hey there, everyone.
18939
12:27:56,660 --> 12:27:58,560
Hithai Sheer back again with another video
18940
12:27:58,560 --> 12:28:01,340
and welcome to the final video where I'll walk you through
18941
12:28:01,340 --> 12:28:03,340
how I debug this application.
18942
12:28:03,340 --> 12:28:05,180
Expecting that your application will work
18943
12:28:05,180 --> 12:28:08,220
on the very first go is absolutely a wrong notion.
18944
12:28:08,220 --> 12:28:10,580
And especially when somebody is teaching you,
18945
12:28:10,580 --> 12:28:13,200
he's more focused on the teaching part and the flow part.
18946
12:28:13,200 --> 12:28:16,100
So some mistakes are meant to be there.
18947
12:28:16,100 --> 12:28:17,920
They are obviously going to be there.
18948
12:28:17,920 --> 12:28:22,040
And yes, it took me really a lot of time to debug this.
18949
12:28:22,040 --> 12:28:23,760
By a lot of time, I mean one hour,
18950
12:28:23,760 --> 12:28:25,800
a little bit more than one hour.
18951
12:28:25,800 --> 12:28:28,480
So in this video, I'll walk you through what all I did,
18952
12:28:28,480 --> 12:28:31,560
how I debug the process, how I read the errors.
18953
12:28:31,560 --> 12:28:34,000
This will help you to understand the entire flow
18954
12:28:34,000 --> 12:28:35,440
of when you're done with the application
18955
12:28:35,440 --> 12:28:37,400
or in between if you want to check it out,
18956
12:28:37,400 --> 12:28:39,620
what all the processes you need to go through.
18957
12:28:39,620 --> 12:28:42,340
So let's go ahead one by one and I'll walk you through.
18958
12:28:42,340 --> 12:28:44,600
Currently the application is in the working form
18959
12:28:44,600 --> 12:28:47,220
and I'll just give you the entire source code as well.
18960
12:28:47,220 --> 12:28:49,380
But the most important part is to understand
18961
12:28:49,380 --> 12:28:53,020
the psychology behind solving these bugs.
18962
12:28:53,020 --> 12:28:57,460
And most important is read those damn errors.
18963
12:28:57,460 --> 12:28:59,420
That's the secret ingredient.
18964
12:28:59,420 --> 12:29:01,920
Okay, let me share the screen first.
18965
12:29:01,920 --> 12:29:03,700
And one by one, let's go there.
18966
12:29:03,700 --> 12:29:06,860
So what I did is I tried to run the application.
18967
12:29:06,860 --> 12:29:09,740
So the first conflict that I saw immediately
18968
12:29:09,740 --> 12:29:11,420
was in my app.jsx.
18969
12:29:11,420 --> 12:29:13,620
So this is the first part.
18970
12:29:13,620 --> 12:29:16,140
So in the app.jsx, there was nothing, absolutely.
18971
12:29:16,140 --> 12:29:16,980
We didn't have anything.
18972
12:29:17,060 --> 12:29:18,660
So we have to load some stuff.
18973
12:29:18,660 --> 12:29:20,860
So in the return statement, as you can see,
18974
12:29:20,860 --> 12:29:23,620
I brought in my headers and I brought in my footer
18975
12:29:23,620 --> 12:29:26,700
so that in the header I can load up the navigation bar
18976
12:29:26,700 --> 12:29:29,740
along with the logout button and the outlet as well.
18977
12:29:29,740 --> 12:29:32,140
Now, not only that, I also wanted to figure out
18978
12:29:32,140 --> 12:29:34,180
that whether the user is logged in or not.
18979
12:29:34,180 --> 12:29:37,000
So how can I do it as soon as this component loads?
18980
12:29:37,000 --> 12:29:38,900
Yes, you guessed it right, it was use effect.
18981
12:29:38,900 --> 12:29:40,780
So I used the use effect hook
18982
12:29:40,780 --> 12:29:42,500
along with the app.write services,
18983
12:29:42,500 --> 12:29:44,820
just a simple method, get current user.
18984
12:29:44,820 --> 12:29:47,340
If the current user is there, then that's great.
18985
12:29:47,340 --> 12:29:51,020
Otherwise, let's allow the user to move on here and there.
18986
12:29:51,020 --> 12:29:54,140
So what I did is I created a state loading
18987
12:29:54,140 --> 12:29:56,620
and we used the dispatch just like that.
18988
12:29:56,620 --> 12:29:58,820
And after that, we used a simple use effect
18989
12:29:58,820 --> 12:30:00,860
and we simply went up with the auth service,
18990
12:30:00,860 --> 12:30:02,160
get current user.
18991
12:30:02,160 --> 12:30:03,820
If we get the user, that's great.
18992
12:30:03,820 --> 12:30:06,820
Let's dispatch a login action that user is logged in.
18993
12:30:06,820 --> 12:30:09,960
Otherwise, let's dispatch the loading as false.
18994
12:30:09,960 --> 12:30:12,640
So based on that, we're just loading.
18995
12:30:12,640 --> 12:30:14,040
If the loading is false,
18996
12:30:14,040 --> 12:30:15,280
otherwise we don't load anything.
18997
12:30:15,280 --> 12:30:17,060
That's pretty much it, I did.
18998
12:30:17,060 --> 12:30:20,600
Once I did it and I moved on to the Chrome browser,
18999
12:30:20,600 --> 12:30:22,460
so let me just walk you through with this one.
19000
12:30:22,460 --> 12:30:25,120
So this Chrome browser.
19001
12:30:25,120 --> 12:30:29,440
So what we saw in this one is we simply went up
19002
12:30:29,440 --> 12:30:31,820
onto this one and tried to login in
19003
12:30:31,820 --> 12:30:33,880
and we saw a whole lot of errors.
19004
12:30:33,880 --> 12:30:36,880
And I tried to inspect this into the console
19005
12:30:36,880 --> 12:30:38,840
and it gave me so many of the error.
19006
12:30:38,840 --> 12:30:41,240
I looked into this one and the most first one,
19007
12:30:41,240 --> 12:30:44,280
the error that I found is that it was not able
19008
12:30:44,280 --> 12:30:45,900
to load the environment variable.
19009
12:30:45,900 --> 12:30:48,240
So when I was teaching you in the React,
19010
12:30:48,240 --> 12:30:50,720
I actually accidentally used all the React variable,
19011
12:30:50,720 --> 12:30:53,720
not the VIT variable, but we actually use the VIT.
19012
12:30:53,720 --> 12:30:55,640
So here's the simple solution.
19013
12:30:55,640 --> 12:31:00,880
All you have to do is you have to say import meta.env.vit
19014
12:31:00,880 --> 12:31:04,380
and then whatever you want to say and that's how it works.
19015
12:31:04,380 --> 12:31:07,660
So I looked up into this one, found a solution for this one
19016
12:31:07,660 --> 12:31:10,520
and went into my environment variable first
19017
12:31:10,680 --> 12:31:13,360
and changed everything to VIT underscore VIT underscore
19018
12:31:13,360 --> 12:31:14,260
just like this.
19019
12:31:14,260 --> 12:31:16,040
So I'll just copy all of this
19020
12:31:16,040 --> 12:31:18,240
and I'll also paste this into the sample
19021
12:31:18,240 --> 12:31:21,160
so that in case you are going through with the VIT
19022
12:31:21,160 --> 12:31:22,820
or React, whatever you are going for,
19023
12:31:22,820 --> 12:31:24,240
you can just go with that.
19024
12:31:24,240 --> 12:31:25,800
I'll obviously remove these ones
19025
12:31:25,800 --> 12:31:27,240
because I don't want to push it.
19026
12:31:27,240 --> 12:31:29,380
And of course, by the time you'll be watching the video,
19027
12:31:29,380 --> 12:31:31,960
I would have removed these ones as well.
19028
12:31:31,960 --> 12:31:35,360
So I'll just go ahead and paste it up
19029
12:31:35,360 --> 12:31:37,380
and let's go ahead and comment this.
19030
12:31:37,420 --> 12:31:41,500
In fact, in the sample, we can keep it, no problem at all.
19031
12:31:41,500 --> 12:31:43,580
All right, so I'll just keep it in the sample.
19032
12:31:43,580 --> 12:31:44,980
Once I did it in the sample,
19033
12:31:44,980 --> 12:31:48,580
the next step was to change that into the conf.js as well.
19034
12:31:48,580 --> 12:31:51,500
So this also got changed to VIT.app, right?
19035
12:31:51,500 --> 12:31:52,780
The errors were pretty clear.
19036
12:31:52,780 --> 12:31:54,580
Once you check the console log, it simply said,
19037
12:31:54,580 --> 12:31:58,100
hey, I don't know what this process.env.vit,
19038
12:31:58,100 --> 12:32:01,500
so I had to change this one, import.meta.env.
19039
12:32:01,500 --> 12:32:04,100
So pretty first error that we caught up
19040
12:32:04,100 --> 12:32:07,420
after managing our app.js.
19041
12:32:07,420 --> 12:32:09,740
So this was the first problem that I saw.
19042
12:32:09,740 --> 12:32:13,300
Then after that, I realized that in a lot of places,
19043
12:32:13,300 --> 12:32:16,780
I have a couple of issues, like into this input file,
19044
12:32:16,780 --> 12:32:18,660
I somehow missed these parentheses.
19045
12:32:18,660 --> 12:32:22,100
So they were a little bit difficult to find at first.
19046
12:32:22,100 --> 12:32:23,960
It just gave me an error on the signup screen
19047
12:32:23,960 --> 12:32:25,000
that ID was missing.
19048
12:32:25,000 --> 12:32:27,420
And I'm pretty sure that I gave you the ID.
19049
12:32:27,420 --> 12:32:31,420
I checked up first of all about my auth.js,
19050
12:32:31,420 --> 12:32:33,860
saying that, hey, I'm providing you the ID.
19051
12:32:33,940 --> 12:32:35,620
It's ID.unique.
19052
12:32:35,620 --> 12:32:38,260
Turns out, in the signup component itself,
19053
12:32:38,260 --> 12:32:40,420
I was missing, in the input component,
19054
12:32:40,420 --> 12:32:42,940
I was missing the ID just like this.
19055
12:32:42,940 --> 12:32:45,940
I tried, it again gave me, hey, ID is missing.
19056
12:32:45,940 --> 12:32:47,700
Come on, I'm giving you the ID.
19057
12:32:47,700 --> 12:32:49,420
Why are you doing this to me?
19058
12:32:49,420 --> 12:32:51,740
Then turns out, I realized that in this one,
19059
12:32:51,740 --> 12:32:54,660
I actually forgot to import the ID from the app, right?
19060
12:32:54,660 --> 12:32:57,700
Yeah, can't believe I did that, but yeah,
19061
12:32:57,700 --> 12:32:59,540
these are the errors, these are the bugs.
19062
12:32:59,540 --> 12:33:01,860
Once I have this ID in here,
19063
12:33:01,860 --> 12:33:03,700
then obviously ID.unique works,
19064
12:33:04,420 --> 12:33:06,660
and it started to do the signup for me.
19065
12:33:06,660 --> 12:33:07,700
So that's one thing.
19066
12:33:07,700 --> 12:33:10,140
And in the login also, if we are using,
19067
12:33:10,140 --> 12:33:11,380
in the login, we don't use ID.
19068
12:33:11,380 --> 12:33:13,980
So there's nothing much more onto this part.
19069
12:33:13,980 --> 12:33:15,540
So this is a couple of things.
19070
12:33:15,540 --> 12:33:18,800
Not only that, a couple of more things needed to be fixed.
19071
12:33:18,800 --> 12:33:20,420
For example, in the footer,
19072
12:33:20,420 --> 12:33:22,420
I actually forgot to import the logo
19073
12:33:22,420 --> 12:33:24,940
that was giving me a bug, so I did that.
19074
12:33:24,940 --> 12:33:27,420
After that, in the header.jsx,
19075
12:33:27,420 --> 12:33:31,220
I actually imported these logo in a different format.
19076
12:33:31,220 --> 12:33:33,260
So I used this one, which is a wrong.
19077
12:33:33,260 --> 12:33:35,980
If you're doing an export default,
19078
12:33:35,980 --> 12:33:38,700
this is not how we do it, but somehow accidentally I did it.
19079
12:33:38,700 --> 12:33:41,980
So I looked a little bit on what all the things are missing.
19080
12:33:41,980 --> 12:33:43,740
It was pretty straightforward errors.
19081
12:33:43,740 --> 12:33:45,380
So I started with that.
19082
12:33:45,380 --> 12:33:48,580
Once this is all done, I went up back into this,
19083
12:33:48,580 --> 12:33:49,740
that hey, what all these things,
19084
12:33:49,740 --> 12:33:52,500
couple of other components also were having some issues
19085
12:33:52,500 --> 12:33:55,120
that hey, this was not imported properly or something.
19086
12:33:55,120 --> 12:33:56,380
I work with that.
19087
12:33:56,380 --> 12:33:59,260
Another error that I saw was here,
19088
12:33:59,260 --> 12:34:02,460
that it says add post, but in the URL slug,
19089
12:34:02,460 --> 12:34:04,900
it says add posts, so that is wrong.
19090
12:34:04,900 --> 12:34:07,560
Obviously we didn't take, took care of this URL.
19091
12:34:07,560 --> 12:34:09,900
So I went up and changed this to post.
19092
12:34:09,900 --> 12:34:12,180
That is what we are handling in the,
19093
12:34:13,220 --> 12:34:15,660
in the app dot, not in the app, main.jsx.
19094
12:34:15,660 --> 12:34:17,540
So this is the one that we are handling,
19095
12:34:17,540 --> 12:34:21,600
which is edit post and slug, not posts, there is no S.
19096
12:34:21,600 --> 12:34:22,580
So a couple of things,
19097
12:34:22,580 --> 12:34:25,000
just look out for the flow of your application
19098
12:34:25,000 --> 12:34:27,220
that always works with how things are going on
19099
12:34:27,220 --> 12:34:28,780
and how things are doing for you.
19100
12:34:28,780 --> 12:34:31,820
So don't panic, read the errors one by one, step by step,
19101
12:34:31,820 --> 12:34:35,380
try to figure it out, because what I've noticed is
19102
12:34:35,380 --> 12:34:38,020
that errors sometimes are not in the place
19103
12:34:38,020 --> 12:34:40,740
where you're looking up for or are expecting them.
19104
12:34:40,740 --> 12:34:42,260
For example, in my case,
19105
12:34:42,260 --> 12:34:45,100
I was expecting the ID might be something wrong
19106
12:34:45,100 --> 12:34:47,140
in the auth.js and obviously it was
19107
12:34:47,140 --> 12:34:48,700
that ID was missing here,
19108
12:34:48,700 --> 12:34:52,660
but this was also pretty much unseen
19109
12:34:52,660 --> 12:34:54,940
or I didn't expect it that I might have missed
19110
12:34:54,940 --> 12:34:56,420
this parenthesis here, send the ID.
19111
12:34:56,420 --> 12:34:59,300
So input file, I didn't expect it that it would be there,
19112
12:34:59,460 --> 12:35:02,100
but it was there, so this is what we did.
19113
12:35:02,100 --> 12:35:03,460
And apart from this,
19114
12:35:03,460 --> 12:35:06,820
I've also added a couple of more CSS as well.
19115
12:35:06,820 --> 12:35:10,080
It's not really required, but I have added the CSS up here.
19116
12:35:10,080 --> 12:35:12,580
These are browser CSS, so when the browser CSS,
19117
12:35:12,580 --> 12:35:14,820
if you see something like output or summary
19118
12:35:14,820 --> 12:35:17,260
or details, iframes and all of that,
19119
12:35:17,260 --> 12:35:19,060
by the way, they are available online
19120
12:35:19,060 --> 12:35:21,220
on the website of framer,
19121
12:35:21,220 --> 12:35:24,460
the parser of the package that we used,
19122
12:35:24,460 --> 12:35:28,020
which one, I'll show you that, HTML React parser.
19123
12:35:28,020 --> 12:35:31,260
So the CSS is available on a lot of resources there.
19124
12:35:31,260 --> 12:35:33,980
So this is a couple of ways of how I fixed the application.
19125
12:35:33,980 --> 12:35:35,940
Rest of the things worked nicely,
19126
12:35:35,940 --> 12:35:37,500
but expecting their application
19127
12:35:37,500 --> 12:35:39,740
will work immediately is a bad idea.
19128
12:35:39,740 --> 12:35:42,660
One more thing which I noticed that gave me an error
19129
12:35:42,660 --> 12:35:43,500
is this one.
19130
12:35:43,500 --> 12:35:45,100
So when I try to upload an image,
19131
12:35:45,100 --> 12:35:46,980
at the very first it gave me an error
19132
12:35:46,980 --> 12:35:49,940
that hey, you don't have permission to upload.
19133
12:35:49,940 --> 12:35:52,180
Turns out I have the permission for the guest
19134
12:35:52,180 --> 12:35:53,580
that we did together,
19135
12:35:53,580 --> 12:35:56,420
but we also need to give all the users
19136
12:35:56,420 --> 12:35:58,900
the permission to do CRUD in the images.
19137
12:35:58,900 --> 12:36:00,980
So you can just click on add roles
19138
12:36:00,980 --> 12:36:02,580
and select individual users.
19139
12:36:02,580 --> 12:36:04,700
If you want to give some users only the permission,
19140
12:36:04,700 --> 12:36:06,660
but I wanted to give it to all users.
19141
12:36:06,660 --> 12:36:07,780
So I just selected that
19142
12:36:07,780 --> 12:36:09,900
and it just gave the permission to all of them.
19143
12:36:09,900 --> 12:36:11,420
So this was one of the issues.
19144
12:36:11,420 --> 12:36:13,180
So make sure you are aware of that.
19145
12:36:13,180 --> 12:36:15,780
And now in the auth, you can see the user
19146
12:36:15,780 --> 12:36:16,900
is being registered.
19147
12:36:16,900 --> 12:36:18,620
You can work more on it
19148
12:36:18,620 --> 12:36:20,180
if you want to build this application
19149
12:36:20,180 --> 12:36:21,160
a little bit more complex,
19150
12:36:21,160 --> 12:36:23,100
which I highly, highly recommend.
19151
12:36:23,100 --> 12:36:24,500
We tried with that.
19152
12:36:24,500 --> 12:36:25,420
Then in the database,
19153
12:36:25,420 --> 12:36:27,300
we can just check out this is one post.
19154
12:36:27,300 --> 12:36:28,820
I tried to have that.
19155
12:36:28,820 --> 12:36:29,900
This is the post.
19156
12:36:29,900 --> 12:36:33,260
So if I click on this YouTube and the blog,
19157
12:36:33,260 --> 12:36:35,380
this is my first post.
19158
12:36:35,380 --> 12:36:37,740
This is my first post title, content.
19159
12:36:37,740 --> 12:36:40,460
I told you that the content is being stored in the HTML.
19160
12:36:40,460 --> 12:36:43,540
So all your CSS, colors, everything is stored like this.
19161
12:36:43,540 --> 12:36:46,940
That's why we used the React parser.
19162
12:36:46,940 --> 12:36:49,300
A featured image, only the ID is getting us.
19163
12:36:49,300 --> 12:36:51,960
Status is active and the user ID that we are storing.
19164
12:36:51,960 --> 12:36:54,380
So pretty basics, how things are being done.
19165
12:36:54,380 --> 12:36:55,660
Make sure you are aware of it.
19166
12:36:55,660 --> 12:36:57,620
Make sure you try more of it.
19167
12:36:57,620 --> 12:36:59,420
In the settings, I'll also mention that,
19168
12:36:59,420 --> 12:37:02,320
hey, I actually said that all the users
19169
12:37:02,320 --> 12:37:04,660
can actually do the CRUD operation with this document.
19170
12:37:04,660 --> 12:37:06,980
So make sure this permission is also enabled.
19171
12:37:06,980 --> 12:37:08,620
So in this entire application,
19172
12:37:08,620 --> 12:37:10,620
we have seen that how the authentication works,
19173
12:37:10,620 --> 12:37:13,180
how the database works, how the storage works.
19174
12:37:13,180 --> 12:37:17,740
I'll try my best to actually have more on functions as well.
19175
12:37:17,740 --> 12:37:21,540
But in case you didn't notice that on the App Right channel,
19176
12:37:21,540 --> 12:37:23,140
one of my friend Dennis,
19177
12:37:23,140 --> 12:37:24,740
he's creating a couple of videos
19178
12:37:24,740 --> 12:37:26,060
on the official App Right channel
19179
12:37:26,060 --> 12:37:28,940
about using functions in the App Right that are pretty cool.
19180
12:37:28,940 --> 12:37:31,900
So go ahead and check them out in case you have some time.
19181
12:37:31,900 --> 12:37:34,740
But this was all the application that I had.
19182
12:37:34,740 --> 12:37:37,460
By the way, I will push the entire source code
19183
12:37:37,460 --> 12:37:39,340
of this application so that you can match it,
19184
12:37:39,340 --> 12:37:41,520
you can try it on my GitHub as well.
19185
12:37:41,520 --> 12:37:43,180
Feel free to check out my GitHub,
19186
12:37:43,180 --> 12:37:45,980
the entire code for the entire React course,
19187
12:37:45,980 --> 12:37:48,620
plus this mega project is available for all of you.
19188
12:37:48,620 --> 12:37:50,420
If you still find any issue,
19189
12:37:50,420 --> 12:37:53,700
reach me out on my Discord or Twitter or Instagram,
19190
12:37:53,700 --> 12:37:54,740
wherever you feel active,
19191
12:37:54,740 --> 12:37:56,620
I'm pretty active on all social media.
19192
12:37:56,620 --> 12:37:59,460
Reach me out, I'll try my best to create more videos
19193
12:37:59,460 --> 12:38:01,980
if you find something that this was not clear,
19194
12:38:01,980 --> 12:38:02,940
just reach me out,
19195
12:38:02,940 --> 12:38:06,460
I will help you to understand it much, much easier way.
19196
12:38:06,460 --> 12:38:07,840
I hope this video has,
19197
12:38:07,840 --> 12:38:10,320
this entire project has given you some insight
19198
12:38:10,320 --> 12:38:13,540
about how complex a real world application can be.
19199
12:38:13,540 --> 12:38:15,240
A couple of things which are still missing
19200
12:38:15,240 --> 12:38:16,260
in this application,
19201
12:38:16,260 --> 12:38:18,340
which I think you can work on with this,
19202
12:38:18,340 --> 12:38:21,660
is if I go ahead and say,
19203
12:38:21,660 --> 12:38:23,900
all post ad posts are working fine,
19204
12:38:23,900 --> 12:38:26,180
in case when I click on add post,
19205
12:38:26,180 --> 12:38:28,060
there is a little bit CSS issue.
19206
12:38:28,060 --> 12:38:30,540
So this featured image active was supposed to go here,
19207
12:38:30,540 --> 12:38:34,220
I'll try to fix this up, that's one thing.
19208
12:38:34,220 --> 12:38:38,020
And apart from that, if I go ahead and see all post,
19209
12:38:38,020 --> 12:38:40,980
in this all post, these edit and delete button
19210
12:38:40,980 --> 12:38:42,860
supposed to go over the image,
19211
12:38:42,860 --> 12:38:44,140
probably I missed something.
19212
12:38:44,140 --> 12:38:46,060
A rest of them are pretty easy and okay,
19213
12:38:46,060 --> 12:38:48,320
so we can see that it's working nice.
19214
12:38:49,140 --> 12:38:49,980
Let's try to log it out.
19215
12:38:49,980 --> 12:38:51,280
Once I click on the log out button,
19216
12:38:51,280 --> 12:38:53,720
it redirects me onto the login page,
19217
12:38:53,720 --> 12:38:54,920
but it's up to you.
19218
12:38:54,920 --> 12:38:56,360
We don't have still any logo,
19219
12:38:56,360 --> 12:38:58,820
I would highly recommend you to try this out.
19220
12:38:58,820 --> 12:39:02,520
The reason that I am actually leaving this application
19221
12:39:02,520 --> 12:39:05,900
in a position where you can actually work a little bit more,
19222
12:39:05,900 --> 12:39:08,400
because no matter how much you see me coding
19223
12:39:08,400 --> 12:39:10,120
or you follow along with me,
19224
12:39:10,120 --> 12:39:11,660
there will be bugs, there will be error.
19225
12:39:11,660 --> 12:39:14,960
And if you add a couple of more features from your side,
19226
12:39:14,960 --> 12:39:17,520
that actually makes you a good programmer.
19227
12:39:17,520 --> 12:39:18,980
So try to add a little bit more
19228
12:39:18,980 --> 12:39:22,080
or try to convert this application into a social media,
19229
12:39:22,080 --> 12:39:23,360
because it's also same.
19230
12:39:23,360 --> 12:39:25,040
Images are there, posts are there,
19231
12:39:25,040 --> 12:39:27,160
so try to do build something like that.
19232
12:39:27,160 --> 12:39:28,960
And this will give you a lot of confidence.
19233
12:39:28,960 --> 12:39:31,240
If you face any trouble, reach me out on Twitter
19234
12:39:31,240 --> 12:39:34,720
or on Discord, I would be super happy to help you out.
19235
12:39:34,720 --> 12:39:37,040
Watch out for more of my videos and courses.
19236
12:39:37,040 --> 12:39:39,440
I'm constantly making more courses, more videos
19237
12:39:39,440 --> 12:39:40,880
on cutting edge, bleeding edge tech,
19238
12:39:40,880 --> 12:39:42,980
as well as rock solid text as well,
19239
12:39:42,980 --> 12:39:45,160
like Python's and JavaScript as well.
19240
12:39:45,160 --> 12:39:47,720
And if you have some suggestions, do reach me out.
19241
12:39:47,720 --> 12:39:49,640
I would love to have your feedback.
19242
12:39:49,640 --> 12:39:51,200
That's it for this video.
19243
12:39:51,200 --> 12:39:52,040
Hope you have enjoyed.
19244
12:39:52,040 --> 12:39:54,680
It was a great, fantastic journey with all of you.
19245
12:39:54,680 --> 12:39:56,840
I hope you will share the entire series
19246
12:39:56,840 --> 12:39:59,400
so that I get more eyes.
19247
12:39:59,400 --> 12:40:00,600
It would be really, really great
19248
12:40:00,600 --> 12:40:02,640
if you can share on LinkedIn,
19249
12:40:02,640 --> 12:40:05,040
but if you don't want to, that's okay, that's fine too.
19250
12:40:05,040 --> 12:40:06,520
Anyways, that's it for this video.
19251
12:40:06,520 --> 12:40:08,080
Let's catch up in the next one.
1458782
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.