Intermediate React Styling Components with Emotion

[00:00:00]
>> Brian Holt: Now what happens if I want to do a bunch of additional styling of this kind of stuff? Right now I'm including all of the CSS for you but what happens if we wanted to put all the styling in with the component itself? Well, let's talk about how to do that.

[00:00:12] We're gonna import styled from react-emotion, now the style is going to allow us to make our style of components. So components that have style associated with them. So I'm going to make a new react component called container, and it's going to be styled. Here, I need to give it something the kind of tag that I want with it.

[00:00:41] So it's a header tag, I'm gonna replace this header right here right? So it's gonna be a styled header and then I'm gonna replace this header right here with container.
>> Brian Holt: So right now this wouldn't do anything, it would still work but. All container is it's just a header, then I wanna give it style that's only associated with this container.

[00:01:09] So that we're gonna use what's called a tagged template literal, so if you've ever used a template literal in JavaScript const string equals lol this is a string right. But notice these are backticks right here. Backticks being on an American keyboard is next to the one, on the left of the one, right.

[00:01:31] Next to the tilde or on the same key as the tilde. There's something called the Tagged Template Literal. So right after this parenthesis right here, I'm going to put a backtick. And now I can write the CSS and that's going to be fed into the header, right? So I'm gonna just give it a couple of different things, background-color:,

[00:01:58]
>> Brian Holt: #333 Position colon sticky, so we're gonna make it a sticky header, top colon zero, so it's stuck at the top and z index of something greater than one. We'll just give it 10 and now, all of these CSS properties are going to be associated with container. Now some of you might not be seeing syntax highlighting with this.

[00:02:25] You're gonna need some sort of plug-in to your editor to get the syntax highlighting the work, I'm using VS Code. So if you wanna know what that one is, it's this one down here, vscode-styled-components. That's the one that you need if you wanna do it with VS Code.

[00:02:42] You'll have to install it and then restart your editor. But Sublime should have it, JetBrains, all of those should probably have it. If you're on Vim, you're on your own.
>> Brian Holt: But you're probably used to that. [LAUGH] Okay, so now I think I'll look at Container. Hopefully, it broke.

[00:03:06] You have to do npm run dev to get your devServer started again.
>> Brian Holt: So hopefully at the beginning of the course, we'll go through and set it up and then re use that.
>> Brian Holt: Cool, so you can see now there is a black background, the header has changed right, and now it's sticky so if I scroll down it stays with me as well

[00:03:38]
>> Brian Holt: So this is the beautiful thing about style components, is now I have access to my CSS inside of my JavaScript, right? So I have the full power of JavaScript available to me when doing my CSS styling. That's powerful, right? And the other thing to me that's quite compelling is Now all of my markup, right, this is all my markup right here.

[00:03:58] All of my behavior, so all of my JavaScript, and all of my styles for one component lives in one file. That's really cool. My favorite part about this is that, let's say I stop using Navbar and I move on to Navbar v 2. Or nav bar voltron or whatever the next version of my nav bar is.

[00:04:19] If I delete nav bar, everything gets deleted with it, right? All the CSS goes with it, all the HTML, all the JavaScript goes with it. I think that's super, super compelling. Right?
>> Brian Holt: Optimized for deletability, that's one of my mantras writing code is if something is deletable, that means it's modular.

[00:04:40] And if it's modular, then it's great.
>> Brian Holt: It just leads to all sorts of good habits.