This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Factories & Props" Lesson
[00:00:00]
>> Brian: Something that you can do that makes things a little bit nicer looking is you can say, var MyTitleFact or factory, whatever you wanna say, equals React.createfactory, crete, createfactory with MyTitle, which basically makes this MyTitleFactory method the same as this div one right. So, I can actually just go in and replace all of these, let's see.
[00:00:39]
>> Brian: With MyTitleFactory now. And it looks a little bit nicer.
>> Speaker 2: Please repeat again what that does.
>> Brian: Yeah, so we have this like, div method, which is just like a convenience helper method.
>> Speaker 2: Yeah.
>> Brian: Instead of having to do a React.create element div, right? We have this nice div helper method.
[00:01:05] So, what this my towel factory does is it basically makes this kind of factory method for whatever components you've created, right? So, I pass my title, right, and it gives me back a factory method, so that I can call it just like this. So, if you save this and rerun it, it'll look exactly the same.
[00:01:22] It's a convenience method. If it works for you, use it. If it doesn't, then don't.
>> Brian: But I just wanted to make you aware that it does exist.
>> Speaker 2: Okay.
>> Brian: So yeah, if I refresh, still works.
>> Brian: Cool. So, still not super compelling yet. But let's start talking about something that does make React compelling which are props.
[00:02:01] So right now, we have this "check out this component" four times on the page. That's not super useful. So, let's actually start passing in different strings that this MyTitle can be useful for multiple things, it can be a little bit more flexible. So, what we're gonna do is come down to your MyTitle factories, right here.
[00:02:25] And, I'm just gonna replace this null. We're gonna actually pass it some attributes, and we're gonna say, title
>> Brian: 'props are the best' I don't know. And you can pass in whatever strings you want here.
>> Brian: And semicolons are the worst.
>> Brian: jklol, it's okay if you like semicolons.
[00:02:59]
>> Brian: And, I'm out of ideas. Okay.
>> Brian: So now, I'm passing in these attributes.
>> Brian: I guess I need a space, whatever, it doesn't need a pass lint, not yet. Okay. So, we're passing this object from the parent. The parent being my first component down into my title, right?
[00:03:25] And now, in MyTitle it has these properties available that it can read from its parents. Now, I very carefully chose the word read, it can only read these properties from its parents and it cannot modify them. So, these are read only properties, and momentarily, I'll get into why that's actually important.
[00:03:47]
>> Brian: Okay, and then I'm gonna replace the string right here, with this.props.title. Okay? This, referring to this particular element that we've created. Props are the things that my parents passed to me. And then, title is whatever I called it, right? So, it just needs to match this. There is no black magic.
[00:04:12] It needs to say title, right? I could have called this stupid prop, and I would just call it stupid prop there, right? It just needs to match.
>> Brian: Okay, so now if I save, come over here and refresh, I'm gonna end up with a bunch of different h1s instead of just the same one, right.
[00:04:36]
>> Brian: Questions?
>> Brian: Is anyone seeing it, no?
>> Brian: Yeah.
>> Speaker 2: Michael's asking, you don't need to pass in props or anything to your render function?
>> Brian: No. So, there are several types of components, and we will talk about those later. But suffice to say, there is one type that you do pass in props.
[00:05:18] So, that is probably what he is thinking of. Okay, so this is getting slightly cooler as we go on, right? Now, we have these kind of flexible title components. So, let's take it even one step further. And you're not restricted to only passing strings down, you can pass down properties, you can pass down functions, you can pass down anything that JavaScript knows how to pass around by reference, right?
[00:05:46]
>> Brian: So, let's actually do that. We're gonna give it another property that we're gonna pass down here.
>> Brian: We're gonna give it a color and then just pass in whatever your favorite named CSS color is. I have several, so I will help you out. Peru is my favorite CSS named color, I don't know if you knew this but peru is a color.
[00:06:15] Medium aquamarine, also another color. This is my favorite interview question.
>> [LAUGH]
>> Brian: Is the ask interviewees, what's your favorite CSS color. If you don't give me a cool one, you're not get hired.
>> Speaker 2: Tomato.
>> Brian: Tomato is a good one. Blanched almond.
>> Speaker 2: Wheat.
>> Speaker 3: Papaya whip.
[00:06:35]
>> Brian: Papaya whip, that's always a good one. I always have to give a shout out to Eric Meyer with rebecca purple.
>> Brian: Let's see, what else should we put in here? I think there's dark violet-red.
>> Brian: Just random colors. Okay, so now we're passing in these color strings, right?
[00:07:01] But now we actually wanna use them here on this h1. So, what we're gonna do is we're gonna give it an object, right? And these are going to be properties given to this particular h1. Style in particular is a little bit different. You're gonna say style: and then you're gonna give it an object.
[00:07:16] It's not the string, right? A lot of people expect you to just give it the style string that we typically use. But we're gonna say style, and then color, and then this.props.color.
>> Brian: Right, so if I wanted to add bold to this, you would just say, fontweight bold, right?
[00:07:43] So, that's the way that you can interact with the style object in particular. It's also the way the JavaScript API for interacting with styles works, which is actually what it's doing underneath the hood, which is why it looks like that. So, anyway, you don't need to put that, just put the color.