Barra de progress CSS
Javascript

Tutorial React (Parte 4): Progress Bar CSS

5 Minutos de Leitura

Esse é o nosso Tutorial React Parte 4 onde vamos ensinar você a fazer um componente de Progress Bar CSS em React. Em nosso último texto da série de Tutoriais React Js do Zero, nós ensinamos como desenvolver a página principal do nosso projeto React.

Se você acabou de chegar por aqui, o portal Programadores Brasil em parceria com o canal Speak Up Tech, preparou uma série de tutorias onde você irá acompanhar a criação de um contador de inscritos do canal todo desenvolvido em React JS e estilizado com o Sass.

A fim de acompanhar toda essa série de desenvolvimento, caso você ainda não tenha lido os textos anteriores onde criamos a aplicação React, inicializamos e configuramos o Sass e desenvolvemos a página inicial, pode dar uma chegada lá para acompanhar este tutorial e depois é só voltar aqui para seguir com o Tutorial React: Progress Bar CSS.

Assumindo que você já realizou os tutoriais anteriores, hoje iremos desenvolver a nossa Progress Bar CSS com React Js e estilizá-la utilizando o Sass (Pré processador de Css).

Veja também: [+] Livros de ReactJS para iniciantes com super desconto na Amazon.

Antes de começar, não se esqueça de ir lá no canal do Speak Up Tech no Youtube e se inscrever! Clique aqui e acesse.

Confira o vídeo completo e abaixo o conteúdo em texto, com os códigos:

Tutorial React: Progress Bar CSS

Se você já iniciou o projeto já está ciente que estamos desenvolvendo um contador de inscritos do youtube em React Js. Com isso, uma das características principais da nossa aplicação é a Progress Bar CSS, pois através dela que iremos mostrar o número de inscritos do canal e também demostrar a porcentagem de inscritos em relação a meta.

Design do contador de inscritos Speak Up Tech
Design do Contador de inscritos e a Progress Bar CSS.

Passando props para o componente

Com a finalidade de passar propriedades para dentro dos compocentes, quando o React vê um elemento representando um componente definido pelo usuário, ele passa atributos JSX e componentes filhos para esse componente como um único objeto. Nós chamamos esse objeto de “props”.

Então vamos iniciar nosso desenvolvimento da Progress Bar CSS passando algumas props para ele. Então vamos na página inicial ./src/pages/Home/index.js, pois é lá que estamos renderizando o componente de Progress Bar e lá vamos passar os valores desejados, como por exemplo o valor de inscritos do canal e a meta desejada, para que dentro do componente possamos utilizar esses dados e estilizá-los da melhor forma.

Sua página principal deve ficar assim:

import React, { useState, useEffect } from "react";

import Progress from "../../components/Progress";

const Home = () =>  {
  const [subscribers, setSubscribers] = useState(133);
  const goal = 1000;

  return (
    <>
    <p className="App__content__text">
      Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. 
      Aenean sit amet nisi. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. 
      Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Nec orci ornare consequat. 
      Praesent lacinia ultrices consectetur. Sed non ipsum felis.
    </p>
    <section className="App__content__subs">
      <p className="App__content__subs__count">133</p>
      <p className="App__content__subs__subtitle">Inscritos</p>
    </section>
    <Progress count={subscribers} goal={goal} />
    </>
  )
}

export default Home;

Note que para passar o valor de inscritos ao componente <Progress/> um React Hook foi criado.

const [subscribers, setSubscribers] = useState(133)

React Hook é uma feature que permite que você use estado e outras features do React sem ter a necessidade de escrever uma classe. E neste exemplo ele foi iniciado com um valor padrão, pois só após a integração com o servidor que iremos desenvolver juntos é que esse valor será dinâmico.

Em seguida, dentro do nosso componente de Progress Bar já podemos manipular estas props. Então vamos até o nosso componente ./src/components/Progress/index.js e criar as seguintes variáveis:

import React from "react";

const Progress = (props) => {
  const subsCount = props.count;
  const subsPercent = (subsCount/10);
  const goal = props.goal;

  return (<p>Oi eu sou o Progress</p>)
}

