MERN NOTAS

Primordialmente estas notas están elaboradas para hacer un mapa mental el cual me permita recordar
conceptos claves en los mecanismos de la tecnología MERN:

FRONEND: Considerando la estructura basica de una pagina web iremos desarrollando los conceptos
de react:

Header

BODY

FOOTER

Esctructura de archivos:
La estructura de archivos de react parte de una pagina web clasica HTML5 en donde se crea un
ambiente REACT el cual en el fondo es un clásico stript.js de alli se redirecciona a un index.js y luego
se redirecciona a un archivo llamado app.js

PARA QUE?: Se utiliza un traductor JS a HTML para agilizar la creación de paginas con la opcion de
crear componentes similares a un etiqueta HTML pero con la ventaja que nos permite un lenguaje
orientado a objetos, herencia, polimorfismo, importación, clases E.T.C, Estas características son las que
hacen posibles las actules paginas web.
COMPONENETES: Los componentes son archivos js los cuales simulan una etiqueta HTML dentro
del ambiente REACT es decir se pueden crear archivos que hacen uso de otros archivos para crear una
funcionalidades especificas.
Esta caracteristica se utiliza en la estructura basica de archivos de REACT, cuando el archivo index.js
ya esta llamando a un componente REACT el cual simula una etiqueta HTML en el entorno JS.

Introducción al ROUTER
El router DOM tecnología open source la cual se emplea para redireccionar las vistas de la pagina web
se utiliza en base de etiquetas JS las cuales son:

<Router> y <Switch>

Sin embargo la gracia no es mostrar un ejemplo de juguete, sino una aplicación y estructuración al uso
cotidiano, es decir crearemos una estructura de archivos las cuales contengan en su interior
componentes que se adapten a un uso real:

Ejemplo estructurado: Para entender la estructura de los directorios y etiquetas componente utilizadas
en este eemplo nos basaremos en la estructura clásica de una pagina, si observamos una pagina web
tiene un header el cual suele tener botones de navegación como: ‘iniciar sesión, home, proyectos,
informacion’ entre otros, bueno vamos a construir los primeros directorios y funcionalidades
basandonos en esto, (en la imagen 2.0 hay una ilustración de una barra de navegación)

imagen 2.0

Basándonos en la imagen crearemos directorios que contengan funcionalidades relacionas a esta clasica
barra de navegación.

Para abarcar la creación de directorios fragmentaremos la concepción de la barra de navegación a nivel

interno, es decir por lógica y teniendo en cuenta la estructura de react nos toca pensar en un
componente que contenga los estilos y cada botón que se presenta, sin embargo react por si solo no
cuenta con una tecnología que redireccione la vista de la pagina, es decir que si tocamos el botón
proyectos salga la pagina de proyectos, para solucionar este problema haremos uso de la tecnología
router la cual nos permite hacer la redirecion.

Teniendo en cuenta que se requiere una librería para la redireccion, crearemos un directorio para
contener toda la logica de redirecionamiento:

Al directorio lo llamaremos: “routes”

En su interior crearemos un archivo base por decirlo así, en donde se importara cada pagina o vista
según sea la dirección solicitada, EJ:
imagen 3.0

Si se observa detalladamente la imagen se vera que en el argumento de path se pasa un objeto el cual
contiene la correspondiente ruta, en la penúltima ruta se define un rol e igualmente se pasa un objeto,
entonces crearemos un directorio que contenga estos objetos, denominaremos a esta carpeta como:
“helpers” y contendra un archivo “roles.js”y otro “routes.js”

routes:

imagen 4.0
roles:

imagen 4.1
Ahora se requiere una carpeta para que contenga cada archivo que sera cargado como vista, a esta le
llamaremos: “pages” y contendrá los diferentes archivos que se requieran:

imagen 5.0

Estructura del router y sus componentes: Llegados a este punto, tenemos que pensar en las
diferentes funcionalidades que nos ofrece el router, por ejemplo tener una direccion guardada,
remitirnos al login y re dirigirnos a la ruta deseada.

Para entender la estructuración del router debemos remitirnos al concepto del App.js que genera react
automáticamente con npx-create, pues es el nivel mas alto a manejar idealmente después del Index.js,
en este archivo colocaremos el router, esto con el fin de permitirnos una re dirección de toda la vista,
dentro de este colocaremos un componente encargado de darnos las funcionalidades, como loguear, el
rol entre otras que se puedan requerir, este archivo viene a ser el AuthProvider.js, posteriormente el
archivo encargado de dotar a toda la pagina de una barra de navegacion, en este caso lo llamaremos
Layout.js y por ultimo dentro de todo el mapa o encargado de la re dirección el cual mostrara las vistas
correspondientes, este archivo lo llamaremos AppRouter.js

imagen 6.0
Control de cambio de contraseña: El control de claves sera un componente que haga parte de la sección
de cuenta, entonces se manejara de igual manera un modal que nos permita controlar el estado del
formulario: pero para acceder al estado del formulario se requiere de una dependencia adicional la cual
es “react hook form”, para instalarlo solo hace falta ejecutar el código:
yarn add react-hook-form
Esta librería nos permitirá facilidades internas, entre ellas el famoso onSubmit el cual es enviar o
ejecutar la acción luego de presionar un botón o comando especificado, para construir un onSubmit que
pueda leer los valores que contiene el formulario se hará uso de una función creada en el contexto del
código para que la función interna de onSubmit pueda leer los valores.

Crearemos un directorio que contenga la lógica de cerrar y abrir ventanas emergentes, esta carpeta la
llamaremos “hook” y estará a nivel del App, y llevara la respectiva lógica: