Journey, React

Day 6: What Makes React Interactive.

It’s not good practice to have a powerful tool like React and not take advantage of of it’s power.

In our Twitter Timeline that we created yesterday we hard coded all the information in ourselves, which defeats the purpose of using React, we could’ve done the same thing much faster with simple HTML. So let’s discuss how React allows for dynamic data.

Props

When React refers to props it’s not mad-props-dude

Instead it short for properties. Props are used to customize components when they are being created and give them different parameters.

One of the most important features of props is that they can be passed by a parent component to its child components. This allows us to create a component that can be customized with a new set of props every time we use it.

Props are passed to the component and are fixed throughout it’s lifecycle.

confusedblackguysmeme

Let’s try to break this down with a real world example and try to clear up the concept of Props.

Props Example

As a child my mom had a chore board and it had my name and my brothers name. Each week on Monday next to our name was a chore that we had to do.

In this example my mom is the parent component and my brother and I are the child components. The chore that was assigned to us is the prop. We had no say in it, and we couldn’t change it. We got it and had to do it.

Tomorrow we will see how to create a prop and use it in our components.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s