Cómo mostrar mensajes en la aplicación usando Material-UI en una aplicación web React

Fuente de imagen

En algunas situaciones, su aplicación web necesita mostrar un mensaje informativo para informar a los usuarios si un evento fue exitoso o no. Por ejemplo, un mensaje de "Éxito" después de que un usuario hace clic en un botón y completa con éxito alguna acción.

En este tutorial, le mostraré cómo crear un componente simple para mensajes informativos en la aplicación con React y Material-UI. Lo llamaremos un componente Notificador.

Aquí están las secciones principales de este tutorial:

  • Empezando
  • Componente notificador
  • Importar componente de notificador a la página de índice
  • Pruebas

Si encuentra útil este artículo, considere destacar nuestro repositorio de Github y consulte nuestro libro donde cubrimos este y muchos otros temas en detalle.

Empezando

Para este tutorial, he creado una aplicación web simple para que la sigas. Utilizaremos el código ubicado en la carpeta tutoriales / 4-start de nuestro repositorio de libro de construcción.

Si no tiene tiempo para ejecutar la aplicación localmente, implementé esta aplicación de ejemplo aquí.

Para ejecutar la aplicación localmente:

  • Clone el repositorio de libro de construcción en su máquina local con:
git clone git@github.com: builderbook / builderbook.git
  • Dentro de la carpeta 4-start, ejecute yarn o npm install para instalar todos los paquetes listados en package.json.
  • Ejecute yarn dev para iniciar la aplicación.

Página de inicio

En su navegador, vaya a http: // localhost: 3000. Esta es nuestra página de índice, que tiene la ruta /. Next.js proporciona enrutamiento automático para páginas ubicadas en una carpeta / pages. El nombre de cada archivo de página se convierte en la ruta de esa página.

Nuestra página de índice es un componente de página simple que representa un formulario, una entrada y un botón (más explicaciones a continuación).

Aquí está el código para nuestra página de índice en pages / index.js:

