Original subtitles

Hey, everyone, it's Andre again, I just wanted to talk quickly about the upcoming videos, you see,

we're going to start working on our signing page and signing is something that is extremely common all

across apps throughout your career.

You're for sure going to have to need to create some sort of a sign for now.

Sign in is a combination of creating forms like this and also doing something called user authentication,

where we're able to register a user and also check if a user exists and let them sign in.

Over the next couple of videos, we're going to try and solve this very common problem and we're going

to try and show the best way to do it with react as well as later on using some sort of back and storage

using Firebase to actually get this feature to work.

Now, over the next couple of videos, we're going to assume that, you know, basic e-mail forms if

you don't all linked to this resource, so you can read up on it.

But we assume that e-mail forms is something that you're quite familiar with and you're also familiar

with things like event prevent default.

And what you will see in the next couple of videos is a very common pattern that you'll use not just

with this project, but with future projects as well.

So when you see things like event prevent default and maybe you don't understand it again, it's always

good to make sure that you stop, pause and maybe Google around.

But for example, prevent default is used to stop the default behavior of an HMO form and potentially

hijack it or prevent something from happening.

So we have more control over.

But the most important thing that we're going to talk about and something that you'll carry with you

throughout your career is this as we're building this sign in and register functionality, these three

points are going to be really evident.

And I want you to really pay attention on what we're going to do to make sure that we create these components

and the functionality using these three principles.

For example, when it comes to deciding on components, we'll see that we have forms that are quite

similar.

We have buttons that are quite similar.

Instead of coating them each individually, we're going to have components that are flexible enough

to be able to use just want one Riak component and style it or form it in different ways.

Remember, reactor's all about reusable components.

If we take a look at the code, which you're going to write over the next couple of videos, again,

you won't have this yet when we work on the Sinon component.

We're going to get to a point where we have this form input component that we're going to create ourselves

a custom component so that we go from having a simple, simple e-mail input component to something that

is flexible, that we can pass in different properties to customize to our liking.

For example, you register and a signing component.

We also have a custom button where we can give it different customizations in this case, it's only

the Sinon, but this custom button can be used with our signing with Google as well as the sign up eventually.

So you're going to see how to decide on these components, how to make them reusable across our different

app, but more importantly, we're going to really figure out these two things, deciding where the

state should live and what changes when state changes.

Again, this is code that we're going to write together, but you'll notice that we have a handle simit

method and a handle change method, the one method is going to happen whenever somebody is typing information

in the input box where we update the state.

And another one, which is the handle summit, which will handle when somebody clicks on one of these

buttons.

So we're going to start with basic input, a simple syntax and basic bun, a simple syntax to creating

these custom reusable components that are able to react to user changing the state of the application.

And the final thing I want to mention is this where do you think the state for the form, Liz?

This is a very common problem with react, for example, we have or we're going to have a sign in page,

as you can see here, and this sign in page will be an entire component that contains these two forms.

Now, each of these forms will have its own component.

One will be the signing component, one the register component.

But here's my question.

If this was our assignment page and this was our sign in and this is our register, where should the

state live?

Where should the information that the user types in, for example, in here?

Where should it live?

Should it live in this component, should it live in this component or should it live in this entire

page component?

Pause the video and think about that.

Ready for the answer?

The easiest way to think about this is to lift up the state only up to the point that the components

needed.

So when we create this component.

We're going to actually keep the state in its own individual component, so sign in is going to have

its own state and register is going to have its own state.

Why is that?

Well, because these two things don't need to talk to each other, sign in, doesn't really care what

we enter and register and register, doesn't care what's in the form of sign in.

So if we lifted the state up and kept the state in the entire page every time we update this.

And the state changes.

Both of these would get we rendered.

So that means two extra calculations that react has to do to render this and we render this if we kept

state just in the sinon, because that's the only place that we care about those changes, only this

component is going to get really rendered when we type something in here or click Simmen instead of

this over here.

Now.

I want you to just notice this as we're building it, that it was going to make these decisions and

try to keep state to the lowest possible level, keeping the concern in place to whatever component

needs it so that we're more efficient with your code.

This is something that will come with practice, but remember, over the next couple of videos, notice

how Iowa is going to keep these three principles in mind and build out the components.

Let's get started.