Learn about functional components.
There're plenty of reasons why you can use a functional component instead of a class component, and this is a very biased subject. Many people prefer classes instead of functions, or the other way around. But there are some real pros and cons for using one instead of the other. So let's review them. Let's start talking about the pros of functional components. The first and most important, of course, one of the reason why I prefer using functional components every time I can, is that components are more readable and easy to understand. You can see straight what that component will render based on the props.
It also adds less boilerplate to your code. If you can see here, we have like seven or eight lines for rendering just a hello world. Instead, in the function component we have just three. It's more easy to test because they are just functions. And you can test the output just based on your input without having to instantiate any class, or something like that. Enforce good practices, because it force you to think about props, and what the component should receive in order to render something. You don't have to use the this keyboard.
And they're not bounded to React. This last point is a bit difficult to see, but you can see functional components as plain functions that returns HTML syntax. If then, that syntax gets compiled into React calls, or any other platforms, it's up to you. But theoretically, you can reuse that component to target whatever other library you want. At the end, many people say that they're going to be optimized for performance in the next versions of React, but I couldn't find any real information about this.
Using functional components also has some cons. The first one is that you can't use lifecycle hooks. If you don't know what they are, don't worry, we are going to see it in the following videos of this section. You can't use the state or the refs. Which are some other React features that you can use to solve many problems that you might face. And at the end if you need one of those, you need to convert it into a class component. Which can be a little bit annoying if you had to do it many times. Okay, so just for practice, let's rewrite our App component using a function.
So go to your code and if you remember, this is the component that we wrote in our previous video and mount inside the DOM. This time, instead of using a class, we're going to use just a regular variable called App. We're going to get rid of the extend, and just define it as an arrow function. The other thing this arrow function will do, is to return the hello world heading. And that's it.
Just notice that in ES6, when the body of the function just return something, we can get rid of the return key word and just define the function in this way. So that's it. We reduce our component definition to just three lines. If you just now start your development server and test it on your browser, everything should be working as it was before. Cool. We'll still have our hello world being render in our page.
So that's all about functional components. In the next video, we are going to talk how to import assets using React, in particular, images.
- Structuring React projects
- Creating and mounting the root component
- Composing components for more complex UI
- Using state to making components dynamic