Complete Introduction to React (feat. Redux and React Router) Composite Components and Factories

Transcript from the "Composite Components and Factories" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Let's go ahead and we're gonna make another component here. This time we're gonna actually create our own component here, like we're actually going to be creating our own reusable components. Just like we have divs and H1's we're gonna make our own component that we can throw on the page.

[00:00:22]
>> Brian Holt: Okay, so go over to ClientApp.js.
>> Brian Holt: And let's go ahead below the H1 here. We're gonna create one called MyTitle.
>> Brian Holt: And then we're gonna say React.createClass.
>> Brian Holt: This is the way that React allows us to create our own components, which is pretty cool.
>> Brian Holt: Okay, and I'm gonna give it a render method.

[00:00:54]
>> Brian Holt: So here's some ES6 magic for you.
>> Brian Holt: Most of us are used to saying : function which you totally can. That's totally fine and go ahead if that works better for you. But this is called enhanced object literal syntax. In other words, it just allows you to not write the word function.

[00:01:14] I don't know if anyone told you but the entire point of ES six is to never write the word function ever again. [LAUGH] And actually you can literally never write the word function again, you can totally sidestep entirely.
>> Brian Holt: So, that's what this that's that means, it's just a shorter way of writing out colon function.

[00:01:34]
>> Brian Holt: Okay. And here we're gonna do is we're going going to return.
>> Brian Holt: Just basically the same syntax that we had before. So div null
>> Brian Holt: And h1(null, "Check out this other thing.") I don't know, whatever you want to put there. Okay? and then down here in my first component rather than using the H1 in the div here directly, we're gonna actually do it a little bit differently.

[00:02:22] So go ahead and delete just the H1 here. Then I wanna do a React.createElement.
>> Brian Holt: MyTitle, common null
>> Brian Holt: Okay, so we have two things here. We have createClass, which is creating a new type of element, right? It's like creating a div, or not a div, it's creating div, right?

[00:02:49] It's creating a type of component that can be used many, many, many times, okay? Then we have createElement which is one specific instance of this class that we created, right? So you create one MyTitle which is a class, right? But you're gonna create a bunch of elements, right?

[00:03:06] So it's an instance of the class. Let's see what that means, right? Again, we'll only ever create one MyTitle but we can come down here and create a whole bunch of these element like of using the create elements, right? Which means we're going to be using it multiple times, right?

[00:03:26]
>> Brian Holt: Okay, so, and then the other thing worth mentioning is notice we have an encircling div, right? Well the reason for that is, you can't have, if you think about it, you can't have var x = 1, 2, 3, what would b be in this particular case, right?

[00:03:46] You can't have multiple assignments for x here, right? But you can have, It'll be like an array of numbers, right? And that's kind of the same idea that we're getting at here by having an encircling div, right. You can't have MyFirstComponent be equal to a bunch of different elements, right?

[00:04:05] You have to have MyFirstComponent be equal to one thing. So in this particular case, it's one div and the div has a bunch of children. So this is very important that you can't have it be, have multiple siblings be the top level element, right? You have to have exactly one top level element for any sort of component.

[00:04:26]
>> Brian Holt: Does that make sense? Okay. Any questions about what we've done here?
>> Brian Holt: Let's take a look at what we've created here.
>> Brian Holt: If you go back over here, now we have Check out this other thing, a bunch of different times, right?
>> Brian Holt: So what MyTitle is called, this is called a composite component and basically it's a component of our own creation.

[00:05:00] And this is actually where that like the magic of react starts coming in. We can now create all these reusable components and then use them all over the place, right? For example if you can think on Reddit, right? Reddit is, if you don't know what Reddit is, it's just essentially a fancy forum right?

[00:05:15] That has nested comments, right? Think of how many different ways Reddit displays it's comments, right? It can be stored on like different kinds of sub editor, can be styled different ways. It can be pulled out into like an embed you throw on another page, right? But the nice thing about is we create exactly one comment component and we can just throw it on anywhere that we need to put a component, right?

