What do you want to learn?
Skip to main content
Styling React Components
by Jake Trent
Try some of the most promising or popular methods for styling UIs written in React.
Start CourseBookmarkAdd to Channel
Table of contents
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 and Prereqs
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.
The style of an application is usually not as important as the function of an application. If it works, but does not look good, it still works. Presumably you can still complete the task that an application should enable you to complete. If the application does not function, but looks good, it's usually of little use to its essential purpose. But there is a value to having well-styled applications or a component. Proper styling can enhance and compliment the other features of your application. It can provide clarity to the purpose of the application. Proper layout and readability can give a better picture of the task to be completed, or the help being given by an application. Great styling can help guide users to be more effective and efficient. Ease of use will increase user satisfaction. Great design and styling can create a simply more pleasing experience. You will attract more users to your application if it is a joy to use, not just purely utilitarian. When you delight the eyes through a better experience, you will bring people back for more. Great styling will help you promote your brand. What users see and experience in your application becomes a part of what they think of you and what you represent. The desirability of your brand will be upheld by a presentation of the obvious care and love that you put into the experiences you provide. There's also a cost for a lack of good styling. Remember that you don't want to be the app in which your users can't complete tasks, don't enjoy coming back, and from which they gain a bad taste of your brand. Styling will take time, and effort, and it's a skill, an investment that will pay off. As an example here's an unstyled version of the demo component that we'll be styling together. It's fully functional, or is it? It's hard to tell what it is or if what I perceive it to be is what's intended. It's intended to be an image slider or gallery component. When I press the navigation buttons it's supposed to advance between images and show associated captions. But it's really unclear what image I'm on, I can't find the navigation easily, and it does not function to put many images onto a small consumable space in my application. We can do better by styling it, and we will.
Prepare for React Land
Now as we begin to style actual components in React, you will want to compare and contrast it with your other experiences in UI development. We may try some things that are unexpected. We may show some options that you may have seen a long time ago that are now making a resurgence in a slightly different format inside of React. Let's point out a few key differences between what you've probably observed in web development outside React and what things may feel like when we do our styling from the context of React. For instance, when coding HTML in the past you've probably experienced having to write and think about the entire document of a page at a time. In the world of React we will be working inside of well-encapsulated components. They may be at a higher low point in the page hierarchy, but it is great to be able to put structural and cognitive boundaries around single components at a time and focus on doing one thing well. Extending from and supporting this idea, we have the idea of modules. In current day browsers and in development experience that we've had in the past there have been no native modules. Often code would live in a single namespace. When coding in React we will take advantage of complementary tooling that will allow us to use modules by default, this will enhance our organization. In some of the styling strategies we explore we'll even experience this good code organization technique for our styles. It is so, so good. Generally what you've been doing in the past in regular HTML land may feel like old hat by now, but be ready to possibly be surprised a bit by the strategies and practices that we explore in this comparatively newer and younger land of React. This community has a penchant for questioning the status quo. You may be led to a refreshing place where you question the best practices of the day and are led to think and craft your own solutions that will best fit the problems you face. So we're going to try a few things. We'll solve the same problem in a couple of different ways to give you taste of each option that we explore. Some may better suit your tastes and preferences, of course that's why there are multiple options. Your experiences and exposure may lead you to prefer one of these options over the other. Know that smart and able people have invented or are using all of these options that we'll see. There are also other options that we aren't coving, and doubtless many yet to be discovered options that will well be worth your while. We're having a look at some of the most popular and promising ways to style your React components today, after you try them all I'm eager to see which you like best and what you learned from all the other options. Let's jump in and get started with the first one.
Forget What You Know
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.
Current Origins of Inline Styles
Inline Styles Demo - Install
Let's get our environment in a state where we can run this demo application. First, you'll need Node.js and npm installed on your machine. In the demo we'll be using Node 5 and npm3, similar versions should work for you. Make sure to take care of this before going on. We've identified a number of libraries such as React and tools such as webpack that we're going to need to make this project run. Once you've downloaded the project demo available in the course material or online via GitHub, open the shell and cd into the project directory and install the third-party libraries via npm install. This will take a moment and must be completed successfully in order for us to be able to run our application. After install you can run the app by typing npm start, then you should see an indication that your app is available to view in the browser. By default I have the app set to run on localhost port 3000. Address that in your browser and you should be golden. At this point you should see the unstyled version of our component, where there are five images displayed with text captions beneath each.
Inline Styles Demo - Styling
Evaluate Inline Styles
A Webpack Intro for CSS
Some Webpack Config Highlights
Adjust Webpack for CSS
CSS Stylesheet Demo Intro
CSS Stylesheet Demo
Evaluate CSS Stylesheet
If you've done any styling recently, that section probably felt really familiar. It was really just an okay styling technique, good for a tight spot if you had to. It really suffers from a flavor of all the seven original problems posed by Christopher Chedeau. Global styles, yes it feels terrible, doesn't it? We have to consider the world that our app will live in and try to do no harm by prefixing our selectors with some project-specific string, and hope that other application developers have done the same. Dependencies explicit? No the dependencies are not all explicit. Yes we import a module, but the boundaries within the module are hazy, different files actually don't represent individual modules with exported values. Dead code elimination? It could be attempted, but there's not a strong programmatic use of our selectors, again because there is no explicit export from CSS than an import and usage in JS. Is minification possible? Just a bit, mostly just whitespace removal. Selector names and CSS attributes must remain unchanged. Are constants shareable? No, not easily. Out-come the code comments with us as developers on the hook for keeping the two sides in sync. Will resolution be predictable? No, if other components or applications on the page asynchronously load new styles, our component styling could be affected in unpredictable ways that are hard to defend from. Isolated? No, we saw that our style definitions were not contained within a real component centric boundaries. Now don't be sad, really this failure and this feeling are really just prepping us for the glorious technology ahead. Get ready for an option that will challenge what you thought CSS could do, true CSS modules.
A CSS Loader Adjustment
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.
How CSS Modules Work
CSS Modules Demo
Evaluate CSS Modules
Now you have a handful of styling options at your fingertips for use the next time you need to make a React component look good. These are only a few, so keep your eyes open for more that will doubtless appear and be great. For now you should have a good flavor, and a good couple of references, and some good ideas for styling the React apps on your plate today. Thank you so much for taking the time to learn with me. I hope you've enjoyed the materials and feel empowered to make good looking and well-organized React components. Enjoy the course materials, do some experiments with them, change, expand, and improve on the ideas there. Thank you, and happy styling.
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...
Released5 Jan 2016