React - Estructura de carpetas

Voy a ir exponiendo las estructuras de carpetas que he usado a lo largo de mi trabajo como frontend dev tanto para Reactjs como para React Native.

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.