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.