Cómo organizo un proyecto en React, Redux y SASS

Cada equipo llegará a un consenso sobre la organización en carpetas de sus proyectos de forma que sea lo más sencillo posible encontrar un archivo sin tener que buscarlo desde index.js. Aquí dejo como organizo mis proyectos, teniendo en cuenta que siempre uso redux.

• src
  • action-creators/
  • action-types/
  • api/
  • components/
    • common/
  • pages/
  • reducers/
  • sass/
    • base/
      • _base.scss
      • _fonts.scss
      • _grid.scss
      • _mixins.scss
    • layout/
    • _variables.scss
    • main.scss
  • App.js
  • index.js

Los “action-types” tienen sus propios ficheros porque se utilizan en los action creators y en los reducers, no le veo sentido a meterlo en uno de esos porque la importación de los reducers en los action creators resulta marciana; lo mismo ocurre al revés.

El api debe tener su propia carpeta, sea quien sea quien haga uso de las llamadas, estas son independientes de quien las usa. Las rutas pueden cambiar, así que tiene sentido que estén aisladas.

Dentro de “components” suelo tener una carpeta “common” y deberían ser candidatos a extraer a una librería propia con componentes genéricos, aunque también caben componentes que se utilizan en varios lugares de la web.

La carpeta “pages” contiene los componentes que sirven como “padres”, quiero decir, aquellos componentes que renderizan la página cuando se llama a una ruta. Por ejemplo, si tenemos una ruta “/products” y su componente asociado en la ruta lo llamamos “ProductsList”, que se encarga de llamar a otros componentes para componer la página de productos, iría en la carpeta “pages”.

En cuanto al SASS es indiferente si se utiliza Bootstrap, otra librería o ninguna, se trata de organizar nuestro código e importaremos lo que necesitemos.