Complete Intro to React, v6 Props

Transcript from the "Props" Lesson

[00:00:00]
>> This is great, if you only care about dogs that are have a niece named Luna but most of you probably like I would like to pet components are able to represent any pet, right? That's where these things called props come in. So here we could say like just what I was showing you before Id My-brand, right?

[00:00:19] And this will give you an idea of my brand. So these are attributes being provided to this h1. But now I want to kind of give some sort of properties to this pet. So what I'm going to do is, I'm going to give it a, another object just like this, and I'm going to give it a name of Luna, animal of Dog and a breed of Havanese.

[00:00:55] So that seems like it's kind of useful. So let's make a couple of those and I'm gonna delete these ones. And we'll do the bird that I used to own growing up, her name was Pepper. She was a Bird. And she was a cockatiel. I don't want that space there And let's do Sarah Drasten's dog.

[00:01:20] His name was Sudo and Sudo is a Wheaten Terrier. Okay, so now we're passing down properties into this pet element that we need to be able to read those here in the pet element. So this is gonna come in a thing called props like this. This is basically this object here that's being passed on.

[00:01:46] It's not exactly the same, but it's pretty close. So props here, now I can say, instead of Luna, I can say props.name. Instead of dog I can say props.animal, instead of Havanese, I'm gonna say props.breed. So what do you expect to see now when we pop over to the browser?

[00:02:17] Well I'm gonna still see 6 h3s, right, and 3 h2s. The first one will be Luna dog havanese. The next one will be Pepper bird cockatiel, and the next one will be Sudo dog wheaten terrier, right? Let's go take a look. Luna dog havanese, Pepper bird cockatiel and Sudo dog Wheaten Terrier.

[00:02:41] So now I've made this component more flexible by giving it the ability to react properties, right? These are called props, right? And these are what you pass down from one parent component to a child component. And this is kind of the magic of react, is that you have the ability to pass information from a child, or sorry, from a parent component down into a child component.

[00:03:02] Now, one thing I want you to know and this is a very strong opinion that react tastes with us, data flows down, right? So I can pass things from App into the pet component, that it doesn't flow up, right? This is called one way data flow. And it's a big component of react is pet, doesn't know who's rendering it, doesn't care who's rendering it and doesn't interact with its parent ever, right?

[00:03:26] So I have no ability to get information from Pet up to App, there's just no way to do that. This ends up being actually a huge blessing. You kind of like reframe the way that you're thinking but it ends up being a huge blessing because if App has a problem with App, right?

[00:03:44] It knows it's not Pet messing with it, right? You've already precluded that that ability by the fact that Pet can't mess with its parent, right? Now, you might ask like, well, what if I need to and there are methodologies to get around that and I will show you that.

[00:03:59] But for the most part, the default way of interacting with react is that you have no way to go from child to parent, it only goes from parent to child. [BLANK AUDIO] Questions about that so far? Cool. So, this brings us to our first checkpoint. If we go back to our course site here, and look at Components.

[00:04:26] That's what we just did. At the very bottom here you see this little chequered flag, that says click here to see the state of the project up to now. If you click on that, this will take you to a directory where you can see everything that you and I just did together.

[00:04:43] It'll be slightly different from pieces because I change things a little bit on the flier but more or less the same. And you'll see that at the end of some of the sections there of that little checked flag that just shows you the state of the project. Is this kind of code usable in production scenarios?

[00:04:59] Looking at this kind of code here, this sort of thing right here. What do I wanna say about that? Kind of, sort of. Yes, no, not really. Let's go with not really. Which is probably like the most wishy washy answer that I've given so far. Challenge except that I will try and give wishes and wash your answers.

[00:05:22] I don't see anyone write code like this anymore, with using React.createElement directly. It was more popular maybe five years ago. But everyone writes react with JSX, which I'm about to teach you, That's literally the next thing that we're gonna start talking about this JSX. But for the most part, people don't write code like this anymore.

[00:05:41]
>> [INAUDIBLE]
>> Yeah, it's to pull back behind the curtain of what's going on underneath the hood. There's other problems with this. For example, you typically have one component per file. It's not a hard rule but it's pretty close to a hard rule. So typically I would have a pet.js file and an app.js file, that would be separate files.

[00:06:06] But we don't have a build step yet. I don't want to mess around with that too much. So the next thing we're going to do is introduce introduce our build step.