Al utilizar React JS, tenemos libertad de definir una estructura de archivos que se adecue a las necesidades del proyecto y es por esto que seguiremos una estructura principal que servirá como guía coordinada de programación.
Se manejará una estructura jerárquica de archivos los cuales se agruparan según el alcance de sus componentes.
dist: la carpeta “dist” se genera al realizar una build del poryecto, esta carpeta contiene los archivos necesarios para levantar el sistema a un servidor ya sea de testing, pre producci’on o producción.
node_modulos: contiene los archivos de todas las bibliotecas utilizadas en el proyecto.}
public: son los archivos y documentos publicos que se incluiran en el proyecto por ejemplo el logo del sistema, favicon y otros recursos que puedan ser accesados por el sistema.
src: Aqui se encuentra el nucleo de todos los archivos utilizados en la programaci’on del sistema(componentes, páginas, hooks, funciones, rutas, apis, etc...”.
api: En esta carpeta se concentras los llamados a cada uno de los endpoints utilizados en el sistema.
apiTest: en esta carpeta se lozalizan funciones dammy que emulan un llamado a la api, utilizado principalmente como pruebas de concepto y de funcionamiento de las funciones realizadas.
assets: Aqui se encuentran los archivos relacionados con los estilos, fuentes e imagenes utilizadas en el proyecto centralizado.
scss: aqui se encuentran los estilos utilizados por el template y estilos propios de cada uno de los componentes utilizados en el sistema.
fonts: Aquí se encuentras las librerias de los iconos utilizados por el template.
images: imagenes utilizadas en el sistema como recursos graficos.
components: Aqui se encuentran los componentes funcionales de cada uno de las paginas de la aplicacion, esta carpeta esta dividida en subcarpetas que estructuran los tipos de componentes utilizados.
const: Son las variables constantes a utilizar en la aplicación, por ejemplo version del sistema, y endpoint base de las api de desarrollo
hooks: en esta carpeta se guardan y clasifican los hooks utilizados por los componentes y/o paginas para tratar de seperar en la medida de lo posible la funcionalidad de la estructura de las paginas creadas.
pages: son las paginas base de cada uno de las secciones o paginas del sistema, aqui es donde se estructura la “maqueta del sitio web”
routes: aqui se almacenan los archivos que tengan que ver con las rutas de navegaci’on del sistema, estas estan divididas en 3 archivos principals, las rutas publicas, privadas y de autenticación.
store: aqui se encuentran los archivos de configuraci’on del local storage que es utilizado para el funcionamiento del sistema, tener en cuenta que las apis deben ser declaradas en el store para ser utilizadas independiente de si se guarden en el local storage o no.
Estructura de Archivos
