This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Writing your First Component" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: Let's start by writing our first component and getting something on the pages just as fast as we possibly can. So we're not gonna use JSX right now, no transpilation, we're just gonna be pulling in a bare bones version of react and then just rendering something. Just to show you that you can actually write, react really quickly that you don't actually need all this other build stuff pull in.
[00:00:27] All that's conveniences and if you don't want the conveniences you don't have to have them.
>> Brian Holt: I'm gonna be drawing some parallels between,
>> Brian Holt: Angular, Backbone, Knockout, Ember, all that kind of stuff. Usually most of the Angular because that's what I did before Angular 1, right not Angular 2.
[00:00:50] But just like no, these are those are definitely more frameworks certainly Angular and Ember are. And I'm gonna be using the term Angular and frame or using the term framework and library interchangeably. Those terms actually aren't interchangeable. But I don't want to differentiate, so I'm not going to.
[00:01:10]
>> Brian Holt: [COUGH] Okay.
>> Brian Holt: So this is constantly an argument people have, is Reaction a framework or is it a library? I think the answer is really, it can be whatever you choose to use it for. You really can treat react like a framework and if anyone tells you otherwise it either don't understand react in the true the way you can use it or they're just, I don't know, stuck on the word framework being a bad word which I don't think it's a bad word.
[00:01:38] I think Ember in particular embraces the framework term really well. But in truth what React aims to fill is the view layer, right. Like in the MVC array or the MVVM or MV Star, whatever you wanna call it. It really aims to fulfill the view part, right. So if you're writing backbone, right, it really aims to be the view and then it allows you to basically define your own models and allow you to define your own controllers or view controllers.
[00:02:09] Whatever you wanna call. Don't get me wrong again. You can manage these sorts of things inside of reactors. Just many choose not to put that way. And then eventually, we're gonna move all of that model type data out of React anyway when we start using Redux later.
>> Brian Holt: And yeah, so we're gonna start building our little app piece by piece.
[00:02:36] So let's go ahead and open your project here. Let's see. So, I want you to open index.HTML inside of your project. Again make sure you're on the start branch that you're not on the master branch because otherwise, this seem to look slightly different, okay? So, first thing we want to do here.
[00:03:06] Is we're gonna put two script tags here at the top. Why is this, I'm gonna re-indent these set fours or two spaces. Okay, so I'm gonna say src=node_modules/react/dist/react.js. So we're just going to put the precompiled react. And by the same token we're going to be pulling in react-dom as well.
[00:03:54]
>> Brian Holt: And actually, you probably want this to be at the bottom so you can with that to top that doesn't really matter but whatever you would like to do. Okay? We're going to another script tag here.
>> Brian Holt: And we're gonna start pulling in some things that we need, okay?.
[00:04:22]
>> Brian Holt: Okay, this always infuriates people. And it's an opinion, right? You don't have to use semicolons and I'm just like I'm just like look of horror on people's faces like but I need my semi-colons and I love my semi-colons. That sweet period comma combination just does it for me.
[00:04:43] No you don't have to and it's okay. We're gonna be using something called standard JS which is going to or standard is actually what it's called. That actually won't allow you to use comp semi-colons. So my invitation for you is, one try it. And see that eventually, especially when you're writing reactors.
[00:05:02] Lots of like parenthesis and curly braces and things that you can be using. And it's nice not to have to worry about, do I need to put a semicolon here or not, right? At least I always have that problem. So I invite you to try not using something semi-colons today.
[00:05:16] And if you just can't do it, totally fine I'll give you the escape hatch later. But just give it a shot.
>> Brian Holt: Okay? So by pulling these two modules right here. They're making a globally available react just so you know that's why we're able to say React.DOM.div. And that's okay.
[00:05:42] Okay, and now we're going to make our very own first component So, var MyFirstComponent equals = and I wanna use just parentheses here. We're using parenthesis because we want to do this on multiple lines. So, we can kinda see the way that the nesting is working. And that's gonna be very helpful to us.
[00:06:10] And the parenthesis basically allow you to do multiline expression. If you didn't have that parenthesis there, JavaScript would throw an error cuz it's like you said equals nothing blank and it would be upset about that. Okay. So, we're gonna say div. Div's a function. First thing we pass to is null because we're not giving it any context.
[00:06:36] And then the second thing on the next line, it's gonna be the h1, again with null and say, this is my first component or whatever string you want to put in there that you expect to show up. Okay, then I'm gonna come down here underneath it and say ReactDOM.render.
[00:07:04] MyFirstComponent, and then we'll say, document.getElementByID('app')) and that's it. Okay?
>> Brian Holt: So go ahead and save that. And then come over here to your browser and just in a new tab open. Where wherever your, you put your project. I put mine here. So this is the index.HTML that we were just working on.
[00:07:44] I'm gonna open it in my browser.
>> Brian Holt: And again you can do that in Chrome. If you just go to Chrome you say File > Open File. Just so you know. So check it out. That's react. So hopefully you now realize that, actually, react is pretty simple. In terms of, it's not very hard to get something on a page.
[00:08:10] And I think a lot of tutorials go, make you do way too much up front to try and get this first hello world on the page. It's cuz it's not really that difficult. Like we did it in what, how many lines of code? One, two, three, four, five, six, seven.
[00:08:28]
>> Brian Holt: Seven lines of code to get something on the page, which is not bad at all.
>> Brian Holt: Any questions about that? Magical, magical, I'm gonna go with magical. Okay, so let's go back and chit chat a little bit about what we actually did here. Okay, so the first thing you need to realize about react components is everything's a function right.
[00:08:54] Now, so they were calling the div function, right? So, that's the first important thing to keep in mind is that everything is a function everything, except this my first component in this in this particular case is actually just kinda the result of these two functions, right, which is going to be a react element.
[00:09:17] But we'll see later how to create our own functional components. This null, this is like the attributes that we're passing to it. So if I went ahead here and said, color or actually it'll have to be style, color. Style: {color: 'red'}}. Now I saved it. And it came back over here.
[00:09:42] Now it's red. So that's what this is. These are the kind of attributes that we're passing to it. In fact, if we go here and inspect element. Inspect.
>> Brian Holt: You can see here it's actually literally passing the style attribute onto there. So that's what that first part is.
[00:10:00] It's the attributes that we're gonna be supplying to our different, let's see if I can make this a little bit bigger.
>> Brian Holt: So this is actually like the attributes that we'll be passing to the various components.
>> Brian Holt: That's what that is. Right now, we're gonna leave that null.
[00:10:21] And then, as you can see it's just different layers of nesting, right. This kind of mimics the way that we would write HTML, right. Like we have like an outer tag that's has inter-tags, right. That makes some sense hopefully if you've written any amount of HTML
>> Brian Holt: And you don't have to pull these out.
[00:10:39] I just find this much easier to read than if it looked like this.
>> Brian Holt: Right? I mean that's what we're doing. But I find it much easier to just pull these out so it looks a little bit neater.
>> Brian Holt: And then ReactDOM. Okay, so there is, there's react, right?
[00:11:00] And react is just a particular way of writing components. So, whether you're writing react with for the browser or using ReactNative to write it for iOS or ReactBliss to write it for the command line or ReactGL thread for Web GL Or for example, we have an internal library at Netflix that we write React for your PS4 or we write React for your smart TV, right?
[00:11:24] So React is just that library that allows you to write these components. And then there's these various other libraries like ReactDOM, ReactBliss, etcetera, etcetera, that allow you to take these components of you've written and react and then throw them at particular rendering targets, right? So that's why React and ReactDOM are separate packages, right.
[00:11:43] React the way we write the components and ReactDOM is the way that we put the component that we've, written on to the DOM. So for example I really only use ReactDOM but if you want to use ReactNative this you'd pull ReactNative in to do that instead of ReactDOM to them.
[00:11:59] Hopefully make some sense. Yeah, it actually used to be the same thing. ReactDOM used to be built in to react because that's really the only way people first started using it. But then react native happened and it all exploded into a bunch of different packages.