1
00:00:00,750 --> 00:00:01,583
Presenter: We've now got some

2
00:00:01,583 --> 00:00:03,600
of the very basic scaffolding put together

3
00:00:03,600 --> 00:00:05,843
for the very core experience of our application.

4
00:00:05,843 --> 00:00:09,840
We have the ability to present a series of links at the top,

5
00:00:09,840 --> 00:00:11,670
and we have a pattern that we can use

6
00:00:11,670 --> 00:00:14,610
to add in different components that will be exchanged

7
00:00:14,610 --> 00:00:16,650
in the body of the app component.

8
00:00:16,650 --> 00:00:17,550
So now we get to focus

9
00:00:17,550 --> 00:00:20,395
on some of the actual app-related functionality,

10
00:00:20,395 --> 00:00:23,484
or the authentication piece of our application.

11
00:00:23,484 --> 00:00:24,750
In this section,

12
00:00:24,750 --> 00:00:27,174
we're going to get started on our signup component.

13
00:00:27,174 --> 00:00:30,540
The goal of the signup component is to just show a form

14
00:00:30,540 --> 00:00:33,323
to the user that they can use to sign up for a new account.

15
00:00:33,323 --> 00:00:35,880
So to get started, I'll flip back over

16
00:00:35,880 --> 00:00:39,270
to my code editor and inside the components directory,

17
00:00:39,270 --> 00:00:41,790
I'm going to make a new file called signup.

18
00:00:41,790 --> 00:00:44,092
But before I do, there's one quick thing I want to mention.

19
00:00:44,092 --> 00:00:46,950
It's very clear inside of our application

20
00:00:46,950 --> 00:00:47,783
that we're going to have

21
00:00:47,783 --> 00:00:50,242
several different components related to authentication.

22
00:00:50,242 --> 00:00:52,315
This is going to be a signup form.

23
00:00:52,315 --> 00:00:55,737
We're going to also have a sign in form.

24
00:00:55,737 --> 00:00:58,410
We're going to have a page dedicated

25
00:00:58,410 --> 00:01:00,540
to the sign out process.

26
00:01:00,540 --> 00:01:02,430
And then we've also got some other thing

27
00:01:02,430 --> 00:01:04,890
over here that's clearly only supposed to be visible

28
00:01:04,890 --> 00:01:06,292
if a user is signed in.

29
00:01:06,292 --> 00:01:08,502
So these are all different components

30
00:01:08,502 --> 00:01:11,573
that are very closely related to authentication.

31
00:01:11,573 --> 00:01:14,710
In order to, kind of, group all these components together,

32
00:01:14,710 --> 00:01:16,440
I'm going to make a new folder

33
00:01:16,440 --> 00:01:19,796
inside my components directory called Auth.

34
00:01:19,796 --> 00:01:21,660
And inside this folder is where

35
00:01:21,660 --> 00:01:23,940
we will place all the different components

36
00:01:23,940 --> 00:01:26,839
that have something to do to do with authentication.

37
00:01:26,839 --> 00:01:30,122
So, in order to create my signup component,

38
00:01:30,122 --> 00:01:33,150
I'm going to make a new file inside this newly-created

39
00:01:33,150 --> 00:01:37,623
Auth directory called signup dot JS.

40
00:01:39,258 --> 00:01:40,950
Then, inside of here, we're going to

41
00:01:40,950 --> 00:01:42,568
create a class-based component

42
00:01:42,568 --> 00:01:46,230
to display a signup form to our users.

43
00:01:46,230 --> 00:01:51,230
So, at the top I will import React and Component from react.

44
00:01:53,160 --> 00:01:56,673
I'll define my Signup form.

45
00:01:59,880 --> 00:02:02,700
And then, for right now, I'll define a render method.

46
00:02:02,700 --> 00:02:06,660
And let's just put, how about a form tag inside of here?

47
00:02:06,660 --> 00:02:11,660
Let's do a form, oops, form inside of a tag,

48
00:02:14,580 --> 00:02:18,060
and I'll put in two temporary field sets.

49
00:02:18,060 --> 00:02:21,480
A field set is intended to wrap a group of different fields.

