Complete Intro to React, v5 createElement Arguments

[00:00:00]
>> Brian Holt: Questions so far? Yeah.
>> Speaker 2: Yeah, so I believe on line 12 you still have that div id root not rendered? On line 11, sorry.
>> Brian Holt: Yep.
>> Speaker 2: Where did that go?
>> Brian Holt: Where did the not rendered go?
>> Speaker 2: Yeah.
>> Brian Holt: When you say render, like here, it blows away anything that's inside of it.

[00:00:17] So it just overrides it. So for example, like if I put in here, throw new Error,
>> Brian Holt: And then I go back over here, you'll see it actually just blue it away. It's still blued away.
>> Brian Holt: Because it did try to render it, but let's, actually if you put it outside of that,

[00:00:46]
>> Brian Holt: Then it'll say not rendered, right? Because it didn't get cleared out. So this just kind of helps to see that your JavaScript is loading. Not, it's just something I do, it's not necessarily like a best practice or anything like that.
>> Brian Holt: This is the best error right here, by the way.

[00:01:07]
>> Brian Holt: Okay, other questions? Yeah.
>> Speaker 3: In your app declaration you have it returns something which I'm assuming is whatever magic React is doing when you run that in the background. But then we're passing at another React.create element? What's up with that?
>> Brian Holt: Yeah, good question. So let's talk about the three parameters that React.create element gets the first one is what kind of tag is it, right?

[00:01:37] So you can see here, I've called it three times, react.createElement. I've called it here, I've called it here and I've called it here.
>> Brian Holt: The first one is what kind of element it is. This is a div, this is an h1, and this is what you would call a composite component, which is a fancy way of saying a component that you and I created, right?

[00:01:56] The second, which right now is an empty object, empty object, and undefined, cuz we're just not defining it here, right? Is all of the attributes that you want to give the component. So if I wanted this to have ID of something important,
>> Brian Holt: Now this ID is going to be passed into this div.

[00:02:24] So just to prove my point, if I refresh and come over here, and I look at Inspect Element, you can see here that this now actually has an idea of something important. All right, so this is the attributes that are gonna be put on the DOM element. Or if I gave it to app, this is going to be the attributes that are going to pass down into app that I can use.

[00:02:47] We'll talk about that in a second. But suffice to say this is whatever you want to pass into the child element, in this case, the div. The third one is the children. So inside of div here is an h1, all right? And so that's what this third one is, it's whatever children you want to be passed into this particular element, right?

[00:03:15] So in this case, the children of the h1 is just to text Adopt Me, right? But I totally could have pulled a span in here, right? Or something like that. Now, this can be either singular, or this can also be an array. Cuz a DIV can have 15 children, right?

[00:03:34] So here I could also have, let's just do it for fun,
>> Brian Holt: Okay? Now I have two h1s with Adopt Me, so if I go back over here, you can see that there are two h1s passed into this.
>> Brian Holt: So technically this doesn't have to be an array, you can actually just pass these in all the parameters, it still works.

[00:03:58]
>> Brian Holt: It's called variable verity, which is a stupid computer science word that I learned and I wanted to impress you with.
>> Brian Holt: It just means that it can accept as many extra perimeters and it'll use all of those as children. Now I would say in your brain model this as an array because it'll make it simpler in your brain, because we will not be writing React like this for very long, so.

[00:04:21] Just wanted to point that out, before someone online points it out for me.
>> Brian Holt: Okay, so we're gonna go back to this.