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 talk about HTML elements that have a high level of utility versus those that are geared toward specific features, the discussion is more detailed when data is involved. HTML is static markup—React components combine static markup with data. The question is, how do we do this and make sure that we're creating the right feature centric and utility centric components?

The aim of the remainder of this chapter is to find out how to go from a monolithic React component that defines a feature, to a smaller feature-centric component combined with utility components.