Tutorial ReactJS do Zero: Criando um contador de inscritos do Youtube
Javascript

Tutorial ReactJS do Zero: Criando um contador de inscritos do Youtube

6 Minutos de Leitura

O ReactJS é uma tecnologia Javascript que rapidamente ganhou espaço no mercado e está sendo utilizado em larga escala. Com isso, torna-se essencial ao menos entender seu funcionamento. Veja este tutorial ReactJS do Zero que o pessoal do Speak Up Tech preparou para você.

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:

Seguindo…

Hoje em dia, tecnologias e frameworks Javascript estão cada vez mais requisitados no mundo do Desenvolvimento Web.

Pela abrangência do Javascript do back-end através do Node Js ao front-end através do Angular JS, Vue JS, React JS, entre outros, muitas vagas de emprego chamadas de Full-stack (programador que atua tanto no desenvolvimento do servidor quanto do cliente) tem surgido no mercado.

O Programadores Brasil, em parceria com o canal Speak Up Tech, preparou um super Tutorial ReactJS para que você possa dar o primeiro passo no desenvolvimento de sua aplicação Web utilizando, juntamente ao ReactJS, as tecnologias mais visadas atualmente no mercado de desenvolvimento web.

As dicas deste Tutorial ReactJS estão separadas em uma série, onde o objetivo final é criar uma página com uma espécie de contador de inscritos e uma barra de progresso que sinaliza a porcentagem de inscritos em relação a meta do canal que atualmente é de 1000 inscritos.

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

Tutorial ReactJS: Contador de Inscritos no Youtube

Nosso objetivo: Desenvolver uma aplicação Front-end e uma Back-end que, com o uso do ReactJS, irá fazer integração com a API do Youtube e irá listar os dados necessários para o contador de inscritos.

Concepção e design da interface da aplicação.

Nessa primeira dica da série você pode acompanhar a criação de uma aplicação ReactJS. Você verá também a organização das pastas e arquivos e a inicialização dos componentes e páginas. Gerando assim uma espécie de “esqueleto” da aplicação, que serve como ponto de partida para o desenvolvimento das estruturas e estilos da nossa página web.

Tutorial ReactJS: Inicializando a Aplicação React

Primeiramente, para iniciar uma aplicação React JS, você deverá ter o NodeJS instalado na sua máquina.

Importante citar que a versão do Node Js deverá ser maior que 5.2. Instale o Node CLICANDO AQUI

Com o Node atual instalado, você terá acesso ao pacote npx. E utilize o comando abaixo, utilizando seu terminal, para inicializar sua aplicação: 

npx create-react-app nome-do-meu-app

Não se esqueça de alterar “nome-do-meu-app” para o nome desejado.

Após a execução do comando acima, todas as dependências necessárias para a criação do projeto serão devidamente instaladas. Além disso, um “projeto modelo” é criado, com toda a sua estrutura de diretórios definida.

Vamos prosseguir com o nosso Tutorial ReactJS.

npm start

Utilize o comando npm start na raíz do projeto para de fato inicializar o seu servidor.

npm start

Confira no exemplo abaixo o projeto modelo rodando:

Tutorial ReactJS: Projeto modelo criado e rodando
Projeto padrão gerado pelo create-react-app rodando no browser

Iniciando o projeto

Agora abra o projeto na IDE de sua preferência. Para este artigo utilizaremos o Visual Studio Code.

Tutorial ReactJS: Visual Studio Code
Pastas e arquivos do projeto modelo do ReactJs no Visual Studio Code.

Não se esqueça de ir lá no canal do Speak Up Tech no Youtube e inscreva-se ! Clique aqui e acesse.

Estrutura de diretórios

Observando o projeto modelo criado, temos a pasta “/src” com os arquivos principais como a página da aplicação, arquivo para teste, entre outros. E dentro da pasta “/public” alguns estáticos como a logo do React e o “index.html”.

No React, esse “index.html” é responsável por toda a estrutura principal da nossa página. Todo conteúdo novo que quisermos criar deverá ser desenvolvido como um componente React, que será inserido dinamicamente utilizando o método getElementById() do Javascript.

Confira o código abaixo da “index.js” localizado no “/src”.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

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

Organizando diretórios

Após esse pequeno resumo da estrutura e funcionamento do React, vamos para o próximo passo. Devemos estruturar o projeto de maneira que irá atender as nossas demandas.

Primeira coisa é deletar os arquivos que não serão utilizados para este projeto. Com isso, dentro do caminho “/src” podemos deletar todos os arquivos, deixando apenas o “index.js” e o “App.js” que serão aproveitados.

