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

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