Course info
Mar 13, 2019
1h 23m

When writing React components, you have so many great options for styling. Which do you choose? In this course, Styling React Components, you will gain the ability to choose which makes the most sense for you to use on your project. First, you will learn some of the origins for a proliferation of new and progressive options. Next, you will discover how to use several of the most popular methods of styling and implementing a small styling project in each. When you’re finished with this course, you will have the skills and knowledge of styling React with CSS needed to make your components beautiful in a way that works well for you. Software required: Node.js, an editor, and a web browser.

About the author
About the author

He's a creator at heart, making art, music and software. He's been privileged to work with talented teams and contribute to great causes and useful products and hopes to do more of it.

More from the author
Flowtype Fundamentals
1h 45m
Jun 29, 2018
Electron Fundamentals
1h 50m
Aug 22, 2016
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello. I'm Jake Trent, and I'm very happy to welcome you to my course, Styling React Components. React is simply a fantastic library with which to program your UIs. When you're programming a user interface, you're concerned with everything that a user can see. So, obviously, you're going to want it to look awesome. In this course, we're going to explore together some of the most popular or promising techniques for creating great-looking styles and in ways that are a joy to code. We'll investigate the use of inline styles and try out a library for inline styles called Radium. Who would've thought that that was an option, right? But you'll be surprised the problems it solves. We'll have a look at how to write a more traditional CSS stylesheet. And, finally, I'll show you something that I bet you never thought you'd see in CSS, real isolated CSS Modules, no more global namespace for you. By the end of this course, you'll have some great tools for styling in your toolbox. Your next React project will look better than ever. Before beginning the course, you should be familiar with the React basics. If you know a touch of CSS, that will be helpful as well. Let's jump right in and try this out. These techniques will be fun to learn together, and I'm excited to share them with you.

UIs in React
Welcome to Styling React Components with Jake Trent. Thank you so much for being here to learn this exciting subject with me. I've had great experiences using React, and I hope you do as well. React is a fantastic library for building rich user interfaces. It provides a great component abstraction for organizing your interfaces into well-functioning code, but what about the look of your application? In the browser, the look and feel is mostly determined by the use of CSS. This course will be focused on the strategies one can use to apply CSS to React-based applications and to great effect. The good news is that there are some fun and solid options for us to try together. Note that to be successful in this course, you don't need to be a whiz with layout or design. We'll be styling a fairly simple demo component together to try out some different styling options. In order to understand the demo code that we will work off of, however, at least a beginner's grasp of how to write React code will be helpful. A certain amount of CSS knowledge will be helpful as well, but since the level of CSS that we'll be using in the demo is very basic, this is less of a concern. So get ready to move beyond simply writing the internal gut severe React components. Paired with a knowledge of good styling options, you will have full control to create fantastic React-based applications. Let's get started.

Inline Styles
In this section, we'll explore our first strategy for styling React components, inline styles. The very idea of this is repulsive to some people. The fact that we're talking about inline styles and that many people have found that they fit well in their React styling strategy is a testament to the willingness of the React community to question best practices. You probably haven't heard anyone suggest using inline styles for a long time. It hasn't been considered a best practice. Of course, some of the very foundational features of React fall into that same category. Who would have thought that you should put your entire view hierarchy into a render function and call that render function to re-paint your view every time data within the view changes? The idea is counterintuitive at first. One would probably assume that this would have terrible performance characteristics. In the case of React, this top-down rendering feature becomes one of its most powerful properties. I've been to numerous talks on React where a slide is presented cautioning you to forget all you know about blank, being React, CSS, etc., before this next slide. This may be one of those moments for you.

Having just seen the inline style strategy, you'll feel quite comfortable with Radium. Radium is a third-party library developed by Formidable Labs that is essentially inlineStyles++. It gives you everything you had previously and more. There are several other libraries in this category. Where mediaQueries, pseudoSelectors, and keyframe animations were a no-go in your JavaScript with regular inline styles, Radium gives you an easy-to-use JavaScript API to make those happen. Radium provides a React component that wraps all your Radium-styled components. This component takes care of interesting things like tracking hover states, etc. Beyond that, the definition of styles will feel very close to inline styles proper. Let's jump right in.

CSS Stylesheet
Now we will explore what it feels like to style a React component with external CSS stylesheets. Of this handful of options that we're trying out, this likely will be the most familiar feeling possibly from your days before React. We do have the added benefit of Webpack in this case. So perhaps the mechanic for getting styles on the page will be slightly different. For instance, we'll import CSS files using the same syntax as we import JavaScript files. That's pretty cool! But inside the stylesheet file, the CSS will feel just like regular CSS because it is. That makes this option not the most progressive or noteworthy of the bunch, but often a welcome addition to the toolbox, if nothing else, because of its ubiquity. Let's jump right in. In the previous section, we already made the requisite modifications to our webpack.config, so we should be ready to start styling. Let's double-check by noting that our package.json includes all the CSS related loaders that our Webpack will need. And in the webpack.config, they're set up to use on all of our .css files. Again, when we import a file with the extension of .css, Webpack will run our original CSS stylesheets through a set of transform functions called Webpack loaders so that they're eventually built and available to our app running in the browser. Let's begin styling.