Naming convention for react component directories

Question

I wonder what is the naming convention for directories and components in react. I have the main components directory and type of components (presentational, containers, hoc, views) under it. I also have higher order component named DifferentReportsComparison. He lives in "components/hoc/differentreportscomparison/DifferentReportsComparison.js" path, but I think that the name of directory he is a child of can be confusing because of it long name.

I would like to know how you organize your components, especially these with long names.

Answer 1

First off, there is no best way to organize your components. In fact, unless you're working in a team of people, the best way to organize your components is what makes sense to you.

If you look at how NextJS works, they have broken up most likely what you refer to as 'views' into a folder called pages.

But if you're worried about the long name of a component, you could either (a). figure out a shorter name. Or sometimes people will name the component file in the folder index.js. So in the case of differentreportcomparison, it would go components/hocs/DifferentReportsComparison/index.js.

When you go to import that file you can import it by just doing

import DifferentReportsComparison from 'components/hocs/DifferentReportsComparison'

But as I said there is no perfect way to organize your components, and chances are as your projects grows, you will possibly change the structure a couple times.