ReactJS. The folder structure I feel most comfortable with

Discover how I organize folders for medium-sized projects

Image for post
Image for post

The src folder

🗂 The components folder

common

import Dropzone from './Dropzone';export default Dropzone;
import Dropzone from 'components/common/Dropzone';
import Dropzone from 'components/common/Dropzone/Dropzone';

hocs

layout

Image for post
Image for post

router

Image for post
Image for post

views

Dashboard
├── Dashboard.js
├── DashboardView.js
├── index.js
├── Statistics
│ ├── Statistics.js
│ ├── StatisticsView.js
│ └── UserStatistics
│ ├── UserStatistics.js
│ ├── UserStatisticsView.js
│ └── OrderStatistics
│ ├── OrderStatistics.js
│ ├── OrderStatisticsView.js
├── UserList
│ ├── UserList.js
│ ├── UserListView.js

🗂 The config folder

🗂 The consts folder

🗂 The contexts folder

Image for post
Image for post

🗂 The hooks folder

🗂 The images folder

🗂 The propTypes folder

import PropTypes from 'prop-types';export default PropTypes.shape({name: PropTypes.string.isRequired,surname: PropTypes.string.isRequired,email: PropTypes.string.isRequired,image: PropTypes.string.isRequired});

🗂 The theme folder

🗂 The utils folder

export default function generateRandomId() {  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);}

In summary…

awesome-app
├── src
│ ├── components
│ │ ├── common
│ │ │ ├── ResponsiveImage.js
│ │ │ ├── Dropzone
│ │ │ │ ├── Dropzone.js
│ │ │ │ ├── Dropzone.js
│ │ │ │ └── ...
│ │ │ └── ...
│ │ ├── hocs
│ │ │ ├── withSidebar.js
│ │ │ └── ...
│ │ ├── layouts
│ │ │ ├── PublicLayout.js
│ │ │ └── ...
│ │ ├── router
│ │ │ ├── PrivateRoute.js
│ │ │ └── ...
│ │ ├── views
│ │ │ ├── Dashboard
│ │ │ │ ├── Dashboard.js
│ │ │ │ ├── DashboardViews.js
│ │ │ │ └── ...
│ │ │ └── ...
│ ├── config
│ │ └── fileSize.js
│ │ ├── router
│ │ │ ├── paths.js
│ │ │ ├── routes.js
│ │ └── ...
│ ├── consts
│ │ └── locales.js
│ │ └── ...
│ ├── contexts
│ │ └── userContext.js
│ │ └── ...
│ ├── hooks
│ │ └── useUserContext.js
│ │ └── ...
│ ├── images
│ │ └── logo.svg
│ │ └── ...
│ ├── propTypes
│ │ └── user.js
│ │ └── ...
│ ├── theme
│ │ └── app-theme.js
│ │ └── ...
│ ├── utils
│ │ ├── blobToFile.js
│ │ ├── generateRandomId.js
│ │ └── ...
│ ├── index.js

Final thoughts

Do you want to read more articles like this?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store