[00:05:39] Or say you have like a branding on your page, right? How many times user branding throughout your website? You create one component for it and you can throw it anywhere on your website. And then we can start making composite components that are a composite of other composite components.

[00:05:54] Wow that's kind of a tongue-twister but basically what I'm trying to say is that you can make these kind of bigger components that contain many other smaller components that you've created, which we'll also start doing here a little bit.
>> Speaker 2: There's a question.
>> Brian Holt: Yeah.
>> Speaker 2: Can you cover the difference between instance versus component versus element?

[00:06:17]
>> Brian Holt: Sure,
>> Brian Holt: So, let's go over here look at our browser, right? We have this check out this other thing four times, right? So each one of these is an instance of MyTitle, right? This is an element on a page. But there is exactly one class, right, there's only one MyTitle class.

[00:06:38] This is us creating a new type of dive, a new type of H1, a new type of something that we're going to display on the page. So this is the [SOUND] This is us creating the new type of component. In fact, I think our next little segment will actually make that a little bit clearer.

[00:06:57] So if you don't get it after the next segment let's revisit that. But basically ideas, this is a new type of class and this is just us, throwing that class on the page.
>> Brian Holt: After that, helps explain it a little bit.
>> Brian Holt: And I think as we get to JSX that will also clear it up a little bit as well.

[00:07:23] Any other questions?
>> Speaker 2: There was a question, do you know any open source projects that demonstrate good code organization for React.
>> Brian Holt: I do, actually. The React Router project, we're actually gonna be using React Router much later today. But they have some example projects inside of their repo.

[00:07:48] And I actually am a fan of the way they chose to organize, especially like the, there's one called like huge app or something like that, big app. And I think they have some interesting ideas of how to organize code,
>> Brian Holt: Cuz I certainly don't. [LAUGH] Other questions?
>> Brian Holt: Great.

[00:08:12] All right.
>> Brian Holt: So we're gonna refactor this just a tiny bit, cuz this react create element is a little annoying, right? Like it's a lot cleaner to see that this div right here.
>> Brian Holt: Excuse me [COUGH] So what we're going to do, is we're gonna create what's called a factory.

[00:08:36] So underneath MyTitle here, say var MyTitleFact, I mean call factory if that's easier for you. Equals React.createFactory(MyTitle), okay, and what's nice about this is now we can start, instead of doing React.createElement so many different times, what we can do is, we can just say MyTitleFact(null). So it's up to you to decide which of these two lines are totally equivalent.

[00:09:20] It's up to decide what you think is cleaner. There's also a school of thought that you can say so var, I think they call it like ce = React.createElement and so you just pull out that function. And then you can also do
>> Brian Holt: Ce like that. I just took that one out.

[00:09:47] Okay, so these three lines work exactly the same way.
>> Brian Holt: This, these two should make some sense, right? ce here is literally just this. It's just that being pulled out up here, right? And then MyTitleFact basically allows you to treat MyTitle like this div up here, right?
>> Brian Holt: Okay, any questions about that?

[00:10:20] I mean let's just save it and make sure that actually works like I tell you it should, right? So now we have three of them, right? So again up to you to decide if you think that's cleaner or not. We're actually gonna get to jsx later where all this becomes a moot point anyway.

[00:10:34] [LAUGH] But I think it's good for you to know exactly what reactor is doing underneath the hood. And any one of these works and if you decide to not go the JSX path these actually are super useful for you to know how to use.
>> Speaker 3: What is the difference between if those two like say MyTitleFact argument null and React.createElements, MyTitle, null are equivalent, then what is the difference between a factory and a null?

[00:11:04]
>> Brian Holt: A factory basically makes this into a function that when it called, it gives you back the component, right? Whereas this React.createElement is actually calling MyTitle for you underneath the hood, right? So it's just it's how it's creating the element that's that it is where it differs. Did that explain it?

[00:11:24] Okay.
>> Brian Holt: Most people don't even choose, like I would imagine most react developers if you ask them what is create factory they don't know because they never have to use it. You'll never use create factory with JSX, like they're mutually exclusive.