React file name and directory specification best practice record (summary)

React is very flexible when used, and without a specification constraint project, it will be very confusing during development. This article will introduce several excellent specifications.

File Type

Before introducing file names and directories, we need to briefly describe several common types to distinguish the functions of files.

• componentComponent files
• pageIf there is a route (React Router, NextJS, etc.), there is a page file
• utilTool functions that need to be reused
• helperA specific piece of logic, not a general tool, can be reused or split only as code
• hookCustomize React Hook
• constantDefine constants, capital + underscore namingCONSTANT_VALUE

Process index files

When making components or pages, you may divide components and use the main componentExport. One advantage when doing this is that it can be introduced according to the folder name, which is very clear from the structure.

But in fact, there will be multiple in the editorWhen developing files, you need to look at the folder where the files are located, which is very uncomfortable.

My solution is that your main component should be exported as it was originallyThe file exports the main component twice.

yourIt should be written like this:

export * from './MainComponent';
export { default } from './MainComponent';

Although one file is turned into two files, it effectively reduces the mental burden during development.

All the following specificationsAll this function

specification

Type folder

This should be a relatively official specification and is used by many projects.

Used hereBig HumpName components and pages, and other files are usually usedLittle Camel

If you have routes, then the components in the component should be general-purpose components at this time.

src/
├── components/
│   ├── 
│   └── 
├── pages/
│   ├── 
│   ├── 
│   └── Widget/
│       ├── components/
│       │   ├── 
│       │   └── 
│       ├── helpers/
│       │   └── 
│       ├── 
│       └── 
├── hooks/
│   └── 
├── utils/
│   └── 
└── 

This specification can still be implemented in small projects. However, if a relatively complex project, due to the large number of folder layers, it will lead to chaos. Next, specifications for feature classification will be recommended.

Sample project:Ant Design Pro

Features folder

Feature folder classification solves the problem of too many layers well and increases the possibility of tiling. And more intuitively demonstrates the code logic for easy maintenance.

Big Hump Name

In this naming specification, all files except components and pages need to add type suffixes.
And in a feature, functions of the same type can be placed in a file.
For example

If it is a general or reusable code, it is recommended to put it incommonFolders are managed uniformly, and other feature folders are capitalized.

Non-component or page independent files, please use barbecue skewers to name (segmented in the middle)

Components with the same feature may not be set separatelycomponentsFolders

src/
├── common/
│   ├── components/
│   │   ├── 
│   │   └── 
│   ├── utils/
│   │   └── 
│   ├── hooks/
│   │   └── 
│   └── 
├── Home/
│   └── 
├── Widget/
│   ├── 
│   ├── 
│   ├── 
│   ├── 
│   ├── 
│   ├── 
│   └── 
└── About/
    └── 

Reference article:Delightful React File/Directory Structure

Barbecue skewers naming

This actually refers to the Angular specification. If you name the upper and lower case of the above specification, you might as well try this more stringent specification.

• All file names and folder names are lowercase and are named using barbecue skewers (segmented in mid-lines).
• All files need to be type suffixed.
• Only the main page components can be placed at the bottom of the feature folder, and the rest of the files need to be set in the feature folder and the type folder is set.
• Each function should be a file, and do not put functions with the same function in one file.
• RemoveExport, because the file name is longer and has type suffix, it introduces easy to judge types

src/
├── common/
│   ├── components/
│   │   ├── 
│   │   └── 
│   ├── utils/
│   │   └── 
│   ├── hooks/
│   │   └── 
│   └── 
├── home/
│   └── 
├── widget/
│   ├── components/
│   │   ├── 
│   │   └── 
│   ├── helpers/
│   │   └── 
│   └── 
└── about/
    └── 

Sample Project

This is the end of this article about several best practices for React file names and directory specifications. For more related React file names and directory practice content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!