50
00:02:21,480 --> 00:02:24,090
In this case, we'll use a field set for a label

51
00:02:24,090 --> 00:02:27,887
and an input element to represent first, the email input,

52
00:02:27,887 --> 00:02:32,880
and then one, a second one, for the password input as well.

53
00:02:32,880 --> 00:02:36,837
So in this first field set, I'll do a label for email,

54
00:02:40,500 --> 00:02:41,940
and then we'll come back in just a second

55
00:02:41,940 --> 00:02:44,240
and take care of the input element right here.

56
00:02:45,150 --> 00:02:47,300
Right now, I'll just do a second field set,

57
00:02:50,250 --> 00:02:55,250
with a label of password, like so.

58
00:02:56,340 --> 00:02:58,830
Now, the reason that we're not doing the inputs just yet,

59
00:02:58,830 --> 00:03:00,720
is that that we are going to use Redux form

60
00:03:00,720 --> 00:03:03,118
to handle all of our form-related logic,

61
00:03:03,118 --> 00:03:05,850
but we've not yet wired up Redux form or

62
00:03:05,850 --> 00:03:08,243
Redux in any way to our application.

63
00:03:08,243 --> 00:03:09,840
So, we'll come back to this component

64
00:03:09,840 --> 00:03:11,773
in just a moment, and take care of that.

65
00:03:11,773 --> 00:03:14,430
Before we do, let's make sure we flip back over

66
00:03:14,430 --> 00:03:17,970
to our index dot JS file, and set up a new route mapping

67
00:03:17,970 --> 00:03:20,490
for the Signup component as well.

68
00:03:20,490 --> 00:03:22,200
One quick thing that we shouldn't forget, though,

69
00:03:22,200 --> 00:03:24,090
we do have to export this component

70
00:03:24,090 --> 00:03:25,800
at the bottom of the file.

71
00:03:25,800 --> 00:03:27,120
So at the bottom, very quickly,

72
00:03:27,120 --> 00:03:29,643
let's do our export default signup.

73
00:03:31,100 --> 00:03:32,640
And now we can go back over

74
00:03:32,640 --> 00:03:34,953
to index dot JS and set up our route.

75
00:03:37,020 --> 00:03:38,310
So, back over here,

76
00:03:38,310 --> 00:03:41,220
we will import the signup component

77
00:03:41,220 --> 00:03:44,520
from components signup.

78
00:03:44,520 --> 00:03:47,190
Oops, should be components auth signup.

79
00:03:47,190 --> 00:03:49,254
So, we just created that new directory,

80
00:03:49,254 --> 00:03:51,420
and now we can create a new route

81
00:03:51,420 --> 00:03:53,613
to show the signup component on the screen.

82
00:03:54,660 --> 00:03:58,868
So we'll do route with a path of slash signup,

83
00:03:58,868 --> 00:04:01,074
and anytime someone goes there,

84
00:04:01,074 --> 00:04:05,133
we'll show the signup component on the screen.

85
00:04:07,860 --> 00:04:09,600
All right, so I think that's about it.

86
00:04:09,600 --> 00:04:12,090
I think we can now test out this component,

87
00:04:12,090 --> 00:04:13,800
and make sure that we can navigate it to,

88
00:04:13,800 --> 00:04:16,170
navigate to it inside of our browser.

89
00:04:16,170 --> 00:04:19,560
So I'll flip back over, and over here,

90
00:04:19,560 --> 00:04:23,280
I can find, out of this smashed-up list of links right here,

91
00:04:23,280 --> 00:04:24,759
I'll find the signup link,

92
00:04:24,759 --> 00:04:28,137
and I can see email and password appear on the screen.

93
00:04:28,137 --> 00:04:30,690
Cool. So that's a reasonable start.

94
00:04:30,690 --> 00:04:32,070
We'll continue in the next section,

95
00:04:32,070 --> 00:04:33,450
and we're going to get started

96
00:04:33,450 --> 00:04:35,730
on adding in Redux and redux form

97
00:04:35,730 --> 00:04:36,783
to our application.