This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "My First Component" Lesson
[00:00:00]
>> Brian Holt: What I want you to do is I want you to open your editor of choice. Mine is Sublime.
>> Brian Holt: And I want you to create a new file, I don't care where you save it cuz this is not what we're actually gonna end up doing. But I'm just gonna put mine in my repo that's fine.
[00:00:18] Or you could put it on like your desktop or something. Whatever. So I add this index.html. As long as it's called an HTML file, then that's okay. And I want you to put some HTML boiler plate. I'm gonna use Emmett. So if you don't know what Emmett is,
[00:00:41]
>> Speaker 2: Amazing.
>> Speaker 2: Amazing.
>> Brian Holt: That is really cool. Basically, it allows to do shorthands, so I just html, colon, five and I hit tab and it just autocompletes out to like a basic html document. It does tons of more stuff than that but I use that quite frequently.
[00:01:05]
>> Brian Holt: So we end up with the basic html document. You can put whatever title you want in there. I'm gonna put Masters React.
>> Brian Holt: Okay.
>> Brian Holt: And now what we're going to do is we're going to put a div on the page with id="app".
>> Brian Holt: So this is where React is going to mount itself.
[00:01:41] You have to have a div, or something where react can mount itself. So we're gonna put it here inside of this app div, you can put some text here as like react has not yet rendered, right. Cuz that text will exist until a react replaces it.
>> Brian Holt: Okay, and now we're gonna need two scripts to get React up and running.
[00:02:05] So we're gonna say script src=*node_modules/react/ dist/react.js, so we need the react library, right? And then, I'm gonna copy that and I'm also gonna bring in react-dom in the same fashion.
>> Brian Holt: Okay, so node_modules/react and you also need node_modules/react-dom.
>> Brian Holt: So let's talk about why we need two libraries instead of just one.
[00:02:47] It used to be up until 0.8, 0.9, I don't really remember. But until somewhat recently, you just needed the React library, that was it. And then some mobile developers at Facebook got kind of jealous of people writing React, it's like, this is really great, I want to keep writing React.
[00:03:07] And so what they did is, we're gonna write React but for mobile development and they came up with React Native, right? The same sort of patterns that were going on, but they wrote that to target iOS and Android. And so at that point React realized that they had an entire paradigm of coding.
[00:03:24] And what they decided to do is they decided to split out React which is just the library for expressing UIs, independent of their target. So that you can target Android browsers,VR, all these different sorts of environments and then they created these kind of separately which is the renderer.
[00:03:46] Which would be like react-dom, react-native, a frame react, react three. There's dozens of these renderers out there. So that's what react dom is for our use case today, all we're going to be using is react dom. But that's just the glue layer between, I write my interface in react, I have the browser, right?
[00:04:06] And I need the glue in the middle, that's what react dom is.
>> Brian Holt: Okay, so that's why you need both of those. And then now, after I load these two, I'm going to have a script tag, I'm just going to write JavaScript straight in my HTML. Cuz I do what I want okay.
[00:04:26] So I'm going to say, var MyFirstComponent = React.createClass.
>> Brian Holt: And I'm going to give it a render function.
>> Brian Holt: Okay and then here I'm going to return.
>> Brian Holt: So I'm gonna put these parentheses here. That's just a JavaScript thing that lets you kind of continue your return statement onto a second line.q And the reason why I do that is so I can make my code look like mark up, so let's finish that and then I'll explain why I do it.
[00:05:14] But, suffice to say you have to have these parentheses, so just trust me for a moment and I'll explain in a sec why you need those, okay? So I'm going to do React.DOM.div. Which is just a function.
>> Brian Holt: Null I'll explain that here in just a sec as well.
[00:05:37] Come on. And then React.dom.h1(null).
>> Brian Holt: This is my first component.
>> Brian Holt: Okay, and that is your first React component. Nothing too crazy going on here, right? So we made a div that has an h1 inside of it, that says, this is my first component. That's the entirety of what has happened here.
[00:06:21] Now what's the null? The null is the attributes that you're passing to that dom element, right? So if you wanted to give it like a class name or an id. That's where you would do it. Since we are not passing any attributes to it, we just pass it null.
[00:06:33] You can give an empty object, that would be fine too.
>> Brian Holt: And then the second thing is what goes inside of it, right? So notice here, I have comma, and then I have another DOM element. And then this one, I'm just giving it a text element. That make sense?