File naming conventions in reactJS?

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?

159465 次浏览
小开

Regarding naming conventions, ReactJS is unopinionated.

There isn't an official guideline or statement about the questions you raised. You won't find them in the documentation either.

It's a personal (team) preference. If you struggle to enforce one, you could stick to something like Airbnb's mostly reasonable approach to React and JSX.

PS: As long as you're consistent, I would say you're safe.

小开

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.

小开

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.

小开

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.

小开

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

小开

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

小开

I use PascalCase for components and classes, even if you use function to create a component you still you pascal case.

Examples:

  • components folder: PascalCase.jsx my custom components
  • pages folder: PascalCase.js components that represent my page
  • classes folder: PascalCase.js
  • others folders: camelCase.js

never use snake_case.js.

For folders i only use lower case, i never used: camelCase, snake_case or hyphen-case.

小开

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:

  1. Components should be PascalCase
  2. Methods should be in camelCase and be named for their function

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.


提交答案