Complete Intro to React, v5 JSX Composite Components & Expressions

Transcript from the "JSX Composite Components & Expressions" Lesson

[00:00:00]
>> Brian Holt: So let's go convert app.js really quick, cuz we don't want this to be,
>> Brian Holt: Just we want it to be JSX. So I'm gonna say return. Let's talk about the parentheses for just a second, why do I put parentheses here? Well, if I just say return and then put something on a new line, and I put it on a new line so it's easier to read.

[00:00:28] Well, the way the JavaScript works is if it sees a new line, it just ends it right here. So it actually works like that, where it just ends, right? So if I surround this in parenthesis, it's saying hey, I'm not done yet, continue on to the next line.

[00:00:46]
>> Brian Holt: Okay, and so h1>Adopt Me!, like that. And then now I wanna use this Pet component that I made up here, right? So how am I gonna use that? Well, it works like this, Pet. So I actually can use a composite component as if it was real HTML, which is really cool.

[00:01:11] And then if I wanted to add that ID back here, so this ID would be, I called it something important, right, like that. That works the same way, and attributes or properties for this pet component works exactly the same way, so I can say name = "Luna",
>> Brian Holt: Animal = "Bird", or no, "Dog", and breed = "Havanese".

[00:01:49]
>> Brian Holt: Now, you see this self-closing tag thing, right? I know in HTML that that's optional and frequently I leave it out, cuz again, I'm lazy and don't type things like that. But I'll tell you that in JSX they actually are required, right? You need to let JSX know that this is a self-closing tag so you have to put that trailing slash.

[00:02:12] Okay, I'm gonna put three of those. This was "Pepper", "Bird", "Cockatiel", and this was "Doink", mixed "Cat".
>> Brian Holt: What is kinda fun though, with JSX you can even do self-closing divs as well, like that. Which is not legal in HTML but is legal in JSX, which is kinda fun.

[00:02:51]
>> Brian Holt: And actually, Prettier will just do it for you. If I do that, when I save, it's like, no, you really meant that, which is kinda fun.
>> Speaker 2: So JSX would take this and turn it into a React.create, with the first argument being div, the second one being emptyObject, and the third one being a list of React.creates with all of those?

[00:03:15]
>> Brian Holt: Yep.
>> Speaker 2: So what's the benefit of writing XML to turn it into JavaScript, to turn it into HTML?
>> Brian Holt: Yep.
>> Speaker 2: Why don't it just write HTML?
>> Brian Holt: Ultimately, this is a template of some sort, right? Kind of falsely so, right? Cuz it's not actually a template, it's actually just function calls.

[00:03:40] But in the end, this is actually imperative, cuz it's being executed, right? Whereas HTML is declarative, it's not something you can execute, right? So everything I've shown you so far, this is all very static data, right? But you can imagine here, instead of having Luna equal this, I could have API result, right?

[00:04:00] And now I can pass dynamic information into Pet. It gives me the power of JavaScript to manipulate this. Does that answer your question?
>> Speaker 2: Yeah, thank you.
>> Brian Holt: Cool, yep.
>> Brian Holt: So actually, along those lines, I think something that I skipped over explaining were the curly braces over here, and let's address that really quickly.

[00:04:20] So right now, if I go over and look at my site, I think everything should be fixed again, hold on, one more thing to fix here. Rather than having a React.create link down here, make this app like that.
>> Brian Holt: So again, line 31 there, just make that React.create an App like that.

[00:04:45]
>> Brian Holt: Okay, so now that I've done that, go back over to Pet.js. And if I go over to my app, hopefully it's still running. No, not that one, this one. Did I stop it from running? I did, npm run dev.
>> Brian Holt: Refresh the page. So I have Luna, Pepper, and Doink, right?

[00:05:20] What happens if I remove the curly braces here?
>> Brian Holt: Now it's literally gonna be the name, right? So if I save this and go back over here you'll see that it says literally the word name here, right? So what the curly braces do is you're letting JSX know this is a JavaScript expression in here.

[00:05:42] And the term expression means anything that can be on the right side of an assignment. So if I say const x = something, let's just say,
>> Brian Holt: I don't know, named.toUpperCase}, right? So anything that can be on the right side of an equals sign here, this is considered an expression.

[00:06:10]
>> Brian Holt: So for example, you can't have an if statement on the right side of it, right? So a const y = if, this doesn't work because an expression and a statement are different, right? A statement is a whole idea, right? So all of line three would be considered one statement, but everything here on the right side is considered an expression.

[00:06:30] Does that delineation make sense? Okay, so that means here inside of name, I can say .toUpperCase and invoke that right here, or this could be invoking animal, the function, or something like that, or this can be + animal, right? So anything that can be on the right side of an equal sign, but I can't put a full if statement in there.

[00:06:52] But you can use ternaries, right? Cuz ternaries are technically expressions, and a ternary is like the question mark thing. I'll use them later. They're fun or not fun, depending on who you ask. I think they're fun. So anyway, and again, yeah, now I've messed up everything, right, so now Luna is all capitalized, and you have HavaneseDog and CockatielBird, right?

[00:07:15]
>> Brian Holt: So that's what those are about. And it's just a single curly brace there, that's how it works.
>> Brian Holt: And so you can mix and match them too, so I could have name like that. And if I go back here, it says Name: Luna, Name: Pepper, and it does that concatenation for you.