Presenter: We've now got some
of the very basic scaffolding put together
for the very core experience of our application.
We have the ability to present a series of links at the top,
and we have a pattern that we can use
to add in different components that will be exchanged
in the body of the app component.
So now we get to focus
on some of the actual app-related functionality,
or the authentication piece of our application.
In this section,
we're going to get started on our signup component.
The goal of the signup component is to just show a form
to the user that they can use to sign up for a new account.
So to get started, I'll flip back over
to my code editor and inside the components directory,
I'm going to make a new file called signup.
But before I do, there's one quick thing I want to mention.
It's very clear inside of our application
that we're going to have
several different components related to authentication.
This is going to be a signup form.
We're going to also have a sign in form.
We're going to have a page dedicated
to the sign out process.
And then we've also got some other thing
over here that's clearly only supposed to be visible
if a user is signed in.
So these are all different components
that are very closely related to authentication.
In order to, kind of, group all these components together,
I'm going to make a new folder
inside my components directory called Auth.
And inside this folder is where
we will place all the different components
that have something to do to do with authentication.
So, in order to create my signup component,
I'm going to make a new file inside this newly-created
Auth directory called signup dot JS.
Then, inside of here, we're going to
create a class-based component
to display a signup form to our users.
So, at the top I will import React and Component from react.
I'll define my Signup form.
And then, for right now, I'll define a render method.
And let's just put, how about a form tag inside of here?
Let's do a form, oops, form inside of a tag,
and I'll put in two temporary field sets.
A field set is intended to wrap a group of different fields.
In this case, we'll use a field set for a label
and an input element to represent first, the email input,
and then one, a second one, for the password input as well.
So in this first field set, I'll do a label for email,
and then we'll come back in just a second
and take care of the input element right here.
Right now, I'll just do a second field set,
with a label of password, like so.
Now, the reason that we're not doing the inputs just yet,
is that that we are going to use Redux form
to handle all of our form-related logic,
but we've not yet wired up Redux form or
Redux in any way to our application.
So, we'll come back to this component
in just a moment, and take care of that.
Before we do, let's make sure we flip back over
to our index dot JS file, and set up a new route mapping
for the Signup component as well.
One quick thing that we shouldn't forget, though,
we do have to export this component
at the bottom of the file.
So at the bottom, very quickly,
let's do our export default signup.
And now we can go back over
to index dot JS and set up our route.
So, back over here,
we will import the signup component
from components signup.
Oops, should be components auth signup.
So, we just created that new directory,
and now we can create a new route
to show the signup component on the screen.
So we'll do route with a path of slash signup,
and anytime someone goes there,
we'll show the signup component on the screen.
All right, so I think that's about it.
I think we can now test out this component,
and make sure that we can navigate it to,
navigate to it inside of our browser.
So I'll flip back over, and over here,
I can find, out of this smashed-up list of links right here,
I'll find the signup link,
and I can see email and password appear on the screen.
Cool. So that's a reasonable start.
We'll continue in the next section,
and we're going to get started
on adding in Redux and redux form
to our application.