export default Progress;

Estruturando o componente Progress Bar CSS

Com isso, já temos os dados que precisamos para montar nossa Progress Bar CSS.

Vamos então agora estruturar a nossa barra de progresso, ou seja, desenvolver o HTML dela. Para tal, vamos criar uma <div> mais externa com um <span> e uma tag <p> dentro. Pois com essa estrutura seremos capazes de estilizar a div para ser a nossa barra de progresso, o span para ser o progresso, ou seja, o número de inscritos atual, e na tag p vamos inserir a meta de inscritos.

Então o código da nossa Progress Bar CSS deverá ficar assim:

import React from "react";

const Progress = (props) => {
  const subsCount = props.count;
  const subsPercent = (subsCount/10);
  const goal = props.goal;

  return (
    <div className="progress-bar">
      <span>
      </span>
      <p></p>
    </div>
  )
}

export default Progress;

Observe que foi inserido o className=”progress-bar” na <div> pois iremos utilizar esta classe para estilizar nossa Progress Bar.

Seguindo vamos fazer a funcionalidade mais importante da barra de progresso que é demonstrar o progresso. Para isso iremos utilizar uma técnica de CSS inline, ou seja, vamos injetar diretamente no elemento <span> a propriedade CSS width, passando como valor a porcentagem de inscritos do canal, pois desta maneiro a tag span que representa o progresso da nossa barra, terá de largura exatamente a porcentagem de inscritos do canal em relação a meta.

Para isso basta passarmos o atributo style na nossa tag span, da seguinte forma:

<span style={{ width: `${subsPercent}%`}}>

Repare que a variável subsPercent foi passada dentro de uma “template string”, pois é necessário concatenar a variável que é um número com o “%” que é uma string para que no resultado final a nossa barra tenha uma largura em porcentagem.

Finalizando a estrutura do nosso componente vamos acrescentar a meta e o valor da porcentagem dentro da barra de progresso para que fique também visível ao usuário o quanto que aquele progresso represente. Nesta etapa nosso componente Progress Bar ficará assim:

import React from "react";

const Progress = (props) => {
  const subsCount = props.count;
  const subsPercent = (subsCount/10);
  const goal = props.goal;

  return (
    <div className="progress-bar">
      <span style={{ width: `${subsPercent}%`}}>
          {`${subsPercent}%`}
      </span>
      <p>{goal}</p>
    </div>
  )
}

export default Progress;

Adicionando estilos do nosso componente

Então agora, vamos adicionar alguns estilos utilizando Sass para deixar nosso componente bonito. Nós vamos fazer isto utilizando o arquivo no caminho ./src/components/Progress/style.scss (a partir da raiz do projeto, claro).

Veja também: [+] Livros de ReactJS para iniciantes com super desconto na Amazon.

Dentro deste arquivo, vamos adicionar o seguinte código:

.progress-bar {
  height: 30px;
  background-color: $GRAY;
  border-radius: 15px;
  margin-top: 24px;
  
  position: relative;

  span {
    display: block;
    position: relative;
    
    height: 100%;
    background-color: $PINK;
    border-radius: 15px;
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 3px;
    
    color: white;
    text-align: right;
  }

  p {
    text-align: right;
  }
}

Finalizando o Tutorial React de hoje

Em conclusão, se você chegou até o final do nosso Tutorial React: Progress Bar provavelmente tem seu componente funcionando, estilizado e pronto para os próximos vídeos! Então acompanhe a gente no canal Speak Up Tech para ficar ligado nos próximos vídeos da série e veja sempre o vídeo e código transcritos aqui no Programadores Brasil.

Até a próxima!


Usa TELEGRAM?!

Venha participar do nosso Grupo Exclusivo de Ofertas e Descontos do Programadores Brasil. Aqui você encontra os melhores preços para Notebooks, Celulares, Tablets, Headsets e eletrônicos em geral! Acesse: https://t.me/progbrasilcupons https://t.me/progbrasilcupons


4 comentários

Deixe o seu comentário

O seu endereço de e-mail não será publicado.

Leia Também

Últimas Notícias