React.js Project Convention

react-convention.md

React.js Project Convention

This convention is intended to unify react project to a certain style and structure, thus making it more maintainable.

File Naming

• Component file are capitalized. E.g. App.js, Button.js
• Folder are lowercased. E.g. components, checkout, products
• Files containing hooks, or helper functions, named using dash as separator. E.g. use-list-api.js, use-modal-state.js, date-formatter.js
• Tests files are suffixed with .test.js, e.g. App.test.js

Project Structure

• Files are grouped by feature.
• If we have common functionality, we can put the files inside common feature folder.
• Folder can be nested if necessary.
• Provide index.js as gateway for import, e.g. re-export functions or components from other files inside that folder.

Example:

src/common
├── components
│   ├── ContainerFullscreen.js
│   ├── FormError.js
│   ├── index.js
│   ├── Input.js
│   └── Loading.js
├── constants.js
├── helpers
│   ├── date-formatter.js
│   ├── index.js
│   ├── notifier.js
│   └── number-formatter.js
└── hooks
    ├── index.js
    ├── use-modal-state.js
    └── use-list-api.js