Shulou(Shulou.com)05/31 Report--

This article mainly explains the "React file name and directory specification case analysis", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "React file name and directory specification case analysis" bar!

File type

Before introducing file names and directories, you need to outline several common types to distinguish the functions of files.

Component component file

Page if there are routes (React Router, NextJS, etc.), then there is a page file

Tool functions that util needs to reuse

Helper is a specific piece of logic that is not a general tool and can be reused or used only as a code fragment.

Hook Custom React Hook

Constant defines constant, uppercase + underscore to name CONSTANT_VALUE

Working with index files

When working on a component or page, you may divide the component and export the main component using index.tsx. One advantage of doing this is that it can be introduced according to the folder name, which is structurally clear.

But in fact, there will be multiple index.tsx files in the editor, and 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 before, and the index.ts file should export the main component twice.

Your index.ts should read as follows:

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

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

This is the role of all the index.ts in the specification.

Specification type folder

This should be a more official specification, and many projects are in use.

Large hump naming components (component) and pages (page) are used here, while other files usually use small humps.

If you have routing, then the components in the component should be generic components.

Src/ ├── components/ │ ├── MyHeader.tsx │ └── MyFooter.tsx ├── pages/ │ ├── Home.tsx │ ├── About.tsx │ └── Widget/ │ ├── components/ │ │ ├── Tool.tsx │ │ Option.tsx helpers/ setOptionStorage.ts ├── Widget.tsx │ └── index.ts ├── hooks/ │ └── useTheme.ts ├── utils/ │ └── getRamdomNumber.ts └── constants.ts

This specification can still be implemented in small projects. However, if the project is relatively complex, it will lead to confusion due to the large number of mezzanine files. Next, the specification for feature classification will be recommended.

Properties folder

Feature folder classification solves the problem of too many layers and increases the possibility of tiling. And more intuitively show the code logic, easy to maintain.

Naming of the big hump

In this naming convention, all files except components and pages need to add type suffixes.

And in a feature, you can put functions of the same type in a file.

For example, Widget.helper.ts Widget.util.ts

If the code is general or reused, it is recommended to put it in the common folder for unified management, and the rest of the feature folders are capitalized.

For separate files that are not components or pages, please use a barbecue string to name (middle underlined division)

Components of the same feature can not set up a separate components folder

Src/ ├── common/ │ ├── components/ │ │ ├── MyHeader.tsx │ │ └── MyFooter.tsx │ ├── utils/ │ │ └── get-random-number.util.ts │ ├── hooks/ │ │ └── use-theme.hook.ts constants.ts Home/ Home.tsx Widget/ ├── Tool.tsx │ ├── Option.tsx │ ├── Widget.helpers.ts │ ├── Widget.utils.ts │ ├── Widget.constants.ts │ ├── Widget.tsx │ └── index.ts About/ └── About.tsx BBQ string naming

This is actually a reference to the Angular specification, and if you name the case of the above specification obsessive-compulsive disorder, you might as well try this more stringent specification.

All file names and folder names are lowercase and named using a barbecue string (separated by an underscore).

All files need to add a type suffix.

Only the main page components can be placed at the bottom of the properties folder, and the remaining files need to be re-set up the type folder in the properties folder.

Each function should be a file, do not put the same function in a file.

Remove the index.ts export because the file name becomes longer and has a type suffix, which makes it easy to determine the type

Src/ ├── common/ │ ├── components/ │ │ ├── my-header.component.tsx │ │ └── my-footer.component.tsx │ ├── utils/ │ │ └── get-random-number.util.ts │ ├── hooks/ │ │ └── use-theme.hook.ts constants.ts home/ home.page .tsx ├── widget/ │ ├── components/ │ │ ├── tool.component.tsx │ │ └── option.component.tsx │ ├── helpers/ │ │ └── set-option-storage.helper.ts │ └── widget.page.tsx about/ └── about.page.tsx thank you for reading The above is the content of "React file name and directory specification example analysis". After the study of this article, I believe you have a deeper understanding of the problem of React file name and directory specification example analysis, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.