This video explains how we can style React components.
- [Instructor] So, in this section we're going to talk about styling. First, we're going to review some of the most common practices for styling components with Styling React. Then, we are going to move forward, into using one of these techniques. In this case, we are going to use one called Functional CSS. We are going to make our app pretty, and commit our changes so we can move on. But that's not all. We're also going to talk about our code styling. This is a very important topic, and it's one, at least for me, that I didn't consider important until I used it. We are going to talk about "what is a Linter," and we are also going to configure and see ESLint in action.
We are also going to use another tool, called Prettier, that will make our code look nice automatically for us. At the end, we are going to wrap everything up into a Git commit so we can execute these steps every time we commit a new change. So, let's start. In this first video, we are going to talk about Component Styling, especially some different approaches in the industry to style components. Just as a side-note, this is a very extensive topic, and also a very discussed one, so this is going to be just a brief review through some of them, explaining some of the pros and cons that you will face if you use it.
So, let's start. Hey, if you remember from our last section, we ended up with a fully-functional React application that fetches our recipes from our remote API, notes it, and listens for a click event on the left item to show the detail on the right. The only difference is that I loaded some more recipes on the API. But, this is the exact same code as we left it from our last section. But something's missing, right? I mean, at least, it doesn't look good, and that's because our page doesn't have Styles yet. So, let's start by the most traditional solution, which is just using Plain CSS.
As I said, this is a very old-school styling, when pages were documents instead of apps. Basically, consider through filing just one CSS file, then we'll have our classes and global stylings, and link it in our index html. Then, we can use those class names in our React components to apply those styles to the different parts of the page. This solution has some problems, though. First, it's very hard to maintain in large scale. I mean, that main.css file can scale up to having many, many lines. Then we have our global naming problem, which consists of applying styles into one element, without even knowing that we are doing it.
First is that you can't reuse CSS, or at least it will be quite difficult to do it. We'll also have high coupling between markups and styles. This basically means that we have everything all together. This means that having your styles with your components can make your code quite robust, and also, will make your components huge, because, in this case, we are just adding some red color, but imagine you need to add eight or ten different CSS properties. You have at least eight or ten lines just for CSS on your components.
I mean, you will have a button.js, and also a button.css file, so no more global namings or monolithic files, which is actually quite cool. But, the thing about this, though, is that you will have an incredibly huge amount of files - one CSS file per component. For a small project, this is not a problem, but believe me, you can have many, many components in your project and this can potentially become a problem. Also, it's quite difficult to reuse CSS using this technique. It is quite common to use CSS Modules with some other CSS preprocessor.
I used SASS a lot in the past, but there are also many people using LESS. This basically means that you can make use of CSS Modules, but instead of writing regular CSS code, you can write SASS or LESS code. And here is where is where things start getting interesting. Styled Components is one of the most popular tools for styling components nowadays, and it has many benefits. As you can see, it's a CSS in JS file, which means that uses ES6 backtick syntax.
Backtick syntax, if you don't know, is just another way of calling a function. The good part about Styled Components is that you will have your JS and CSS all together, as I just said. Also, it's very easy to define styles based on props, because CSS properties can now receive a function instead of a regular string. That function can take, as a first argument, the component props, so you can define CSS based on that props. That is quite good for using animations. The bad part, although, is that you will have to deal with this odd syntax, at least at first.
You get used to it, but if you're just beginning using React, you will find this way of calling functions quite strange. Also, it's quite hard to style components with too many nested elements. I mean, for the button we are seeing on the left, it's quite easy, right? I'm just defining a new button that has the color red. But if that button has a span, or any other possible children, it's not that easy to define styles to that element. Finally, we have this other solution called Functional CSS. The name can be quite confusing.
At least, it was for me. But, Functional CSS basically means having the CSS toolkit with extensible predefined classes. In this case, you can see that what I'm doing is importing basscss. It's not important to understand "what is basscss" right now; just imagine basscss as a group of predefined classes and you just make use of those classes inside your components. For example, in this case, the classname "Red" is just setting the color to red. The good part is that you will have almost zero repetition, because every time you need to define something to red, you will just use the same classname.
It enforces a styleguide, because you can define what red means to your application and apply that for every element that has a classname "Red." Quick for prototype; to use it you will make use of PostCSS and CSSNext. However, the bad part about Functional CSS is that it's quite hard to apply specific styles. In this case, if we need a darker red, or a lighter red, we can't apply that very easily, so you will find often using the Inline Styling in conjunction with Functional CSS. Also, you can end up defining very large classnames.
In this case, it's just "Red," but imagine we also want to apply the padding, a background color, and a border. You will have one class for each specific property. But these are not all - I mean, there are plenty of options out there. Here are some, but I'm sure if you look, you'll find others. And I recommend you to take some time to research, try some, and choose the one that best suits for your project. So, in this course, we are going to use Functional CSS. In the next video, we are going to make a more extensive review of what Functional CSS is, and how it works.
- Structuring React projects
- Creating and mounting the root component
- Composing components for more complex UI
- Using state to making components dynamic