ReactJS. La estructura de carpetas con la que me siento más cómodo

Descubre la manera en la que organizo las carpetas para proyectos de tamaño medio

Image for post
Image for post
Photo by Andrew Pons on Unsplash

La carpeta src

🗂 La carpeta components

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

🗂 La carpeta config

🗂 La carpeta consts

🗂 La carpeta contexts

Image for post
Image for post
https://stackoverflow.com/a/57435454

🗂 La carpeta hooks

🗂 La carpeta images

🗂 La carpeta propTypes

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});

🗂 La carpeta theme

🗂 La carpeta utils

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

En resumen…

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

Conclusiones

Apóyame en Patreon

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app