# React - Folder Structure Dentro de un proyecto de React, automáticamente se crean las carpetas: - public - src Dentro de la carpeta _public_ se encuentra el archivo _index.html_ que se publicará como el inicio de la aplicación web, asimismo, se incluye todos los elementos que tienen que ver con el _index.html_ Por otro lado, en la carpeta _src_ se colocan todos los archivos _.jsx_ o _.tsx_ relacionados con nuestros componentes, adicionalmente, se colocan los archivos js o ts relacionados con nuestras configuraciones de _Redux_, _Context_, _API_ entre otros, por lo que, es esencial realizar un orden acerca de los elementos que se incluirán en la carpeta _src_. Organización de _src_: src/ |--client |--components |--content |--context |--pages |--state |--assets |--config |--models |--utils |--forms |--mocks |--environment |--translate routes.ts index.js app.js ## Client En esta carpeta va todo lo relacionado con un apollo client esto para consumir lo que es graphql los queries y los mutations que se necesiten |client ---|nombre -----\queries.ts -----\mutations.ts ## Components Dentro de esta carpeta se colocarán todos los componentes que se utilizarán dentro de las páginas, con la siguiente estructura: |components ---|nombre-componente -----\nombre-componente.component.[jsx|tsx] -----\nombre-componente.styles.[css|scss] ## Content Nos sirve para crear un intermedio entre el componente de ruta y el componente donde se encuentra renderizado nuestro HTML en este componente se cargan lo que se son las peticiones a nuestro servidor de graphql, en este se hacen esas peticiones que recargan el cache existente , esto se hace por que esas funciones llegan a ser bastante grandes ## Context Dentro de Contex podemos crear algo muy similar a lo que es REDUX el cual es un arbol de state que es global en toda nuestra app, podemos crear diferentes context para usarlos en la app |context -----\nombre.context.[jsx|tsx] ## Pages Dentro de esta carpeta colocaremos todas las páginas que se verán en nuestra aplicación, por ejemplo, la página de _Login_ se colocará en está carpeta. Siguiendo el mismo patrón que los componentes. |pages ---|nombre-pagina -----\nombre-pagina.component.[jsx|tsx] -----\nombre-pagina.styles.[css|scss] -----\nombre-pagina.data.[js|ts] ## Redux/State Dentro de esta carpeta se colocará todo lo referente a Redux. Asimismo, dentro de esta carpeta es recomendable crear una carpeta por módulo. |redux/state root.reducer.js store.js ---\modulo -----\modulo.actions.js -----\modulo.utils.js -----\modulo.reducer.js -----\modulo.types.js ## Assets Dentro de esta carpeta se colocan todos los archivos que no tienen que ver con la programación de nuestro proyecto, tales archivos como los multimedia, pdf, documentos, entre otros. |assets ---\images -----logo.png ---\videos -----cover.mp4 ---\docs -----instructions.txt ## Config Dentro de esta carpeta, colocaremos todas las configuraciones referentes a librerias externas, como la configuración de _Firebase_, _AWS Cognito_, entre otras. |config ---\firebase -----firebase.config.[js|ts] ---\aws -----aws-exports.[js|ts] ## Models Dentro de esta carpeta colocaremos todos los modelos de nuestra aplicación, para definir la estructura de los objetos. |models ---\user -----user.model.ts ## Utils Dentro de esta carpeta se colocarán aquellas funciones o porciones de código que pueden ser reutilizables dentro de diferentes componentes, páginas, entre otros. |utils ---\filter -----filter.util.[js|ts] ## Forms Para la validacion de los formularios , en este caso se uso yup y yup necesuta un schemma de formulario donde pondremos todos los campos que usaremos, estos pueden ser requeridos o no , tambien podemos asignarle un tipo de datos |forms -----nombre.schema.[js|ts] ## Mocks Los mocks son simplemente datos estaticos los cuales sirven cuando no tenemos una base de datos disponible |environment -----nombre.data.[js|ts] ## Environments Dentro de esta carpeta se colocarán los archivos de ambientes de producción los cuales contienen información acerca de datos de configuraciones correspondientes a determinado ambiente. |environment -----environment.prod.[js|ts] -----environment.[js|ts] # Translate En caso de que nuestra app use mas de un idioma nostros podemos tener los archivos con mensajes o textos en varios idiomas, tambien tenemos el archivos de configuracion para el uso de idiomas de nuestra app |translate -----nombre.json -----index.[js|ts]