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...