Using functional components instead of class components

[netojose]

When possible, is a good practice to use pure/functional/stateless components instead of class-based components.

1. Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks;
2. You end up with less code;
3. They help you to use best practices. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component;
4. The React team mentioned, there may be a performance boost for functional component in future React versions.

[carolinaknoll]

Thank you for refactoring and describing the reasons on why it is a good practice to use functional components. I had read about them, but it didn't strike me it would improve the code in so many ways.

I noticed you also used {" "} to manage whitespace. I took the time to read about it, and while it does look weird when seeing it for the first time, I agree it is a safer way to make sure whitespace bits aren't lost when changing text or code around them. Better to use these {" "} than notice there is a missing space out of the blue somewhere.

Finally, I see you wrapped the lines in the Header component into lines of 70~90 chars. While I agree that lines shouldn't exceed a certain number of characters, 80 chars seems a bit too small for the unfamiliar eye. Nonetheless, I agree with your changes and now know well that they are for the best.

Thank you for the contributions you have made for the project. 😄