React e Node.js: consumindo APIs no React no projeto full stack

Criando uma nova página - Apresentação

Olá! Boas-vindas ao curso de Full Stack com React e Node.js! Eu sou Bernardo Severo e serei seu instrutor durante este processo.

Autodescrição: Bernardo é um homem branco, com cabelos, olhos, barba e bigode castanhos. Tem óculos arredondados de metal e está com uma camiseta preta. Ao fundo, uma parece lisa, iluminada com um degradê de luzes rosa e azul.

Este curso faz parte da Formação Full Stack, que ensina a construir um site no Front-end e no Back-end, além de realizar a sua publicação no ar.

Para que seja possível acompanhá-lo, indicamos a conclusão dos cursos anteriores.

Durante a formação, transitamos entre o Front e o Back-end, desenvolvendo conhecimentos básicos das duas áreas. Neste curso, vamos conectá-los para formar o verdadeiro conhecimento Full Stack.

Durante este mergulho, aprenderemos a:

• Usar o Axios para realizar requisições HTTP
• Realizar um fluxo de navegação entre as páginas da nossa aplicação, por meio da criação de uma página para livros favoritos
• Conectar nossa API com o nosso Front-end

Vale lembrar que este curso espera um nível de Javascript entre o básico e o intermediário, para que possamos focar apenas no React e no Node.js.

Para complementar os estudos, disponibilizaremos Aluras +, Artigos e Podcasts que podem ser consultados para afiar ainda mais o seu conhecimento.

Topa o desafio? Vamos trabalhar juntos!

Criando uma nova página - Primeira rota com React Router

Vamos começar a trabalhar. Anteriormente, criamos o servidor AluraBooks e a página Livros.

Agora, voltaremos ao front-end, ou seja, ao site AluraBooks, para realizar a conexão entre a API criada no último curso e o site criado no primeiro.

Para isso, aprenderemos o conceito de Rotas, muito importante para o desenvolvimento front-end.

Costumamos ouvir falar de rotas no contexto de APIs, entretanto, aqui será diferente: quando abordarmos as rotas, estaremos falando da navegação da pessoa usuária no site.

Acessando a página do AluraBooks por meio do React App aberto no navegador, veremos a barra de menus superior. Nela, temos as opções "Categorias", "Favoritos" e "Minha estante".

Temos a impressão de que, quando clicarmos nelas, seremos direcionados para as suas respectivas páginas. Isso faz sentido, portanto, implementaremos esta funcionalidade para conseguirmos construir novas páginas e a separação entre elas, aproveitando assim todas as ferramentas disponibilizadas pela nossa API.

Voltaremos ao código acessando a nossa IDE. Nela, abriremos o projeto alura-books-aulas, criado no primeiro curso.

Abriremos o terminal novamente, onde escreveremos o comando que instalará o React Router (roteador React).

npm install react-router-dom

Nele, temos o npm install, comando já conhecido de instalação de pacotes, e o nome do pacote a ser instalado: react-router-dom.

Pressionaremos "Enter" e veremos o processo de instalação do pacote, cujo tempo variará dependendo da velocidade da internet.

Após a instalação, aparecerão mensagens no terminal. Entre elas, veremos a acusação de vulnerabilities (vulnerabilidades).

12 vulnerabilities (1 low, 10 high, 1 critical)

Não precisamos nos assustar, pois estamos construindo uma aplicação com fins didáticos. As mensagens indicam que a instalação foi bem-sucedida.

Partiremos para o código, acessando o explorador de arquivos lateral. Nela, acessaremos o arquivo index.js, dentro da pasta "src".

Este arquivo é a raiz do projeto, a parte mais "crua" do código, onde o React começa a trabalhar.

Nele, abaixo dos imports, veremos o bloco const GlobalStyle que inserimos no primeiro curso, com os CSS globais — estilos utilizados em toda a aplicação. Vamos clicar na seta à esquerda da primeira linha deste bloco para o recolhermos, evitando que ele ocupe muito espaço na nossa tela.

Entre este bloco e os imports, adicionaremos um import do React Router.

Quando escrevemos uma parte do nome do pacote, o próprio VS Code abre uma lista com sugestões. Em vez de digitar por extenso o nome do pacote, podemos escolher, nessa lista, a opção "react-router-dom".

