Mejorando la Experiencia de Usuario durante una petición

Clase 26 de 37 • Curso de React.js 2019

ALONSO HERNANDO MUJICA TRONCOSO

student•

Recomendaria usar Skeleton en lugar de un Loader genera mejor UX: Skeleton for react

Generalmente las apis devuelven un code error dependiendo de la situación.

Con este codigo puedes personalizar el Error y manejar la excepción de la mejor forma, como notificaciones con el stack detallado, etc.

class MyError {
    constructor(message,code) {
        this.name = 'MyError';
        this.code = code|| '500';
        this.message = message || 'Default Message';
        this.stack = (new Error()).stack;
    }
  }
  MyError.prototype = Object.create(Error.prototype);
  MyError.prototype.constructor = MyError;

  export default MyError
...

throw new MyError(error.message,error.code);

Jose Daniel Molina

student•

Hola, oye como implemento skeleton aquí? Estuve mirando la documentacion pero no me sale

Juan Joseph Guerrero García

student•

Hola Jose Daniel, A mi me sirvio mucho este ejemplo: CodeSandbox https://codesandbox.io/s/skeleton-vtn9m?from-embed=&file=/src/App.js:913-934 Este es el articulo: https://medium.com/better-programming/build-a-skeleton-component-in-react-for-better-ux-b1dca9d783e6

Con este ejemplo quizas puedes crear un SkeletonInner para customizar algo parecido al BadgesList. Espero que te sirva.

Ernesto Cruz Bravo

student•

Vean esta forma de agregar animaciones se llama react-lottie fue creada por el equipo de diseño de Airbnb. Realizé un pequeño tutorial espero les sirva react-lottie

Wilson Alejandro Gonzalez Gaitan

student•

gracias

Henry Caicedo Velasco

student•

que buen aporte, gracias.

Erick Vicentin

student•

Quedo bien chula :) Me encanta este curso!!!

Daniel Páez

student•

Si no encuentras el archivo que dice Richard, en el github de platzi Badges en la rama especifica de esta clase esta:

https://github.com/Sparragus/platzi-badges/tree/15.MejorandoElUXDeUnaPeticion

Jehaann Manzanares

student•

huy amigo ! que genial aporte !

Daniel Páez

student•

Un gusto serte util !!!

Rony Porraz Vargas

student•

Asi quedo :3

Daniela Alejandra Arrieta Lucena

company_admin•

donde consigues esas imagenes

Pablo Emilio Escobar Ossa

student•

Luis, puedes encontrarlos aquí

https://stories.freepik.com/search?q=503%20Error%20Service%20Unavailable

Santiago Gálvez

student•

Para que el loading no cubra toda la pantalla y oculte el navbar por un pequeño momento pueden ajustar el min-height en los estilos de esta manera.

