An opinionated folder structure for my react applications

react-folder-structure.md

root/
├── __test__/
├── public/
├── .storybook/
│   ├──stories/
│   │   ├── NextButton/
│   │   │   └── NextButton.stories.js
│   │   └── RadioButton/
│   │       └── RadioButton.stories.js
│   ├── main.js
│   └── preview.js
└── src/
    ├── components/
    │   ├── Booking/
    │   │   ├── components
    │   │   │    └── Header.js
    │   │   ├── actions.js
    │   │   ├── constants.js
    │   │   ├── index.js
    │   │   ├── styles.js
    │   │   └── reducer.js
    │   └──Dashboard/
    │       ├── actions.js
    │       ├── constants.js
    │       ├── index.js
    │       ├── styles.js
    │       └── reducer.js
    ├── functions/
    │   ├── api/
    │   │   ├── refreshToken.js
    │   │   ├── signUpUser.js
    │   │   └── updateUserProfile.js
    │   ├── getAge.js
    │   └── formatDate.js
    ├── utils/
    │   ├── static/
    │   │   ├── icons/
    │   │   ├── images/
    │   │   └── logo/
    │   ├── middlewares/
    │   │   └── ...
    │   ├── constants.js
    │   ├── request.js
    │   └── store.js
    ├── configs.js
    ├── index.js
    └── serviceWorker.js

The idea of the components folder is that every reusable component and pages are all kept in the same place rather than most other structures where there is a separate folder for pages and/or containers. The reasoning behind this decision is to make it easier to find parts of app in the project. One of the hidden benefits is that when you are trying to import components, the path will always be the same, meaning you don't have to always check where that component is and what's the right path for the project.

In addition the components folder holds all the resources(reducer, actions, constant and functions) that it directly uses. This is good for 2 reasons:

• You know where to find the main resources that component depends on
• When you need to remove a component from your project, all you need to do is delete the folder. This way you will automatically delete all extra resources it introduced into the project which are now considered junk.