Check out a free preview of the full Complete Intro to React, v5 course:
The "Destructuring Props" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to utilize a Vanilla JavaScript principle to simplify attribute names being passed into components.

Get Unlimited Access Now

Transcript from the "Destructuring Props" Lesson

[00:00:00]
>> Brian Holt: Now, I'm gonna show you how to make this email a little bit easier. So writing props dot gets very old very quickly when you're writing React, so there's a thing that you can do called destructuring. So what I can do here is I can replace props, I know that the thing is gonna be called animal, breed, and name, right?

[00:00:17] So I can actually just pull this out, so I'm gonna delete props here, put the parentheses back. And then inside of that, I'm gonna put curly brackets, like that. And then I'm gonna say name, animal, and breed like that. And this is going to pull out these particularly named properties within these objects and make them available as those variable names, right?

[00:00:41] So instead of saying props.name, I'm just gonna say name.
>> Brian Holt: Same thing here with animal,
>> Brian Holt: And breed.
>> Brian Holt: Makes sense? It's called destructuring,
>> Brian Holt: And everything should work the same way, which it does.
>> Brian Holt: Okay,
>> Brian Holt: So that's the first section. So congratulations, you know a little bit of React now.

[00:01:18] And the good news is this is kind of most of it. I'm going to show you a bunch of other stuff, right? I have to earn what they're paying me [LAUGH] but this is kinda like the core idea of what React is.
>> Brian Holt: So there's a commit point here, so if you're falling behind and you wanna come up to this point, you can actually just move to the first commit in the repo, and this will take you to this point in the workshop.

[00:01:44] The next thing we're gonna do is we're going to start introducing some tooling to help us out. Because you don't wanna write React like this, you can actually make React much easier to write. But again, this is still the core concepts of what React is.