Cómo construir una barra de progreso con React

Este tutorial es para cualquier persona interesada en cómo construir una barra de progreso simple en React. Para que esto sea agradable y fácil para todos, voy a desarrollar nuestro ejemplo en Codepen a medida que avancemos en el tutorial. Se incluirá un enlace a la versión completa al final.

Mira mis otros artículos

¡Por favor, compruébelo si está interesado después de leer el artículo actual!

Planificación del componente

Antes de comenzar a escribir código, diseñemos rápidamente cómo debería ser nuestra barra de progreso de reacción. Para mí, parece que solo necesitamos dos elementos para formar nuestra barra de progreso. Estos elementos son:

  • Un padre div que contiene otro div dentro de él. Vamos a nombrar este ProgressBar.
  • Un div que actúa como relleno dentro del div padre. Este div tendrá un estilo de color y llenará un x porcentaje del contenedor horizontal y verticalmente. Vamos a nombrar este relleno.

Andamios The ProgressBar

Muy bien, vamos a codificar. Comencemos construyendo el andamio de la barra de progreso. En este tutorial, uso ProgressBar como un componente React funcional. Hay muchas otras formas de hacerlo, pero sigamos con este enfoque.

Esta es la división principal de la que estaba hablando en la sección de planificación. Dentro de él, solo necesitamos agregar el componente de relleno. Todavía no tenemos eso incorporado, ¡así que vamos a construirlo!

Excelente. Tenemos nuestros dos componentes. Vamos a ponerlos todos juntos agregando el relleno dentro de ProgressBar.

Wow, esto es increible. Excepto, no hay absolutamente ningún estilo para ninguno de estos componentes. ¡Vamos a diseñarlos rápidamente!

Los estilos en la clase barra de progreso son bastante sencillos. Todo lo que estoy haciendo es darle un alto y ancho inicial, un borde y algunos bordes redondeados usando border-radius. Es importante tener en cuenta mi uso de la posición: relativo en la clase de barra de progreso, esto es necesario, ya que asigno una altura del 100% a la clase de relleno.

Para los estilos de relleno, estos también son fáciles de entender. Establezco el fondo del relleno en un color azul turquesa (# 1DA598), y me aseguro de que la altura de mi relleno coincida con su padre, dándole una altura del 100%. También quiero que el radio del borde coincida con el padre, así que lo configuré para que herede de su padre.

Quizás tenga curiosidad acerca de la transición que agregué al relleno. Esto simplemente hace que la transición de relleno sea más natural cuando aumenta / disminuye de tamaño. Veamos qué tenemos actualmente para la barra de progreso:

Una barra de progreso vacía y aburrida = (

Podemos arreglar esta barra de progreso aburrida agregando algunos accesorios. ¡Vamos a hacerlo!

Agregar los accesorios necesarios al componente

Necesitamos crear algún tipo de sistema que permita que el componente de relleno de nuestra barra de progreso cambie dinámicamente en ancho. Aquí es donde debemos comenzar a integrar las características de estado y accesorios de React. Para hacerlo, construyamos otro componente que nos permita probar e implementar esas características.

Como puede ver, inicializo una propiedad en el estado llamado porcentaje y le asigno un valor inicial de 0. Esta es la variable de estado que vamos a utilizar para controlar el ancho de nuestro relleno. Para que el ProgressBar sea consciente de este valor, lo paso como un accesorio adjunto al componente.

Sin embargo hay un problema. Es genial que estemos pasando el valor como accesorio, pero el componente ProgressBar todavía no tiene idea de cómo lidiar con este accesorio. Para solucionar esto, simplemente podemos hacer lo siguiente:

Al crear un accesorio adjunto a Filler, podemos pasar el valor más abajo a Filler. Todo lo que necesitamos hacer ahora es hacer algo con el valor que recibimos dentro de Filler, y deberíamos hacerlo.

Establecer el ancho del relleno

Lo último que debemos hacer es tomar el valor que recibimos como accesorio en Filler y establecer ese valor para que sea el ancho de Filler. Esto se puede implementar fácilmente a través del diseño en línea. Veamos cómo se hace.

Establecer dinámicamente el ancho de Relleno en función de su valor de apoyo

¡Eso es! Solo por patadas, cambiemos la propiedad de estado inicial de ProgressBarExample a 60:

¡Ahora mira nuestra hermosa barra de progreso en acción!

Envolviendo cosas

Ahora sé que este es solo un ejemplo muy simple, pero he incluido una versión más detallada para que juegues en Codepen. Es completamente interactivo, y espero que te enseñe algo nuevo. Si te gustó este tutorial, ¡me encantaría que me dieras un seguimiento en GitHub!

https://github.com/dzuz14

Enlaces

Aprenda, reaccione gratis en YouTube

Después de leer este artículo, me encantaría que eche un vistazo a mi Tutorial gratuito de YouTube sobre React, donde le muestro cómo crear una Galería de miniaturas desde cero. ¡Siéntase libre de darle un marcador antes de comenzar a leer! =)

Ejemplo de barra de progreso completa en Codepen

DanZuzevich.com