# React - Estándar

En este documento describiremos el estándar para nuestras aplicaciones de React.

## Nombre de archivos y carpetas
Para el nombre de nuestras carpetas, colocaremos el nombre en lower case y en caso de que el nombre de la carpeta contenga más de una palabra, los separaremos con guión medio.
Ejemplo: `list-users`

Dentro de las carpetas, el nombre de los archivos seguirán el mismo patrón que el de las carpetas, con la diferencia que entre el nombre del archivo y la extensión del archivo se colocará un identificador del archivo.
Ejemplos:

|list-users
---list-users.component.[jsx|tsx]
---list-users.styles.[css|scss]
---list-users.data.[js|ts]

## React Hooks
En la mayoría de proyectos, al utilizar _React_ con _Redux_ resulta más sencilla utilizar funciones en lugar de clases para nuestros componentes. Por lo que, _React Hooks_ es una herramienta esencial para manejar el estado dentro de nuestros componentes. Para ello, debemos definir un estándar acerca de su uso. Para las variables de _Hooks_ utilizaremos la notación de _CamelCase_. En caso de que el valor del hook sea un objeto, colocaremos el objeto dentro de una variable y después lo asignaremos al hook, como en el siguiente ejemplo:

## Redux
Dentro de Redux, en la parte de la configuración en los componentes, se utilizará la librería `react-redux`, especialmente se utilizará el método `connect` para conectar _Redux_ con los componentes.
Para conectar _Redux_ con los componentes se seguirá un orden, primero se colocará la función que hace referencia al componente y después se colocarán las conexiones con las variables y los métodos.


Por otra parte, el código de _Redux_ se coloca dentro de una carpeta llamada _State_ y dentro de ella se colocan carpetas por modulos. Para más información, consulta la siguiente wiki: [React Folder Structure](https://hackmd.io/@codemind/rkDWptVPO)

Dentro de cada módulo, en su respectiva carpeta, se deben colocar los siguientes archivos:
1. [module].actions.[js|ts]
2. [module].reducer[js|ts]
3. [module].types[js|ts]

### actions.[js|ts]
En este archivo se definen las funciones que se podrán ejecutar con Redux. Estás acciones contienen un _type_ que es el tipo de acción a ejecutar y un _payload_ el cuál contiene los datos necesarios para ejecutar esa función.
Ejemplo:

### reducer.[js|ts]
Dentro de este archivo es el cual evaluara las acciones y es igual donde dependiendo la accion a evaluar se procedera a editar el state inicial

### types.[js|ts]
Es donde declararemos los valores de las acciones a evaluar

## Router
Para las rutas se utilizará un archivo `router.[js|ts]`, en el cuál se deplegarán las rutas de nuestra aplicación, las rutas se definirán dentro de un arreglo con los siguientes datos:

{
    path: pathname<string>,
    exact: isExact<boolean>,
    id: ID<string>,
    component: component<string>
}

Para el pathname se utilizará _lowercase_, en caso de requerir más de una palabra en el pathname se separará mediante guión.
Ejemplo: `/user-details/:id`