Course info
Jan 5, 2016
1h 29m

React has changed the way that people think about writing UIs. It has encouraged a community where ideas about how to style UIs have changed as well. There are now several compelling options for how to style your React components. Some are more traditional, some are more progressive. You'll be excited at the options available to you. Try a few out, and it could change the way you approach your next project.

About the author
About the author

Creative and imaginative to the core, Jake loves software as a medium for malleable creation. It has been his great privilege to create software with talented teams for worthy causes. At the speed of technology, he has been happy to be always learning.

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 have thought 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 style sheet. 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 wiz 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 beginners 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 guts of your 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 style 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 repaint 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 styles 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. Radium seems to be the most promising, at this point. Where media queries, pseudo selectors, and keyframe animations where 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 are eventually built and available to our app running in the browser. Let's begin styling.

CSS Modules
We've just finished a section where we implemented the tried and true external CSS stylesheet method of styling. It was slightly different with one module imported so that webpack could consume it and make it available for our application. But now we're going to embrace true modularity in the form of CSS Modules. We'll get into how this works, for the moment let's make an adjustment to our webpack. config in order to support this awesome feature. The CSS loader is the piece of code that knows how to interpret CSS modules. In order to activate this feature we must pass a configuration argument to the loader. We do this by adding? modules to the css loader specification. It feels much like a query string parameter in your browser. In addition let's add a more cryptic flag, localIdentName, add this code verbatim, it is weird and I'll explain it in a moment. Also in preparation for next steps we'll install another third party library called react-styleable by going to our shell and running an npm install react-styleable. Finally, remember that in order to updated your running apps with the latest webpack config you'll need to stop and restart your webpack process.