Wonderful.
And once we're done with a warm up now, let's start tackling the big beast.
And the first one will be register page.
As you can see, there's more to it, so there's going to be a form with some form input and we'll be
able to toggle between register and login and for the register will need to have the name input.
But then if the user is just logging and van is just email and password.
Yes, there is going to be a logo there.
There's also going to be a heading that will toggle when we're clicking on a button and all kinds of
goodies.
And also eventually we will perform a fetch request once we're sort of bringing the form.
Now we're nowhere close to that yet.
So first, we'll build out the component of the animal, set up the global state and then eventually
we'll also, of course, set up our server and start making those requests.
So again, if you have been following my tutorials, you know that I do everything step by step.
And even though some people might find that annoying, I mean, I think that's the best way to learn.
Now, before we continue, let me just mention something.
You're probably noticing how the preview is different.
So as I was thinking with this one around, I noticed that there's options to preview in the browser
and we can also set up themes.
And in my case, I switched to a dark theme because I think it's going to be more pleasant to your eyes.
Now how you can do that?
Well, you can right click and then you need to open.
First of all, do you read me in the preview like show?
So that's the first one.
And then once you're already in the preview, then you can right click again and notice this one.
So I can open this one in the browser like so sort of that's what you prefer.
Awesome.
Just keep in mind one thing where as you update your read me the preview, one will update, but not
the one in the browser.
So if I remove that, I'm becoming the first coming out of salvoes, one updated right away.
But then the browser is not updating.
So something to keep in mind.
And then also, as far as the themes, just right click online, pick a theme.
And in my case, I think I want to get them dark.
But of course, you have all of these options that you can choose from.
So that's as far as the look.
Now let's start talking about the component, the register component, and here's what we want to do.
We want to import the used state and years effect from React.
Then we also want to get the logo from the components.
We want to get the wrapper since we want to get the styling eventually later.
We'll also get global context and use navigate.
And of course, I will discuss it once we get there.
Then there's going to be some initial state where I want to set up the name empty string email password.
Also a member which is going to be a billion and it doesn't really matter what is your default value?
In my case, I'm going to go with default.
And it's always my preference to set up a local state if possible.
And that is, if possible, there will be global state in this application, and I will discuss this
once we set up the global context.
Basically, what is my preference and what are your options for time being?
Just remember that this is going to be initial state that we passed in the U.S. state and then I have
the values, which basically is race object.
And we also have set the values function, which will utilize as we set up the functionality.
And here eventually again, there's going to be a global context as well as use navigate.
So both of these things we will implement here and of course, also a little change because we'll have
inputs.
So every time we update that input, we want to fire off something.
So this is what we're going to use, as well as on submit now for timing notice, how we're basically
both of them are just console.log.
So I'm just looking for the event object.
And more specifically, I log the event at Target and the same goes for OMS Summit, where essentially
we trigger this when we submit the form.
And eventually, this is where we'll have all our logic.
So this is where we'll check for the values.
And then if the values are there, then we submit the user to our back in to our server far as their
turn.
It's going to be a rapper who set it up as full page.
And as you can see here, we have a form.
There's going to be a class here on submit on cement, then logo, the heading three and four time being.
I'm just going to have one input the name, input and heart code, everything.
And then in next video will set up a separate component, and I'll discuss that in a greater detail.
Once we get there and all the way in the bottom, there's going to.
A button with type.