Seguindo o mesmo princípio na pasta “/public”, podemos deixar apenas o “index.html” e o “favicon.ico”. Todo o resto não utilizaremos a princípio e podem ser deletados.

Pensando nos componentes da aplicação

Feito isso, devemos analisar o desenho da nossa aplicação e entender estruturalmente o que iremos desenvolver como componentes.

Definindo os componentes que irão compor o projeto.
Criando diretórios para os componentes definidos

Uma vez feita essa definição de componentes, devemos preparar estas estruturas em nosso código.

Para o nosso projeto então as estruturas de pastas ficaram da seguinte forma:

Estrutura de pastas do nosso projeto.

A pasta “/assets” foi criada para inserirmos os estáticos como imagens e os estilos do nosso projeto. A princípio deixaremos ela sem conteúdo.

Inicializando componentes

Agora que criamos as pastas para os nossos componentes vamos criar as estruturas básicas deles.

Vamos criar dentro do caminho “./pages/Home/” um arquivo chamado “index.js” que irá conter a estrutura react do nosso componente e um arquivo “styles.scss” que posteriormente irá conter os estilos referentes ao nosso componente.

Vamos inicializar a estrutura do componente de Home da seguinte forma:

import React from "react";

const Home = () => {
    return(<p>Oi sou a Home</p>)
}

export default Home;

Sempre importe o React no seu componente.

Para estruturar seu componente, assim como no exemplo acima, onde foi criada a Arrow Function “Home”, retorne o conteúdo HTML passando-o como parâmetro para return().

Com isso, nossa estrutura inicial do componente está pronta. Agora vamos repetir o processo para todos os nossos componentes? 

Estrutura de pastas do projeto com todos os componentes inicializados.

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

Configurando layout do projeto

Uma vez todos os componentes prontos, vamos criar um arquivo chamado “Layout.js” na pasta “/src” dentro desse arquivo vamos configurar um layout padrão da nossa aplicação.

Pelo fato de termos componentes como Header e Footer que poderão se repetir em eventuais páginas que poderemos criar no futuro, temos essa possibilidade de criar uma estrutura que retorna sempre o Header e o Footer.

E assim, entre eles, qualquer outro componente que quisermos como no nosso exemplo inicial a Home.

Para tal feito iremos instalar a dependência react-router:

npm install react-router

E inicializar o arquivos Layout.js da seguinte forma: 

import React from 'react';
import { withRouter } from 'react-router';

import Header from "./components/Header";
import Footer from "./components/Footer";

const Body = (props) => {
  return (
    <>
      <Header />
      <main className="App">
        <section className="App__content">{props.children}</section>
      </main>
      <Footer />
    </>
  )
}

export default withRouter(Body);

Não se esqueça de ir lá no canal do Speak Up Tech no Youtube e inscreva-se ! Clique aqui e acesse.

Criando e Configurando rotas

Agora nosso projeto está praticamente pronto, mas com certeza ele ainda está indicando no navegador ou no terminal que não está compilando por algum import errado ou algo do tipo.

Isso se dá pelo simples motivo de não termos configurado nossas rotas e porque os arquivos do projeto pré criado como “index.js” e “App.js” estão importando arquivos que já deletamos. 

Vamos ajustar isso para ter nossa aplicação de volta rodando então.

Agora devemos instalar a dependência “react-router-dom”:

npm install react-router-dom

Abra então o “App.js” e apague tudo que não utilizaremos no projeto e configure nele suas rotas como no código abaixo:

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Body from "./Layout";
import Home from "./pages/Home";


function App() {
  return (
    <Router>
      <>
        <Body>
          <Switch>
            <Route exact path="/" component={Home} />
          </Switch>
        </Body>
      </>
    </Router>
  )
}

export default App

Lembre-se também de apagar no “index.js” presente na pasta raíz do projeto (/src) as importações dos arquivos que já deletamos. Ele deverá ficar como abaixo:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Pronto, agora sua estrutura inicial do projeto do Tutorial ReactJS está concluída e você poderá seguir para as próximas fases da série como a configuração do Sass e o desenvolvimento dos componentes do nosso contador de inscritos.

Update (12/07/2020 19:00hrs) – SAIU NOSSO SEGUNDO TEXTO DA SÉRIE DE REACT JS DO ZERO! Clique aqui e siga nossa série.

Curtiu? O Speak Up Tech preparou um vídeo passando por todo esse processo.

Entra lá e se inscreve no canal que você poderá acompanhar a criação do projeto ReactJS e essa estrutura na prática, além de poder acompanhar todos os próximos passos nessa série de dicas.


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)


1 comentário

Deixe o seu comentário

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

Leia Também

Últimas Notícias