Photo by Amador Loureiro on Unsplash

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.

Juan Bernal
Published in
3 min readJan 4, 2020

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.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Written by Juan Bernal

Frontend Developer sharing tips, personal experiences, and everything in-between.

Responses (1)

What are your thoughts?

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 enou...

Imagine if you have a project where most of the files are called index.ts/index.tsx. Oh, the joy!
I've inherited a project like this 😍🥰😍
🤮

--