Mejora el orden en tus proyectos de React

Organizar los proyectos es una parte muy útil, aunque algunas veces es tedioso o confuso. Y para el caso de usar un lenguaje como JavaScript, el cual es muy flexible y permisivo en algunas cuestiones de orden. Es el deber del desarrollador de tener una consistencia en el código y en los archivos.

Por ello en este post vas a aprender como organizar tus aplicaciones y website hechas en React de forma flexible y ordenada para mejora la arquitectura de la misma.

Para ello he revisado diferentes formas y arquitecturas de otros frameworks y otros lenguajes, como Angular, el cual es una gran referencia para poder tener un proyecto escalable y organizado a su vez. Además, que Angular utiliza concepto del Backend para su uso y desarrollo, aunque no queremos imitarlo completamente, permite mantener integraciones más fáciles. También nos permite emplear principio S.O.L.I.D. y el principio D.R.Y.

Entre otras están las capas que maneja la clean arquitecture,

• Capa de presentación es responsable de la interfaz de usuario y se compone de componentes de React.
• Capa de dominio es responsable de la lógica de negocio y se compone de objetos de modelo y lógica de negocio.
• Capa de infraestructura se encarga de la conexión con los servicios externos y se compone de objetos que realizan peticiones a una API o acceden a una base de datos.

Dentro de la carpeta src pondremos el orden por utilidad otras carpetas con la siguiente distribución.

      
        
      
      /src
  /infrastructure
    /api
    /database
  /domain
    /models
    /services
  /presentation
    /components
    /pages
    /hooks
    /context
  /styles
  /types
  index.js
    

Para aclarar aún más el uso de las diferentes carpetas, aquí va un explicación de cada una de las secciones importantes de la estructura:

• infrastructure contiene todo lo relacionado con la conexión con servicios externos, como el acceso a una API o una base de datos. Dentro de esta carpeta se pueden encontrar sub carpetas como api o database para agrupar estos servicios.
• domain contiene los objetos de modelo y la lógica de negocio de la aplicación. Dentro de esta carpeta se pueden encontrar sub carpetas como models o services para agrupar estos objetos.
• presentation contiene todo lo relacionado con la interfaz de usuario, como componentes de React, páginas, hooks y context.
• styles tiene los archivos css-in-js, css, scss, etc.
• types contiene las interfaces y tipos creados con TypeScript (en el caso de usar TS).
• index.js es el punto de entrada de la aplicación. Sin embargo, de esta misma distribución de carpetas se puede lograr sintetizar y adaptar a los proyectos, por ello también voy a mostrar otra estructura que mantenga los conceptos ya dichos:

      
        
      
      /src
   /api
   /services
   /components
   /pages
   /hooks
   /store
   /styles
   /types
  index.js
    

Ya con estas ideas de organización, se puede generar más carpetas según las necesidades y gustos dentro del desarrollo, y obviamente eliminar otras que no sean relevantes.