Section 9 (React): Lesson 5 - Props

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

In this video we will talk about props and react.

So let's dive right into it.

So what are props?

Well, let me show you a problem here.

If I go to App TSX, this is my code, by the way.

I have it open my app from previous video.

We had created the React app.

And that's what this code is.

I also have my terminal open.

If I go to my iterm, I have my NPM start script running that started the server and the browser on

the right hand side.

So just so we're clear, this is the setup at the moment and if I go to app dot TSX of my of my app,

there's a paragraph on number nine.

That's the component.

Let's say I want to use that component twice.

And each time I use it, I want to pass a message to it.

I want to tell what the message should be that it should render rather than it saying this is a paragraph

which is almost useless to me.

So how do we do that?

That's where props come in in paragraph component.

And let me dive into it.

We can use the command prompt or sorry, keyboard shortcut for Command B, I think that's the keyboard

shortcut.

If you don't know your keyboard shortcut, you can do command shift P and jump to definition.

I think it's called definition.

Go to definition, not jump to definition.

In my case it's command B, but in your case it may be something different.

That's what I'm doing to go into these components without having to use my mouse where I save some time.

All right.

So in this component, in the paragraph, I can accept some props.

Initially when the props are passed down to any component, it's passed down as an object, and we can

accept that as one of the arguments.

The first argument and the only argument that's passed to the component in React, and we can name it

whatever in this case, I will name it props name doesn't really matter.

You can call it ARG, you can call it Mickey.

It doesn't really matter.

Convention is that we call it props.

So that's what I'm going to call it.

Next thing would be what is this prop going to be called inside the object?

That's the props object.

So I will take away this is a paragraph and start my JSX JavaScript curly braces and start writing props,

dot and whatever the message would be.

In this case, I will just call it message and you would notice that it's complaining.

The reason why it's complaining is because we're using TypeScript in JavaScript.

This would have worked just fine, no problem whatsoever.

In TypeScript, however, we are strictly typing our code.

That means props is unidentified at this moment.

It has implicitly type of any.

So how do we type our props in react?

Well, the way to do that is on the first line where we do import react.

I can do comma right after react and curly braces.

Now we're destructuring out of the library and there's something called function component.

We take that function component.

And right before the equals two sign after the paragraph, which is the component name, I'll put a

semicolon or sorry, colon in this case and then paste function component.

Now you'll see the message has changed slightly instead of props giving me trouble.

Now the message is giving me trouble.

So what is doing?

Is it now that we have typed the component to say this is a functional component?

It knows that there will be props.

However, inside the props, it's not familiar with the with the with a key called message.

So we have to give it an interface.

Remember, props is a type of object.

And in TypeScript we learned that interface is also referencing an object.

So that's what I'm going to do.

I will create another line, call it interface.

I I'm going to start with the I, but you can call it anything paragraph.

Paragraph props.

Curlies.

And now we have started an interface and message would be a type of string.

So that's what we want the function component to know that this props component.

The props object will have a message key, which will be a type of string.

Let's copy the name of paragraph props.

Let me just correct that and put that inside function component.

We will start diamond brackets, paste that in and that should fix my code.

Let me just make it a little bigger so we can see the whole thing in action.

So we have paragraph component, which is a function component and diamond brackets, which is generics.

We didn't really cover generics in TypeScript, but all we're going to do is follow the documentation

from React.

And that's what it says is we're going to pass an interface or pass a type inside diamond brackets and