.PageLoading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    width: 100%;
}```

Andrés Campuzano Garzón

student•

Gracias.

Fabian Avila

student•

Excelente curso Richard, muchas gracias, ¿podrías por favor poner en algún lugar las extensiones de vscode que usas ademas de Prettier?

Fernanda Aragon

student•

Hola Fabian, si tienes curiosidad de probar extensiones para que te ayuden con el desarrollo que realices te dejo un articulo donde muestra algunas extensiones que te puede ayudar a la hora de hacer una aplicación en React. https://fullstackengine.net/recommended-vscode-extensions-react/

Carlos López

student•

Y la de los emojis -- POR FAVOR --

Adriana Ardila

student•

Si alguien lo está haciendo con el ejemplo del profesor. Este es el código del loader.css

.lds-grid {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-grid div {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #000;
  animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
  top: 6px;
  left: 6px;
  animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
  top: 6px;
  left: 26px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
  top: 6px;
  left: 45px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
  top: 26px;
  left: 6px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
  top: 26px;
  left: 26px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
  top: 26px;
  left: 45px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
  top: 45px;
  left: 6px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
  top: 45px;
  left: 26px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
  top: 45px;
  left: 45px;
  animation-delay: -1.6s;
}

@keyframes lds-grid {
  0%,
  100% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.5;
  }
}

Cynthia Jazmín Romero

student•

¡Muchas gracias!

Johan García Trejo

student•

Vean esta forma de agregar animaciones se llama react-lottie fue creada por el equipo de diseño de Airbnb. link

ever aliaga

student•

Curso Animaciones CSS

Carlos Alberto García Rosales

student•

En VS Code pueden instalarse los snipts de React y solo usan rcc y les crea una estructura de componente clase o con rcf una estructura de componente función agiliza muchísimo el desarrollo se los recomiendo. Hay un montón de snipts si estas trabajando con GraphQL o con Redux por ejemplo.

Cesar Merlo

student•

devolver error aleatoriamente: (un 30% de las veces)

list() {
      if(Math.random() > 0.3 ){
        return callApi('/badges');
      }else{
        throw new Error('500:Server Error')  
      }
    }

Luis Martinez

student•

Buenisima idea

Ismael Teixeira

student•

Encontré un recurso muy útil para poder crear pantallas de carga como lo hacen Facebbok, instagram, entre otros... Aquí el enlace:

https://github.com/danilowoz/react-content-loader

Espero les sirva!

Fernando Pioli Martínez

student•

Excelente aporte!!! Muchas gracias por compartir este recurso.

Fernando Pioli Martínez

student•

Pude instalarlo y personalizarlo facilmente! Genial!!!!

Maximo Martinez Soria

student•

Hice un loader un poco distinto:

esto debería devolver el componente:

return (
	<div className="Loader">
		<div />
		<div />
		<div />
	</div>
);

Y los styles:

.Loader {
    min-height: calc(100vh - 90px);
    display: flex;
    justify-content: center;
    align-items: center;

    div {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #000;
        margin-right: 5px;
        margin-left: 5px;

        animation: loader 1s linear infinite;

        &:nth-child(1) {
            animation-delay: 0s;
        }

        &:nth-child(2) {
            animation-delay: 0.2s;
        }

        &:nth-child(3) {
            animation-delay: 0.4s;
        }
    }

    @keyframes loader {
        25% {
            opacity: 0;
        }

        50% {
            opacity: 0.3;
        }

        75% {
            opacity: 0.6;
        }

        0%,
        100% {
            opacity: 1;
        }
    }
}

Están en scss. Para usar este pre-procesador solo hay que instalar el package para compilarlo. Podemos hacerlo corriendo el siguiente comando: npm install node-sass.

Posteriormente, hay que nombar el archivo con la extensión .scss. En este caso: Loader.scss

Y lo importaríamos en javascript con la misma extensión en el archivo del componente: import './styles/Loader.scss';

Axel Alexis Lopez Resendiz

student•

Para agregar Emojis en windows utilicen el comando win + . (windows + punto)

Aveces puede tardar en aparecer el menú flotante.

Alejandro González Reyes

student•

Esta es mi segunda vuelta por el curso, después de haber leído dos libros de VueJS, ahora ambos frameworks se me hacen similares en la forma de como trabajan.

Ever Alfredo Sorto Ayala

student•

yengo una duda con props y data ¿como se relacionan para intercambiar infoamcion?

Luis Fernando Méndez González

student•

¡Hola, Ever! Es una excelente pregunta.

Bueno, los props o propiedades son datos que le pasamos a nuestros componentes para poder utilizarlos en su lógica interna. Por otro lado, la data corresponde al state o estado de la función.

Una diferencia clave es que los props son inmutables, son los designados al momento de renderizar el componente, pero state es dinámico, podemos modificar el state lo que origina un cambio que puede desencadenar una actualización de los componentes.

Si detallas nuestro proyecto te darás cuenta que en los archivos contenedores (los componentes que estamos guardando en la carpeta Pages) estamos declarando el estado de nuestra aplicación en el inicio, mientras que en los componentes que guardamos en la carpeta Components nunca se les declara el estado, sino que suelen desplegarse recibiendo props.

Esto ocurre así para llevar un manejo fluido de la información, declaramos el estado en el componente común más alto, iniciándolo en el constructor. Y ya con estos datos del state (entre los que esta data) podemos ir manejando la lógica en sus componentes internos, pasándole la información a través de props.

Ocurre mucho que cuando vemos este flujo pensamos "¿Esto no es unidireccional?" y en cierto punto lo es, porque recordemos que los datos que se definen en los props son fijos, pero lo que agrega dinamismo a nuestra información es que si en alguno de estos componentes se modifica el estado, React volverá a renderizar para poder mostrar los componentes con los nuevos estados, lo cuál (oh la la) cambiará la información de nuestros props, haciéndolo todo dinámico.

Si te fijas con detalle este intercambio de datos es lo que ocurre por ejemplo con la imagen de Gravatar, que va cambiando conforme tipeamos el correo en la página de /Badges/new. Iniciamos nuestro estado inicial con el campo de correo vacío, conforme este va modificándose obtenemos un nuevo valor para obtener otro link de Gravatar, entonces el componente ve que cambió el estado y vuelve a renderizar la imagen con la nueva información.

Así hasta que se deje de modificar el estado.

PD: Es importante que en estas modificaciones del estado utilicemos:

this.setState({ dato: dato });

Y no lo hagamos directamente, como por ejemplo así:

this.state.dato = dato;

La razón de esto es que si no utilizamos el setState() nuestro componente no detectará el cambio del estado y no volverá a renderizar.

Disculpa que me extendiera tanto, espero haberte ayudado :)

Ever Alfredo Sorto Ayala

student•

LuFernandoMG gracias bastante claro :D

Byron EQ

student•

Cual es la diferencia entre hacer y usar una función en vez de un component..?? Aún no tengo claro estos conceptos.

Fernanda Aragon

student•

Hola, la diferencia tiene que ver más con el paradigma de Containers y Components. Un container lo creas con Component porque ahi vas a manejar la lógica de ese componente, como estados, peticiones, etc. Un component lo creas con una función el cual será solo un componente presentacional, es decir, sólo mostrar UI, por ejemplo un Botón, Image, etc.

Juan Luis Rojas León

student•

++Component++

Ciclo de vida
Estado

++Function++

Sólo UI

Paulina Nieves

teacher•

Tengo error cuando cuando la peticion me trae un objeto "solo" no carga el proyecto, alguien que me pueda ayudar?

José Agüero

student•

Hola! pudiste solucionar el problema que tenias? a mi me paso algo similar y he estado casi mediodía tratando de conseguir el error, y era que se me había olvidado en la carpeta api.js borrar el error que habías colocado intensionalmente como prueba, y descomentar return callApi('/badges'); para que cargara la información de la API

Wilson Delgado

student•

Mejorando la Experiencia de Usuario durante una petición

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión