Kent C. Dodds: 0:00 This does not look awesome. This looks awesome. Like, way awesome.

0:05 Awesome! Let's go ahead and make this thing look awesome. We're going to style some React components. There are lots of different ways to style React components. The primary ways is to use CSS, which will target class names.

0:18 You can also use inline styles, but after developing production applications at scale for years, I found that CSS-in-JS with Emotion is my absolute favorite approach.

0:30 You can learn a little bit more about what this approach means and why it's useful in a couple of resources that I've given to you here, but because this is a probably pretty new thing for many of you, I give you a pretty good background on how to use Emotion.

0:45 There are couple ways that you use Emotion to create styled components. These are components that carry their styles with them. Here, you render this component that you get from a styled button. It will give you a component that has a className and that className will be associated to a style sheet that has it set to this particular set of styles.

1:06 Personally, I prefer the object form, but you can feel free to use the template literal form because it's a lot more familiar for people who are used to CSS. Either way will work just fine.

1:18 You can also accept props so that you can dynamically set these styled properties in both the object and the string form. You can use Emotion css prop, which is what I use most of the time.

1:31 To do this, in our app, we have to add this comment at the top of the file with an import for emotion here. You can add a css prop to any element and style it right in line, or you can do that with the string form as well. Ultimately, it gets compiled to really fast optimized style sheets.

1:53 Feel free to explore that a little bit. For your exercise, your job is simply to make this look like this. We've got a couple of styled components that you're going to be making. You'll also be using the css prop. Here're the files you'd be working in, and we also have plenty of extra credit for you to play around with for this particular exercise.

2:13 Have a good time and we'll see you on the other side.