Reusable HTML elements
Let's think about HTML elements for a moment, before jumping into React component implementation. Depending on the type of HTML element, it's either feature centric or utility centric. The utility-centric HTML elements are more reusable than feature centric HTML elements. For example, consider the <section> element. Yes, this is a generic element that can be used just about anywhere, but its primary purpose is to compose the structural aspects of a feature—the outer shell of the feature and the inner sections of the feature. This is where the <section> element is most useful.
On the other side of the fence we have things like <p> and <span> and <button> elements. These elements provide a high level of utility because they're generic by design. We're supposed to use <button> elements whenever we have something that's clickable by the user, resulting in an action. This is a level lower than the concept of a feature.
While it's easy to...
