React Recap: Quick Visual Explanation of Props for Visual Learners

ro.html — Sat, 14 Nov 2020 15:08:43 +0000

Hey y'all!

I hope you are doing well, swell, fine and dandy!

My name is Rojhan Paydar, but you can call me Ro! I am a front-end web developer who is currently focusing on React.

When it comes to learning, I am very hands on, and love to create visuals to help with remembering important lessons.

Below is the brain child which is my thought process for how to remember PROPS, and the reason why I made it.

Created By: Rojhan Paydar @rothecoder

Why I chose this relationship with the Mandalorian and "The Child" is simple. In the latest Star Wars series The Mandalorian, "Baby Yoda" is called "the child".

For those who have never seen the show they know "the child" famously as "baby yoda". For people who DO watch the show, we know "baby yoda" as "the child".

The relationship between Mando and "the child" is not biological parent and child, but Mando acts as a parent to "the child". It is very much obvious that their relationship is like "parent and child".

I mean come on, you can't tell me that isn't a child and parent?!

Anyway, whenever I'm watching the show, someone refers to "baby yoda" as "the child". At that moment, I start to think about code. It goes the other way around too! When talking about parent and child in reference to code, and someone says "the child", I always think about "baby yoda".

So naturally, during my React recap via Stephen Grider's Udemy course "Modern React with Redux", I kept hearing him say "the child" over and over, and I started to think about Baby Yoda (just for a moment). I tuned back into what I was learning.. and then it CLICKED.

I had this idea to make a comic to help me solidify my understanding of props, and perhaps help others too! (plus I love drawing so this was a win-win for me). As a visual learner, this was a GREAT way to help the idea STICK! And guess what? It worked!

Here's the break down:

The Mandalorian (parent) sees the child using "the force" to play with leaves (Mando doesn't exactly know what the force is, but knows it's existence).
Mando thinks the child using the force is "friggin awesome" and wants to tell this information to the child. This is where "props" come in.
Mandalorian approaches the child to give them props (the information stored by the parent).
After Mando "gives props", the child now has this information from the Mandalorian (the information being "they are awesome").
The child wants to give new information back up to Mando (the parent)
The child then realizes, they cannot directly give props back, because they are THE CHILD. Children cannot give information up to their parent.

That's it! That's my little comic explaining props. I will literally never forget now, and I hope it sticks with you too! :)

If you like this idea, please comment below for me to make more as I learn React! It might not always come to me, but if I have an idea I would love to share it with the tech world!

I hope you enjoyed, learned, and remember..

To connect with me, find me here!

Twitter: twitter.com/rothecoder

Instagram: instagram.com/rothecoder

GitHub: github.com/rojhanpaydar

LinkedIn: linkedin.com/in/rojhan-ro-paydar-432856b4

Medium: medium.com/@rojhanpaydar

Hashnode: hashnode.com/@rothecoder

DEV Community: ro.html

React Recap: Quick Visual Explanation of Props for Visual Learners

Hey y'all!