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.
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.
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.
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.