In this video we're going to start working on our sign up form right here.
We're not going to worry about the header at the top right now we're really just going to worry about
the form right there.
I want to be able to see this component anytime I go to a year l like ticketing dot Dev slash off slash
sign up.
So if we go to that route right there I want to see these sign up component up here on the screen so
to do so we will go back over to our editor.
We'll find our pages directory and we'll create a new folder inside they're called off and then inside
there will make a new file called sign up dot J.S. so by defining a auth folder and putting a sign up
file inside there that is going to define the root of all flash sign up inside of our next application.
Now all we have to do is define and export a react component from this file.
And then if we go to our flash sign up we will see the contents of that component appear on the screen.
So let's try it out right now.
Inside of sign up J us I will export defaults and I will return inside of here a form and for right
now I'm just going to put an H1 inside that says Sign up we're gonna come back in just a moment and
add in some buttons and inputs and labels and whatnot.
But let's just say this right now and do a quick test back inside of our browser leaflet makeover and
I'm going to try to navigate to ticketing that Dev off slash sign up and there we go.
So again anytime we want to have a nested root of sorts all we do is create a folder and place our components
inside there.
All right let's continue with the form right here.
So like I said we're going to add in a couple of labels inputs and whatnot right after that each one
I'm gonna put in a div with a class name of form and dash group
or then place a label and give it the text email address and then an input with the class name of form
dash control.
So this will show our label and input for the email we want to do something very similar for the password
as well just to save a little bit of time.
I'm going to copy that entire div and pasted underneath itself and I'll change the label to password
and on inputs I'll add in a type to this thing of password just to obfuscate any text that gets typed
inside their.
And then finally after those two divs I'm going to place a button and I'll get this and text like sign
up also get the button a class name of B10 n and dash primary.
All right so that is our sign up form once you've got this all put together we'll save it and then flip
back over and we should see something like this appear on the screen.
Perfect.
You might notice that I've got some icons here on the right hand side.
Those are coming from my password manager that I'm running inside of chrome.
So if you do not see those icons that is 100 percent to be expected do not sweat it all right.
Well now that we've got the basics of this form put together.
Let's take a pause right here and continue adding in some functionality in just a moment.