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
Last active
April 8, 2021 02:18
-
-
Save rotimi-best/c57df236ddcd7d90e77190cacbba8af0 to your computer and use it in GitHub Desktop.
An opinionated folder structure for my react applications
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: