This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Simple React Components" Lesson
[00:00:00]
>> Brian Holt: Now we kind of have our bare bones set up here. So let's actually start writing some React cuz so far we have, this is not a very good intro to React. So here inside of my complete intro to React, I'm going to create a new file and it's going to be called Index.html.
[00:00:29]
>> Brian Holt: Okay, I'm gonna put the bare bones for our HTML document.
>> Brian Holt: html:5, so I'm using something called Emmet. Which is kind of outside the scope of this class but it's super useful. It used to be called Zen Coding. It's just like a bunch of shortcuts for writing HTML really fast.
[00:00:54] Which is how I scaffolded that out. Okay, we’re gonna create a file and I’m gonna call it svideo. That’s what I named my little app here.
>> Brian Holt: You can call your video app whatever you want to call it.
>> Brian Holt: Okay, here we’re going to put a div, and it's id is going to be called app.
[00:01:21]
>> Brian Holt: And then we're gonna do two things right here. We're gonna put two script tags. One of them is going to be equal to,
>> Brian Holt: node_modules/react/dist/react.js. So we're gonna be pulling in the pre-bundled React file, so that we can play with it without doing any sort of bundling.
[00:01:51]
>> Brian Holt: Okay, and then the other thing we're gonna do is we're gonna do another script tag.
>> Brian Holt: node_modules/react-dom/dist/react-dom.js.
>> Brian Holt: Okay, so here's a big key about React here. So I imagine a lot of you have heard of things like React Native, and React VR, iframe React, I'm missing, there's a bunch of them, right?
[00:02:24] So you can think of React being kinda split into two parts. Meaning if you're gonna use React, you're always gonna have to require two different libraries. There's the top level React part, which is the same across React Native, ReactDOM, React everything. This is the library where we actually create components.
[00:02:41] And it has, like, the life cycle methods, it has all of these different things that you, as a developer, interact with. And then between React and whatever you're rendering to, there sits a glue layer, right? That translates React components to DOM nodes, or to native UI elements, right?
[00:03:01] So that's what React Native is, that's what ReactDOM is, right? It's these different glue layers, the rendering layers, right? So we're gonna actually be coding with React but at the very end, we'll pulling ReactDOM to actually render out to the DOM, right? So that's why there are two separate libraries.
[00:03:17] It used to be the same thing up until like React.12, maybe. Don't quote me on that. Okay, so underneath that we're gonna do a script tag. So when we pull these in, react and react-dom, it's gonna make them available as a global variable that we can refer to.
[00:03:42] So now we have react and react-dom. So the first thing we're gonna do is we're gonna say const MyFirstComponent, and it's gonna just be a function.
>> Brian Holt: And we're gonna say return React.createElement ('div', null).
>> Brian Holt: Okay, and then I'm gonna do some kind of funky spacing here. But it'll make sense in a moment why I did that.
[00:04:23] Then here I'm gonna say, React.createElement('h1', null, 'this is my first component'), or whatever you wanna render out.
>> Brian Holt: Okay,
>> Brian Holt: Then down here at the bottom, I’m gonna say, ReactDOM.render,
>> Brian Holt: And we're gonna say, React.createElement,
>> Brian Holt: MyFirstComponent. And then we're gonna tell it where to render. So in this case, we want it to render up here in the app id.
[00:05:11] So we're gonna say document.getElementById('app').
>> Brian Holt: Okay?
>> Brian Holt: So I'll explain it momentarily, but let's go and make sure that it actually works. So I'm just gonna literally just open the file with my browser. Eventually, we'll get to serving with a server, whatever, but this will work for now.
[00:05:43]
>> Brian Holt: Let's see, so I need to go to talks, nope, FDM, there we go, Index.html.
>> Brian Holt: And you can see here, it says this is my first component, right?
>> Brian Holt: This is React at its most base level. And that's all you're gonna learn in this workshop. So wrap it up, we're done.
[00:06:08] Just kidding, well, I mean, sort of.
>> Brian Holt: No, I'm kidding. [LAUGH] Okay, so let's talk about what's going on here.
>> Brian Holt: So here we're creating a React component, right? This is MyFirstComponent, right? What you can think of as like a blueprint for creating new components. Or for those of you who like the Java-y classy object orientedness, this is a class, right?
[00:06:34] And we can create many instances of this class. So we have created a reusable component here that every time that we render it out, so if I inspect this element right here,
>> Brian Holt: You can see here there's a div and an h1, right? So every time that I create a new like stamp, a new instance of this MyFirstComponent, right, it's going to render out this particular bit of markup.
[00:07:02] Now this isn't really super interesting right now, right? Like it's really just a div and a h1. It would been of way easier to just me going in here and say, okay, I'm gonna put a div right here, right? But where's the fun in that? I wanted to over engineer it.
[00:07:18] No, hopefully this is indicative to you that at its most base layers, there's not really a lot to React. The hello world of React is what? This is gonna be ten lines of code.
>> Brian Holt: So let's go in and talk about React.createElement then. Okay, so this function right here is a class, right?
[00:07:42] It's the MyFirstComponent class. createElement is creating a particular element of something, right? So I'm creating one div instance. I'm not creating a new type of div, this is just rendering out a div, right? Same thing here with this h1. Then here, I call createElement, same thing right here, I'm creating an instance of MyFirstComponent, right?
[00:08:06]
>> Brian Holt: So I could create another component which renders out yet more MyFirstComponents, right? So they can be, components can be composed of other components as well.
>> Brian Holt: Any questions about this example so far?
>> Brian Holt: Not super useful yet, but we're getting to the useful part, I promise.
>> Brian Holt: Okay, so let's actually go create another type of component.
[00:08:33]
>> Brian Holt: So I'm gonna create another one called MyTitle. So const MyTitle, it's gonna be another function.
>> Brian Holt: And what this is going to do is this is going to return more markup.
>> Brian Holt: So we're gonna say, react.createElement('div', null,
>> Brian Holt: And we're gonna say, React.createElement('h1', 'h2'). So something that you might be noting here, if I pass it a string, it's actually going to render out that sort of tag, right?
[00:09:21] It's not even really gonna keep track of what it is, right? I could put x-my-component, and it would render out an x-my-component tag, right? So this also works with web components, if you wanna go down that path. If I pass it like a variable name like this, right, MyFirstComponent, it's not a string it's MyFirstComponent, it's actually going to render out that, it's going to assume that's a React component and try and render it out that way.
[00:09:56]
>> Brian Holt: And this is gonna be my second component.
>> Brian Holt: Okay, and then we're gonna modify this down here. What's cool about this is,
>> Brian Holt: createElement, so I'm gonna put a MyTitle in here, right, but I can actually put multiple MyTitles in here.
>> Brian Holt: So for those of you that like the computer science-y terms, createElement has variable-arity, right?
[00:10:29] So you can give it as many parameters as you want. That's all that that stupid term means. [LAUGH]
>> Brian Holt: Yeah, so we're gonna be creating multiple instances of MyTitle. The other thing that you can do with this is you can give it an array.
>> Brian Holt: You can give it an array of React instead of elements, right?
[00:10:52] Right now this isn't super important. They kind of look the same. But this will become important later in the course. So just keep in mind that you can also pass it arrays of components.
>> Brian Holt: So let's go try and make sure that that works.
>> Brian Holt: And you can see here I got a bunch of instances of my second component.