This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "createClass vs. createElement" Lesson
>> Brian Holt: So let's talk about creatClass for a second. There's a creatClass in React and there's also a createElement. What createClass is, is you're creating a blueprint for a new type of component. Right, so now I have this MyFirstComponent component, right? And that is a new type of element that I can render out to the dom.
[00:00:19] And every time I render that out, I can render this out 15 different times. And I'll get 15 different divs with 15 h1s inside of that, right? So it's a blueprint, it's a new stamp for stamping out different My First Components. Then we're gonna have react create element, which we're about to use here in just a second.
[00:00:38] And what react create element is it's one stamp, right? It's creating one instance of that particular new element. So let's actually go do that right here, underneath my first component. Wanna say ReactDOM.render. Okay, so this is actually where we're going to put it unto the DOM cuz nothing has happened yet.
[00:01:04] We haven't actually put it onto the DOM yet. And we're gonna sayReactDOM.render, React.createElement. So we're gonna do one stamp here of MyFirstComponent, and then you just have to tell it where to put it. So I'm gonna say document.getElementById app, right? So I'm just telling it put it here, up in this particular div, up here.
>> Brian Holt: All right, does this distinction between createElement and createClass make sense? Okay, cool.
>> Brian Holt: So, actually, if you really wanted to get into it, this div, react.DOM.div, is just a helper method to create divs. You really could just say, react.create element,
>> Brian Holt: And have this be a div, right?
[00:02:16] And then I think it would be null after that. So here you would just be creating one instance of a div. But this React.DOM helper makes it a little bit easier to see what's going on.
>> Speaker 2: You've got a typo.
>> Brian Holt: Do I?
>> Speaker 2: Yeah, element is element app.
>> Brian Holt: Ele.
>> Speaker 2: Little further, getElementById.
>> Brian Holt: GetElement.
>> Speaker 2: getElementAt.
>> Brian Holt: Okay, thank you.
>> Speaker 2: Thanks, Jacob.
>> Brian Holt: [LAUGH] Cool, so let's go actually open this in our browser.
>> Brian Holt: So just Cmd + open, and I am in talks, fem, react and Index.html.
>> Brian Holt: Yes, this is my first component.
>> Brian Holt: So, this is obviously a really stupid example. It would be way easier to just write the HTML directly, right? Why the hell would you actually ever do this? But I wanna show you that React itself is pretty simple, right? There's just really not a whole lot to it.
[00:03:45] We like to build these castles around it and make it much more grandiose and complex than it really is. But the library itself, there's not really much to it and there's not much to getting it up and running. How many people have seen the classic Angular demo where they show you how to do ng-repeat and your mind is blown.
[00:04:02] Because you did this crazy ng-repeat with only five lines of code. You can do that shit in React. It's just, it's no longer impressive, I think so. Anyway, rant over.
>> Brian Holt: Okay.
>> Speaker 2: Question.
>> Brian Holt: Sure.
>> Speaker 2: Coming from AB. Why is DOM part of the React library? Shouldn't it come in React DOM?
[00:04:31] What's the use of React.DOM whle coding for native?
>> Brian Holt: So the answer to your question is there's no use for native. And this is just a bunch of tiny helper methods. So I think they just left it in because it is so convenient. But they are really just helper methods that wrap to be createElement calls, right?
[00:04:53] They're just very thin wrappers. So they're so small, it's probably bytes on the wire. So they just leave it in in the main package, probably for compatibility reasons, to be honest.
>> Speaker 2: Okay, I'm not exactly understanding the question. Could you look in the chat. He's got a follow up, AB at the bottom says, DOM.div, DOM.h1, is it?
>> Brian Holt: Yeah, I think it's just referring to these two particular calls right here.
>> Speaker 2: Right, yeah, but I guess I'm not sure if he's asking to follow up to what you just said.
>> Brian Holt: They're helper methods,
>> Speaker 2: Yeah.
>> Brian Holt: There's not much more to it than that. And actually, you can make this a little bit more nicer looking, so it looks even more like markup.
[00:05:36] If you say var div = React.DOM.div and you say var h1 = REact.DOM.h1 and then you can just get rid of this.
>> Brian Holt: And now it looks even more like markup, right? But I wanna demonstrate to you that components in React are nothing but functions. So that's the mapping you need to get into your head that a component, a tag, an element is just a function call.
[00:06:14] Everything's a function call, which is cool. Because we can start doing high order functions and stuff like that, you can do some really cool stuff with that. Any other questions? This make sense?
>> Speaker 2: Again, follow up, I think they're asking where did those things come from?
>> Brian Holt: They're from the React package.
[00:06:36] There's this .DOM kind of mini library with React of just a bunch of helper methods for specifically React's DOM. And it doesn't exist in native. It's only for DOM. And it's in there for historical reasons. They just leave it in there.
>> Speaker 2: So it does not come from the React-DOM package?
>> Brian Holt: Nope, [INAUDIBLE].
>> Speaker 2: That's, I think, the sticking point they're having.
>> Brian Holt: I'm 95%, I'm sure of that. You might want to check me on that. But they're so small, but I can't imagine it adds anything to the page weight, so they just leave it in there.
>> Brian Holt: The only thing that we're using from React-DOM is specifically this right here, the .render method, which actually puts it onto the DOM.
>> Brian Holt: I guess that bears mentioning. Whenever you include these node_modules/react/dist/react, it's creating a global variable called react, right? So if that was unclear where that was coming from, it's coming from this right here. Same with React.DOM, this global variable comes from, including this script, right? That's where the magic happens.