React - Estructura de carpetas

En busca de la manera correcta de ordenar mi aplicaci贸n en react

Stiven Castillo
3 min readApril 13, 2022

Como muy bien se describe en la p谩gina de react: "React doesn鈥檛 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.