8

Como estructurar tu proyecto React

¿Cómo debo estructurar mi proyecto? 😩😫

Esta es una pregunta que solemos hacernos al menos una vez cuando iniciamos un proyecto en cualquier lenguaje o framework, solo que en algunas tecnologías estas estructuras están más definidas que en otras.

Sin embargo, esto no ocurre con React, me he encontrado muchas formas de estructurar un proyecto, pero no he visto ninguna estructura oficial o una definida por alguna comunidad como la mejor a seguir para esta tecnología.

En la documentación oficial nos encontramos con la respuesta a esta pregunta, donde también nos advierte sobre el exceso de anidación.

¿Hay una forma recomendada de estructurar los proyectos React?

  • React no tiene opiniones sobre cómo poner los archivos en carpetas. Dicho esto, hay algunos enfoques comunes que son populares en el ecosistema que podrías considerar.

  • Recuerda que a menudo es más productivo tratar estas metodologías como ejemplos útiles en lugar de reglas estrictas a seguir.

Evita el exceso de anidación

  • A menos que tengas una razón muy convincente para usar una estructura de carpetas profunda, considera limitarte a un máximo de tres o cuatro carpetas anidadas dentro de un solo proyecto.
<h4>Por supuesto, esto es solo una recomendación y puede que no sea relevante para tu proyecto.</h4>

A continuación, les presento un resumen de las distintas formas de estructura que me he encontrado durante el tiempo que he usado esta tecnología.

División por concepto o funcionalidad

Se basa en agrupar los archivos por concepto o por la función que cumplen. Todos los componentes en una carpeta llamada Components, los estilos en una carpeta Styles, los test en una carpeta Tests y así sucesivamente.

<h3>Características</h3>
  • Todas las carpetas almacenan un tipo de contenido, dado el caso se necesite modificar algo relacionado con los estilos, iríamos a la carpeta Styles, o si necesitamos modificar un componente iríamos a Components, y así respectivamente.

  • Usar esta estructura hace más complejo el mantenimiento de una aplicación a gran escala, debido que al añadir o modificar algún componente o característica tendremos archivos en distintas carpetas, y en una aplicación grande tendríamos que abrir 2 o más carpetas con enormes cantidades de archivos.

Imágenes

porConcepto.jpg
<h5>Recomendada para aplicaciones pequeñas.</h5>

División por vistas

Esta estructura organiza por vistas. A cada sección de la aplicación se le asignará una carpeta con su nombre y será alojada dentro de una carpeta llamada Views, los componentes seguirán en la carpeta Components, al igual que todos los archivos ya relacionados como los estilos dentro de Styles, de la misma forma que en la división por concepto o funcionalidad.

<h3>Características</h3>
  • Al separar las vistas cada una tendrá un archivo especifico lo cual hará que al momento de ocurrir un bug o añadir una nueva característica en alguna sección de tu página, será más rápido y sencillo.

  • Las vistas solo se encargan de mostrar contenido, no almacenan lógica.

Imágenes

porVistas.jpg
<h5>Recomendada para aplicaciones pequeñas y medianas.</h5>

División por componentes

Como su nombre lo indica, trabajaremos con los componentes. Todos los componentes serán alojados en una carpeta llamada Components. A cada componente se le asignará una carpeta con su nombre y dentro de ella almacenaremos todos los archivos relacionados a dicho componente, como los css, test y js.

<h3>Características</h3>
  • Menos carpetas, debido a que serán eliminada las carpetas Styles y Tests. Ya que cada componente contendrá sus propios archivos.

  • Se pueden hacer modificaciones mucho más rápidas a los componentes. Si necesitamos modificar los estilos de un componente podemos dirigirnos directamente a su carpeta y modificamos su archivo css, en vez de buscar por una clase o id en el archivo global de estilos.

Imágenes

porComponentes.jpg
<h5>Recomendada para todo tipo de aplicaciones.</h5>

División Híbrida

Esta no es más que una combinación entre las distintas formas detalladas anteriormente. La forma en que las combines dependerá del proyecto, tu forma de trabajar y de la comodidad del equipo de desarrollo.

Una muy buena combinación que suelo usar mucho, es la división por vistas junto a la de componentes. Solo cambio el nombre de la carpeta Views por Containers debido mi uso frecuente de Redux. Dando como resultado pocas carpetas y una estructura cómoda y fácil de entender.

Imágenes

miEstructura.jpg
<h5>Esta es una estructura que suelo usar para proyectos medianamente grandes.</h5>

División usando Redux

Como pudieron leer, me enfoque en React más que en los archivos relacionados con Redux.

Para efecto de este tutorial me tome la libertad de crear tres ejemplos de un proyecto con React y Redux. Son algo sencillos, pero me han sido de ayuda para algunos proyectos. Hablare más sobre ello en otro tutorial que haré para el curso de Redux.

Imágenes

usandoRedux.jpg
<h5>Recomendada para aplicaciones con Redux.</h5>

Conclusión 🎉🎉

<h3>No hay una forma definitiva de como estructurar una aplicación en React. 🤷‍♂️</h3>

Tal como explican en la documentación oficial.

¡No lo pienses demasiado!

Si estás comenzando un proyecto, no gastes más de cinco minutos en elegir una estructura de archivos. ¡Elige cualquiera de los enfoques anteriores (o crea uno propio) y comienza a escribir código! Probablemente querrás volver a pensarlo de todos modos después de haber escrito código real.

No hay que gastar mucho tiempo en analizar cuál es la mejor para mi proyecto. Es mejor comenzar con alguna y, a medida que nuestra aplicación crezca en complejidad, vamos adaptando y mejorando la estructura.

<h1>Y tú, ¿Cuáles usas? 🙌</h1>
Escribe tu comentario
+ 2
Ordenar por:
4
10924Puntos

Está excelente tu post (: añado un excelente consejo:

separar los estilos de los componentes no es lo adecuado. Si no se trabaja con estilos jsx o inline o modulares es porque se están haciendo en archivos css que son llamados dentro del componente.

Es más fácil mantener cada estilo de cada componente a lado suyo, antes que poner un folder “copia” de tus componentes pero almacenando los estilos. Cuando tienes un proyecto con 300 componentes es cuando empiezas a ver este tipo de prácticas.

3
4 meses

Gracias! Esa es una muy buena recomendación. 👌

3
1916Puntos

Excelente post, sin embargo en la Division Hibrida y en la Division usando Redux no esta del todo claro, donde pones los estilos 😃

1
2 meses

Los estilos se encuentra dentro de la carpeta del componente al cual corresponden.

Si miras detalladamente en la imagen de la División Híbrida el lado izquierdo esta expandido. Verás que en el caso del componente Modal y Navbar cada uno de ellos contiene sus respectivos estilos.

2
1916Puntos
2 meses

ahh se me paso porque el archivo dice styles.js

2
2150Puntos

Muy buen post, me sirvió de mucho, muchas gracias.