Algunas notas

  • Podríamos haber definido esta página como un componente funcional sin estado, ya que no tiene estado, ganchos de ciclo de vida o referencias (lea más sobre cuándo usar componentes funcionales sin estado frente a las clases React ES6). Verá esta advertencia de Eslint: el componente debe escribirse como una función pura. Sin embargo, la página de índice final que escribimos en este tutorial tendrá ref. Por lo tanto, escribimos esta página de índice inicial como hijo de la clase ES6 usando extend.
  • Importamos Head desde Next.js para personalizar el elemento de la página. Dentro de , agregamos una página y <meta> descripción para una indexación adecuada por parte de los robots de los motores de búsqueda (bueno para SEO). El texto dentro de <título> se muestra en la pestaña de su navegador:</li></ul><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558895034.png" /><ul><li>Utilizamos los componentes TextField y Button de Material-UI, que se representan en elementos HTML <input> y <button>, respectivamente.</li><li>Envolvimos nuestra página con un componente de orden superior withLayout. Nuestra aplicación usa Next.js, y withLayout garantiza que la representación del lado del servidor funcione correctamente para la interfaz de usuario de material dentro de nuestra aplicación React-Next. withLayout también agrega nuestro componente Header (ubicado en components / Header.js) a cada página que withLayout ajusta. La representación del lado del servidor no es necesaria para Material-UI o React, pero es una característica principal de Next.js. Discutimos la representación del lado del servidor frente al lado del cliente en React apps en otro tutorial.</li></ul><p>Hemos terminado de describir nuestra página de índice inicial. Ahora analicemos el componente Notificador que luego importaremos en la página Índice para mostrar mensajes informativos a los usuarios de nuestra aplicación web.</p><h3>Componente notificador</h3><p>Comencemos definiendo el componente Notificador. Definimos Notifier como React.Component en lugar de una función sin estado, porque Notifier tendrá un estado, un método de ciclo de vida y algunas funciones de manejo de eventos.</p><p>Para nuestros mensajes informativos, utilizaremos Snackbar de Material-UI. Vea ejemplos de uso de Snackbar en el sitio oficial de Material-UI.</p><p>Aquí hay un resumen de alto nivel de nuestro componente Notificador:</p><p>Cree un archivo Notifier.js dentro de la carpeta / components de 4-start. Agregue el esquema de alto nivel anterior a este archivo. A continuación, reemplazaremos los comentarios numerados con código.</p><p>1. Utilizaremos los accesorios abiertos y de mensaje de Snackbar de Material-UI para el estado de nuestro Notificador. Consulte la lista completa de accesorios para Snackbar.</p><p>Inicialmente, nuestro Notificador debe estar en un estado cerrado con una cadena vacía como mensaje. Definimos el estado inicial del Notificador como:</p><p>2. Ahora escribamos una función que actualice el estado del componente Notificador. La función cambiará el valor del accesorio abierto a verdadero y establecerá el valor del accesorio de mensaje en una cadena no vacía. Llamemos a esta función openSnackbar ().</p><p>Antes de que podamos ejecutar openSnackbar (), nuestro componente Notificador debe montarse en el DOM. Por lo tanto, colocamos la función openSnackbar () en un método de ciclo de vida componentDidMount que se ejecuta justo después de que el componente Notifier se monte en el DOM.</p><p>Para acceder a la función openSnackbar () en cualquier lugar de nuestra aplicación, debemos establecer su valor en otra función que esté disponible fuera del componente Notificador. Por lo tanto, escribimos let openSnackbarFn sobre la clase Notifier extiende React.Component.</p><p>Poniendo estas piezas juntas:</p><p>Ahora definamos la función openSnackbar (). Esta función actualizará las propiedades de apertura y mensaje del estado de nuestro Notificador. Una vez que se actualiza el estado, el componente Notificador se volverá a representar para mostrar un mensaje (abierto: verdadero muestra la Barra de aperitivos y mensaje: mensaje establece el mensaje).</p><p>Dentro de this.setState, podríamos haber escrito mensaje como mensaje: mensaje. En su lugar, utilizamos la sintaxis abreviada de ES6 (aplicada por Eslint) para hacer que el código sea más conciso.</p><p>3. Cuando un usuario hace clic fuera del área de Snackbar, se debe cerrar Snackbar. El accesorio Snackbar onClose es responsable de este comportamiento. Escribamos una función llamada handleSnackbarClose () que establece abierto a falso y mensaje a una cadena vacía.</p><p>4. Finalmente, vamos a escribir el código de nuestro componente Notifier para representar el componente Snackbar con todos los accesorios necesarios.</p><p>Además del mensaje, onClose, y los accesorios abiertos descritos anteriormente, agregaremos los siguientes accesorios a nuestro componente Snackbar:</p><ul><li>anchorOrigin: especifica la ubicación de Snackbar</li><li>autoHideDuration: especifica la duración de Snackbar en milisegundos</li><li>SnackbarContentProps: vincula la Snackbar a un elemento dentro del DOM que contiene el mensaje; en nuestro caso, el elemento tiene la id snackbar-message-id, y Snackbar mostrará el texto de este elemento.</li></ul><p>Aquí está el método render () de nuestro componente Notificador:</p><p>En el elemento <span>, podríamos haber escrito message = {this.state.message}, pero en su lugar escribimos peligrosamenteSetInnerHTML = {{__html: this.state.message}}. Esto nos permite agregar código HTML al accesorio de mensaje de Snackbar. Por ejemplo, es posible que desee mostrar un hipervínculo a los usuarios. Lea más sobre el uso de dangerouslySetInnerHTML en React.</p><p>Después de reunir el código de los pasos 1 a 4, aquí está nuestro componente final de Notificador:</p><p>Nota importante: observe cómo exportamos nuestra función openSnackbar () además del componente Notificador. Importaremos openSnackbar () y Notifier en nuestra página de índice.</p><h3>Importar componente de notificador a la página de índice</h3><p>Volvamos a nuestra página de índice, donde importaremos nuestro componente Notificador y la función openSnackbar ().</p><p>Sin activar la función openSnackbar (), nuestro componente Notificador siempre permanecerá en su estado cerrado inicial con una cadena vacía como mensaje. Necesitamos ejecutar openSnackbar () después de que un usuario envíe el formulario haciendo clic en el botón en nuestra página de índice. Definamos una función showNotifier () que hace exactamente eso.</p><h4>Función showNotifier</h4><p>Llamaremos a showNotifier () dentro del elemento <form>. Haremos que showNotifier () se ejecute cuando un usuario ingrese un número en el formulario y haga clic en el botón "Enviar".</p><p>Aquí está el <formulario> actual en nuestra página de índice:</p><p>Hagamos dos modificaciones:</p><p>1. Para llamar a showNotifier () cuando se envía el formulario, utilizamos el evento de envío de JavaScript:</p><p>2. Un usuario ingresará un número dentro de TextField. Para que nuestra función showNotifier () acceda al valor de TextField, agregamos el atributo ref de React a TextField.</p><p>Hay dos formas de obtener el valor de TextField: con this.state y con ref. Elegimos ref, ya que this.state es más conciso. Aquí hay una explicación de cómo escribir con this.state, y aquí hay más información sobre el uso de ref en React.</p><p>Ahora definamos la función showNotifier (). Aquí está el esquema de alto nivel para showNotifier ():</p><p>A continuación, escribiremos el código para cada uno de los tres comentarios anteriores.</p><ol><li>Definimos la respuesta como:</li></ol><p>Esta línea de código dice que IF answerInput existe (lo que significa que el elemento <input> se agrega al DOM), ENTONCES la respuesta es igual al valor de answerInput, al que se accede con answerInput.value.</p><p>SI answerInput no existe, ENTONCES la condición completa entre paréntesis es falsa y la respuesta es nula.</p><p>2. Si un usuario no ingresa una respuesta en nuestro formulario pero hace clic en el botón "Enviar", le mostraremos este mensaje: Campo vacío. Ingrese un numero.</p><p>3. Si un usuario ingresa 4 y hace clic en el botón "Enviar", nuestra función openSnackbar () se ejecutará y mostrará este mensaje: ¡Respuesta correcta! De lo contrario, mostrará una respuesta incorrecta.</p><p>Usamos parseInt (respuesta, 10) para analizar la respuesta, que es una cadena, y devolver un número entero. El parámetro 10 especifica que el entero está en formato decimal.</p><p>Vamos a armar el código de los pasos 1 a 3 anteriores para nuestra función showNotifier. Colocaremos el código justo debajo de la clase de línea El índice extiende React.Component:</p><p>Notarás que agregamos una línea event.preventDefault () ;. Esto evitará que nuestro elemento <form> tenga el comportamiento predeterminado de enviar datos de formulario a un servidor.</p><p>Ahora tenemos todo el código para nuestra página de índice final:</p><h3>Pruebas</h3><p>Probemos que nuestro Notificador funciona como se esperaba. Ejecute la aplicación localmente con yarn dev y navegue a http: // localhost: 3000. Si no está ejecutando la aplicación, vaya a la que implementé: https://notifier.builderbook.org.</p><p>Primero, haga clic en "Enviar" sin agregar nada en el campo de texto.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558896000.png" /><p>A continuación, agregue el número 4 y haga clic en "Enviar".</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558896951.png" /><p>Ahora agregue cualquier otro número y haga clic en "Enviar".</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558897889.png" /><p>Recuerde que escribimos código para cerrar Snackbar cuando un usuario hace clic fuera de él (escribimos una función handleSnackbarClose () y se lo pasamos al accesorio onClose de Snackbar). Después de ver Snackbar, haga clic en cualquier lugar además de Snackbar en su pantalla. El Snackbar debería cerrarse de inmediato.</p><p>Una buena característica de Material-UI es la optimización móvil. No tenemos que escribir código adicional para que nuestro mensaje informativo se vea bien en dispositivos móviles. Compruébelo usted mismo yendo a DevTools de Chrome y cambiando la vista de escritorio a móvil. Nuestro mensaje aparece en la parte superior de la pantalla:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558899962.png" /><p>Woohoo! ¡Has añadido correctamente un mensaje informativo en la aplicación a una aplicación web React! Su código final debe coincidir con el código en la carpeta tutoriales / 4-end de nuestro repositorio de libro de construcción.</p><h4>Personalizar componente notificador</h4><p>Ahora que tiene un componente Notifier en funcionamiento, veamos cómo podemos modificar el UX cambiando los accesorios del componente SnackBar de Material-UI. Aquí está la lista completa de accesorios que puede usar.</p><p>Primero, cambiemos la duración del Snackbar. Dentro de su componente Notificador, encuentre el accesorio autoHideDuration. Cambie su valor de 3000 a 1000 y compare. Verá que a 1000, el Snackbar se cierra más rápidamente.</p><p>En segundo lugar, cambiemos la posición de Snackbar. Encuentre el anclaje AnchorOrigin prop y cambie sus valores de arriba a derecha a abajo e izquierda, respectivamente. Comprueba dónde aparece ahora el Snackbar:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558900960.png" /><p>Finalmente, hagamos que el mensaje de Snackbar incluya un hipervínculo. Recuerde que agregamos peligrosamenteSetInnerHTML = {{__html: this.state.message}} a nuestro accesorio de mensaje en la barra de Snack para que podamos escribir HTML dentro de él.</p><p>¡Cambie el código para nuestra respuesta correcta! y respuesta incorrecta. mensajes como este:</p><p>Ahora los usuarios verán los mensajes a continuación. Observe los hipervínculos azul oscuro para el texto dentro de las etiquetas <a>.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558901980.png" /><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568558902981.png" /><p>Si está aprendiendo cómo crear aplicaciones web con JavaScript, consulte nuestro repositorio de Github y nuestro libro, donde cubrimos este y muchos otros temas en detalle.</p><p>Para recibir actualizaciones por correo electrónico sobre nuestros tutoriales, suscríbase aquí.</p></div><div class="neighbor-articles"><h4 class="ui header">Ver también</h4><a href="/article/how-to-not-make-friends-with-ai-d4f5e2/" title="¿Cómo no hacer amigos con IA?">¿Cómo no hacer amigos con IA?</a><a href="/article/how-to-fix-the-shipping-industry-32a905/" title="Cómo arreglar la industria naviera">Cómo arreglar la industria naviera</a><a href="/article/how-to-work-from-home-and-be-a-productivity-hero-059c1b/" title="Cómo trabajar desde casa y ser un héroe de productividad">Cómo trabajar desde casa y ser un héroe de productividad</a><a href="/article/how-to-explain-bitcoin-at-your-holiday-dinner-f981dd/" title="Cómo explicar Bitcoin en tu cena navideña">Cómo explicar Bitcoin en tu cena navideña</a><a href="/article/how-to-watch-a-meteor-shower-like-a-pro-0f2065/" title="Cómo ver una lluvia de meteoritos como un profesional">Cómo ver una lluvia de meteoritos como un profesional</a></div></main><div class="push"></div></div><footer style="height:50px">ceadesc.org<!-- --> © <!-- -->2019<!-- --> <a href="https://et.ceadesc.org/article/how-to-show-in-app-messages-using-material-ui-in-a-react-web-app-f09b4a" title="https://ceadesc.org">ceadesc.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>