Cómo estructurar proyectos React

Esta es una pregunta que uno se suele hacer cuando comienza un proyecto en cualquier lenguaje/framework. Por lo general, en varias tecnologías estas estructuras están más definidas que en otras. Por ejemplo, es común ver que un proyecto en Java utilizando Spring Framework y gradle, la estructura viene definida. Sin embargo, lo mismo no ocurre en proyectos utilizando React, en donde me he encontrado con varias formas de estructurar un proyecto y no he visto un consenso a nivel de comunidad por cuál es el mejor a seguir para todo tipo de proyectos.

La idea de este post es hacer un resumen de las distintas formas en que un proyecto en React puede ser estructurado que he ido encontrado durante estos casi dos años trabajando con esta librería.

División por concepto

Una forma de estructurar un proyecto es agrupando los archivos por concepto. Por ejemplo, todos los archivos relacionados con los actions de Redux estarán bajo la carpeta actions, todos los componentes bajo la carpeta components y así sucesivamente. La siguiente imagen muestra la estructura de una aplicación que representa un Blog.

├── actions
│   ├── comment.actions.js
│   └── post.actions.js
├── components
│   ├── App.js
│   ├── Comment.js
│   ├── Comments.js
│   └── Post.js
├── constants
│   ├── comment.types.js
│   └── post.types.js
├── css
│   └── index.css
├── index.js
├── reducers
│   ├── comment.reducer.js
│   └── post.reducer.js
└── router
    └── router.js

La ventaja de este tipo de estructura es que todas las carpetas contienen archivos con un foco específico, por lo tanto si es que necesitamos cambiar algo relacdionado con los estilos, vamos a la carpeta CSS, o si necesitamos hacer un cambio en algún componente, vamos a la carpeta respectiva.

La desventaja de este tipo de estructuras es que al momento de querer implementar alguna nueva característica, vamos a tener que modificar distintos archivos los cuales van a estar en distintas carpetas, lo cual lo hace más complejo al momento de tener una aplicación de gran escala.

División por vistas

Otra forma de estructurar un proyecto en React es por vistas o rutas. Cada sección de nuestra aplicación va a tener una carpeta con su nombre, los componentes estarán es la carpeta components con todos los archivos relacionados (css/scss/sass, tests, actions, reducers, etc). Si seguimos nuestro ejemplo del blog, la estructura de nuestra aplicación sería algo así:

├── actions
│   ├── comment.actions.js
│   └── post.actions.js
├── components
│   ├── App.js
│   ├── Comment.js
│   ├── Comments.js
│   └── Posts.js
├── constants
│   ├── comment.types.js
│   └── post.types.js
├── views
│   ├── home
│   |   ├── Home.js
│   ├── posts
│   |   ├── Posts.js
│   ├── about
│   |   └── ...
├── css
│   └── index.css
├── index.js
├── reducers
│   ├── comment.reducer.js
│   └── post.reducer.js
└── router
    └── router.js

Como podemos ver, se agregó una carpeta views (también llamada containers) la cual contendrá los componentes que representan las distintas vistas de nuestra app.

Cada una de estas vistas utilizará los componentes que estén en la carpeta components.

Lo bueno de esta forma es que para un dev que se una al proyecto, puede entender el proyecto tan solo viendo la web app desplegada. Por ejemplo, si es que necesita arreglar un bug dentro del home tan solo necesita comenzar a leer el código de una forma top-down hasta encontrar el bug.

División por componentes

Dividir el proyecto en base a los componentes, es otra forma que se puede estructurar. En este caso, vamos a poner todos los archivos relacionados a un componente juntos en una carpeta con el nombre del componente.

├── actions
│   ├── comment.actions.js
│   └── post.actions.js
├── components
│   ├── comment
│   |   ├── Comment.js
│   |   ├── comment.css
│   |   └── Comment.spec.js
│   ├── comments
│   |   ├── Comments.js
│   |   ├── comments.css
│   |   └── Comments.spec.js
│   ├── post
│   |   ├── Post.js
│   |   ├── post.css
│   |   └── Post.spec.js
├── constants
│   ├── comment.types.js
│   └── post.types.js
├── views
│   ├── home
│   |   ├── Home.js
│   |   ├── home.css
│   |   └── Home.spec.js
│   ├── posts
│   |   ├── Posts.js
│   |   ├── posts.css
│   |   └── Posts.spec.js
│   ├── about
│   |   └── ...
├── index.js
├── reducers
│   ├── comment.reducer.js
│   └── post.reducer.js
└── router
    └── router.js

Como podemos observar en el árbol de archivos de arriba, cada componente será independiente uno del otro y funcionará como una caja negra, por lo menos en cuanto a archivos relacionados. Entonces cada uno de ellos estará encapsulado en una carpeta con todos sus archivos (css, test y js). Otro de los cambios, es que eliminamos la carpeta css que contenía los estilos de nuestra aplicación, en este caso, cada componente contendrá su archivo de estilo.

Esta forma permite hacer modificaciones a los componentes de manera más rápida. Por ejemplo, si necesitamos hacer un cambio en el css del componente Comment vamos y buscamos la carpeta de este component, en vez de tener que buscar la clase/id en un archivo global de estilos.

División Híbrida

La otra forma de estructurar una aplicación React-Redux es la híbrida. En este caso, sería una combinación entre las distintas formas expuestas anteriormente.

Las formas de combinarlas dependerá del proyecto y del gusto del equipo que esté desarrollando ese proyecto.

Y tú Piero, ¿qué usas?

En lo personal he usado bastante la división por componentes y manteniendo la carpeta views|containers. Así se me ha hecho bastante fácil para poder hacer cambios, refactorizar, etc.

Conclusiones

Una primera conclusión de este post, es que no hay una forma de estructurar una aplicación en React-Redux que sea de consenso común. Es más, hasta ahora que termino de escribir este post, he encontrado otras formas de estructurar proyectos tales como forma1, forma2 y forma3. Por lo tanto, cada una depende de la aplicación que se esté desarrollando.

Una segunda conclusión, tal como lo dice la documentación oficial, es que no hay que gastar mucho tiempo en analizar cual es la mejor para mi proyecto. Es mejor comenzar con alguna y, a medida que nuestra app vaya creciendo en complejidad, vamos adaptando la estructura.

Como pudieron leer, en este post nos enfocamos más en la parte de React más que en los archivos relacionados con Redux. En los ejemplos mostrados, vemos que los archivos relacionados con Redux están separados en 3 carpetas: actions, reducers y contants|types. Si bien esta forma es vista constantemente en cursos online y tutoriles, hay una alternativa que se llama ducks, lo cual será tema para un futuro post 😎.