Pure React & createElement

[00:00:00]
>> So click on pure React here and we're just gonna start by writing just React. There's gonna be no build tool between us, it's just going to be script tags and HTML, that's really all we're gonna do up front. So I'm just gonna create this on my desktop.

[00:00:18]
I'm gonna create a new folder, I'm gonna call it Adopt Me which is the name of the project. We're gonna be writing a pet adoption app, it's adorable. Drag down the VS code and you can see here I just have my Adopt Me folder here. And then I'm gonna create a file and set that called source which is where our SRC which is where I'm gonna put all of my HTML, CSS, and JavaScript.

[00:00:42]
Create a file inside of the source directory call that index.HTML. And then inside of the index.HTML we're going to put some basic HTML. So in VS code here we can use a thing called Emmet, this is available in Sublime and TextMate and as well. But if you put HTML5 and then you hit tab you'll get this bare bones set of HTML.

[00:01:07]
You can get rid of this I equals edge equivalents cuz that doesn't really do anything anymore. And then instead of calling this document I'm gonna call it Adopt Me and this is version eight of the course, okay? Here in the body we're gonna put a div with the ID equal to root and I'm gonna put something in here like not rendered.

[00:01:34]
Because if we see this not rendered we know that our React App for whatever reason didn't render, right? And we'll replace this text here, okay? And then here we're gonna put two script tags, I'm just gonna copy this from my notes here because it's long enough that I always get the URLs wrong.

[00:01:50]
So I'm gonna copy paste this to that. So reactd18.2und, the universal module so this is gonna make react universally available, as a global variable. This is not how we're gonna finish your app, this is just so we can get started, right? We're gonna grab React and React DOM.

[00:02:13]
React is the API part of the library and React DOM is the actual what's going to render it to the DOM. The reason why they split this out is because there's React Native, there's React 360. There's a bunch of different renderers for React and React is like the developer surface area and then React DOM is what's actually doing the part that talks to the DOM, right?

[00:02:34]
So the React DOM is actually the much larger part of the library. React itself is much smaller and this is shared amongst React Native and all these other ones, okay? And then after these two script tags I want you to put a script tag here. And we are gonna write JavaScript directly here.

[00:03:00]
Okay, so I want you to come back over to your browser. We're just gonna Command+O or Ctrl+O or file open, right? Open file and I put this on my desktop. Adopt Me, source, index, and HTML. And so you gonna see here. All right, I did this and I didn't save that.

[00:03:33]
Okay, now, save it, refresh it. You can see here it says not rendered. You can look here in my network tab and I have, let see if I can make that a little bit bigger, index and then you can see react.development and react.DOM development are both coming in just fine.

[00:03:52]
And then here in my console you can see that I have React available and I have ReactDOM available right there. This is always my favorite thing right here. Secret internals do not use or you will be fired. It's been there for years now. And obviously react was written by Facebook, right?

[00:04:16]
And so they put some internal things in there so they can track certain things or test different things. And there's always a big temptation to mess around with the internals and apparently they're just very, very upfront to the other Facebook employees, don't mess with this or it's gonna break soon, right?

[00:04:33]
I've been told it's a joke, you won't be fired but your stuff will break. And then you can see our beautiful not rendered there. So pretty standard HTML5 document, writing a root div, we have two script tags and the last script tag is where we're gonna put our code.

[00:04:50]
We're gonna put a little bit of code in there and then eventually we're just gonna move it into another file and let's go grab our styles really quick. So not a CSS course, there's lots of great CSS resources on Frontend Masters, this ain't it. So I want you to just go click, I have a link here in this blue box where it says click here, click that and as command A, command C, copy and paste everything in this file into another file in here called style.CSS.

[00:05:20]
Paste, save, I do not assert that this is good CSS or that anything you should copy or even look at, please just close the file and pretend that it's not there anymore [LAUGH]. Now, I mean it's fine. But yeah, it's not a CSS course. If you follow all of my class names and stuff like that you will get all of your style for free.

[00:05:43]
Again, we don't wanna write CSS in the course of this class. So up here in your head please put a link to ./style.CSS. And this I meant to put inside the source directory. Yeah, there you go. So index, HTML, and style CSS are both inside of the source directory.

[00:06:05]
So now if we refresh the page you can see we have our beautiful little background. Yeah, there is some custom art for this website done by Alice Barton. It's great including our nice little background. Yeah, and if you really feel like it I think there's several available styles here.

[00:06:28]
So you have wallpaper B here. I think if you switch just to wallpaper A, you can see it's a nice more muted tone or wallpaper C I think is black and white. Yeah, so whatever one you feel like. I might stick with C. No, let's do B because that's actually the one that's defaulting in there but you can change it to whatever you want.

[00:06:47]
So in your script tag let us go write, what is this like? Ten lines of code and we'll have rendered our first React App. So first thing we're gonna make, we're gonna make a variable called App. It's important that it's capitalized, capital A. You're always going to capitalize your components.

[00:07:09]
I'm gonna make a function here. And we're going to return React.createElement. It's gonna be a div and then inside of that, here you can either put no or you can put empty objects that's kind of up to you. I'm gonna put empty object and then we're gonna do React.createElement.

[00:07:39]
Again, so the same calls that we did up here but we're gonna put an h1. Again, another empty object and then I'm gonna put some text here of Adopt Me or something like that. Okay, so now we have this function that returns the results of whatever React.createElements does.

[00:08:06]
So first couple things here. The first thing that we're putting here is what kind of elements we're putting in here, right? So this is going to be a div. As you might imagine if I put a p here, it's gonna be a p element, if I put a X-custom element, right?

[00:08:24]
If we're doing web components, it's going to put literally whatever you put here, right? I can put something not real and it's gonna try and do that, right? In theory I guess you could do this render XML if you really want it to, please don't. But in theory it would work, right?

