Ahora, que hemos completado la actualización del lado del servidor.
Es hora de pasar al cliente reaccionar.
Para su comodidad, le he proporcionado el repositorio de GitHub,
que contiene la versión final del cliente que es capaz de comunicarse con
nuestro servidor API REST y luego renderizar las diversas vistas para nuestro cliente.
Por lo tanto, he tomado la reaplicación que desarrollamos en
el segundo curso de la especialización y luego la modificamos.
Haremos un breve recorrido por el código un poco más tarde.
Ahora, clonará el repositorio de Git en su computadora,
luego iniciará su cliente y luego lo verá comunicarse con nuestro conjunto de servidores.
Veamos los detalles a continuación.
Para comenzar con este ejercicio,
en su terminal o ventana de comandos,
vaya a su ubicación conveniente y, a continuación, escriba git clone
https://github.com/jmuppala/conFusion-React.git, y luego deje que
la aplicación React se clone en su computadora.
Una vez completada la clonación,
muévase a la carpeta Confusion-React
que acaba de crearse cuando clonó este repositorio de Git.
Luego, inmediatamente notará que ya hay un montón de archivos allí.
Ahora, en el símbolo del sistema, escriba yarn install, con el
fin de instalar todos los módulos de nodo de los
que depende esta aplicación React.
Por lo tanto, una vez que los módulos de nodo están todos instalados,
entonces podemos iniciar nuestro hilo empezar a compilar y servir a nuestra aplicación React.
Una vez que todo esté dentro,
asegúrese de que su servidor MongoDB está
funcionando y también su servidor de API REST también está en funcionamiento.
De lo contrario, el cliente no funcionará.
Por lo tanto, ahora que ha instalado su cliente en su computadora,
agregue el inicio del hilo de tipo de solicitud
y su aplicación se volverá a compilar y servirá en un corto tiempo.
Una vez que su aplicación se haya compilado correctamente,
vaya al navegador y verá que
su aplicación React se inicia y es visible en la pantalla aquí.
Usted notará inmediatamente que su aplicación es
capaz de obtener los datos del servidor y luego representar
las diversas partes de su aplicación como lo
hizo al final de su curso React.
Cuando vaya a la carpeta Acerca de,
también verá que la página Acerca de también representa la información.
Como tal anteriormente en el menú,
verá los elementos en el menú que se muestran al igual que vimos con la aplicación.
Ahora, además, he agregado en
una página más a la aplicación de una sola página llamada Mis favoritos,
a la que no puede navegar,
porque ningún usuario ha iniciado sesión en su sistema.
Por lo tanto, ve que no tengo ningún usuario iniciado sesión en el sistema.
Por lo tanto, es por eso que no tiene sentido indicar mis favoritos porque no sabes
qué usuario como favoritos debe mostrarse aquí y la página de contacto como de costumbre.
Ahora, vamos a iniciar sesión.
Para iniciar sesión en nuestra aplicación,
haremos clic en el botón de inicio de sesión y luego verá que aparece el cuadro de diálogo de inicio de sesión.
A continuación, permítanme iniciar sesión como uno de los usuarios
registrados, que nos registramos como parte de este curso anteriormente.
Por lo tanto, una vez que inicie sesión,
inmediatamente notará que en la esquina derecha,
verá que el botón de inicio de sesión se ha convertido en
cierre de sesión y el nombre del usuario se indica aquí.
Por lo tanto, quienquiera que haya iniciado sesión se indica aquí.
También puede, en principio, reemplazar esto con la imagen del usuario.
Ahora, para eso necesita hacer más modificaciones
tanto al cliente como al servidor para admitir la visualización de la imagen aquí.
Pero por el momento, solo te estoy mostrando
cómo podemos mostrar fácilmente la información del usuario aquí.
Por lo tanto, esto requirió una modificación menor en el jefe del componente,
donde podré recuperar el nombre de usuario.
Por lo tanto, una vez que el usuario inicia sesión,
entonces si hace clic en Mis Favoritos
notará que no hay nada en Mis Favoritos para el usuario.
Obviamente porque el usuario aún no ha elegido ningún favorito.
Entonces, vamos ahora al menú.
Luego, en el menú,
déjame seleccionar un elemento y luego agregaremos este plato a nuestros favoritos.
Por lo tanto, bajando aquí abajo,
verá el símbolo del corazón allí,
haga clic en eso, y verá que esto se agregaría a los favoritos.
El hecho de que esto se haya agregado a los favoritos,
se indica por el cambio en el icono aquí de un corazón sin llenar a un corazón lleno.
Ahora, si vas a cualquier otro plato,
te darías cuenta de que esto tiene un corazón sin llenar
lo que significa que esto aún no está entre nuestros favoritos.
Por lo tanto, permítanme agregar un elemento más a
mis favoritos y luego agreguemos un tercer elemento a mis favoritos también.
Así que, ahora, verán que si ahora voy a mis favoritos,
verán un conjunto de Mis Favoritos mostrándose aquí.
Así que, viste que acabo de añadir estos tres platos
a mis favoritos y estos están siendo mostrados aquí.
Por lo tanto, esto se realiza mediante el uso de
ese extremo de favoritos en
el lado del servidor, lo que sea implementado como parte de su última asignación.
Por lo tanto, si ha hecho esa asignación correctamente,
entonces esta parte debería funcionar como se esperaba.
Ahora, también podemos modificar Mi favorito.
Por lo tanto, permítanme seguir adelante y eliminar uno de los elementos de Mis favoritos.
Por lo tanto, cuando haga clic en ese botón, notará inmediatamente que,
ese elemento se elimina de Mis Favoritos y desaparece inmediatamente y
mis favoritos se actualizan y verá el valor resultante que se muestra aquí.
Por lo tanto, observe que Mis Favoritos se mostrará sólo
para los usuarios que hayan iniciado sesión en el sistema.
Por lo tanto, inmediatamente nota un conjunto de cambios que se han
realizado en el cliente para admitir
algunas de estas características adicionales que se ven aquí.
También vio que la función de inicio de sesión y cierre de sesión era compatible aquí.
Entonces, cuando hago clic en el botón de cierre de sesión,
inmediatamente nota que el usuario se cierra la sesión y
el nombre de usuario desaparece de allí y
por lo que el botón también se convierte en el botón de inicio de sesión.
Ahora, entonces, con esto nota cómo se ha
actualizado mi cliente para hacer uso del nuevo servidor de API REST, con el
fin de admitir que los favoritos se guardan en el lado del servidor y
luego se reflejan automáticamente en la aplicación Mi cliente como se muestra aquí.
Ahora, que ha visto la aplicación React modificada en acción,
es hora de visitar el código fuente para ver
exactamente cómo se implementa y cuáles son los cambios
que hemos realizado correspondientes a la aplicación Redux al final del curso Redux.
Ahora, los dos cambios principales que notará,
es el soporte para favoritos y también el soporte de autenticación,
el soporte de inicio de sesión y cierre de sesión de usuario.
Ahora, ¿cómo se implementan?
Comenzaremos nuestro viaje en la parte Redux de nuestra aplicación.
Entonces, al entrar en la parte de Redux,
vamos a visitar los tipos de acción.
En los tipos de acción, verá ahora que tenemos
tres nuevos tipos de acción relacionados con sus favoritos.
Por lo tanto, vería los favoritos cargando,
los favoritos fallaron y agregaría favoritos,
que como esperaría estar allí.
Luego, también seis tipos de acción diferentes relacionados con su proceso de inicio de sesión y cierre de sesión.
Ahora, para que pueda ver solicitud de inicio de sesión, éxito de inicio de sesión,
error de inicio de sesión, solicitud de cierre de
sesión, éxito de cierre de sesión y error.
Por lo tanto, veremos cómo estos tipos de acciones se utilizan realmente en nuestra creación de acciones.
Por lo tanto, entrar en los creadores de acción,
así que aquí es donde verá el apoyo para los favoritos aquí.
Por lo tanto, primero examinaremos el soporte para favoritos y luego
examinaremos el soporte para el soporte de autenticación.
Por lo tanto, aquí, verá que tenemos nuevos métodos abajo
aquí llamados como FavoritesLoading, FavoritesFailed y AddFavorites.
Ahora, a partir de sus experiencias anteriores
DishesLoading y DishesFailed y AddPlates y así sucesivamente.
Por lo tanto, estas cosas son muy familiares para usted,
por lo que es exactamente el mismo tipo de configuración para el código aquí.
Además, verá otro método aquí llamado FetchFavorites,
que es de nuevo como dije un tanque Redux,
que se implementa aquí,
donde usaremos la búsqueda para acceder al servidor para buscar los favoritos.
Por lo tanto, estos son los métodos que verá aquí y luego también verá
DeleteFavorite aquí y también un tanque Redux para PostFavorite aquí.
Por lo tanto, en PostFavorite como
cabría esperar, estaría publicando el favorito en el servidor aquí.
Por lo tanto, aquí observe cómo estamos usando la autorización.
Al estar configurado en nuestro encabezado de autorización,
esto es algo que llamaría su atención en este momento,
volveremos a esto de nuevo cuando miremos la autenticación y autorización del usuario.
Por lo tanto, estamos configurando el encabezado de autorización como este usando fetch aquí.
Por lo tanto, para buscar, estamos publicando un elemento en la búsqueda
aquí y luego notará que la estructura de cómo se realiza la búsqueda se da aquí.
Ahora cada vez que publiques un favorito o elimines un favorito o busques un favorito,
siempre tendremos el servidor devuelto a ti,
todo el conjunto de favoritos y luego simplemente agregaremos estos favoritos
a nuestra tienda redux aquí, así que eso es lo que estamos haciendo aquí.
Una vez más, la estructura del código debería verse muy familiar para usted,
si simplemente mira cómo se
implementan el favorito de la publicación, el favorito de eliminación y los favoritos de búsqueda.
Por lo tanto, todos estos manejarán el tema de los favoritos.
Ahora, ¿cómo se implementan exactamente los favoritos en sí?
Por lo tanto, la función reductora se implementa en la estructura favorita aquí.
Por lo tanto, dentro de esta función reducida,
verá cómo manejamos los favoritos agregados, la
carga de favoritos y los favoritos fallaron aquí.
Una vez más, el código debería parecerle muy familiar en función de
su experiencia con las funciones de reductor que ha visto para redux antes.
Por lo tanto, vuelva a prestar un poco de atención a la forma en que se implementa el código.
Esto es bastante sencillo, así que no estoy gastando
demasiado tiempo explicando cómo se implementan estas cosas.
Ahora, aprovechando estos,
tenemos en los componentes que ahora tenemos
un nuevo componente de favoritos cuyo trabajo es renderizar toda la lista de nuestros favoritos.
Por lo tanto, aquí se ve que el componente de favoritos en sí,
la estructura del componente de favoritos es muy similar a
la estructura del componente de menú, así que aquí tenemos
el componente de favoritos que se implementa como un componente funcional y
allí estamos renderizando los favoritos en aquí como se ve en el código aquí.
Una vez más, muy sencillo creo que debería ser capaz de
entender fácilmente cómo se
implementa el componente de favoritos habiendo tenido experiencia con cómo se implementa el componente de menú allí.
Entonces, de nuevo, no estoy gastando demasiado tiempo explicando el código aquí.
Ahora analizar el código también es
una buena experiencia para que usted aprenda cómo se implementa el código, por lo que
procesar este código en su propia cabeza le ayudará a entender de nuevo
para consolidar su comprensión de reaccionar con más detalle.
Por lo tanto, dejaré eso como un ejercicio para ti.
Ahora estoy señalando dónde se han
realizado los cambios para implementar el soporte para favoritos.
Ahora el término favorito,
favoritos también es el apalancamiento en
el componente de detalle del plato y dentro del componente de detalle del plato,
verá que tenemos el adicional- Aquí,
en el componente funcional del plato renderizado,
vamos a renderizar el botón que admite
la selección o cuando haga clic en el contorno del corazón,
agregará ese elemento en particular a su lista de favoritos.
Por lo tanto, todo esto es compatible aquí mediante el uso de este botón aquí que
invoca como ves esta función llamada post favorito que es el redux.
Gracias que hemos implementado allí y este soporte para esto
se implementa en los componentes principales por lo que cuando entras en el componente principal,
verás cómo se implementa el post favorito aquí
y también verás que esto está
incluido en el mapa enviado a apoyos y así el post favorito implementado.
Por lo tanto, ve que la estructuración es muy la
misma que lo que ha visto para el otro código allí.
Por lo tanto, no voy a gastar demasiado tiempo en cómo se implementa el soporte de favoritos,
en su lugar permítanme dedicar un poco más de tiempo a cómo
se admite la autorización del usuario y la autenticación en el código aquí.
Ahora, para la autenticación de usuario,
lo que estamos haciendo aquí es que cuando entras a la tienda de configuración aquí,
verás que tengo una función reductora más llamada Auth que se implementa aquí.
Por lo tanto, eso rastreará la parte de autorización de la misma.
Ahora, ¿cómo se implementa esto?
Una vez más, entrar en acción creadores,
tipos de inacción ya hemos visto el conjunto de acciones relacionadas con el inicio de sesión y cierre de sesión.
Por lo tanto, al entrar en acción creadores,
verá que aquí arriba tenemos
todas las funciones que se implementan para iniciar sesión y cerrar sesión.
Por lo tanto, verá una nueva función llamada inicio de sesión de solicitud, registro de recepción,
y entonces estos son cuando el inicio de sesión es exitoso y así sucesivamente, pero en particular,
esta función particular aquí del usuario de inicio de sesión es donde comenzamos con el proceso de inicio de sesión.
Por lo tanto, enviaremos el inicio de sesión de solicitud en el punto en que el usuario intente iniciar sesión,
después de eso haremos una búsqueda a los usuarios barra final de inicio de sesión con
la publicación y esto contiene en el cuerpo del mensaje las credenciales para el usuario aquí.
Entonces, una vez que hacemos la búsqueda,
si la respuesta se devuelve correctamente,
entonces la respuesta debe contener el token allí.
Por lo tanto, procesaremos esa respuesta aquí abajo y luego, si el inicio de sesión fue exitoso,
entonces almacenaremos el token en el almacenamiento local aquí.
Por lo tanto, puede ver que estamos diciendo LocalStorage establece
token de respuesta token de elemento y luego
también almacenaremos las credenciales del usuario en el almacenamiento local aquí.
Por lo tanto, estos dos me ayudarán a rastrear el proceso de inicio de sesión del usuario.
Después de eso, enviaremos el inicio de sesión de recepción.
Ahora en este punto, cuando el usuario ha iniciado sesión con éxito,
también buscaremos los favoritos para el usuario.
Ahora recuerde que solo puede buscar los favoritos de un usuario que haya iniciado sesión.
Cuando ningún usuario ha iniciado sesión, no hay favoritos que buscar,
pero cuando el usuario inicia sesión correctamente, desea buscar
el favorito del usuario para que pueda mostrarlo en su aplicación reaccionar. Por
lo tanto, es por eso que también estoy haciendo una búsqueda de favoritos
aquí y luego vamos a recibir el inicio de sesión aquí.
Entonces, si hay un error, enviaremos el error de inicio de sesión aquí.
Por lo tanto, todas estas funciones el error de inicio de sesión de recepción y inicio de sesión
invocará las funciones reductoras adecuadas que se implementan en el archivo Auth.Js.
Así que al entrar en el archivo Auth.Js,
el estado aquí rastrea el estado de inicio de sesión del usuario aquí.
Por lo tanto, aquí también almacenaremos en el estado,
el estado implica el Booleano de carga Este que
rastrea si está en el proceso de iniciar sesión. La facilidad de autenticación -
Indicará si el usuario está autenticado y por lo tanto el usuario ha iniciado sesión,
por lo que podrá permitir que el usuario.
Por lo tanto, este indicador se utiliza en muchas circunstancias
para mostrar el estado de inicio de sesión del usuario y luego también
la propiedad del usuario para el estado rastrea las credenciales del usuario.
Entonces, ahí es donde obtendremos el nombre de usuario para mostrarlo en nuestro componente de encabezado.
Ahora, aquí verá la solicitud de inicio de sesión y cuando se active el éxito de inicio de sesión,
almacenará el valor del token aquí y luego el error de inicio de sesión.
La solicitud de cierre de sesión, cerrando con éxito,
todas estas son manejadas por estas varias partes dentro de este reductor el reductor auth.js aquí.
Entonces, así es como se maneja la autenticación del usuario aquí.
Ahora, en el componente de encabezado,
entrando en el componente de encabezado,
así que aquí es donde tenemos la función de inicio de sesión aquí.
Por lo tanto, el HandleLogin, usted recuerda que
ya hemos implementado esto en el curso de reacción.
En el handleLogin, alternarán el modal.
Por lo tanto, cerraremos el modal y luego iniciaremos sesión al usuario en este punto.
Por lo tanto, diremos this.props LoginUser y luego verá que las credenciales,
nombre de usuario y contraseña se pasan como parámetros
al LoginUser y así entra en el func LoginUser,
que luego se encarga de iniciar sesión en el usuario.
Ahora, ¿cómo se muestra el estado de inicio de sesión del usuario?
Por lo tanto, eso es muy simple de nuevo.
En la barra de navegación aquí,
verá que he agregado un nuevo elemento aquí.
Por lo tanto, aquí es donde diremos esto.props.auth.isAuthenticated.
Por lo tanto, el indicador IsAuthenticated está siendo utilizado aquí por mí y por lo tanto, si esto está establecido en true,
entonces mostraré
el botón Cerrar sesión aquí y eso es lo que mostraré aquí.
De lo contrario, mostraré el botón de inicio de sesión.
Por lo tanto, usando ese indicador IsAuthenticated,
estoy volteando qué botón en particular se mostrará en
el encabezado allí, ya sea que muestre el botón de cierre de sesión o el botón de inicio de sesión.
Por lo tanto, ese es el punto que estamos mostrando aquí.
Entonces, el inicio de sesión o el cierre de sesión aquí.
Por lo tanto, así es como estamos manejando el proceso de inicio de sesión y cierre de sesión
aquí y también vamos a mostrar el nombre de usuario justo allí.
Por lo tanto, cuando muestre el botón de cierre de sesión,
también verá que estamos mostrando el nombre del usuario allí.
Por lo tanto, abajo aquí abajo,
también mostraremos el botón
handleLogout y luego tenemos el botón de cierre de sesión que se muestra aquí.
Además, esta declaración en particular aquí,
así es como estamos mostrando el nombre de usuario aquí.
Por lo tanto, esto usa this.props.auth.user.username.
Por lo tanto, la propiedad de usuario en el estado de autenticación contiene
las credenciales de usuario y desde allí obtuve el nombre de usuario y luego
lo uso para mostrar esto en la barra de encabezado.
Así que esa es la forma
en que se actualiza el componente de encabezado para manejar el proceso de inicio de sesión y cierre de sesión.
Una vez más, formas bastante sencillas de implementar,
es una forma bastante simple que he implementado aquí.
Ahora, obviamente, si desea una forma más compleja de manejar el proceso de inicio de sesión y cierre de sesión,
ciertamente puede entrar en la forma completa de hacer las cosas,
pero esto es suficiente para cumplir con los requisitos para mi aplicación.
Por lo tanto, he implementado el proceso de inicio de sesión y cierre de sesión de
una manera muy simple aquí usando la ayuda de la tienda Redux.
Por lo tanto, por Redux tienda
en sí está rastreando mi estado de inicio de sesión si estoy conectado y estoy autenticado y si estoy desconectado.
Por lo tanto, si el usuario ha cerrado sesión,
entonces Mis Favoritos no se muestra aquí.
Ahora, un punto importante que preguntará es,
¿cómo nos aseguramos de que no entremos en el estado de favoritos aquí?
Por lo tanto, esto se maneja en el lugar donde manejamos las rutas aquí.
Por lo tanto, notará que para los favoritos aquí,
declaramos para los favoritos el punto final en lugar de
llamar a esto como la ruta que lo llamamos como una ruta privada.
Por lo tanto, la ruta privada le permite asegurarse de que se
le permitirá entrar en esa parte solo
en circunstancias, donde el usuario está conectado.
Por lo tanto, esto evitará una navegación a su endpoint /favorites si ningún usuario ha iniciado sesión.
Ahora, ¿cómo se implementa esta ruta privada?
Esta ruta privada se implementa aquí arriba.
Por lo tanto, puede ver que esta ruta privada se implementa como se muestra aquí.
Por lo tanto, esto no es más que una ruta aquí y luego aquí,
vamos a implementar this.props.auth.isAuthenticated.
Por lo tanto, si el usuario está autenticado,
entonces permitiré navegar
al componente que es el componente favorito.
De lo contrario, simplemente redirigiré al componente doméstico.
Por lo tanto, si ningún usuario ha iniciado sesión,
simplemente redirigiré al componente doméstico y por lo tanto esto se
implementa usando esta ruta privada que he diseñado aquí.
Por lo tanto, la ruta privada es algo que es compatible con el enrutador
que usamos el enrutador React Dom que usamos en nuestra aplicación React.
Por lo tanto, una forma muy simple de manejar situaciones,
donde no desea que se naveguen ciertas rutas cuando el usuario no está conectado.
Así que de nuevo, algunos cambios simples que he hecho en
la aplicación para facilitar
todas las diferentes características que ves en tu aplicación React.
Ahora, como cabría esperar,
usted podría estar decepcionado en este punto,
«¿Es tan simple de implementar» y de hecho eso es
exactamente lo que se ha hecho para apoyar todas las nuevas características.
Como puede ver, la autenticación de usuarios y el
proceso de inicio de sesión y cierre de sesión ya que nuestro servidor tiene soporte completo para todo,
implementando el seguimiento del lado del cliente del
proceso de inicio de sesión y cierre de sesión del usuario y todo lo que se vuelve bastante sencillo simplemente
modificando algunos de los componentes y añadiendo
la función reductor de autenticación y agregando el estado de autenticación a nuestra tienda Redux.
Todo el proceso de manejo de la autenticación del usuario
y de inicio de sesión y cierre de sesión se vuelve bastante simple en este caso.
Por lo tanto, con este rápido recorrido por el código React actualizado,
continuemos examinando
nuestra aplicación React algunas características más de nuestra aplicación React.
Así que de nuevo, volviendo a nuestra aplicación,
ahora podemos ir al menú y luego tirar
cualquier plato aquí y puedo publicar comentarios en el plato aquí,
así que inmediatamente establecería la calificación aquí y mi valor de comentario aquí.
Observe que no estoy introduciendo mi nombre de usuario o el nombre de mi autor aquí en el formulario aquí.
Ahora, por supuesto, para enviar un comentario necesita estar conectado.
Por lo tanto, si no está registrado en este comentario no será aceptado por mi servidor.
Así que, primero déjame iniciar sesión.
Por lo tanto, puedo iniciar sesión aquí
y en el momento en que inicie sesión usted nota inmediatamente que la
barra de herramientas de encabezado se actualiza para indicar mi estado.
Ahora, puedo publicar este comentario y usted notará que cuando publique el comentario,
el comentario se agrega a la lista de los comentarios
y también notará que el campo de autor
se completa automáticamente aquí porque así es como configuramos nuestro lado del servidor.
En el campo de comentarios,
hemos configurado a nuestro usuario como una referencia a
la información del usuario que almacenamos en
nuestro lado del servidor y como utilizamos el poblado de mangosta en el lado del servidor,
la información del usuario se rellena automáticamente
en los comentarios entrantes desde el lado del servidor.
Entonces, así es como notas cómo estoy aprovechando
lo que el servidor ya proporciona para que complete automáticamente los detalles.
Por lo tanto, cambios menores de nuevo incluso en
la página de detalles del plato para reflejar el uso del soporte de comentarios en el sitio del servidor.
Con esto, completo
la ilustración rápida del cliente React que hemos implementado como parte de
este ejercicio y espero que
revises los detalles del código en el cliente también y
luego reflexiones sobre lo que has aprendido en el curso React y ver cómo
las modificaciones nos permiten implementar en una versión modificada,
[inaudible] que ahora es capaz de comunicarse con el servidor y luego admitir todas las características que
originalmente queríamos implementar como parte de nuestro cliente y del servidor.