This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Your First Vanilla React Component" Lesson
[00:00:00]
>> So let's actually go read some React. Now we're gonna back into our index.html here. And we're just gonna make a little component. So we're gonna say const App= arrow function. This is what I was talking about with ligatures. Notice how these things get combined into one thing.
[00:00:24] It's actually just an equals and a angle bracket. Just go back and reference the previous section about ligatures and that'll teach you how to do that. So const App = return React.createElement. And then we're gonna create a div. It's not gonna have any attributes, right? This is where we could just say like it has an Id of this or a class name of that or an aria tag or whatever, that you do all that here.
[00:01:01] And then we're gonna create another element inside of that. So React.createElement. This is gonna be an h1, no attributes, and we're gonna call it Adopt Me. People frequently ask me, well, why don't I write semi-colons? It's cuz Prettier writes all my semi-colons for me. And I'm about to teach you how to use Prettier so that you never have to hit the semi-colon button ever again.
[00:01:38] Okay, so what is app here? This is a function that returns the result of this thing called React.createElement. So what we would call App is a React component. And that's kinda like the most basic building block in React, is that you're just using functions and classes to create reusable components.
[00:02:03] So a good way of thinking about this is App is basically a rubber stamp, right? And anywhere I wanna create an app component, I can just stamp it down again and again and again, right? That's kinda the basic gist of it. It's like a class of components and then you can create instances of that component.
[00:02:21] So the class being like the rubber stamp, and the instance being like the individual stamp of the rubber stamp. So basically here what we've done is we went to the craft store and we bought a rubber stamp, and now we're just looking at the rubber stamp, right? The rubber stamp hasn't done anything yet, we've just created this ability to stamp something out, right?
[00:02:44] We've created a component, but we haven't actually used the component yet. So let's go use it. We're gonna go underneath and we're gonna say ReactDOM.render. And this is this is actually gonna render out our React application. And we're gonna use React.createElement again. And we're gonna create an app.
[00:03:08] So notice here this when we use quotes to literally get a div component, right? A div HTML item. And here we're using this function to actually run a function. Okay, here if I wanted to, I could put the empty braces and null if I really wanted to, cuz I'm not gonna put anything inside of it.
[00:03:30] But you don't have to, that's all optional. So I'm just gonna leave that off like that. Then we have to put it somewhere, and we're gonna try and put it here in this route. So we're gonna say document.getElementById root. As you can see it look a bit better.
[00:03:53] This is just telling you where to put it, which is here. Okay, good so far? So now if we save that, and we go back over to this, and we refresh the page, now you can see we get a nice looking little logo. Now you didn't put an image tag, I replaced that using CSS.
[00:04:21] But if you inspect the element here, you can see that it's actually an h1 that has a background image, oops, that looks like that. You can see that's where that's coming from. Good so far? I mean probably the question you should be asking yourself is why is this useful to me?
[00:04:47] I could have just written this HTML directly and that would have gone a lot faster, that's an astute observation on your part if that's what you're thinking. But the thing is that becomes really cool about this is I can create bigger and bigger components that are made up of other components.
[00:05:01] And then I have these like massive reusable components that I can just throw somewhere. Like if you ever written like a date picker, right? They're enormously annoying to write. But imagine just writing one day picker that works extremely well and then being able to use that everywhere on your website.
[00:05:15] That's kind of the promise of React here is that I can write these self-contained components I can drop onto my web application. These curly braces right here, so it's just an empty object, is really the core answer of what that is. And honestly, you can put null here and it works as well.
[00:05:34] But that again, you never have to care that that would work. I just put an empty object. Let's say if I wanted to give this h1 right here an Id. I could give it an Id of my-brand or something like that, I don't know. So I save this, refresh over here.
[00:05:55] And notice here that this Id gets rendered out here. These are the attributes that you want to be passed on to that HTML element. So if you wanted to give it a class name, you could do that there, if you wanted to give it a style, that's how you do all those things.
[00:06:10]
>> Why are we using React.createElement app when the app function itself returns React.createElement?
>> It's good question. So you can think of React.createElement like I was talking about the stamps and then stamping the stamp, React.createElement is the motion of stamping something, right? So whenever I call app, right?
[00:06:33] It stamps twice, right? It stamps a div and then inside of that div it stamps again an h1, right? Here you can't give it just like an abstract rubber stamp. You have to give it the instance of a stamp, right? So you actually have to do the stamping.
[00:06:50] So that's why you have to use createElement here it's actually going to the notion of creating an instance of your component. And that's essential, that's just how React works. We're kinda getting like a little bit off the rails, because I'm gonna show you how you're never going to write React.createElement ever again.
[00:07:11] I would imagine most React developers don't even know that that a function called create element even exists, because it's actually hidden from you once you start using JSX. But this is actually what JSX is getting transpiled into, it's getting transpiled into createElement calls. One thing I'm gonna call out here is I capitalized App.
[00:07:31] That's actually critical that you do that. When we get into specifically using JSX, you have to capitalize the naming of components. That's actually not even just like a good idea. It's actually required by React that you capitalize that. It's gonna assume anything that's capitalized is something that you created, and it's gonna assume anything that you've lower-cased like div to be something that's like an actual name of an HTML element, right?
[00:07:55] So if I came in here and put x-custom-element like that, and then I refresh over here. Notice here, it's actually going to call that x-custom-element, right? So it's actually sensitive to what you call those things. In other words, you can use React web components together if you want to.
[00:08:17] I am 100% not talking about that today, but I just throw it out there that you could do that if you want it to.
>> How do you know it's that particular div that you're anchoring it to?
>> How do I know which particular div that I'm anchoring it to?
[00:08:34] So this one here like Id root here, I do that here that by getting the correct element, getElementById root,