How to name our React components?
When it comes to clean code we should keep in mind that the very basic thing to keep the codebase maintainable and easy to read for future developers is how we name our variables, functions, classes, and more. In this post, I am going to show you a good naming convention on how to name your Components in React to make them easy to read and understand for other developers or your future self as well.
[Domain] — Duty — [Modifier]
The domain is the business domain you relate to where you are writing your component, for example, product, user, auth, settings, etc. This part is optional.
The Duty is the main goal and task for the component or property within the domain we are working on, for example, in the product domain, I am writing a compare component. this one is mandatory and you must use it.
The modifier is the subtask or a piece of the duty that we are going to create. for example, the ProductCompareHeader, header is a part of the compare component we are building in the product domain. this field can be optional as well.
