React - Estructura de carpetas
En busca de la manera correcta de ordenar mi aplicación en react
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.