All right.
And once we know when we're going to be building, let's start by setting up all the imports online.
Slowly but surely, we will get to all the logic as well.
And we're going to go here with import use state.
Then I'm looking for years effect fact.
And both of them are coming from React and also I want to set up my logo, correct?
So let's start here from React and then we're going to go with logo.
So important logo.
Now, this one will be from the components, so we'll go one level up.
We're looking in the components.
And since we have the index one, we are pretty much in good shape.
And after that, we want to go with our wrapper.
Now this one will be a wrapper.
So that's the name.
And where is it located?
Well, we're going to go with the assets that and more specifically wrappers.
And then all the way there, we'll look for the page.
So once we have these imports, then we want to set up that default state and essentially think of this
default state as all our values.
So where I want for a name or one for email, as well as the password and we'll toggle between.
So not only will change here the values for the heading three.
As well as toggle the input for the name, but will also change which function we invoke once we submit
because there's going to be two requests one for register and one for logging.
And if this doesn't make any sense at the moment, don't worry, it will be clear once we get there.
So first, let's start with that initial state.
I'll set it up as an object.
Call this a state and land inside of it.
We're going to go with name when we want to set up email as well and then password.
So let's call this password here.
Then empty string for now.
And like I said, is member doesn't really matter what you set it up.
In my case, I'm going to go with a true.
Let's save it and let's move into the register function and side of it.
We're going to go with constant values.
So that's going to be my use state and set values.
And then as far as the default value, I'll use my initial state.
So use I'm state and let's set up the initial state.
And as you can already guess.
Now the values represent this object, and then I have set values function, which essentially will
control it.
Now since is that an object or have to do a little bit of magic there?
It's not just one value.
Now the reason why I went with this approach, where basically I have the object well, I have multiple
values, so technically I can use multiple use states.
But I thought that this is just going to be faster.
And then I'll add a comment for my global state and use navigate because that's coming up so global
state and use navigate.
And after this one, we'll set up our handle change announcement.
Again, those are just going to be technically dummy functions because at the moment we'll just be logging
them.
Just keep in mind that we will need them because we will be updating these inputs as well as meaning
in the form.
So those are the two functions that we'll need just for a moment.
We'll set up logs.
That's it.
So council and I'll call this channel change.
So this is going to fire every time or type something in one of the inputs.
The way we'll access the wires is by using the event object.
And then as far as the logic, well, for now, let's just go with, like I said, log on simply and
by the way, it's set up.
I simply need to go with event and target.
So that way, we'll see.
Well, which input are we working on?
The same will be for annual submit or on submit.
Doesn't really matter.
In this case, I went with the same name, but of course you can change if you want.
Again, we will be looking for the event object.
We want to prevent the default right away.
We want to prevent the default behavior.
And we also want to log effectively when we're talking about Target.
In this case, that is going to be our form.
Let's say this, and now let's finally work on the actual return.
So first, I want to grab my wrapper.
So that's where I have all the styles since I have the global class.
But then I'm a full page.
I'm going to use this one.
So say full page.
Now let me save it.
And now let's navigate to a register here in the browser.
So let's say I register and notice how it has a full page, and that's why this one is sitting in the
center.
So full page essentially is just setting this up everything as far as 100 percent.
And then when it comes to the wrapper, I have some styles that places this in the center.
So now let me remove this.
I mean comment and I actually want to go with the form.
So that is going to be a form element now as part of the action while we'll handle that.
So we're not going to use that one class nine will be form and pretty much all my form classes are sitting
in the next SS.
So if I save here, notice I have a right away form and that's the case because forms I use in pretty
much every project.
So it just kind of makes sense that I have all of them already sitting in global styles.
Now, if there's something specific I want to change, then of course I use my wrapper to target it.
Hopefully, that makes sense.
And in this case, I also want to add that on submit right away.
So once we submit the form we have here, the event and I want to fire on submit.
That's the dummy function that we just created, then I want to display my logo.
What's really cool that we have the component right now?
So are we right or have it?
And then we have the heading three, which eventually will have a value that will toggle.
But at the moment, let just hardcore logo.
Or, you know what, let's just say log y or Z logo, and then let's create that input field, the one
that we will eventually set up as a separate component.
So let's create this one.
And I'll talk about why we want to set up as a separate component in next video.
So let's create this one.
And then also the button.
So back in the register right after the login, I want a comment.
I'll say name and put.
And yes, eventually will actually toggle this one.
But for timing, we just want to go with div and in here I'm going to go form row.
That's there.
And again, this is coming from global classes.
And if you want to check them out, you know where to find them.
I'm not in here.
Let's go with label now for the label will need the for attribute or in React H, their mail for attribute
of passing the name because that will be the name of my input.
And I do want to add a little bit of styling, so I'll say here, former label.
Now, as far as the text, in this case, I'm going to go with the name.
Let's save up and actually see the label.
We went right after enable or go with input and type will be taxed and value well.
Value is actually sitting here in the initial state.
More specifically, it's sitting in the values now since we use that correct.
So I go here with the value and we're looking for values.
And then that name.
Now we also want to pass in the actual name because this is our access with our event object.
So we have had handle change the moment we just have target great.
But eventually we will access both the value as well as the name.
So that's why it's important here for us to add the proper one.
So this one will be name and then let's add two more things on change, so on change.
So every time we do something with this input will fire down and we want to run our hand or change correct.
And then also, I went out a little bit of styling.
So we're going to go here with the class name and now will be equal to rate form input.
Let's say that one.
And then lastly, we want to also add the button.
So let's go here with button.
One type will be submit and just go here would submit and let's add two classes.
So those will be global classes.
So we're looking for between an unbeaten block.
And as far as the name, we'll just go with supplement.
Let's say that one.
Analogies to start out with our logic works, so I'm going to navigate right now to the local host and
then more specifically to reregister.
That's the one I want to open up the council.
I want to see whether all my logic works because essentially what should happen every time we type something,
we should see the form, which is great start.
Like I said, once we can access the target, then we can grab both things, we can grab the name and
we can grab the value.
And second, once we submit, we should see the form.
And voila!
Of course we do.
So that's the target in this case once we submit.
And with this in place now, we can start separating things into a separate components.