This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Stateless Components" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: So let's go back to client app. js so save this, go to client app. js and rename this to be clientapp.jsx because we're gonna make this all GSX fancy now.
>> Brian Holt: Okay, so get rid of React.div because who needs that business? Get rid of the factory thing, get rid of the CE part.
[00:00:34]
>> Brian Holt: And we're gonna make myFirstComponent into what's called a stateless component.
>> Brian Holt: I really, really like these stateless components. The reason being is that, so if we go back over to myTiles just to take a look at it, we use the React.createClass right here, right? That carries some overhead that we're not necessarily using right now.
[00:00:58] It has the ability to keep its own state. It has some lifecycle methods. All this stuff we'll talk about it a little bit here. But just so you know that there's some baggage here that you don't necessarily know you're bringing along, that is being brought along, that we're not using, right?
[00:01:11] We're just using the bare bones for creating a component. So basically you have the ability to shed that this baggage with what's called a stateless component. So let's write the verbose way first I'm gonna say function,
>> Brian Holt: And then we're going to return,
>> Brian Holt: This, right? I mean this shouldn't look too unfamiliar to you.
[00:01:49] This just looks like the render method, right? This looks like the render method of our MyTitle right, if you look at it. So we have render and it's just it does something and then it returns react components, right? Well that's exactly what this is. This is essentially saying I'm yanking out the render method I'm just using that, and again this is really powerful because it doesn't carry all the extra cruft it's literally, it's just a function, right?
[00:02:13] Just what I've been repeating previously that react components are like divs each one's composite bone is everything's a function. Everything's a function and I think that's it's really awesome. So anyways this now works like that and we're going to convert this to be jsx real quick. So this is gonna be a div
[00:02:42]
>> Brian Holt: Okay, and then instead of all these weird ways of writing this, we're gonna write it one way.
>> Speaker 2: The parenthesis should be outside of the closing div?
>> Brian Holt: Yes, it should, thank you.
>> Brian Holt: And I'm gonna rewrite these things to the top. So I'm gonna say myTitle title = whatevs color equals rebeccapurple, okay?
[00:03:23] And then I'm sure most of you have seen inputs that or self-closing ties, right? You do slash ending tag just so you know if you're doing an input the slash it is optional in HTML 5, right? And to the point that most people leave them out. They're not optional in JSX.
[00:03:42] You must put the closing tag that's letting JSX know please don't look for a closing tag because there is none. And actually it's to the point we can actually even do things as self closing tags that aren't technically self-closing tags, and that's okay. If you wanna do that, that's fine.
[00:03:59] Another thing to definitely take note of, lowercase basically means I'm literally want to use an input tag from React, right? I want an input tag literally on the DOM. If it's capitalized, capital M, MyTitle that means that this is something that I created. This is not a real component, this is actually a composite component that I, the user created, right?
[00:04:24] So that capitalization is significant and you must do it or react is going to not deal with it.
>> Brian Holt: Okay? So let's make a couple more of these just for fun
>> Brian Holt: Papayawhip, that's fun lets do that one.
>> Brian Holt: My title, title =
>> Brian Holt: You can do like,
[00:05:10]
>> Brian Holt: Great that's come in or this is the one that Chris Courier always does f06d06, right? Some gross shade of orange I think. [LAUGH]
>> Brian Holt: So let's see, so this should work now on the other thing is here my first component now this is actually like a react component that we've made.
[00:05:39] So we actually have to surround this one in, this is actually a tag as well.
>> Brian Holt: Okay.
>> Brian Holt: Any questions so far about this?
>> Brian Holt: Give you sec just to check that out.
>> Brian Holt: Mark P said that he didn't know the Cap plus component for the style thing.
[00:06:15] That's fair to say because it used to be optional and it was only with in the past four versions that did actually did become required. So you're not alone in thinking that.
>> Brian Holt: The reason why it's nice is not they no longer have to keep a white list internally.
[00:06:34] They can just say whatever you're passing in lowercase, you just expect to see in the DOM. But what I say is just you have to keep a white list of here's all the different components that can be on the page which is surprising and a lot, right? There's a lot of different tags in HTML5 as well as STG you can do STG in react as well, so good to know.
[00:06:54] Okay
>> Brian Holt: Let's go ahead and run this. So we're gonna do npm run build.
>> Brian Holt: And can't resolve file directory, yeah. Now because we change the name of things we have to go over to a webpac config and change this to be .jsx, right? Because we rename the file.
[00:07:27] So we're in webpac config line 5 entry is now ClilentApp.jsx.
>> Brian Holt: So save that.
>> Brian Holt: Again, line 5 in webpack-config, ClientApp.jsx and so .js is which is what it was before jsx. Okay, so let's go try that again.
>> Speaker 3: You still want to be having js on the file as opposed to a jsx on the file?
[00:08:05]
>> Brian Holt: I time out the resolve extensions.
>> Speaker 3: That output it bundles into js.
>> Brian Holt: So you saying that you want balance to jsx. The answer to that is no because that's actually what's gonna be downloaded by the browser and if you look at the I mean if don't because it's really gross looking.
[00:08:25] But you can see that this is all valid JavaScript. What that .js means, it means this is valid JavaScript. So but that's a good question.
>> Brian Holt: So it looks like I outputted just fine. 688 kilobytes which is crazy that weren't including that much stuff we have to think about now we're including react and all the Babel polyfills which are pretty big.
[00:08:52]
>> Speaker 4: Have you found with a roll up that that gets smaller because the tree shaking?
>> Brian Holt: The answer is I haven't done much serious stuff with roll up but the answer is it should. This will get much smaller if you go hand pick the plugins that you want for Babel.
[00:09:07] That's probably more than half of it.
>> Speaker 4: Gotcha.
>> Brian Holt: That's probably about half of it to be honest. With React, React actually uses most of React is used when you include it so treeshaking's not going to do a whole lot for you.
>> Brian Holt: Okay, so let's refresh and now you should be getting three new things right or whatever you put into your jsx.
[00:09:39]
>> Brian Holt: If you're seeing all of your old values and colors. It means your build probably was not successful. So that bundle did not get out put it in still using the same one.
>> Speaker 5: Just to confirm in their return statement in MyTitle.jsx you can't have the, I couldn't have the const style, maybe, never mind I headline seven after line eight and it didn't work because you have to have everything in the return statement wrapping and yeah.
[00:10:13]
>> Brian Holt: Right.
>> Speaker 5: That works.
>> Brian Holt: So just to illustrate her point. You can't have return, this would work, right? You could return five like that. You can have like return x=6 like this, right? That doesn't make any sense because I'll tell you what that wraps up to be is.
[00:10:39]
>> Brian Holt: Right and that just doesn't make any sense.
>> Brian Holt: So I do that all the time. So don't worry about it, it happens to me quite often. You just have to make sure that you're above the return statement. Any other questions? Yeah.
>> Speaker 4: Can you repeat the part about the stateless component and what the advantage that is?
[00:11:03]
>> Brian Holt: Yeah, definitely. So coming back here to client.jsx, we could make this a create class, right? Fairly easily, right create class just to demonstrate that and then that this would be the render function inside of it. The reason why we're doing. So just a philosophy in general that I believe is react gives you a lot of power to do things with these components.
[00:11:36] But the more you limit the scope of what you need, the less surface area you have for bugs, right? And so because I'm not using any of the lifecycle methods which Kim will talk about rising in the state management or any of those other things worst limiting the surface area that someone has to come in and understand about this component, right?
[00:11:56] They look at this and this is literally just a component rather it's literally. A function that does something and returns the the component. It's a little bit less cognitive load to get your head around and that's why I feel that these stateless components are superior and I also I'm not alone in that I feel a lot of the community feels that way as well.
[00:12:17] So yeah that's the general gist of it. It's making things less cognitive load to kind of low to understand it's like self documenting sort of things, right?
>> Brian Holt: Yeah.
>> Speaker 6: Does that mean this type of component can't have properties? Can't have props?
>> Brian Holt: You can, so you just give props that way.
[00:12:36] It just passes them in. Right now it's not taking any props. So it doesn't necessarily need them but we could refactor my title totally to just do it that same way.