Estructura de carpetas

Existen muchas formas de organizar los archivos y carpetas de un proyecto de React y, aunque no hay una forma “correcta”, en esta guía veremos dos opciones muy populares:

• Por función (vistas, componentes, helpers, hooks, etc.)
• Por funcionalidad (login, búsqueda, usuarios, etc.)

Veamos cada una de las opciones en detalle.

Por función

Cuando se organiza el proyecto por función generalmente vamos a tener al menos las siguientes carpetas dentro de /src:

• /views (o /pages) - contiene las vistas (páginas) de la aplicación
• /components - contiene los componentes que se utilizan en las páginas.
• /hooks - contiene los hooks que creemos en nuestra aplicación
• /helpers (o /utils) - contiene archivos de apoyo para las demás funciones.

Dependiendo del proyecto es posible que tengamos otras carpetas. Por ejemplo /store (si usamos Redux) o /services.

También es posible que dentro de cada una de las carpetas tengamos otras carpetas para mayor organización. Por ejemplo, podemos organizar la carpeta /views por funcionalidad, o podemos crear una carpeta para cada componente en /components.

Por funcionalidad

Cuando organizamos el proyecto por funcionalidad creamos una carpeta por cada una de las funcionalidades de la aplicación, por ejemplo:

• /base (o /common) -> contiene archivos que son transversales a la aplicación como componentes reutilizables, rutas, etc.
• /users
• /settings
• ...

Dentro de cada una de estas carpetas podemos crear otras carpetas por función (views, components, hooks, etc.) para mayor organización.

Archivos de pruebas y documentación

Hay dos formas de ubicar los archivos de pruebas (p.e. React Testing Library) y de documentación (p.e. Storybook):

• Junto a cada archivo de código fuente.
• En otras carpetas por fuera de /src (p.e. /test, /docs)

Nuestra inclinación es hacia otras carpetas por fuera de /src pero muchos proyectos lo hacen junto a cada archivo de código fuente.

Si se hace por fuera de /src nuestra recomendación es replicar la misma estructura de carpetas de /src. Por ejemplo:

└── /src
    └── /components
        └── Modal.jsx
|── /tests
    └── /components
        └── Modal.test.js
|── /docs
    └── /components
        └── Modal.stories.js 

Si lo hiciéramos junto a cada archivo fuente sería de la siguiente forma:

└── /src
    └── /components
        └── /modal
            |── Modal.jsx
            |── Modal.test.js
            |── Modal.stories.js