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

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

4 Minutos de Leitura
Tutorial React (Parte 3) : Desenvolvendo a Página Principal

Esse é o nosso Tutorial React Parte 3. E no nosso último texto dá serie tutoriais React JS do Zero, nós ensinamos como configurar e utilizar o Sass no REACT JS.

Se você caiu de paraquedas nesse artigo, 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.

Igualmente, se você ainda não fez a parte inicial de criação da aplicação React, organização de diretórios e inicialização de componentes, da uma conferida no nosso primeiro tutorial da série, o Tutorial ReactJS do Zero: Criando um contador de inscritos do Youtube e depois volta aqui pra seguir com Tutorial React: Desenvolvendo Página Principal.

Tendo em vista que você já realizou os tutoriais anteriores, hoje iremos desenvolver a nossa Home utilizando React Js e estilizá-la com 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 inscreva-se ! Clique aqui e acesse.

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

Iniciando Tutorial React

A página principal, muitas vezes chamada apenas de “home”, é o núcleo da nossa aplicação. Ela guarda a nossa lógica principal, onde apresentamos ao usuário os dados enviados pelo servidor de uma forma amigável.

Estrutura de arquivos do Tutorial React
Arquivo da página Home selecionada

Estrutura Inicial

Como você pode ver na imagem ao lado, você vai achar o arquivo da página principal utilizando o seguinte endereço dentro do projeto (partindo da raiz do projeto): ./src/pages/Home/index.js

Sendo assim, vamos começar criando, nesse arquivo, três parágrafos (em HTML nós utilizamos a tag <p>) dentro de uma tag <article>, sendo dois deles também dentro de uma <div>,

Essa vai ser a estrutura principal da nossa página.

Contudo, devemos também lembrar que, por se tratar de um componente em React, precisamos importar o React logo no início do nosso arquivo, deixando o React saber que estamos criando um componente, bem como exportar nosso componente com o comando export default Home.

Desse modo, neste ponto o seu arquivo deve estar da seguinte forma:

import React from "react";

const Home = () => {
  return (
    <article>
      <p></p>
      <div>
        <p></p>
        <p></p>
      </div>
    </article>
  );
};

export default Home;

Em seguida, para nos dar mais clareza sobre como a página deve ser estruturada, nós vamos adicionar conteúdo estático dentro das tags <p>.

O primeiro parágrafo é responsável por apresentar uma breve descrição do canal, por hora nós vamos utilizar o Mussum Ipsum para gerar um texto genérico (placeholder). Caso você não conheça o Mussum Ipsum é um “gerador lorem ipsum” com um toque de cevadis.

O segundo parágrafo nós vamos escrever por hora o número de inscritos do canal (lembrando que no futuro esta informação será integrada com o conteúdo dinâmico da API do Youtube) e por último, colocaremos a palavra “inscritos”.

Por conseguinte, vamos também já importar o componente Progress criado na primeira parte desta série. Nós não vamos utilizar ele agora mas desta forma já deixamos tudo pronto para os próximos passos nessa jornada juntos.

Como resultado, se você chegou até aqui, o seu código deve estar assim:

import React from "react";

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

const Home = () => {
  return (
    <article>
      <p>
        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>
      <div>
        <p>133</p>
        <p>Inscritos</p>
      </div>
      <Progress/>
    </article>
  );
};

export default Home;

Adicionando Estilos da nossa página

Então agora, vamos adicionar alguns estilos utilizando Sass para deixar nossa aplicação um pouco mais bonita. Nós vamos fazer isto utilizando o arquivo no caminho ./src/pages/Home/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:

.App {
  &__container {
    margin-top: 24px;

    &__text {
      text-align: justify;
    }

    &__subs {
      font-weight: bold;
      display: flex;
      flex-direction: column;
      align-items: center;

      &__count {
        font-size: 130px;
      }
      &__subtitle {
        font-size: 40px;
      }
    }
  }
}

Mas o que está faltando agora? Se você disse “chamar as classes do Sass dentro do arquivo do componente” você acertou! Caso você tenha dito outra coisa, volte duas casas. Por fim, nosso arquivo ./src/pages/Home/index.js vai ficar assim:

import React from "react";

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

const Home = () => {
  return (
    <article>
      <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>
      <div className="App__content__subs">
        <p className="App__content__subs__count">133</p>
        <p className="App__content__subs__subtitle">Inscritos</p>
      </div>
      <Progress/>
    </article>
  );
};

export default Home;

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

Finalizando o Tutorial React de hoje

Em conclusão, se você chegou até o final do nosso Tutorial React provavelmente tem seu componente 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!


Fórum de Programação para Iniciantes - Tire Todas as suas Dúvidas

Começando Agora na Programação? Tire todas as suas dúvidas no PB Overflow, nosso Fórum de Programação para Iniciantes (CLIQUE AQUI)


Deixe o seu comentário

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

Leia Também

Últimas Notícias