This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Template Literals & Hooks" Lesson
[00:00:00]
>> Brian Holt: Now that all of that is working together I wanna show you some like, give you some ideas of really cool stuff you can do now that you have access to all the css and JavaScript. So, a good example of that would be here. This is all JavaScript, so I can do whatever I want.
[00:00:18] I could say like,
>> Brian Holt: Const color equals I don't know, for now we can make it like, pink. And then here, this is a template string, right? So instead of having #333 there, I can just put ${ and put color there, right?
>> Brian Holt: That looks marginally better, doesn't it?
[00:00:48] Now you can see your line, well, that looks really pink up there. But it's very nice looking on my computer. So, anything that you can do with JavaScript, you can now do in here now as well. So, I can do something like, make this a function really quick,
[00:01:10]
>> Brian Holt: And say return,
>> Brian Holt: Let's just make a hook here really quick const padding = useState
>> Brian Holt: And here we'll say the initial padding will be 15, right?
>> Brian Holt: And set padding, and we'll put padding here. And then here, on the header, anytime that someone clicks, to setPadding of padding plus 15 or something like that.
[00:02:11] It's gonna be upset cuz this is not a quick cuz this is not element, but again we're just here for examples. So now if I refresh this,
>> Brian Holt: Our background color, animal/p background color padding, I want it just to be padding.
>> Brian Holt: Padding, this can be,
>> Brian Holt: Pink.
[00:02:39]
>> Brian Holt: What did I mess up here? Yeah, okay. So, now, if I click this, notice that every time that I click it, it gets more beautiful and more beautiful. Look, they're gonna kiss. [LAUGH] If my designer wife could see me now she would just murder me, just straight up.
[00:03:12] But the point stands here that this is actually pretty cool that I commend it manipulate styles programmatically like this, right? This would have been a bit more difficult to do with css and JavaScript being very separate, right. But because we've mashed everything together, we get a lot of control over what our stuff looks like.
[00:03:36]
>> Brian Holt: Any questions about that?
>> Brian Holt: If you want to use this in your production app, this design that I've made you are welcome to, just attribute it to me. That's all I want.
>> Brian Holt: Okay.
>> Brian Holt: So let's make our,
>> Brian Holt: Poodle a little bit bigger, so I'm gonna put css equals css, like that, and I want our poodle to be font-size 60px, something like that.
[00:04:16]
>> Brian Holt: So I just added that, right there, and now we should go over here, and our poodle should be nice and happy.
>> Brian Holt: Okay, just out of that part right there, 17 through 19. So, again, I'm not gonna say if this is not for everyone, right? Some people are just gonna find this atrocious that we would even consider putting these things all together.
[00:04:43] But let me give you a couple of benefits beyond what I've shown you with the programmatic aspects of it. Now if I ever delete navbar, the CSS goes with it, right. Because all the CSS was built into this navbar. How many of you have worked on websites where you just have 2 megabytes of CSS and you're primarily using 10% of it but you don't know what you can delete.
[00:05:04] Me certainly me right. LinkedIn when I joined LinkedIn we had 2 megabytes of CSS. And who knows how much that we were actually using, right? So I like to use the phrase optimize for delete ability, right? Because if you're optimizing for deletable, if your code is deletable, that means it's modular, right?
[00:05:23] That you can pull pieces out and the whole tower doesn't come tumbling down. So that's a big benefit as well.