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.
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...)
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.
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.
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.
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.
Muchas gracias por llegar hasta acá y claro se agradecen todos los feedback posibles
Y no lo olvides, ¡nunca dejes de aprender!
Top comments (0)