File naming conventions in reactJS?

Question

Recently I have started learning ReactJS, the only thing that confuses me is how to name folders and files in the react app directory.

To n

Answer 1

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

Answer 2

Based on their docs about File Structure I'd opt in for UpperCamelCase 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.

Answer 3

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.

Answer 4

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

Answer 5

Based on 'Google JavaScript Style Guide'

File names must be all lowercase and may include underscores (_) or dashes (-), but no additional punctuation. Follow the convention that your project uses. Filenames’ extension must be .js.

Answer 6

I recommend hyphens-case for file naming because all npm modules is hyphens-case so when imported custom file is same as npm modules.