[00:08:42]
So we're gonna have a div. And as you can see here we're doing an h1 down there, right? So that's this. The null or the empty object here this is going to be whatever attributes that you're handing down to this. So if I wanted to have an ID here of my ID or something like that, right?

[00:09:05]
This is gonna be whatever you put on the HTML element. So you could have a style tag, you could have a class name, right? All those things are valid here. We're not putting anything so you have to give it something there, right? We're giving an empty object but that could have been no, both of those essentially mean the same thing to react.

[00:09:26]
And then the third thing that you give it here is the children, right? So whatever it's going to go inside, HTML is nested, right? You have a head tag and inside of that there's a title tag, right? So whatever you put in here is going to be whatever goes inside of that issue.

[00:09:43]
So we're gonna have a div inside of that div is an h1 and inside of that h1 is just raw text Adopt Me. So that's all createElement does, it's just printing brand new HTML tags for you. I mentioned ligatures earlier in the course. Some of you might be looking at like, that's not real.

[00:10:03]
There's no such thing as an arrow tag like that, right? It really is just an equals and an angle bracket put together and then my font combines them into a fat looking arrow. That is what a ligature does. There's a bunch of them in here if you have any questions about what they are be sure to let me know.

[00:10:20]
There's double equals, triple equals, less than or equal to, greater than or equal to, things like that. Though the most part it just helps you have less cognitive noise. I think that's the theory in reality to me it's the same, right? I just think it's pretty which I like pretty things so I keep doing it.

[00:10:46]
Okay, so app is always capitalized. You always capitalize your components that's actually not just a good idea it's actually required. We'll get into that while we get into JSX but for now just believe me, you do need to capitalize app here. Okay, so now I have a function but I'm not using it yet.

[00:11:07]
It's not doing anything, right? Basically I've created this rubber stamp, right? And I have this lovely rubber stamp that's ready to stamp things but I haven't actually stamped it yet. All I've done is I've given you the rubber stamp. It's like, I have a rubber stamp and you're like, what do I do with a rubber stamp?

[00:11:21]
I need to go use it, right? I've created a new type of class if you're familiar with Java or even classes or things like that but I haven't actually instantiated it anywhere. So let's go stamp something, right? Let's go make something, okay? So I'm gonna have const container equals document.getElementbyId and we're gonna go grab root up here, right?

[00:11:49]
This one up here. Doesn't have to be called root, you can call it whatever you want. I think there's just kind of most people tend to call it root. Const root equals ReactDOM.createroot. And then we're going to give it the container. Yes, you can directly put this in here as well that's totally fine.

[00:12:21]
It's nice to keep a handle on container and on root but that's really up to you how you choose to do that. And then we're gonna say root.render(React.createElement) app. All right, so just to make sure that I'm not saving to you now we should go over it and what do we expect to see?

[00:12:49]
We expect to see a div and inside of that div we're gonna expect to see an h1 and instead of h1 it would say adopt me but I think it actually replaces with an image cuz of the CSS, it does. But if you inspect the image here you can see it actually is an h1 and I just mess with the background image here which I have as Adopt Me.

[00:13:11]
Let's talk about createElement. Notice that we use createElement again here but we're not giving it a string like we did here or here but we're actually giving it a component. This is kind of like the trick of react. If you give it text, it's just going to render that directly as the tag name.

[00:13:28]
Again, if I did not a div and I refresh here and I inspect here, you can see it actually outputs here, not a div. So whatever you put in that text there it's just gonna like, all right, that's the kind of tag you wanted I'm just gonna do it.

[00:13:43]
It doesn't ask you any questions there. But if you give it a component like this, like a function that creates more elements, it'll actually go and render that out, right? So we're kind of getting at what the magic of react is, right? I create components that are made up of other components, that are made up of other components, that are made up of other components, right?

[00:14:05]
So it's just these, you get these reusable rubber stamps that then stamp other rubber stamps which sounds awesome. Now that I think about it I have a startup idea. I'm just kidding, that sounds like a dumb idea but that's the idea here is we now have these really cool, useful, reusable components, right?

[00:14:20]
You can make a really fancy input and then you can make a fancy form that is made up of fancy inputs and then you can have a page that's made up of fancy forms, right? You can see that it's just expands bigger and bigger and you get these better bigger macro components that are made up of micro components, right?

[00:14:38]
That's the idea. You might wonder like, what happened to the other two things here? Well, these other two things are optional. The attributes and the children. This has no children, it has no attributes so I don't have to put anything but you absolutely can give it an empty object.

[00:14:58]
And I don't know, null here or something like that. You can it just you don't need to, right? So if I refresh this, has no attributes being passed into it and it has no children. You don't really need to know most of this stuff is like the arity of how this createElement function works.

[00:15:20]
I'm gonna venture to say that most react developers do not know that React.createElement is a thing that exists. You actually are probably never going to call it again directly as if 10 minutes in the future because I'm gonna show you how to work with JSX, JSK calls to react.createElement for you.

[00:15:41]
But I just wanted to show you how all this stuff works. There's nothing mystical about what's going on here. I'm gonna show you JSX, it's gonna do this for you but this is all it's doing. All JSX does is it gets translated into JavaScript that looks like this.

[00:15:59]
So why do I show you this? If you're never gonna do it again why do I show you this? One, I wanna show you that it's not a black box, it's actually very simple of what it's doing for you. And two, whenever you're looking at your stack traces and you see a bunch of createElement calls, I want you to know what happened and why it's there, okay?

[00:16:16]
It's one of those things like, if you know what your tools are doing for you, you embrace the complexity. So you're gonna start using JSX like, this is so much easier but you know why it's there. You know what it's doing for you. It's not intimidating.