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