Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,940 --> 00:00:06,190
Hey, everyone, it's Andre again, I just wanted to talk quickly about the upcoming videos, you see,
2
00:00:06,220 --> 00:00:13,360
we're going to start working on our signing page and signing is something that is extremely common all
3
00:00:13,360 --> 00:00:15,610
across apps throughout your career.
4
00:00:15,640 --> 00:00:21,010
You're for sure going to have to need to create some sort of a sign for now.
5
00:00:21,010 --> 00:00:28,930
Sign in is a combination of creating forms like this and also doing something called user authentication,
6
00:00:29,680 --> 00:00:35,320
where we're able to register a user and also check if a user exists and let them sign in.
7
00:00:36,390 --> 00:00:41,610
Over the next couple of videos, we're going to try and solve this very common problem and we're going
8
00:00:41,610 --> 00:00:48,660
to try and show the best way to do it with react as well as later on using some sort of back and storage
9
00:00:48,660 --> 00:00:51,950
using Firebase to actually get this feature to work.
10
00:00:53,140 --> 00:00:59,110
Now, over the next couple of videos, we're going to assume that, you know, basic e-mail forms if
11
00:00:59,110 --> 00:01:01,780
you don't all linked to this resource, so you can read up on it.
12
00:01:01,960 --> 00:01:08,110
But we assume that e-mail forms is something that you're quite familiar with and you're also familiar
13
00:01:08,110 --> 00:01:10,330
with things like event prevent default.
14
00:01:10,690 --> 00:01:17,260
And what you will see in the next couple of videos is a very common pattern that you'll use not just
15
00:01:17,260 --> 00:01:20,230
with this project, but with future projects as well.
16
00:01:20,620 --> 00:01:26,440
So when you see things like event prevent default and maybe you don't understand it again, it's always
17
00:01:26,440 --> 00:01:30,180
good to make sure that you stop, pause and maybe Google around.
18
00:01:30,430 --> 00:01:38,740
But for example, prevent default is used to stop the default behavior of an HMO form and potentially
19
00:01:38,740 --> 00:01:41,350
hijack it or prevent something from happening.
20
00:01:41,380 --> 00:01:42,760
So we have more control over.
21
00:01:43,480 --> 00:01:48,190
But the most important thing that we're going to talk about and something that you'll carry with you
22
00:01:48,190 --> 00:01:55,660
throughout your career is this as we're building this sign in and register functionality, these three
23
00:01:55,660 --> 00:01:58,300
points are going to be really evident.
24
00:01:58,300 --> 00:02:05,140
And I want you to really pay attention on what we're going to do to make sure that we create these components
25
00:02:05,140 --> 00:02:08,590
and the functionality using these three principles.
26
00:02:09,340 --> 00:02:15,640
For example, when it comes to deciding on components, we'll see that we have forms that are quite
27
00:02:15,850 --> 00:02:16,500
similar.
28
00:02:17,350 --> 00:02:19,750
We have buttons that are quite similar.
29
00:02:20,080 --> 00:02:26,500
Instead of coating them each individually, we're going to have components that are flexible enough
30
00:02:26,620 --> 00:02:34,000
to be able to use just want one Riak component and style it or form it in different ways.
31
00:02:34,480 --> 00:02:37,110
Remember, reactor's all about reusable components.
32
00:02:37,660 --> 00:02:42,310
If we take a look at the code, which you're going to write over the next couple of videos, again,
33
00:02:42,340 --> 00:02:46,660
you won't have this yet when we work on the Sinon component.
34
00:02:48,400 --> 00:02:55,030
We're going to get to a point where we have this form input component that we're going to create ourselves
35
00:02:55,030 --> 00:03:01,660
a custom component so that we go from having a simple, simple e-mail input component to something that
36
00:03:01,660 --> 00:03:07,710
is flexible, that we can pass in different properties to customize to our liking.
37
00:03:08,320 --> 00:03:11,770
For example, you register and a signing component.
38
00:03:12,970 --> 00:03:20,740
We also have a custom button where we can give it different customizations in this case, it's only
39
00:03:20,740 --> 00:03:26,590
the Sinon, but this custom button can be used with our signing with Google as well as the sign up eventually.
40
00:03:27,790 --> 00:03:33,700
So you're going to see how to decide on these components, how to make them reusable across our different
41
00:03:33,880 --> 00:03:39,340
app, but more importantly, we're going to really figure out these two things, deciding where the
42
00:03:39,340 --> 00:03:43,390
state should live and what changes when state changes.
43
00:03:44,560 --> 00:03:50,200
Again, this is code that we're going to write together, but you'll notice that we have a handle simit
44
00:03:50,860 --> 00:03:59,410
method and a handle change method, the one method is going to happen whenever somebody is typing information
45
00:03:59,650 --> 00:04:03,820
in the input box where we update the state.
46
00:04:04,780 --> 00:04:10,720
And another one, which is the handle summit, which will handle when somebody clicks on one of these
47
00:04:10,900 --> 00:04:11,410
buttons.
48
00:04:12,380 --> 00:04:19,160
So we're going to start with basic input, a simple syntax and basic bun, a simple syntax to creating
49
00:04:19,160 --> 00:04:26,810
these custom reusable components that are able to react to user changing the state of the application.
50
00:04:27,860 --> 00:04:34,970
And the final thing I want to mention is this where do you think the state for the form, Liz?
51
00:04:35,930 --> 00:04:43,940
This is a very common problem with react, for example, we have or we're going to have a sign in page,
52
00:04:43,940 --> 00:04:50,960
as you can see here, and this sign in page will be an entire component that contains these two forms.
53
00:04:51,770 --> 00:04:55,640
Now, each of these forms will have its own component.
54
00:04:56,240 --> 00:05:00,440
One will be the signing component, one the register component.
55
00:05:01,490 --> 00:05:02,480
But here's my question.
56
00:05:03,540 --> 00:05:10,050
If this was our assignment page and this was our sign in and this is our register, where should the
57
00:05:10,050 --> 00:05:11,180
state live?
58
00:05:11,790 --> 00:05:15,930
Where should the information that the user types in, for example, in here?
59
00:05:17,180 --> 00:05:18,300
Where should it live?
60
00:05:18,890 --> 00:05:25,010
Should it live in this component, should it live in this component or should it live in this entire
61
00:05:25,010 --> 00:05:25,990
page component?
62
00:05:27,420 --> 00:05:29,230
Pause the video and think about that.
63
00:05:30,000 --> 00:05:30,920
Ready for the answer?
64
00:05:32,040 --> 00:05:39,630
The easiest way to think about this is to lift up the state only up to the point that the components
65
00:05:39,630 --> 00:05:40,050
needed.
66
00:05:40,910 --> 00:05:43,490
So when we create this component.
67
00:05:44,580 --> 00:05:51,810
We're going to actually keep the state in its own individual component, so sign in is going to have
68
00:05:51,810 --> 00:05:55,830
its own state and register is going to have its own state.
69
00:05:56,910 --> 00:05:57,690
Why is that?
70
00:05:58,900 --> 00:06:04,630
Well, because these two things don't need to talk to each other, sign in, doesn't really care what
71
00:06:04,630 --> 00:06:11,210
we enter and register and register, doesn't care what's in the form of sign in.
72
00:06:12,070 --> 00:06:19,930
So if we lifted the state up and kept the state in the entire page every time we update this.
73
00:06:21,520 --> 00:06:23,530
And the state changes.
74
00:06:24,920 --> 00:06:27,510
Both of these would get we rendered.
75
00:06:27,620 --> 00:06:34,610
So that means two extra calculations that react has to do to render this and we render this if we kept
76
00:06:34,610 --> 00:06:41,120
state just in the sinon, because that's the only place that we care about those changes, only this
77
00:06:41,120 --> 00:06:48,200
component is going to get really rendered when we type something in here or click Simmen instead of
78
00:06:48,200 --> 00:06:49,100
this over here.
79
00:06:50,090 --> 00:06:50,480
Now.
80
00:06:51,290 --> 00:06:57,620
I want you to just notice this as we're building it, that it was going to make these decisions and
81
00:06:57,770 --> 00:07:04,910
try to keep state to the lowest possible level, keeping the concern in place to whatever component
82
00:07:04,910 --> 00:07:07,730
needs it so that we're more efficient with your code.
83
00:07:08,660 --> 00:07:13,970
This is something that will come with practice, but remember, over the next couple of videos, notice
84
00:07:13,970 --> 00:07:19,580
how Iowa is going to keep these three principles in mind and build out the components.
85
00:07:20,650 --> 00:07:21,290
Let's get started.
9036
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.