Its ok to create react js files with Page, Class, or Component as suffix? Additional to folder structure?

Diego Sepulveda 0
Viewed 26

Its ok to name files like this in a React JS app?

  • SearchBarComponent (React Component)
  • SearchResultPage (React Component that intent to be a page)
  • SearchBar (Class or Service)
  • Also some variations XXXLayout,XXXContainer (I know that this is ok)

I know that maybe this can be redundant due to folder structure (pages, components, services etc)

But when I am working in a file in my code editor and also up in the tabs, its easy for me to know where I am and where to go.

PD: I already viewed a lot of content about folder structures, and I have a good understanding, my problem is when I am looking several tabs in my editor.

reactjs
1 Answers

In general, whatever is easiest for you and your team to understand will be most beneficial. There are many naming conventions you can find online that might be closer to best practice so I would Google around and see what you like most.

My previous job named each file with a unique name, pretty much like you're suggesting. One thing that really helped with was finding the file itself if you recall the name. A downside to that was as the codebase grew, it was tough to both remember the name of certain files and come up with names that weren't already taken in a generic fashion.

At my current job, the structure of our folder is the following:

containers/
   properties/
      List.js
      View.js
      Add.js
components/
   properties/
      PropertyLink.js
      Unit.js
      Property.js

One downside to this approach is you lose the ability (somewhat) to find the files named List, View, & Add since this pattern is used throughout the app. However I haven't found this to really be an issue using VS Code and their fuzzy searching. If I wanted to look for the View.js file under properties, I can just search "properties view".

Personally, I prefer the second approach as I despised trying to come up with a unique name for highly generic components. To each their own though!

Hope this helps and best of luck :)

dabyland0
Related