Complete Intro to React, v5 Getting Started with Pure React

Transcript from the "Getting Started with Pure React" Lesson

[00:00:04]
>> Brian Holt: Okay, so this is an arrow function, right? And what we're gonna put inside of here is, we're going to put return,
>> Brian Holt: React.createElement,
>> Brian Holt: Okay? And then you may not necessarily see this auto-complete, it'll take a second for VS Code to just catch up with what you are doing, but you can just ignore that for now.

[00:00:30] Div div, okay. Empty object and then here we are gonna put again, react.createElement, then we're gonna put inside of that an h1,
>> Brian Holt: With an empty object and Adopt Me,
>> Brian Holt: Okay?
>> Brian Holt: So what we've done here is we've created a component called App. And a component in this particular case is just a function that whenever it returns a result of react.createElement.

[00:01:06] So let's chat for a second about what createElement is, or what app is for a second rather. I like to describe this as a rubber stamp, right? So here we have created our own rubber stamp called app, right? Now, you can go to the store and you can buy a rubber stamp, but a stamp by itself is not in and of itself useful, right?

[00:01:29] It's only useful when you actually want to stamp it, right? So here we've created one, we haven't actually used the stamp, we've just created the stamp. So that's what this function does, is it allows you to basically stamp this as many times as you want, okay? React.createElement in here, what this is actually doing is it's stamping something here, right?

[00:01:51] So anytime that app gets called, it's going to stamp a div, and inside of that it's going to stamp an h1.
>> Brian Holt: So that's really all components are in React, is it's just something that returns markup basically, right? So again, we've created app, but this in it of itself doesn't do anything, right?

[00:02:11] This is the creation of the stamp, so we actually need to go create it. So we're going to go render this to the DOM by saying ReactDOM.render. React.createElement App and then we're gonna tell it where to render it. And we're gonna say document.getElementById root.
>> Brian Holt: So this is actually going to stamp our App because of this React.createElement.

[00:02:54] So the React.createElement can take an either stamp that you've created, or it can take in a string like this where it's actually going to literally make an h1, right? Whereas this is going to be something that we've created, this is going to be literally an h1 that we're going to output to the DOM.

[00:03:12]
>> Brian Holt: And as you may guess, it's going into root which is going to be this root up here.
>> Brian Holt: So this is about the simplest React App you can build. So if I save this,
>> Brian Holt: And go back over to my browser here, you can see here that you get a nice little Adopt Me logo.

[00:03:40]
>> Brian Holt: So just say now replaced that with CSS, right? So that's where the h1 went, this is actually the h1 that we put up there.
>> Brian Holt: So now we're done with the workshop and you can go home, I'm just kidding. I'm gonna use that joke five more times, so don't even worry about it.

[00:04:05]
>> Brian Holt: So, this is the power of React is one, this is not very complicated in my opinion. You can be the judge to that, but at its simplest, this is what React is. It's taking a component and just using it, right? And the power here is that I can make components that I put inside of components that I put inside of components that I put inside of components, right?

[00:04:23] So you kinda have this composability model with React.