2 Simple and Effective React File Naming Convention Tips

An effective file naming convention can help you avoid confusion when working with multiple files, can help others identify what it is that a file does or is, and allows for easy relationship-based cues.

Whether you’ve already got a solid file naming convention or you’re looking for more tips on how to approach the naming, I’ve made a super short list of tips to one-up your file names.

The following tips and tricks all revolve around a simple and effective approach: Name your files according to what they are and in accordance to their relationships.

1. Match your component-related files with the component name

Since your component names are already adhering to the PascalCase naming convention (they are, aren’t they…?), let’s keep this going:

├── components
│   ├── SomeComponent
│   │   ├── SomeComponent.test.jsx
│   │   ├── SomeComponent.jsx
│   │   └── SomeComponent.styles.js

The above example keeps the component’s folder and the related files all with the same exact name, just different file extensions depending on what it is.

2. Name non-component files based on what they are or do

Files which are not component related are much easier to handle or work with if the name gives you some sort of indication on what it is. This will mostly impact your actions, reducers, providers, hooks, etc. The easiest way to grasp the value of naming your files in this way is illustrated by the examples below where one provides context to the person writing code and the other does not:

Provides context

├── actions
│   ├── anotherAction
│   │   ├── anotherAction.test.ts
│   │   └── anotherAction.ts
│   └── someAction
│       ├── someAction.test.ts
│       └── someAction.ts

Doesn’t provide context

├── actions
│   ├── another
│   │   ├── another.test.ts
│   │   └── another.ts
│   ├── some
│   │   ├── some.test.ts
│   │   └── some.ts

This is a simple example that goes to show how much easier it is to add context around the file name versus no context. It will only get harder to navigate your files or understand where you are in relation to your file structure if you have files which have the same name across folders. Imagine if you also had a reducers folder which had folders in it that matched exactly what is in the actions folder in the example above… you would hate your IDE for not providing enough context! Luckily, editors like VSCode have started to add breadcrumbs when the file is open to provide a bit of sanity.

When it comes to writing code for your React app, the last thing you want to worry about is naming your files. A file naming convention can go a long way in reducing the time it takes to navigate the file structure and helps avoid an inevitable code-edit mishap simply because you have multiple files with the same name in different folders. A file naming convention can also help you identify what it is and what it is responsible for or does in relation to other files.

Please feel free to suggest other tips you find useful around file naming conventions in React apps!