Recently, I have started learning ReactJS. The only thing that confuses me is naming folders and files in the React app directory.
To name component files, some people follow TitleCase.js and some follow camelCase.js.
To name app directories, few people follow camelCase and few
smallcase or small-case.
I tried to find the official documentation on naming conventions but couldn't. Can someone help me find the right way of naming files in ReactJS?
As others have mentioned, we adopted the Airbnb style guide. Here is the specific section in their docs about naming conventions:
https://github.com/airbnb/javascript/tree/master/react#naming
tl;dr PascalCase for naming
Based on their docs about File Structure I'd opt in for PascalCase as long as it's not index.css, index.html or index.js. Moreover, the create-react-app has this kind of structure, which you can see here.
I recommend hyphens-case for file naming because all npm modules is hyphens-case so when imported custom file is same as npm modules.
I use PascalCase for components and classes, even if you use function to create a component you still you pascal case.
never use snake_case.js.
For folders i only use lower case, i never used: camelCase, snake_case or hyphen-case.
I would recommend using small letters for filename, because some environment is case sensitive while some are not. Furthermore, it is easier to miss casing mistake.
I just faced an issue deploying my react code to Netlify because of the filename casing issue. For more detailed explanation, you may refer to Netlify's support guide "Netlify app builds locally but fails on deploy (case sensitivity)".
According to Eloquent Javascript. Classes follow TitleCase, and method / functions and properties follow camelCase. It is also said directories and components follow all lowercase naming. It is just preferred way of naming and popular or convention in so many programming languages including C, C++, and Java.
However, Javascript is a wild language and there is no exact rule to follow for naming, and there is only preference. As long as naming is easily readable and consistent in entire module/component/project and it does not confuse other developers, and it is totally up to you how to name them.
React is a lot of things but straight-forward is not one of them.
But if anything was to be said, I've found this article 5 Best Practices For React Developers to be very helpful in my opinion.
The ones stated regarding naming convention are 2 points:
Besides that, it's all up to you or the team working on the project because at the end of the day you are the ones who will have to remember everything when the time for making changes or adding updates comes.
