Javascript

Tutorial ReactJS (Parte Final): Desenvolvendo o Footer

4 Minutos de Leitura
Veja nosso último texto da série Tutorial React JS do Zero.

Acompanhe com a gente, no texto de hoje, o Tutorial ReactJS: Desenvolvendo o Footer, que é basicamente o texto de número 6 da série desenvolvida em parceira com o canal Speak Up Tech, onde desenvolvemos do zero o Front-End de uma aplicação.

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.

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

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

Seguindo…

Iniciando o Tutorial ReactJs: Desenvolvendo o Footer

Você já realizou os procedimentos dos tutorias anteriores, correto? Se ainda não fez confere lá a parte 1 Tutorial ReactJS do Zero: Criando um contador de inscritos do Youtube, parte 2 Tutorial ReactJs (Parte 2) : Configurando o Sass no React, e no desenvolvimento dos componentes Home, Progress Bar e Header responsivo.

Depois de conferir os textos anteriores ficaremos no mesmo nível de projeto e assim você aproveita melhor todo o conteúdo de hoje, Desenvolvendo o Footer.

Inicialmente, como em todo componente que vamos desenvolver precisamos analisar o design e a estrutura, pois isso embasará nosso desenvolvimento em relação ao HTML do componente.

design do footer para analisarmos a estrutura
Design do Footer da aplicação Contador de Inscritos.

Estrutura HTML do Footer

Antes de mais nada vamos abrir nosso arquivo do componente Footer .src/components/Footer/index.js. Depois que analisamos visualmente a estrutura do Footer e já abrimos o arquivo do componente, vamos então estrutura o HTML do mesmo.

Para estruturar nosso componente utilizaremos a tag <footer>, que assim como a tag “<header> ” do texto anterior, é altamente semântica, por descrever claramente o significado do elemento tanto para o navegador e o desenvolvedor quanto para os mecanismos de buscas.

Em seguida, dentro da tag <footer> uma <div> que irá conter os ícones de rede social e uma tag <p> logo abaixo que irá conter o texto de copyright.

Com o intuito de que os ícones de rede social tenham links que direcionem para suas páginas vamos já criar também dentro da <div> duas tags <a> que consequentemente receberão os ícones dentro delas.

Seu código HTML do Footer deverá ficar assim:

    <footer className="footer">
      <div className="footer__social">
        <a href="https://www.instagram.com/speak.up.tech/">
     
        </a>
        <a href="https://www.youtube.com/c/SpeakupTech">
        
        </a>  
      </div>
      <p className="footer__copyright">Made with by  Speak up Tech</p>
    </footer>

Feito isso, podemos inserir os ícones e para está tarefa iremos instalar uma biblioteca chamada “react-icons“, através do comando abaixo, na raíz do projeto e utilizando o terminal:

npm install react-icons

Acessando a documentação do react-icons você poderá buscar por inúmeras base de ícones diferentes.

Para este tutorial iremos utilizar os ícones do Font Awesome e para isso devemos importar em nosso componente os ícones desejados como no código abaixo:

import React from "react";

import { FaHeart } from "react-icons/fa";
import { FaYoutube } from "react-icons/fa";
import { FaInstagram } from "react-icons/fa";

const Footer = () => {

  return (
    <footer className="footer">
      <div className="footer__social">
        <a href="https://www.instagram.com/speak.up.tech/">

        </a>
        <a href="https://www.youtube.com/c/SpeakupTech">

        </a>  
      </div>
      <p className="footer__copyright">Made with by  Speak up Tech</p>
    </footer>
  )
}

Por fim, para utilizar os ícones é bem simples, devemos chamá-los no template como um componente que inclusive pode receber props como “size” para definir o tamanho do ícone e “color” para definir a cor do item.

Vamos então utilizar os ícones no template e definir as propriedades como no código abaixo:

    <footer className="footer">
      <div className="footer__social">
        <a href="https://www.instagram.com/speak.up.tech/">
          <FaInstagram size="40"  color="#fff"/>
        </a>
        <a href="https://www.youtube.com/c/SpeakupTech">
          <FaYoutube size="40"  color="#fff"/>
        </a>  
      </div>
      <p className="footer__copyright">Made with by <FaHeart color="#B51942"/> Speak up Tech</p>
    </footer>

Estilizando o componente Footer

A fim de deixar agora nossa Footer com a carinha do design que já vimos lá no início, vamos então estilizá-lo.
Acesse a página de estilo referente ao nosso componente ./src/components/Footer/style.scss e aplique o estilo abaixo:

.footer {
  width: 100%;
  height: 120px;
  margin-top: 80px;
  background-color: $BLUE;

  position: relative;

  &__social {
    width: 100%;
    padding-top: 8px;

    display: flex;
    justify-content: center;

    a + a {
      margin-left: 8px;
    }
  }

  &__copyright {
    position: absolute;
    bottom: 8px;

    width: 100%;
    text-align: center;
    color: white;
  }
}

Repare que aplicamos o position: absolute em copyright a fim de tornar ele absoluto em relação ao elemento pai .footer que é position: relative. Com a finalidade de colocar o copyrights posicionado sempre no “bottom” do componente Footer.

Vale ressaltar aqui também o seletor de css + utilizado para aplicar uma margem esquerda no segundo ícone de rede social através do seletor a + a.

Esse comando seleciona e aplica o estilo desejado em todos os elementos <a>que são colocados imediatamente após outro elemento <a> .

Com isso, como só temos um elemento <a> que sucede outro elemento deste mesmo tipo o nosso estilo margin-left: 8px; só sera aplicado no segundo elemento.

Consequentemente apenas nosso segundo ícone terá um afastamento à esquerda de 8px.

Considerações finais do Tutorial ReactJs: Desenvolvendo o Footer

Chegamos ao fim de todo nosso Front-End da série onde estamos desenvolvendo um contador de inscritos para o Speak Up Tech.

Esperamos que vocês tenham aproveitado ao máximo esse conteúdo. Deixem seus comentários e dúvidas aqui embaixo e não se esqueça de continuar acompanhando nossos textos, pois iremos iniciar a segunda parte dessa série onde desenvolveremos o Back-End que irá se comunicar com a API do Youtube.

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

Não deixe também de se inscrever no canal do Speak Up Tech se você curte tecnologia e este tipo de conteúdo.
E até o próximo texto!


Siga o Programadores Brasil no Google Notícias e Receba Notícias de Tecnologia -> CLIQUE AQUI e Confira.


Mais Lidas da Semana

Veja o ranking das linguagens de programação mais utilizadas no 3º trimestre de 2021

Javascript Online: Top 5 Melhores Sites para programar

[Iniciantes] Aprenda a Como Fazer ForEach em Javascript

Next.js: Conheça o Framework para ReactJS

[Iniciantes] Java e JavaScript - Entenda as diferenças

No.js - Conheça a Biblioteca que te ajuda "a fugir" do Javascript

ReactJs (Parte 5): Criando o Header responsivo do contador de Inscritos

Tutorial React (Parte 4): Progress Bar CSS

Tutorial React (Parte 3) : Desenvolvendo a Página Principal

Tutorial ReactJs (Parte 2) : Configurando o Sass no React.

2 comentários

Deixe o seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *