React // Estructura de carpetas
Tags: react, programming, tutorial
Published: 2024-02-29 15:11:40


En este blog explicare detalladamente como se estructura y se crea el cuerpo de un proyecto en react, este ejemplo esta basado en un proyecto react

Gracias a la interfaz de comandos de Vite podemos crear nuestro proyecto en react

```
npm create vite@latest
```
A continuación te mostraré Personalmente defino la división y estructura de mis proyectos dependiendo de la complejidad, el tamaño y la cantidad de componentes que va a contener. Esto tienes que definirlo antes, al momento de armar la solución a la necesidad de tu cliente.la estructura de carpetas que usualmente uso en mis proyectos con react.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j3gr36zjoqr2eimdeje.png)

Como se puede apreciar dentro de la carpeta **src** podemos ver 5 sub-carpetas que están al mismo nivel:

**ASSETS:** Esta carpeta contendrá todo lo relacionado a la imagenes (ico, svg, png...)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kozkkfbfu7byl5qsmsk7.png)

**PAGES:** Esta carpeta contendrá todos los componentes o archivos que representan páginas completas en tu aplicación o sitio web. 
Pages se enfoca en las unidades completas que normalmente están asociadas con rutas específicas en tu aplicación.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeh9vcwrb9595i2ovpgj.png)


**SHARED:** 
Dentro de ella tenemos las siguientes subcarpetas:

**adapters**: Se utiliza para adaptar los datos recibidos de o enviados a una API externa, asegurando que el formato de los datos sea compatible con el resto del proyecto.

**animations**: Contiene animaciones CSS o JavaScript que pueden ser aplicadas a varios componentes o vistas en el proyecto. Mantenerlas en una carpeta dedicada facilita la reutilización y la consistencia en las transiciones y efectos visuales.

**components**: Contiene componentes de UI reutilizables en varias partes del proyecto, como botones, modales, y formularios.

**config**: Agrupa archivos de configuración que pueden incluir configuraciones de entorno, flags de características, y cualquier otro tipo de configuración global necesaria para el funcionamiento de la aplicación.

**constants**: Alberga valores que no cambian a lo largo del proyecto, facilitando su mantenimiento y reutilización.

**context**: Destinada para los contextos de React, esta carpeta es crucial para manejar estados globales accesibles por múltiples componentes en la aplicación, como temas, autenticación, y preferencias del usuario.

**hooks**: Aquí se definen hooks personalizados de React que encapsulan lógica de estado o efectos para ser reutilizados en varios componentes.

**providers**: Incluye componentes que proveen contexto a partes del árbol de componentes, como temas o datos de autenticación.

**types o interfaces**: Especialmente útil en TypeScript, esta carpeta contiene las definiciones de tipos y interfaces para estandarizar los objetos y funciones en el código.

**utils**: Funciones de utilidad general que pueden ser necesarias en distintas partes del proyecto, como formateadores de fecha, validadores de entrada, etc.


**services**: Contiene la lógica para interactuar con APIs externas o manejar datos complejos. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxzx2ed07l0oecl9wxy0.png)


**STYLES**: esta carpeta se centra exclusivamente en definiciones de estilo, temas, y utilidades de CSS que pueden ser aplicadas globalmente o importadas según se necesite en componentes específicos.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwkhmtgx92ro9sge7x9o.png)



**VIEWS**: Componentes que actúan como partes de la interfaz de usuario pero son más específicos que los componentes básicos, como cabeceras, pies de página o layouts complejos.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqnv5qeqrqozohms4bo0.png)

Muchas gracias por llegar hasta acá y claro se agradecen todos los feedback posibles

> Y no lo olvides, ¡nunca dejes de aprender!