Javascript

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

3 Minutos de Leitura
Acompanhe o quinto texto da saga de Tutoriais do React JS do Zero

Vamos dar início a mais um tutorial ReactJS da série desenvolvida em parceira com o canal Speak Up Tech, e no tutorial de hoje iremos fazer juntos o Header responsivo da nossa 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.

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

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

Seguindo…

Iniciando o Tutorial ReactJs

Partindo do princípio que você já tem toda a aplicação estruturada como ensinamos no Tutorial ReactJS do Zero: Criando um contador de inscritos do Youtube, todo o estilo configurado como previamente falado no Tutorial ReactJs (Parte 2) : Configurando o Sass no React. e também já desenvolveu a Home e a Progress Bar, vamos iniciar o desenvolvimento de hoje acessando a pasta ./src/assets/imgs/ e importando as imagens que iremos utilizar para no nosso componente Header.

Lembrando que você pode acessar as imagens utilizadas nesse projeto acessando o repositório do código Clicando Aqui!

Depois que você inseriu as imagens dentro da pasta, vá até o arquivo do componente Header ./src/components/Header/index.js e importe as imagens no início do arquivo como no exemplo abaixo:

import React from "react";
import Background from "../../assets/imgs/header-background.svg";
import Logo from "../../assets/imgs/logo.svg";

const Header = () => {
    return(<p>Oi sou o Header</p>)
}

export default Header;

Estrutura HTML

Em seguida, vamos começar a estruturar o HTML do Header, para tal utilizaremos a tag <header> por ser altamente semântico, ou seja, descrever claramente o significado do elemento tanto para o navegador e o desenvolvedor quanto para os mecanismos de buscas.

Então dentro do <header> podemos inserir a tag <img> que utilizaremos para colocar a logo do Speak Up Tech no Header.

const Header = () => {
  return (
    <header className="header" style={{backgroundImage: `url(${Background})`}} >
      <img className="header__logo" src={Logo} alt="Logo Speak up Tech"/>
    </header>
  )
}

A fim de inserir nossa imagem de fundo no Header utilizaremos o atributo “style”, um velho conhecido das tags HTML quando queremos inserir CSS inline, ou seja, CSS direto nas tags HTML. Entretanto no React devemos nos atentar que as propriedades CSS devem ser escritas utilizando CamelCase, ou seja, no nosso caso ao invés de utilizarmos “background-image”, vamos escrever backgroundImage. Então nosso código ficará assim:

import Background from "../../assets/imgs/header-background.svg";
import Logo from "../../assets/imgs/logo.svg";

const Header = () => {
  return (
    <header style={{backgroundImage: `url(${Background})`}} >
      <img/>
    </header>
  )
}

export default Header;

Repare que para passar a variável Background para dentro do style foi necessário utilizar template string `${}`, pois dessa forma podemos concatenar a string “url” com a variável `url(${Background})`.

Por fim, vamos colocar classes em nossa estrutura para que possamos estilizar nosso Header. Com isso, o código ficará assim:

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

  const Header = () => {
  return (
    <header className="header" style={{backgroundImage: `url(${Background})`}} >
      <img className="header__logo" src={Logo} alt="Logo Speak up Tech"/>
    </header>
  )
}

Estilizando nosso componente Header

Em conclusão, podemos acessar o arquivo de estilo do Header ./src/components/Header/styles.scss e estilizar nosso componentes com as seguintes propriedades:

.header {
  width: 100%;
  height: 130px;
  
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  align-items: center;
  justify-content: center;

  @media #{$BREAKPOINT-DESK} {
    height: 260px;
  }

  &__logo {
    width: 80%;

    @media #{$BREAKPOINT-DESK} {
     width: 50%;
    }
  }
}

Com o propósito de deixar o Header responsivo, ou seja, adequado tanto para os aparelhos móveis quanto para os desktops, repare que utilizamos o @media, que nada mais é do que um CSS Media Query, ou seja, um bloco de propriedades CSS que só será aplicado quando sua condição for verdade.

No nosso caso essa condição é o $BREAKPOINT_DESK que configuramos lá no Tutorial ReactJs (Parte 2) : Configurando o Sass no React.

Considerações finais do Tutorial ReactJs de Hoje

Por fim, chegamos ao final de mais um tutorial ReactJS da série onde estamos desenvolvendo um contador de inscritos para o Speak Up Tech.

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

Fique ligadinho para não perder o próximo tutorial da série onde iremos desenvolver o footer (rodapé) da nossa aplicação e finalizar o nosso Front-End, podendo assim seguir com a segunda parte desta série onde iremos desenvolver juntos o Back-End que irá se comunicar com a API do youtube para que possamos depois integrar os dados provindos dessa API com o Front-End.

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

Tutorial ReactJS (Parte Final): Desenvolvendo o Footer

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.

Deixe o seu comentário

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