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:

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.

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]