No interior das chaves, adicionaremos as seguintes ferramentas:

• BrowserRouter, que encapsulará as rotas, permitindo a criação delas
• Routes, que anuncia a presença de rotas
• Route, a rota propriamente dita

import { BrowserRouter, Routes, Route } from "react-router-dom"

Importante: Não abordaremos profundamente a etapa de Router, pois não se trata do foco do curso, e sim de um auxílio para realizarmos a conexão com a API. Caso haja interesse em se aprofundar no tema, temos cursos na plataforma da Alura sobre roteamento com React.

Abaixo do bloco const GlobalStyle, temos a linha const root e o bloco root.render(). Acessaremos o interior deste último, onde criaremos a tag <BrowserRouter>, logo abaixo da tag <GlobalStyle />.

Pressionaremos "Enter" para deixar um espaço entre a sua abertura e o seu fechamento. Neste espaço, adicionaremos a tag <Routes>. No interior desta, por sua vez, adicionaremos a <Route/>, que não terá abertura e fechamento.

const GlobalStyle = createGlobalStyle`
// Código omitido
`

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <GlobalStyle />
        <BrowserRouter>
            <Routes>
                <Route />
            </Routes>
        </BrowserRouter>
        <App />
    </React.StrictMode>
)

À esquerda dos sinais /> desta tag, adicionaremos os seguintes parâmetros:

• path (caminho) que receberá entre aspas duplas a rota que nos levará à página desejada do nosso site
• element, que receberá entre chaves o elemento da página

Neste caso, faremos um teste: adicionaremos no path um "/favoritos" para acessar a página de livros favoritos e no element uma tag <p> com a mensagem "Oi!".

root.render(
    <React.StrictMode>
        <GlobalStyle />
        <BrowserRouter>
            <Routes>
                <Route path="/favoritos" element={<p>Oi!</p>} />
            </Routes>
        </BrowserRouter>
        <App />
    </React.StrictMode>
)

Vamos copiar esta linha com "Ctrl+C" e colá-la abaixo de si mesma com o "Ctrl+V". Assim, duplicamos esta linha.

No código colado, substituiremos o path para "/", pois ele será a nossa "Home" (página inicial).

root.render(
    <React.StrictMode>
        <GlobalStyle />
        <BrowserRouter>
            <Routes>
                <Route path="/favoritos" element={<p>Oi!</p>} />
                <Route path="/" element={<p>Oi!</p>} />
            </Routes>
        </BrowserRouter>
        <App />
    </React.StrictMode>
)

Anteriormente, havíamos criado a Home com a tag <App />, que corresponde a toda a nossa página. Ela se encontra, neste momento, abaixo da tag </BrowserRouter>.

Vamos recortá-la com "Ctrl+X" e colá-la no element da segunda <Route>, no lugar do parágrafo.

root.render(
    <React.StrictMode>
        <GlobalStyle />
        <BrowserRouter>
            <Routes>
                <Route path="/favoritos" element={<p>Oi!</p>} />
                <Route path="/" element={<App />} />
            </Routes>
        </BrowserRouter>
        <App />
    </React.StrictMode>
)

Temos duas rotas: uma para favoritos, com o texto "Oi!" e outra para a página principal.

Voltaremos ao navegador para testar o código. Entretanto, nada é mágica: ainda não criamos o direcionamento pelo clique na barra de menus, portanto, a princípio, precisaremos acessar essas rotas manualmente.

Para isso, acessaremos a barra de pesquisa do navegador, onde temos a URL localhost:3000. Vamos adicionar um /favoritos à sua direita e pressionar "Enter".

Contudo, a página não será carregada e o navegador retornará um erro.

Isso ocorre pois esquecemos de rodar a aplicação. Aprendemos nos primeiros cursos que devemos testar a aplicação com ela rodando.

Para isso, acessaremos o mesmo terminal que utilizamos para a instalação e digitaremos o comando abaixo responsável por rodar a aplicação.

npm run start

Após alguns segundos e algumas mensagens no terminal, seremos direcionados automaticamente ao navegador, onde veremos o recarregamento da página.

