The components you've seen so far in this book have been classes that extend the base Component class. It's time to learn about functional components in React. In this section, you'll learn what a pure functional component is by implementing one. Then, we'll cover setting default property values for stateless functional components.
A functional React component is just what it sounds like—a function. Picture the render() method of any React component that you've seen. This method, in essence, is the component. The job of a functional React component is to return JSX, just like a class-based React component. The difference is that this is all a functional component can do. It has no state and no lifecycle methods.
Why would we want to use functional components? It's a matter of simplicity more than anything else. If your component depends on some properties to render some JSX and does nothing else, then why bother with a class when a function is...