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:
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!
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 import
s, 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 import
s, 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 delasRoutes
, que anuncia a presença de rotasRoute
, a rota propriamente ditaimport { 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 siteelement
, que receberá entre chaves o elemento da páginaNeste 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á!
Anteriormente, acessamos o site do Alura Books, no qual encontramos a barra de menus superior, ou seja, o nosso cabeçalho. Nele, temos:
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 íconesfunction Header() {
return (
<HeaderContainer>
<Logo/>
<OpcoesHeader/>
<IconesHeader/>
</HeaderContainer>
)
}
Neles, configuraremos as seguintes ações:
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.
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:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas