DEV Community

Cover image for ๐Ÿ“ฆ React Props: A Visual Guide
Reed Barger
Reed Barger

Posted on • Originally published at reactbootcamp.com

๐Ÿ“ฆ React Props: A Visual Guide

This JavaScript function is broken. So what will happen if you try to use it?

1

If you call this function, youโ€™re going to get a reference error which says, "a is not defined".

And this makes sense, the sum function is using two values, a and b, but has no idea what they are.

To fix it, we need to add a and b as parameters and pass two numbers as arguments.

2

Thatโ€™s how you pass data to a JavaScript function, but what about a React component?

A React component looks a lot like a plain JavaScript function, but unlike one, it returns and renders React elements, such as a button.

3

To call a React component and have it display those elements, we use it as if it was a custom HTML element, but written in JavaScript.

4

But how do we pass data to functions when they are called like this?

Using this HTML-like syntax, we can pass it any data we like as if it was a custom HTML attribute.

For example, if we wanted to add our own custom text to our button, we could add a text attribute and set its value equal to some string.

5

In the world of React, this custom attribute is what is known as a "prop". And we can add as many props to our components as we like. They can be any JavaScript data type.

6

If we want to use the props we've passed down to our component, you might think that each one is passed as a separate argument.

7

But thatโ€™s not the case. Unlike a normal JavaScript function, all of these props are collected into one value, which is itself an object.

This single parameter is referred to and named "propsโ€.

8

It can be named anything, but the convention is to call this parameter "props" because that's what it contains--all of the values that are passed down to this component.

Another reason it makes sense to call these values โ€œpropsโ€ is because what we've passed down are turned into properties on an object.

Once weโ€™ve passed down the data that we like to our component, they can be used inside that component with curly braces.

9

And a neat pattern to use if your components are small, is to destructure the props object.

By adding a set of curly braces in your parameters, you can use destructure props into individual variables that you can use directly.

10

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

Itโ€™s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to join the React Bootcamp

Click to get started

Top comments (14)

Collapse
 
ashutoshmishra profile image
Ashutosh Mishra

Reading your post after a long time. Nicely explained :โ -โ )

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

What an awesome post! ๐Ÿš€ The way you explained React props using those visuals is like having a superhero guide to web development. I saved it because it's seriously one of the coolest explanations I've seen. It's like learning magic spells for making web stuff happen. Kudos for making React so much fun to understand! ๐ŸŽ‰๐Ÿ‘

Collapse
 
pharaohnutz profile image
Jolene Kearse

Great way to learn it! The visual and explanation really helped me get an understanding of it. For some reason, I hadn't really got it in my mind that props is an object.

Collapse
 
arifrafik profile image
arifrafik

Excellent

Collapse
 
avwerosuoghene profile image
Avwerosuoghene Darhare-Igben

Interesting visuals!

Collapse
 
chideracode profile image
Chidera Humphrey

Really great read.

The visuals made the lessons clear.

Please, can I know how you created the gifs?

Collapse
 
reedbarger profile image
Reed Barger

Thanks. I used a cool animation library called MotionCanvas

Collapse
 
dhengghuring profile image
Ridho

This explanation is easy to understand for beginners ๐Ÿ‘

Collapse
 
jairo1031 profile image
Jay Rodriguez

Awesome content! although I wish some of the gifs would transition slower. Specifically the "consume props" one.

Collapse
 
ademagic profile image
Miko

really nicely structured article! very consumable and easy to understand

Collapse
 
mellis481 profile image
Mike Ellis

This article could have been much shorter: "Use Typescript. The end." I can't understand how any application - especially ones in production - would not use Typescript...

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more