Voltando ao terminal, entenderemos algumas das mensagens retornadas:

Starting the development server... (iniciando o servidor de desenvolvimento), em azul

Compiled with warnings. (compilado com avisos), em amarelo

Apesar dos avisos, estas mensagens indicam que a aplicação rodou com sucesso.

Voltando ao nosso site no endereço localhost:3000/favoritos, veremos no canto superior esquerdo da tela o texto "Oi!" na cor preta.

Se retirarmos o /favoritos e dermos "Enter" na rota localhost:3000, voltaremos para a página inicial. Se quisermos voltar para a página de favoritos, basta devolver o /favoritos à URL.

Temos duas páginas rodando na mesma aplicação. A seguir, faremos mais descobertas, nos vemos lá!

Criando uma nova página - Criando rotas para a aplicação

Anteriormente, acessamos o site do Alura Books, no qual encontramos a barra de menus superior, ou seja, o nosso cabeçalho. Nele, temos:

• Os menus "Categorias", 'Favoritos" e "Minha Estante" no centro
• A logo à esquerda
• Dois botões com ícones de pessoa usuária e de sacola de compras, à direita

A intenção é adicionar funções a estes menus, permitindo que o site seja navegável pelas opções do cabeçalho.

Se clicarmos em favoritos, nada acontece. Precisamos configurar a ação deste elemento.

Voltando ao nosso código, fecharemos os arquivos index.js e App.js que deixamos abertos no último vídeo.

Pelo explorador, percorreremos o caminho "src > componentes > Header", e acessaremos o arquivo index.js.

Abaixo do bloco const HeaderContainer, veremos o bloco function Header(). Em seu interior, veremos as tags abaixo, que correspondem a elementos da barra de menus:

• <Logo>, que representa a imagem da logo
• <OpcoesHeader>, que representa as opções "Categorias", "Favoritos" e "Minha Estante"
• <IconesHeader>, que representa os ícones

function Header() {
    return (
        <HeaderContainer>
            <Logo/>
            <OpcoesHeader/>
            <IconesHeader/>
        </HeaderContainer>
    )
}

Neles, configuraremos as seguintes ações:

• Com o clique na logo, seremos direcionados para a Home
• Com o clique em "Favoritos", seremos direcionados para a página de livros favoritos

Começaremos pela segunda ação. Se pressionarmos o botão "Ctrl" enquanto clicarmos no componente <OpcoesHeader>, seremos direcionados para o seu arquivo.

Nós criamos este arquivo anteriormente. Nele, veremos a função OpcoesHeader() que representa o componente propriamente dito. Acima dela, temos o CSS configurado em dois blocos de constantes: Opcao e Opcoes.

Vamos clicar na seta à esquerda de ambos os blocos CSS para que sejam recolhidos e ocupem menos espaço na tela.

Voltando a OpcoesHeader(), adicionaremos em seu interior, à esquerda da tag <Opcao>, o componente <Link> que terá abertura e fechamento.

Quem for acostumado com HTML deve lembrar que utilizamos a tag <a> para criar links. Com o React Router, utilizamos o <Link> que é parte da própria ferramenta.

function OpcoesHeader() {
    return(
        <Opcoes>
            { textoOpcoes.map( (texto) => (
                <Link></Link> <Opcao><p>{texto}</p></Opcao>
            ) ) }
        </Opcoes>
    )
}

Vamos recortar o restante desta linha e colar entre as tags do <Link>.

                <Link><Opcao><p>{texto}</p></Opcao></Link>

Adicionando somente este link, o sistema não saberá para onde queremos ir. Para resolver este problema, adicionaremos uma propriedade chamada to ("para") que informa o local para onde seremos direcionados.

Ele receberá um /favoritos entre aspas duplas, para que o sistema nos direcione para a página de favoritos.

function OpcoesHeader() {
    return(
        <Opcoes>
            { textoOpcoes.map( (texto) => (
                <Link to="/favoritos" ><Opcao><p>{texto}</p></Opcao></Link>
            ) ) }
        </Opcoes>
    )
}

Por fim, importaremos o <Link> no início do arquivo, abaixo do outro import.

import styled from 'styled-components'
import { Link } from 'react-router-dom'

