And up next, let's work on the Register page.
We're going to start with just the basic setup with one input.
Then we'll create the component.
So later we can quickly set up a bunch of inputs and then we'll return to the register page and essentially
add all of the inputs.
Now, I can tell you right away that there's going to be no functionality yet because in order to.
Send some kind of request.
We need to create the server first.
So for now, let's just navigate back home.
So this is going to be our dashboard, but we're actually looking for the register like so.
So let's go over here, the register page, and like I said, let's just set up the general structure.
So for that we first want to look for our page.
So we're looking for the register one.
As far as the imports, I'm looking for a wrapper and a link, but I think for the link I'll just use
the auto import option.
So let me first go with import then wrapper.
And it's not going to be landing page or error page.
Actually it's going to be register and login page because there are going to be very, very similar.
So again, we're going to go here with the landing one.
Then let's change it.
And now we're looking for the register and login page.
That's the wrapper.
So here in the return, first of all, let's set up the wrapper.
Then we want to go with the form component or I'm sorry, form element.
The reason why I'm saying form component because eventually it will be a form component from React router.
Dom Yep, they have their own form component.
Then instead of the form, let's go here with the logo.
Like I said, I'll try to set up the auto import.
This is what we should see on the screen.
Then let's go with heading for, let's say register.
Okay, awesome.
And then let's create our.
First input.
Now the input is going to be sitting in the form row, so there's going to be additional div with a
class of form row just so we get some margin in the bottom.
So we go here with form row that's a div inside of it.
Let's set up a label.
And as far as the html4, I know that the ID is going to be name, so type over here name.
We do want to add again a global class form label.
And then as far as the value, I'll type over here.
Name.
And if you're not familiar with this attribute, I'll showcase in a second.
Then we want to go with input.
The type will be text.
We also want to set up the idea and like I said, it needs to match whatever we have over here in the
html4.
And basically we'll type name, then we must, must, must, must, must have the name attribute.
And yes, in this case it's going to look funky.
Name is equal to name.
Yep.
That's going to be the case.
You'll see later that of course there's going to be an email and last name and all that.
So of course, in that case it's going to be easier to understand.
But yes, basically we must have the name attribute because this is how we will access the values and
then we need to provide some kind of value.
And in this case, of course it is name.
Then we want to go with class name and we'll set it equal to form hyphen input.
And there are two more attributes we're going to add, but I want to discuss them at the very, very
end.
So for now, let me just save it.
And notice once you click on the label, actually it adds a focus on the input.
And again, this is happening because we have this HTML four and the value is exactly the same as the
ID value in the input and then right after the div.
So don't place it inside of the div right outside of the div we want to go with button.
This is going to be our submit button and therefore type will be equal to submit.
Then class name will be equal to BTN and then BTN block.
As far as the value, let's just say here, submit and then right below it we want to set up a link.
To a login page.
Let's say the user has already registered.
So in that case, he or she just quickly wants to navigate to a login page.
Correct.
And therefore, right after the button, let's go here with the paragraph and we'll say already a member.
And then right below it, we're going to go with our link component.
So let's say link two and where we want to navigate.
Well, let's go to a login page.
Let's add a forward slash login as far as the classes we're going to go with BTN or I'm sorry, no member
BTN, that's the one we'll style in the style component and effectively we'll just type here login.
Now two more attributes I want to add to my input are following default value and required.
Now, as far as default value, eventually we will remove it.
But the reason why I want to use it in the register and login is just going to speed up our development
because remember.
When you have a login and register functionality, you want to test it, of course, somewhat vigorously
and it just saves you time if you already have some default values.
So that way you can right away test for errors.
You can right away test for the success and all that.
This is totally optional if you don't want to do it.
Technically, you don't have to.
I'm just going to write, let's say in here, John.
And as a result, whenever I will need to test whether everything works correctly, I won't have to
type John and last name and email and all that.
And yes, I'll do the same thing in the login as well and maybe in some other components in the dashboard.
Again, the reason why we're doing that, we can definitely speed up the development, but technically
this is optional.
So in this case I'm just going to go with default value and equals to John.
So essentially whatever you type over here will automatically show up.
Now don't worry, of course you can change it.
You can add the characters, you can remove it, so you'll be able to test for errors as well.
But again, there's going to be some default value.
And another attribute I want to use is the required one, which essentially is coming from the HTML.
And basically notice if the input is going to be empty, we won't be even able to submit the form.
And this is going to make sense a little bit later when we start submitting the form values because
we will collect the data using the form data API.
So basically these are not going to be controlled inputs.
Like you're probably used to working because react router dom in the latest version is using form data
API to nicely.
Access those values.
And therefore we need to set up some kind of check.
Now, of course, there's going to be a check for empty values on the server as well.
But if we want to add some front end checks, which is again a typical setup, you have check for empty
values on the front end as well as the server.
And if we don't have the controlled inputs, which we don't, then this is a very, very nifty solution.
Again, we're pretty much checking for empty values using HTML.
So as you can see, there's really no JavaScript logic over here, but I cannot submit the form.
All right, we have this.
Please fill out this field and with this in place we can move on to the next topic.