Complete Intro to React v4 Your First Component

Transcript from the "Your First Component" Lesson

[00:00:00]
>> Brian Holt: So what this needs to do is, this is going to be a component, right? It's gonna be a function that returns some sort of markup. It's gonna be a render function for whatever this component is. So what I wanna do is, I wanna return a div with an h1 inside of it that says, adopt me, right?

[00:00:16] It's gonna be our branding at the top. So what I wanna do is, I want to return React.createElement.
>> Brian Holt: Okay, and I'm gonna put a div, cuz that's what I want to output to the DOM is I want a div tag, right? I don't want it to have any attributes.

[00:00:40] If I wanted it to have an ID, or a style attribute, or any of those things that goes on a div tag, I would put that inside of that object there. Okay, and then I'm gonna give it children, right? Children items are gonna be rendered out to the DOM, right?

[00:00:56] So I'm gonna say another, we'll just put this on multiple lines so it's a little bit easier to see. Indent that a little bit. Then here, I'm gonna say another React.createElement. I'm gonna make an h1 here, okay? Again, no DOM attributes here, and then here I'm gonna have, Adopt Me!,or whatever you chose to call your adoption app, okay?

[00:01:26]
>> Brian Holt: Let's save that. So congratulations, you've made your first React component. Fundamentally, this is what React is. It's just making a bunch of components like these. And now I have this reusable component called App, and I could use this as many times as I wanted to. That's kinda the magic here.

[00:01:42] So down after that, now we have this component. We have to render it out. Yeah?
>> off screen female: Sorry, I might have missed this. What do the angle brackets do, the curly brackets?
>> Brian Holt: So this is where the attributes would go. It's just an empty object. You also could put null here, and that would work as well.

[00:01:58] But if I wanted to have an ID on this div, I would say { id: "my-id" }. And this would actually put an ID tag on it, right? Does that make sense? Well, we'll go over it some more as well. But that's a good question, thank you.
>> Brian Holt: Okay, so now we have this component, but we need to do something with it, right?

[00:02:19] We actually want to render this into the DOM. So what I'm gonna say is ReactDOM, right, so I have this ReactDOM thing. And I'm gonna say render, okay? And now I want to render the application into it. So what I'm gonna say is React.createElement again, and I'm gonna give it App.

[00:02:43] So notice these ones are strings, right? Because I literally want a div tag, right? It's literally the div tag being output to the DOM. And the reason why they do that is you can have custom elements in here. So I could have x-custom-element in here, if you're gonna do Web components kinda stuff, right?

[00:03:02] But I just want a div, whereas this is actually the App thing here. So createElement can handle both strings, cuz that's gonna be a literal div tag. Or it can handle React components. Or what they're called is, composite components, which are components that you create. Okay, does that make sense?

[00:03:21] Now, here you can put empty object and null, right? Cuz it's not gonna have any children, you don't actually have to do this. You can actually just leave it as App, because the other two ones are optional, okay? Now I need to tell it where to put it.

[00:03:38] So I'm gonna to say document.getElementById, root.
>> Brian Holt: Okay, so I'm making App, an instance of App. And I'm rendering that to root. And root is there.
>> Brian Holt: There, [LAUGH] all right? So it's gonna to take this App, and it's going to render it up there. So hopefully, you can kinda see how those two kinda connect to each other.

[00:04:13] Now let's talk about App for just a second. The way I like to think about this is, App, we've created a new class, right, if you're coming from a Java background or something like that. So App is a new class, and Reach.createElement creates an instance of that class.

[00:04:29] If you're coming from a backend perspective, usually that makes sense. If you're coming from a frontend perspective, that can be a little computer science-y nonsense. So a way I like to thing about is, when we create App, we create a new rubber stamp. I haven't actually stamped anything yet.

[00:04:44] So having a stamp without ever stamping anything is not super useful, right? You actually have to stamp something. So here, I've created a new kind of stamp. And here, I'm actually kinda, I'm using the stamp. Right, I'm stamping it on something. But what's cool about that rubber stamp is it's reusable, right?

[00:04:59] I don't just stamp it once and it evaporates. I mean that would be cool, but I don't know of anything like that. But I can actually stamp that multiple times. So that's what's compelling about React, is these components become reusable. I could have multiple Apps. Usually, you'll have one App, right?

[00:05:14] But I could have multiple title tags or whatever we wanna make, or so. Multiple pets, right, cuz we're gonna make a pet adoption app. So we can make a pet component and stamp that multiple times. Does that make sense, the difference between making a new class versus having an instance of it?

[00:05:31] Cool.
>> Brian Holt: So now if you save this, and go back and refresh your page,
>> Brian Holt: You should see something that says Adopt Me up here.
>> Brian Holt: So congratulations, now you've made your first React application.