Salvaremos o código e faremos o teste.

Voltando ao navegador, veremos que as três opções centrais na barra de menus superior estão sublinhadas e mudaram de cor, utilizando a formatação CSS padrão de um link.

Clicaremos em "Favoritos" e seremos direcionados para uma página em branco com o texto "Oi!".

Na barra de busca, veremos a URL "localhost:3000/favoritos". Isto indica que o redirecionamento funciona e nos leva para a página desejada.

Por enquanto, não temos nada na tela que nos leve de volta à página anterior. Por isso, clicaremos no botão com o ícone de seta apontada para a esquerda, disponibilizado pelo próprio navegador.

Dica: Para voltar à página anterior em navegadores como Chrome e Firefox, é possível utilizar o atalho de teclado "Alt + seta para esquerda".

Configuraremos o cabeçalho para que seja fixo, permitindo que naveguemos tranquilamente pelas páginas.

Agora podemos navegar para a página de favoritos quando quisermos, basta um clique no menu "Favoritos".

Entretanto, configuramos somente um link, e este nos levará sempre para a página de favoritos. Se clicarmos em qualquer uma das três opções da barra de menus, seremos direcionados para esta página.

Voltando ao código, resolveremos este problema configurando um elemento que já foi abordado anteriormente: o map().

Antes disso, iremos à linha const textoOpcoes = ['CATEGORIAS', 'FAVORITOS', 'MINHA ESTANTE'], onde substituiremos o MINHA ESTANTE por ESTANTE para evitar confusão.

const textoOpcoes = ['CATEGORIAS', 'FAVORITOS', 'ESTANTE']

function OpcoesHeader() {

    //Código omitido

}

Assim como temos um texto variável conforme as opções dessa lista, teremos um texto em nosso link que fará referência a 'CATEGORIAS', 'FAVORITOS' ou 'ESTANTE'.

Voltaremos à tag <Link>, onde substituiremos o conteúdo da propriedade to, de "/favoritos" para {}.

Entre estas chaves, utilizaremos a concatenação de strings, conceito que aprendemos com os estudos de JavaScript. Para isso, adicionaremos duas crases, entre as quais juntaremos o / da rota, um cifrão e outro bloco de chaves.

Esta sintaxe possibilita a utilização de variáveis dentro do texto. Entre o novo bloco de chaves, adicionaremos o texto.

function OpcoesHeader() {
    return(
        <Opcoes>
            { textoOpcoes.map( (texto) => (
                <Link to={`/${texto}`} ><Opcao><p>{texto}</p></Opcao></Link>
            ) ) }
        </Opcoes>
    )
}

Este trecho pode ter ficado confuso, mas serviu para reacender o nosso amor pelo JavaScript! Nele, juntamos o / com o texto, e teremos uma modificação neste último conforme a opção de menu escolhida. Se tivéssemos um milhão de links, teríamos um milhão de opções de / e texto.

O React não é case sensitive, ou seja, não reconhece diferenças entre letras maiúsculas e minúsculas. Contudo, para que a nossa URL fique mais elegante, adicionaremos um .toLowerCase() à direita do texto para transformar nossas opções escritas em maiúscula na lista para que sejam exibidas em minúscula na URL.

function OpcoesHeader() {
    return(
        <Opcoes>
            { textoOpcoes.map( (texto) => (
                <Link to={`/${texto.toLowerCase()}`} ><Opcao><p>{texto}</p></Opcao></Link>
            ) ) }
        </Opcoes>
    )
}

Salvaremos o código e retornaremos ao navegador. Clicaremos no menu "Favoritos", o que nos redirecionará para a página de favoritos, cuja URL exibida será localhost:3000/favoritos.

Temos a nossa primeira navegação. A seguir, vamos construir a etapa da logo e dos outros botões.

Sobre o curso React e Node.js: consumindo APIs no React no projeto full stack

O curso React e Node.js: consumindo APIs no React no projeto full stack possui 133 minutos de vídeos, em um total de 36 atividades. Gostou? Conheça nossos outros cursos de Node.JS em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Criando uma nova página
• Requisições com Axios
• Rota de livros favoritos
• Usando API de favoritos