Intermediate React Intermediate React

Install Emotion & Extract a Module

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

Brian's recommended CSS in JS library is emotion. Install emotion and react-emotion and extra the header component into its own module.

Get Unlimited Access Now

Transcript from the "Install Emotion & Extract a Module" Lesson

[00:00:00]
>> Brian Holt: That concludes testing. I'm going to go back to the root directory of this, and I'm going to,
>> Brian Holt: git reset HEAD --hard. So don't do this unless you're gonna wanna throw out all of your code. I wanna throw away everything that I just wrote, cuz I wanna get back to the master branch, but I want to warn you, this is destructive.

[00:00:23] So be aware.
>> Brian Holt: So rm- rf/src.
>> Brian Holt: So now as you can see, I'm back at my HEAD, and we're gonna be talking about emotion. Let's all share our feelings. [LAUGH] Just kidding, let's talk about CSS and JS, everyone's favorite topic. It's not controversial at all, everyone loves it.

[00:00:52] Just kidding, this is one of the most controversial things in the React community. I wanna teach it to you because I want you to make your own decision about it, and then I will share with you my opinion at the end.
>> Brian Holt: The previous version, v3 of Complete Intro to React, covered styled components.

[00:01:08] So if you want to talk about styled-components check out that one. Today, we're gonna talk about emotion. Emotion came out around the time that I wrote the v3 version of this course. I did not use it because it because was too new. But now it's kind of settled a little bit, and most people, I think, are moving under emotion.

[00:01:27] It's better performance, so if you are going to use a CSS and JS solution, I personally suggest emotion. That's the one that I think is the best one.
>> Brian Holt: So let's go and install it. So here inside of our root directory of complete-intro-to-react-v4, I'm going to do npm install,

[00:01:53]
>> Brian Holt: emotion, which is the core library, that's gonna do what we need it to do. And we're also going to install react-emotion, which is the React wrapper around emotion.
>> Brian Holt: You need both.
>> Brian Holt: Okay, so that solved those two things. Lets go into app.js.
>> Brian Holt: So here in app.js, you'll see down here, we have this little link right here, or sorry, this little header right here.

[00:02:30] We should probably extract this into a component, right? We wanna be able to test it individually. We wanna be able to use it in different places. So we're going to extract this header,
>> Brian Holt: Into its own component.
>> Brian Holt: So the easiest way to do this is to just cut this out.

[00:02:49] Well, we'll do that in a second. Make a new file in here, inside of the src directory, and call it navbar.js. navbar.js,
>> Brian Holt: And here inside of this we're going to import React from 'react'.
>> Brian Holt: import {Link} from '@reach/router'. That's gonna be a anchor tag from Reach Router.

[00:03:22]
>> Brian Holt: And then here we're gonna make a NavBar component. We'll just make it a function component.
>> Brian Holt: And we're just going to take everything that we had here in app.js, I'm just gonna literally cut this out, the header with the two links inside of it. I'm just gonna cut that out.

[00:03:46] I'm going to paste that inside of the render of the NavBar right here. And then I'm going to export default NavBar.
>> Brian Holt: Okay, so now we have this NavBar component, we can go back to app.js up at the top. And we're gonna say import NavBar from ./NavBar.
>> Brian Holt: And that place where we had the header before, we're going to replace that with NavBar.

[00:04:25]
>> Brian Holt: So here above the Provider, we're gonna say, <NavBar/>.
>> Brian Holt: So the only thing we've done here is refactored out a component. We cut everything from between Provider and the enclosing div, and we replaced that with NavBar, here inside of app.js.
>> Brian Holt: And then up here, we imported NavBar, right here on line 8.

[00:04:53] Also, we're not using Link inside of this component anymore, so we can delete that import up here. It would still work, ESLint will just yell at you.
>> Brian Holt: Okay, and then inside of NavBar, it looks like this. It's literally just the same header that we pulled out. So now we have this encapsulated NavBar component, right?

[00:05:16] So far so good?