Complete Introduction to React (feat. Redux and React Router) Creating Components with Arrow Functions

Transcript from the "Creating Components with Arrow Functions" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: So, if you wanna see how I get super lazy with this. Let's use arrow functions because they're super fun. So, we can refactor to be that, right, that's the same thing.ri That's ES6 arrow function, that again, that, and that, are totally equivalent, for our intents and purposes right here, are totally equivalent.

[00:00:29] But we can even take this one step further to make it even more perverse. [LAUGH] And we can change this to be.
>> Brian Holt: So, with an arrow function, if you have no curly braces, it's an implicit return, which comes from CoffeeScript. So, I'm gonna take this away, and replace that with a parenthesis, which basically means, an expression is about to follow, right?

[00:00:56] Then we delete this return statement,
>> Brian Holt: And then I'll delete that, and I'll delete this curly brace as well, and change that with a parentheses.
>> Brian Holt: So, like I said, if there's no curly braces, it's implicitly being returned, right? So now, this actually will work as is.
>> Brian Holt: Some people like that, some people don't.

[00:01:23] Some people feel like that's too clever, and that's too clever for you, then don't do it, because if you feel like you're doing clever code, you're probably doing something wrong. I'm okay with this, cuz I feel like it's readable to me. But that's up to you, and I'll probably keep doing that, just because it works for me, but the thing where people do get caught up in this, is you can't say that const x = 5 here, right?

[00:01:44] Because this is no longer like a function body, this is an expression, and that doesn't work anymore. So, at that point, you would have to come back and say, the other syntax, right? As soon as you wanna be able to do that kind of stuff.
>> Speaker 2: Do you do the implicit function at your job?

[00:02:02]
>> Brian Holt: Yeah, all the time. But I mean, I have the luxury of working with, like, people that are way smarter than me. So they were like, why weren't you doing it two weeks ago? I'm like, I'm sorry, I'm stupid. [LAUGH]
>> Brian Holt: So, up to you. Up to you if you feel okay with that.

[00:02:23] Does anybody have any questions about what is actually going on there?
>> Speaker 3: So, you would put the prompts in the first parenthesis cause it's [INAUDIBLE],
>> Brian Holt: Yep, nailed it
>> Speaker 2: So, can you do like, conditionals with in that return statement to that?
>> Brian Holt: You have to use [INAUDIBLE].

[00:02:43]
>> Speaker 2: Okay.
>> Brian Holt: Once you start doing conditionals, go back to the other syntax like this falls apart very quickly, but this particular case where it's like, this is purely display were purely just putting some like, it's more declarative they're declaring, that this is the way it looks. This is really great, very fast.

[00:03:05]
>> Brian Holt: Let me just make sure that, we talked about like no sibling components, right? Like, I can't do each one here, because you have to remember back to like, what this is actually being transpired to, right, you can have like var x equals five space, three rows, it really doesn't even make sense, it's the same thing here.

[00:03:24] So you have to have one root component just because these are literally just function calls.
>> Brian Holt: So hence, you'll see a lot of people just wrapping stuff in div, right in this particular case we don't really care for the div like we don't need it. But we want to have three different my titles, so we have to have some root type component.

[00:03:48] And there's just no way to get around it, and you'll see a lot of people just wrap stuff in divs for that reason, it's totally fine. Feel free to do that. That's a very common thing to see in the community. So.
>> Speaker 2: You ever see people, using like if something else, some other form of, would make sense.

[00:04:07] Do you see what kind of branching out or, or do you see more of this uniformly like divs, divs, divs, like divs argue wrapper?
>> Brian Holt: I mean like, if you do like a navigation, then go ahead use like a nav, right? Or if you're inside of something and you don't want another like block level, then you could use like a span or something like that.

[00:04:24] Yeah, I mean, I would definitely see those but, usually, like when you're just reaching for something meaningless, or a like it's, what I did is really could do is, and it doesn't have any semantic meaning to it then, that's what you reach for. Does that answer your question?

[00:04:41]
>> Speaker 2: Yeah.
>> Brian Holt: Cool. So, again it depends what you're doing. If if something can have semantic meaning, then by all means use something that has semantic meaning, but if it has no semantic meaning, then don't try and force semantic meaning when none is meant, because that's actually caused more problems than it solves, so

[00:05:00]
>> Speaker 2: So would you say that this syntax is more like semantically. Expressive, than using an alternative?.
>> Brian Holt: When you said this syntax, you mean JSX in general?
>> Speaker 2: Like the implicit error function.
>> Brian Holt: Do I think it's more syntax? No, I mean to be honest, it's more clever, and to be honest and hides it more that it shows, right?

[00:05:25] However, I feel that once you understand that, this is the way it works, it's sufficient.
>> Brian Holt: Turns out, like, if I'm just doing this for my own edification, or if I'm working at Netflix, where I know everyone that I work with understands this. This is fine, but if I'm working with someone that I know, doesn't necessarily possess that meaning.

[00:05:46] It's definitely worth it, to just stop being lazy and write it out fully. Depends on who you're working with and if you feel comfortable with it. But as soon as you get that feeling like, I'm being too clever, like you're doing something wrong.
>> Brian Holt: But, I did want to show you this, cuz you will see this all over in code examples, by the way.

[00:06:08] And we're actually gonna start building a real app right now. Everything so far has been pretty much just a little toy example. But, now we're actually going to be start progressively getting larger and larger in our components. And in terms like we're gonna build a real app, which I think is a useful experience to see how like what actually makes an app in React.

[00:06:30] Something to know here, is I actually have done all the CSS for you, so if you follow my CSS class names, you're gonna get all the style for free out of the box. Don't you wish that worked at your job that way? [LAUGH] But if you were to look at it, I have a style.CSS, just a bunch of stuff in here.

[00:06:46] I am told, that it doesn't look great in Firefox, it only looks good in Chrome. So, take that for what it's worth, but because that this is not production code, I didn't care. [LAUGH] It uses Fluxbox everywhere, because I was super lazy and didn't wanna do anything else.

[00:07:05] But, if you can figure how to get to work in Firefox, than please make a poll request and I will definitely accept that. But yeah, so just follow my naming conventions, and you'll get all the style for free.
>> Brian Holt: Let's see what else we wanna talk about here.

[00:07:20] Just so you know there is something called radium. And there's other things out there, like radium, that basically allow you to do all of your CSS, in addition to all your markup in your JSX, and you no longer have any CSS either. You have, you bring in basically everything to one component.

[00:07:38] There's I'll say one, it's actually really fun because allows you do like, JavaScript magic with your CSS. Which ends up being pretty cool. At the same time, it's kind of annoying because all of your style in line in the end. So it's up to you, to whether or not you decide to like that or not, I chose not to do it, just because I don't want to focus on CSS, I want to focus on to the, on the react.

[00:08:00] But, just know that radians out there some people like it, and it's worth checking out. It definitely a blast, when I was playing around with it. I'm going to start building our app now, you can delete my title dot JSX. You can also just leave it, up to you, but we are, we're not going to use my title, we are all gonna use client app.