React - Estructura de carpetas

Como muy bien se describe en la página de react: "React doesn’t have opinions". No proponen una estructura ideal para organizar una aplicación en react.

Voy a ir exponiendo y explorando diferentes estructuras de carpetas que me han ayudado o me pueden ayudar en un futuro a plantear una arquitectura sólida para el trabajo en equipo.

React

Esta es la estructura base que uso para mis proyectos en React.

  public
  src
    components
    config
    hooks # custom hooks
    pages
    services
    store # redux
    styles
    App.tsx

components

Esta es la base de un componente:

components
  ComponentName
    ComponentName.tsx
    ComponentName.test.tsx
    ComponentName.styles.ts/css/scss # según lo que esté usando para estilos
    components # componentes hijos
      ...

Me gusta dividir los componentes por contexto, por ejemplo, si hacen parte del formulario los creo dentro de una carpeta Form:

components
  Form
    InputPassword
      InputPassword.tsx
      ...
    Dropdown
      Dropdown.tsx
      ...

Nunca uso la notación ComponentName/index.ts puesto que me molesta las pestañas tan largas en el editor de código. Siempre uso ComponentName/ComponentName.ts

config

En esta carpeta me gusta tener todo con la configuración del proyecto: constants, routes, language/i18n, etc.

hooks

Si, mis f**ing hooks. A veces los creo desde cero, a veces me los robo de algún repo de github o me los encuentro en algún post.

pages

Con las páginas sigo la misma estructura de un Componente.

pages
  HomePage
    HomePage.tsx
    HomePage.test.tsx
    HomePage.styles.ts/css/scss
    components # componentes hijos
      ...

services

Esta carpeta va a contener scripts que me ayuden con algunas tareas que se repiten a lo largo del proyecto como: formatDate, sortProductList, errorTracking, etc. Otros devs llaman a esta carpera utils.

services
    FormatDate
      FormatDate.ts
      FormatDate.test.ts

store

Normalmente uso Redux para mis proyectos personales o cuando tengo que iniciar un proyecto nuevo. La carpera store lo que al final va a tener es el manejo global del estado, no importa si es redux, overmind, context/reducer, etc.

store # redux
      hooks.ts
      resources.d.ts
      features
        users
          usersSlice.ts

React Native

En proyectos con React Native no cambia mucho, a las pages las llamo screens, cada componente tiene un archivo de estilos y creo wraps para los componentes de terceros (para no depender de uno solo)

Trato de mantener siempre la misma estructura base, no es compleja y me deja toda la comodidad para empezar un proyecto rapidamente.

El proyecto irá evolucionando junto con la arquitectura de carpetas, pero para comenzar esta estructura me funciona bastante bien.

Multi-package monorepo

El objetivo general de esta arquitectura es brindar una organización a nivel de features o características con el fin de descomponer el código en pequeñas 'aplicaciones' que pueden ser mantenidas por diferentes squads, permitiendo la independecia de cada uno de ellos.

Aquí un ejemplo:

├── packages
│   ├── core
│   │   ├── button
│   │   │   └── package.json
│   │   ├── layout
│   │   └── styles
│   └── product
│       ├── board
│       ├── issue
│       ├── sidebar
│       │   ├── data
│       │   ├── shared
│       │   └── ui
│       │       ├── development-section
│       │       └── planning-section
│       └── topbar
│           ├── logo
│           └── top-menu
└── website
    ├── pages
    │   └── issue
    └── public

Voy a escribir un post extenso hablando de esta arquitectura: Feature-Driven Development.