CODEWITHSUNDEEP
reactjs
Narasimha Reddy - Geeker
Narasimha Reddy - Geeker

Reputation: 3860

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.

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?

Upvotes: 168

Views: 255706

Answers (10)

DSDmark
DSDmark

Reputation: 1261

In a large project, I would like to manage my file in that way. Including the word component in the file name is seen like unnecessary, as it's already clear from the file extension that it's a component. But, as your project grow larger, it makes easy to differentiate the files.

 src
   components
     addTodo
         addTodoForm.component.jsx
         addTodoFormSubmited.component.jsx
         index.js
     navbar
     todolist
       index.js
   pages
       addTodo.jsx
       index.js
       todo.jsx
       updateTodo.jsx

According to that way. I say, i easy to understanding which file is used to component and which file is page.

Upvotes: 0

Daniel Danielecki
Daniel Danielecki

Reputation: 10502

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.

Upvotes: 13

Relcode
Relcode

Reputation: 521

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.

Upvotes: 0

Max
Max

Reputation: 437

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.

Upvotes: 5

Andrew Lam
Andrew Lam

Reputation: 3804

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

Upvotes: 5

M.W. Felker
M.W. Felker

Reputation: 4823

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

Upvotes: 19

Masih Jahangiri
Masih Jahangiri

Reputation: 10897

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

Upvotes: 29

Farruh Habibullaev
Farruh Habibullaev

Reputation: 2392

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.

Upvotes: 1

Vlad Bezden
Vlad Bezden

Reputation: 89499

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.

Upvotes: 44

Kaloyan Kosev
Kaloyan Kosev

Reputation: 13067

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.

Upvotes: 126

Related Questions