Check out a free preview of the full Intermediate React, v2 course:
The "Emotion Setup & Nav Bar" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces the emotionjs library, designed to allow users to insert css in JavaScript, and uses it to create a navigation bar component.

Get Unlimited Access Now

Transcript from the "Emotion Setup & Nav Bar" Lesson

[00:00:00]
>> Brian: The thing that I want to build with you is a nav bar. So right now, we don't have like a nav bar up here, but we're gonna build one together with a tool called Emotion. Now, Emotion is something that we would call CSS in JS, which is very controversial depending on who you ask.

[00:00:18] I kind of reserve judgement that I think CSS is great, and I'm bad at it. But CSS in JS I think is a very interesting thing. And I find Emotion to be the most compelling implementation of it. In previous versions of this course, I taught styled components, which is another well known one.

[00:00:35] But if you, at this point, Emotion pretty much has won, it has most of the developer mind share, it's the most popular one, it's the most performant one. So, it's definitely one to, you should probably think about using. Okay, so it allows me to do all of my styling in JavaScript and not have any separate CSS files.

[00:00:55] But what it will do is it will compile your code so that there will be a separate CSS file, right? So, you still end up with JS and CSS files at the end, but it mushes everything together for all of your stylings as well. So the first thing I want you to do now is I'm gonna stop my server for just a second and I'm gonna say npm install @emotion/core, and @emotion/babel-preset-css-prop.

[00:01:29] Okay, so this is actually going to give us the core library that's going to run. The runtime for Emotion is a couple of kilobytes, it's not very big at all. And then this babel-preset-css-prep allows it to do some extra compiling ahead of time to make it even faster.

[00:01:45]
>> Brian: Okay, i'm going to back to doing npm run dev so that my server is started again. And then I'm just going to hide this. So I want you to make a new file. I want you to call it NavBar.js, inside of your source directory, and save that.

[00:02:04] Okay, here we're going to import React from React,
>> Brian: import Link from @reach/router, which is gonna be a link, as in a anchor tag. And we're going to import css from @emotion/core.
>> Brian: Here we're going to say const NavBar equals a function. And we'll do an implicit return here.

[00:02:42] And say header,
>> Brian: And then link to, this is just like an href, Adopt Me, this will be the logo. And then underneath that, we're going to have a span with an aria label of logo. And then we're going to put an emoji in here. So however you choose to put an emoji in there.

[00:03:14] So in on Mac, you can hit Ctrl+Cmd+space and this will open the selector for emojis. And you can pick your favorite logo for the project. I'm definitely gonna go with a poodle.
>> Brian: And I have to give it a role as well. so role = img.
>> Brian: Okay, and then down here at the bottom you're gonna say export default NavBar.

[00:03:57] So nothing special here too far, right, so far? But I want to do something cool with this header. Here, I'm gonna say css=. And then I'm gonna give it a css, like that. And then I'm gonna put a back tick here.
>> Brian: So notice that this is css, and then directly afterward is a back tick.

[00:04:26] Now I recognize that this looks odd for most of us, because most of us don't deal with tagged template literals on a day to day in JavaScript. This is a feature that came in in 2015 that it's a template string, as in like a template string like one that you could have here, right?

[00:04:41] And this would work just as well. Like that, right?
>> Brian: But it's tagged, so it's actually going to run it through this CSS function. So that's all a tagged template literal does for you is it runs this stuff through a function, okay? Now we can write in here in just normal CSS.

[00:05:00] So background-color: #333. Now many of you are probably not getting good syntax highlighting right here, right? And notice that I'm also getting autocompletion. So if I say position, I'm getting good autocompletion here as well. So I'm gonna show you how to do that really quick with Code. If you click here on the Extensions on the side.

[00:05:27] Search for, and I recognize this is a little counterintuitive, but styled-components. I actually have it already installed. So let me find it for you. It's vscode-styled-components, this one here.
>> Brian: So install this one and then it'll just magically fix all of your problems.
>> Brian: So yeah, just search for vscode-styled, it probably will be the first one.

[00:05:56] So as of filming, this has 475,000 downloads, so a lot.
>> Brian: Okay?
>> Brian: So once you have that, then you should start seeing syntax highlighting. You might have to restart your editor, but probably not. But maybe. And.
>> Brian: That's.
>> Brian: Yeah, so I'm gonna give it padding of like 15 pixels.

[00:06:32] And yeah, let's see what that looks like.
>> Brian: So we have to go put it in first, that's right. So I want you to go into app.js. And here we have the header, let's just replace this with Header.
>> Brian: Or NavBar, that's what we called it, NavBar.
>> Brian: And we'll have to import that as well.

[00:07:08]
>> Brian: From ./NavBar. And we stopped using links, so you can go ahead and delete that as well. Up there from reach/router.
>> Brian: Okay, so now in theory. I think we have one more thing to do here as well. We do.
>> Brian: So we installed the Babel preset. So last thing we need to do here is go into babble, sorry, .babelrc.

[00:07:44] And we have to use this one as well. So @emotion/babel-preset-css-prop like that. So you have to go include this as well, because babel has to do some transformations for us as well. You put in this emotion/babel, so we actually need to add one configuration to it. So wrap this in another array.

[00:08:13] Put a comma here, and then an object. And you have to say sourceMap: false.
>> Brian: It's annoying, because you're gonna lose the ability to do source maps. But for right now, Emotion CSS prop doesn't play well with some other things as well, so we just have to turn off source maps.

[00:08:45] In my opinion, it ends up not being a very big deal. So now we get this beautiful work of art that I'm probably killing our designer with. But it's gorgeous and I made it.