- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.360 --> 00:00:01.610
So far in this section,
2
00:00:01.610 --> 00:00:05.220
we've covered quite a few of the React fundamentals.
3
00:00:05.220 --> 00:00:06.260
And in this guide,
4
00:00:06.260 --> 00:00:09.950
we are gonna start building out a form.
5
00:00:09.950 --> 00:00:13.250
Now, pretty much any application that you're gonna build
6
00:00:13.250 --> 00:00:17.360
is gonna have to have a form in some form or another.
7
00:00:17.360 --> 00:00:21.130
It's gonna have to have way to collect data
8
00:00:21.130 --> 00:00:24.230
and then pass that data up to the API
9
00:00:24.230 --> 00:00:25.690
so that it can be stored.
10
00:00:25.690 --> 00:00:26.610
And so that's where we're gonna
11
00:00:26.610 --> 00:00:28.820
start breaking into in this guide,
12
00:00:28.820 --> 00:00:32.500
and we're gonna create a login component.
13
00:00:32.500 --> 00:00:35.090
So let's get started with that.
14
00:00:35.090 --> 00:00:38.340
I'm gonna open up the side panel here,
15
00:00:38.340 --> 00:00:40.060
and let's look at the file system.
16
00:00:40.060 --> 00:00:41.960
We have our components and our pages.
17
00:00:41.960 --> 00:00:45.220
I'm gonna create a new page here,
18
00:00:45.220 --> 00:00:49.340
and I'm gonna call this page Admin Auth.
19
00:00:49.340 --> 00:00:52.350
Or let's actually call it Admin Login
20
00:00:52.350 --> 00:00:55.060
just to make it really clear on what we're doing.
21
00:00:55.060 --> 00:00:57.500
And then inside of Admin Login,
22
00:00:57.500 --> 00:00:59.990
for right now we're just gonna make this really basic.
23
00:00:59.990 --> 00:01:03.870
So I'm gonna say I want to import React.
24
00:01:03.870 --> 00:01:08.350
I know that I wanna have the useState hook,
25
00:01:08.350 --> 00:01:12.400
and that's all gonna be imported from React.
26
00:01:12.400 --> 00:01:14.760
And the reason why I'm bringing in useState,
27
00:01:14.760 --> 00:01:17.810
as you're gonna see, is that our form needs
28
00:01:17.810 --> 00:01:21.190
the ability to update this component's state
29
00:01:21.190 --> 00:01:23.070
because that's how we're gonna store the data
30
00:01:23.070 --> 00:01:25.430
before we send it up to the API.
31
00:01:25.430 --> 00:01:28.640
So now let's just create an export,
32
00:01:28.640 --> 00:01:30.880
so I'm gonna say export default.
33
00:01:30.880 --> 00:01:33.480
We're not gonna take in any props right now.
34
00:01:33.480 --> 00:01:34.830
And then for right now,
35
00:01:34.830 --> 00:01:37.100
I'm just gonna return a div.
36
00:01:37.100 --> 00:01:40.820
And then let's just make sure that all of this is working.
37
00:01:40.820 --> 00:01:44.790
So for right now, I'm gonna say Admin Login.
38
00:01:44.790 --> 00:01:47.670
And then let's add this to the router,
39
00:01:47.670 --> 00:01:51.840
so open up your router file which is in the src,
40
00:01:51.840 --> 00:01:54.770
utils, and then router.js.
41
00:01:54.770 --> 00:01:56.740
And then let's import this.
42
00:01:56.740 --> 00:01:58.470
So I'm gonna come up here,
43
00:01:58.470 --> 00:02:03.470
say import AdminLogin from pages/AdminLogin,
44
00:02:07.080 --> 00:02:10.190
and then I will import it down here.
45
00:02:10.190 --> 00:02:12.580
And so I'm gonna put this in our list of exports
46
00:02:12.580 --> 00:02:16.070
where I say admin-login,
47
00:02:16.070 --> 00:02:20.680
and then the path for this is gonna be admin-login.
48
00:02:20.680 --> 00:02:22.210
You could name yours whatever you'd like.
49
00:02:22.210 --> 00:02:26.520
And then this is gonna be using the Admin Login component.
50
00:02:26.520 --> 00:02:29.080
Now, I'm not gonna put this up in our nav bar,
51
00:02:29.080 --> 00:02:32.030
this is simply gonna be something that we know about.
52
00:02:32.030 --> 00:02:33.740
We don't want the other users
53
00:02:33.740 --> 00:02:35.580
that are coming to the site to know about it
54
00:02:35.580 --> 00:02:38.330
because you're gonna be the only person logging in.
55
00:02:38.330 --> 00:02:40.270
So let's test this out to make sure it's working,
56
00:02:40.270 --> 00:02:45.270
so go to localhost:8080/admin-login,
57
00:02:45.400 --> 00:02:48.250
and there you go, you can see that that is working.
58
00:02:48.250 --> 00:02:50.050
And I'm gonna zoom in here
59
00:02:50.050 --> 00:02:53.140
because we're gonna take kind of a little bit of a deep dive
60
00:02:53.140 --> 00:02:56.240
into how these forms are working.
61
00:02:56.240 --> 00:02:58.740
So inside of Admin Login here,
62
00:02:58.740 --> 00:03:02.890
I'm going to start adding some form elements.
63
00:03:02.890 --> 00:03:05.760
And so I'm going to right under Admin Login
64
00:03:05.760 --> 00:03:07.500
and in between the div here,
65
00:03:07.500 --> 00:03:10.900
I'm gonna create a form component,
66
00:03:10.900 --> 00:03:13.480
or really just a form element here.
67
00:03:13.480 --> 00:03:16.270
And then inside of it, I'm gonna put in input.
68
00:03:16.270 --> 00:03:21.120
So I'll say input and then value equals,
69
00:03:21.120 --> 00:03:22.990
and then this is where we're gonna put our state.
70
00:03:22.990 --> 00:03:24.020
And I'm just gonna write this
71
00:03:24.020 --> 00:03:26.300
out like I've already created out state,
72
00:03:26.300 --> 00:03:29.570
and then we'll go and we'll implement that afterwards.
73
00:03:29.570 --> 00:03:31.890
So here, I'll say email,
74
00:03:31.890 --> 00:03:35.640
and then for right now that's all I'm gonna put in there.
75
00:03:35.640 --> 00:03:39.450
And I actually wanna make this a self-closing tag,
76
00:03:39.450 --> 00:03:44.360
and this is of type equals email,
77
00:03:44.360 --> 00:03:47.650
and hit Save, and then here you can see...
78
00:03:47.650 --> 00:03:49.100
Oh, looks like we have a little error,
79
00:03:49.100 --> 00:03:50.300
and the error is because we haven't
80
00:03:50.300 --> 00:03:53.340
actually declared that email state, so let's do that.
81
00:03:53.340 --> 00:03:55.270
So just like we've created state before,
82
00:03:55.270 --> 00:03:59.293
I'm gonna say const email and then setEmail.
83
00:04:00.386 --> 00:04:03.100
Set that equal to useState,
84
00:04:03.100 --> 00:04:05.850
and to start off we're gonna start off with our state
85
00:04:05.850 --> 00:04:08.970
being just a empty string just like this.
86
00:04:08.970 --> 00:04:11.530
Hit Save, and now you can see that we have
87
00:04:11.530 --> 00:04:13.990
this big, old input here.
88
00:04:13.990 --> 00:04:16.990
Now, if I start typing, notice what's happen.
89
00:04:16.990 --> 00:04:19.010
Nothing happens, and that kind of weird
90
00:04:19.010 --> 00:04:21.600
because if you were to do this in pure HTML,
91
00:04:21.600 --> 00:04:23.030
you'd be able to start typing,
92
00:04:23.030 --> 00:04:26.870
and whatever text you're typing would work,
93
00:04:26.870 --> 00:04:28.710
and would show up automatically.
94
00:04:28.710 --> 00:04:31.730
But this is React, we need the ability,
95
00:04:31.730 --> 00:04:33.930
because we declared this email here,
96
00:04:33.930 --> 00:04:38.010
we need the ability to set this email state.
97
00:04:38.010 --> 00:04:41.620
So the way this works is email is the value,
98
00:04:41.620 --> 00:04:44.040
so everything inside of here is the value.
99
00:04:44.040 --> 00:04:46.670
I'm gonna put up here, I'm gonna put some debugging here.
100
00:04:46.670 --> 00:04:51.220
So I'm gonna do a h2 tag,
101
00:04:51.220 --> 00:04:54.340
and I'm gonna say this is what our email value is.
102
00:04:54.340 --> 00:04:57.650
And then in curly brackets, I'll put email.
103
00:04:57.650 --> 00:05:01.480
So for right now, nothing is showing up.
104
00:05:01.480 --> 00:05:03.570
Okay, so how do we set that?
105
00:05:03.570 --> 00:05:05.500
Well, that is where we use
106
00:05:05.500 --> 00:05:08.490
what is called a onChange handler.
107
00:05:08.490 --> 00:05:10.600
So anytime you're working with a form,
108
00:05:10.600 --> 00:05:14.250
you need to listen for changes to that form
109
00:05:14.250 --> 00:05:16.270
so that you can update the state.
110
00:05:16.270 --> 00:05:20.070
So what I can do here is I can say onChange,
111
00:05:20.070 --> 00:05:22.140
and it's spelled out exactly like that
112
00:05:22.140 --> 00:05:24.740
with a lowercase O and a capital C.
113
00:05:24.740 --> 00:05:26.880
I'm gonna say onChange equals,
114
00:05:26.880 --> 00:05:30.550
and then in curly brackets I'm gonna say evt,
115
00:05:30.550 --> 00:05:32.030
which you could call this anything you want.
116
00:05:32.030 --> 00:05:33.630
You could call it ASDF if you wanted,
117
00:05:33.630 --> 00:05:35.810
but evt, it's short for event
118
00:05:35.810 --> 00:05:37.470
because that's what we're listening for.
119
00:05:37.470 --> 00:05:41.710
We're listening for an event on this input.
120
00:05:41.710 --> 00:05:43.430
So I'm gonna say event
121
00:05:43.430 --> 00:05:46.667
and then a fat arrow function, setEmail.
122
00:05:48.100 --> 00:05:49.860
And then inside of here,
123
00:05:49.860 --> 00:05:54.860
what I'm looking for is evt.target.value.
124
00:05:55.900 --> 00:05:57.810
Yeah, let me hit Save here.
125
00:05:57.810 --> 00:06:00.580
And now if I start typing, I can start typing,
126
00:06:00.580 --> 00:06:03.970
and you can see that that is all working.
127
00:06:03.970 --> 00:06:07.710
So we are now successfully updating
128
00:06:07.710 --> 00:06:11.750
this email state with this form element.
129
00:06:11.750 --> 00:06:15.540
So that is an introduction to React forms,
130
00:06:15.540 --> 00:06:16.670
and in the next guide,
131
00:06:16.670 --> 00:06:18.590
we're gonna see how we can extend this
132
00:06:18.590 --> 00:06:22.300
and how we can build out our entire form element
133
00:06:22.300 --> 00:06:24.393
for our authentication system.