Section 9 (React): Lesson 6 - State

Описание: Hey you and welcome.

In this video we will talk about stateful components in React.

So let's dive right into it.

We talked about props in the previous video, so let's do some practice.

I'm going to create a new component called a button component, and I'm going to provide props like

message or label and render that out on my screen.

And then we'll pass.

We'll create a state for that component.

All right.

So let's start by going to the File Explorer and the components.

I will right click new file and type button dot TSX.

That should open my file for me.

I will hide the Explorer.

I'm doing command Slash now.

I'll start writing my button component.

I could copy paste the code.

However, it's good practice just to type it out.

See if you know what's happening in each file.

I will do export named export rather than default export.

I'm going to continue using that.

I do like the destructure pattern more than the default and and there we go.

Curlies.

With that done, I will return a null.

That's the something called the boilerplate to get the component going boilerplate just meaning code

that you have to write before you can actually write the code you need to write.

This is just have to be there.

So that's boilerplate.

I will render this component out in app dot TSX.

So let's import that just like we did on for the paragraph.

I can do that right under paragraph destructure from and this is usually how I write my imports when

I'm writing them.

I import, I can name it whatever for now.

And then from dot slash so in the in the single quotes, dot slash, use the relative path go to where

I need to be like button semicolon to finish the line and then I come back to import name and then I

try to do something with it.

If it's default export, then I will just name it whatever I like.

In this case it's named so I will destructure it out.

I can do control space to get IntelliSense going before I even type anything if I don't know what's

inside it, or I can just start typing and it will autocomplete for me anyways.

So that's how I usually write my import statements, write the whole line, first file, file path first

on the right side and then come back to destructuring or getting the default export.

That way it can help you better.

Okay, so I have the button component under paragraph.

I'm going to just render it out.

Remember, to render a component, we have to use it as a JSX element.

Diamond brackets on both sides as a self-closing tag, which it is in this case.

I will just leave it as is.

All right, save that.

And of course nothing renders out because the component is returning null at the moment.

Now this component, I want to change it slightly.

What I want to do is for the button.

I want to make it not self-closing, but it will be something that has children.

A children can be type of string, could be a type of another JSX.

I can provide p tag inside it and say something that's okay as well.

So children can be anything right?

It's another JSX element and a string is a valid JSX element as well.

So I'll save that.

Now I am getting type errors because Button doesn't really expect children, so let's see how we can

type this in button dot TSX.

So I'll go over to that.

I could click on the button dot TSX at the top or if you remember from the previous video, I use Command

V to jump or go to the definition of the components.

Just use that to save you some time.

All right.

So in button I will do the same thing as I did for paragraph.

I will destructure function component from react and right after the name of the component which is

button, I'll do colon function component.

Save that.

So so far we do have a function component.

However, there's still the error on the right hand side.

Same error that we're expecting.

We're expecting children which we did for the in the app dot TSX.

We're passing children to button however that's not available in the typescript.

So that's another thing we have to destructure from the React library called Props with Children.

And in the diamond brackets like we did for paragraph.

We pass props with children and save that.

Great.

Now, you may be wondering, well, I mean, you got the props for children working, but what if I

want to pass more props like label or, I don't know, color or style?

How do we do that?

And the way to do that would be the same as paragraph.

We start an interface call that I button parentheses.

I'll leave it empty because there's no object yet.

And if I go to props with Children Line, I can do diamond brackets within diamond brackets and pass

that so it will be aware of props for children, but also be aware of your custom props that you may

be passing to your component.

All right.

Line is getting a little big.

I will just make this a little bigger here and go to the right side.