This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "My Second Component" Lesson
[00:00:00]
>> Brian Holt: Other questions?
>> Speaker 2: David is asking, I've seen a little bit of react in a component I have returned, and then there's a string. So, element div, element h1, some string, closing h1, closing div. How is this different then from what you're doing with the function?
>> Speaker 3: He's talking about JSX.
[00:00:19]
>> Brian Holt: Yeah, we'll get to JSX in like a couple hours. So hold on to that question if you don't feel like it's been answered then. It will get answered, so don't worry about it. [LAUGH]
>> Brian Holt: Yeah, so we are using barebones-react with no compilation. No JSX or anything like that, just to show you that this is pretty simple behind the scene.
[00:00:47] And I also say like, you can, you don't ever have to useJSX, or Babble, or Webpack, or any of these things. You can really write apps this way, I've seen people do it. I just don't recommend it. I would say of all of the React people that I know, which is quite a few, There's exactly one company that I know that writes React without JSX.
[00:01:07] I'm not gonna call them out, but it's kinda weird.
>> Speaker 2: You said that null was the attribute field, does that translate to the HTML attribute for that component?
>> Brian Holt: Mm-hm.
>> Speaker 2: Okay, so we're just giving it no attributes?
>> Brian Holt: Correct.
>> Speaker 2: Okay.
>> Brian Holt: Yep.
>> Speaker 2: Cool. Question about downloading the dev tools.
[00:01:26] Should we do it or should they do not do it?
>> Brian Holt: That is the end of tomorrow or end of today? We have a specific session just on dev tools too, good question.
>> Brian Holt: I thought there was something else I was gonna say. Nope, I don't remember, it wasn't important.
[00:01:48]
>> Brian Holt: Okay. So let's go ahead and move on and create our second component. Yeah, I think I covered everything. So first of all, this is super annoying so let's go ahead and create a new file. And call it, we're just gonna create a new folder, call it js.
[00:02:09] And inside of js, we're gonna create a file called ClientApp.js.
>> Brian Holt: Okay, and then in the HTML of that js, we're gonna just cut all this stuff out and move that to ClientApp.js. And then here, we're going to just pull it in as a script. So we're going to say, "js/ClientApp.js." All right?
[00:02:42] And then we can move everything into a separate file.
>> Brian Holt: Cuz this is getting annoying really fast.
>> Brian Holt: Syntax highlighting. For those of you that are using Sublime, I highly, highly, highly suggest using Package Control, that you Install Package. I'm gonna List Package and Install the Babel package.
[00:03:10] This is gonna make your syntax highlighting ten billion times better. So make sure that you install the Babel package, and then what you'll have to do is go into a js file. You're gonna say open all, with current extension as Let's see, Babel, JavaScript/Babel. Just do it, it's gonna save you a bunch of heartache.
[00:03:35] It also handles ES6 really well, so, yeah. It's definitely the one to use. If you are using Vim one, good luck. But two, I've heard Vim Box is really good for JSX. So check out Vim Box. It's written by one of the React Core team. So you can probably be pretty sure that it works.
[00:03:55] [LAUGH] And if you're Emacs, uninstall it and then install Vim, right. Like that's the joke. I don't care, I use Sublime cuz I'm lazy. I think Adam and code work out of the box pretty well with JSX. I think you're gonna be okay.
>> Brian Holt: Cool, so what we're gonna do now, is we're gonna create a second component.
[00:04:22] We're gonna say var MyTitle = React.createClass. This is what I was wanting to say earlier. The render function.
>> Brian Holt: Every component in React must have a render method, unexceptionally, always 100% of the time must have a render method. And that render method must always return markup. Those are two cardinal rules of React.
[00:04:59] Furthermore, that render method must be a pure function. To borrow the functional programming terminology. It just means that it should not modify any state. It should not do anything that has any lasting effect. You should be able to run that render method 10 billion times. And the 10 billionth and first time you get the exact same response as you did on the first time.
[00:05:25]
>> Brian Holt: So, yeah. That is super helpful to keep in mind.
>> Brian Holt: Okay, so we're gonna return here and we're gonna return a div(null,)
>> Brian Holt: with an h1 inside of that that says (null)
>> Brian Holt: Check out this component or whatever you wanna put there, whatever string, okay. And what we're gonna get rid of this h1 right here.
[00:05:59] And we're gonna put a React.createClass, sorry, createElement rather of MyTitle
>> Brian Holt: And put commas in between those.
>> Brian Holt: So something I'll tell you here with these divs and create class. You can either give it multiple separate parameters or you can give it an array.
>> Brian Holt: Both of those work okay.
[00:06:39] I guess we don't have to indent it anymore.
>> Brian Holt: Well, maybe you do. Anyway, cool.
>> Brian Holt: So let's talk about what's going on here. So I created this MyTitle stamp. I did the createClass and I created a new type of component. And then here, inside of MyFirstComponent which is on yet another class, I created multiple instances of this MyTitle component.
[00:07:09] So this is kinda to demonstrate to you that you build small components. And then you build bigger components that encapsulate multiple, smaller components. And that's all apps are in React. It's just components made of components made up of more components.
>> Brian Holt: Okay, so save that and come back to your page, refresh, and you should see check out this component multiple times.
[00:07:39]
>> Brian Holt: So again, this isn't super compelling yet, right, this is still pretty dumb. It will be way easier to write this mark up on our own. But we're getting to where this gets cool, I promise, just stick it out with me. Any questions?
>> Brian Holt: Anyone having any issues?
[00:08:02]
>> Speaker 2: Can you go back to the source for a minute?
>> Brian Holt: Yeah. This part okay?
>> Speaker 2: Yep.
>> Brian Holt: Okay, yep. So everything there looks good.
>> Brian Holt: Yeah, you can ignore the warnings. They probably are warnings in the, well I don't even see warnings. But if there are warnings, you can ignore those for now.
[00:08:47]
>> Brian Holt: I saw that Christopher B asks why am I not using semi colons. Because death to semi colons. That's why. We're using lay to table using standard to lint our code which just infuriates lots of people, and I just feed on their hate. I just love it. No, I just, I don't think semicolons are necessary in java scripts.
[00:09:09] So in my personal projects and by extension you, when you listen to me, I don't use semicolons, so.
>> Speaker 2: There are a few cases which bugs can arise but like you said uses taint standard JavaScript-
>> Brian Holt: Which catches all of them.
>> Speaker 2: Library lint which would catch any of those edge cases.
[00:09:29]
>> Brian Holt: Yep. So you can use semicolons you would just be wrong, that's all.
>> Speaker 2: If you don't know those rules you should at least look them up if you're not going to use a linter.
>> Brian Holt: Yeah. We'll just a linter. I think that's the answer to that question.