Tutorial React (Parte 3) : Desenvolvendo a Página Principal - Programadores Brasil
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).
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.
Arquivo da página Home selecionada
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:
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:
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
<p>Inscritos</p>
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).
&__subs {
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:
<div className="App__content__subs">
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.