React: construindo SPAs com React router

Configurando o roteamento - Apresentação

Apresentando o curso de React Router

Olá! Sejam bem-vindos a mais este curso de React, desta vez focado no React Router. Vamos entender o que é essa biblioteca, como ela funciona e aprender a implementar o roteamento usando o React Router. Além disso, vamos compreender o que é uma Single Page Application (Aplicação de Página Única), qual é a motivação por trás da existência de uma SPA, como chegamos até aqui e se isso ainda é relevante ou não.

Se desejarmos aprender como definir um roteamento declarativo utilizando o React Router, estamos no lugar certo. A única coisa que precisamos saber é o próprio React. Se já dominamos componentes React, JSX, State, Effects e outros conceitos, vamos juntos nessa jornada.

Apresentando o instrutor

Meu nome é Vinicios Neves.

Audiodescrição: Vinicios é uma pessoa careca, com barba, e está associada à Alura.

Espero que estejamos tão animados quanto eu para entender como podemos construir uma SPA (Aplicação de Página Única) com as tecnologias disponíveis atualmente. Nos encontramos no próximo vídeo. Vamos lá!

Configurando o roteamento - Conhecendo o projeto

Preparando o ambiente de desenvolvimento

Vamos entender o nosso cenário atual, como está o projeto e qual é o problema que precisamos resolver. Para isso, no ambiente de preparação, já há um link para o repositório para baixar o projeto inicial. Já fiz isso na minha máquina, e ele está no meu desktop.

Vamos abrir o terminal e navegar até o desktop com o comando:

cd Desktop/

Explorando o projeto CodeConnect

Ao executar ls, podemos ver que o projeto CodeConnect, com o qual trabalharemos durante este curso, está lá. Vamos entrar nessa pasta:

cd CodeConnect/

E abri-la no VS Code com o comando:

code .

Enquanto deixamos o VS Code aberto, vamos limpar o terminal e executar o comando npm run dev. Este projeto utiliza o Vite e levantará o servidor web para nós.

npm run dev

Ao abrir no Chrome, ele carrega uma página de login. O projeto base está funcionando.

Analisando o código inicial

Agora, vamos dar uma olhada no código. Vamos maximizar o VS Code e abrir o arquivo main.js. Este arquivo está exibindo a página de login. Inicialmente, o código está configurado para renderizar a página de login:

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Login />
    {/* <Register /> */}
    {/* <Feed /> */}
    {/* <BlogPost /> */}
  </StrictMode>,
)

Temos outras páginas disponíveis, como Register para cadastro, Feed, que será a lista de blog posts do CodeConnect, e o post em si. Vamos examinar esses componentes. Vamos comentar o login e descomentar o Register para exibir a página de cadastro:

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* <Login /> */}
    <Register />
    {/* <Feed /> */}
    {/* <BlogPost /> */}
  </StrictMode>,
)

Explorando as páginas do projeto

Ao voltar para o Chrome, ele exibe a página de cadastro. Já temos duas páginas funcionando.

Agora, vamos olhar para o Feed. Ele traz uma barra lateral e o feed com todos os posts do blog. Para isso, descomente o Feed:

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* <Login /> */}
    {/* <Register /> */}
    <Feed />
    {/* <BlogPost /> */}
  </StrictMode>,
)

Por fim, vamos descomentar o blog post. Ele exibe os detalhes de um post, incluindo texto, exemplo de código e comentários:

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* <Login /> */}
    {/* <Register /> */}
    {/* <Feed /> */}
    <BlogPost />
  </StrictMode>,
)

Está tudo funcionando corretamente.

Planejando o roteamento condicional

Nosso objetivo é exibir essas páginas condicionalmente, ou seja, queremos interagir com a URL que a pessoa está acessando. Por exemplo, se acessar /auth/login, exibiremos a página de login. Se acessar /auth/register, exibiremos a página de cadastro. É isso que vamos implementar.

Antes de colocarmos a mão na massa, vamos entender como este projeto está organizado em termos de código.

Estrutura do projeto e organização de código

A primeira pasta que vamos mostrar é a pasta "pages". Esta pasta contém todas as páginas e componentes que acabamos de ver: blog post, feed, login e register. Um detalhe importante é que cada página utiliza um layout específico. Por exemplo, as páginas de login e register usam o AltLayout, enquanto a página de feed e o blog post utilizam o AppLayout. Assim, extraímos o código comum a todas essas páginas, e podemos analisá-las também.

Ao abrir o layout/app/index, encontramos o AppLayout, que exibe a barra de navegação lateral. No caso do AltLayout, de autenticação, temos um container, um card e o conteúdo principal da página, que é o que muda. No caso do login e logout, o que muda é o formulário. Se olharmos nas páginas, no index.js dentro de login, encontramos um AltFormContainer com todo o formulário, e o mesmo ocorre com o register, utilizando o AltLayout com AltFormContainer.

Explorando componentes e layouts

O projeto está bem organizado. A última pasta que vamos ver é a de "components". Nela, encontramos o Side, SideLink, o próprio AltFormContainer, Alt, Avatar, Button, CardPost, CheckBox, entre outros. Ou seja, todos os nossos componentes visuais estão dentro da pasta "components", todos os nossos layouts estão na pasta "layouts" e todas as nossas páginas estão na pasta "pages".

É isso que vamos trabalhar. Se desejar, entre este vídeo e o próximo, você pode explorar o projeto para ver como ele foi feito. Ele foi construído usando CSS modules, e já temos um curso específico sobre isso. Você pode conferir se quiser entender como ele foi construído.

Concluindo a preparação para o roteamento

Com o projeto apresentado, o CodeConnect já deve estar rodando na sua máquina, assim como está na nossa. Estamos prontos para começar a entender como faremos o roteamento e exibiremos componentes condicionalmente, de acordo com a rota ou URL acessada no momento.

Nos vemos na próxima aula. Até lá!

Configurando o roteamento - Criando a primeira rota

Introduzindo o React Router

Para realizar o roteamento, utilizaremos uma biblioteca bastante conhecida no mundo do React, chamada React Router. Vamos acessar a internet e buscar por React Router no Google. O primeiro resultado que aparece é a documentação oficial, então clicamos em reactrouter.com, depois em "Docs" e, no menu à esquerda, em "Instalação". Por padrão, a opção de instalação com framework está selecionada, mas não é isso que queremos. Vamos trabalhar com o modo declarativo do React Router. No menu à esquerda, na parte inferior, encontramos "Declarative Mode, Instalação", que é o que precisamos.

Quais são os passos para instalar o React Router? O primeiro passo é criar o projeto, mas podemos pular essa etapa, pois o CodeConnect já foi criado utilizando o Vite. Em seguida, instalamos a biblioteca. No terminal, paramos o projeto que estava rodando com npm run dev e colamos o comando npm i react-router-dom, que copiamos do navegador.

npm i react-router-dom

Após a instalação, executamos npm run dev novamente para reiniciar o projeto.

npm run dev

Configurando o BrowserRouter

No CodeConnect, abrimos o console com o inspecionador de elementos e recarregamos a página para garantir que a instalação da biblioteca não causou problemas. É um hábito verificar se está tudo funcionando corretamente após a instalação de uma biblioteca.

Com a instalação concluída, a documentação indica que devemos renderizar um BrowserRouter na camada superior da aplicação. Copiamos a linha que importa o BrowserRouter e, no VS Code, colamos no arquivo main.

import { BrowserRouter } from "react-router-dom";

Na linha 8, inserimos o BrowserRouter e renderizamos tudo dentro dele.

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      {/* <Login /> */}
      {/* <Register /> */}
      {/* <Feed /> */}
      <BlogPost />
    </BrowserRouter>
  </StrictMode>,
)

Existem várias coisas comentadas, mas podemos deixá-las assim por enquanto, pois estamos seguindo a orientação da documentação. Após recarregar, verificamos que a aplicação continua funcionando, exibindo o autoregistro discutido na última aula. Ao trocar, comentamos o do blog post e exibimos o do registro, e tudo continua funcionando corretamente. O React Router está instalado.

Definindo as Rotas

Voltamos à documentação, onde, no canto inferior esquerdo, encontramos a parte sobre roteamento, que é o que desejamos. Vamos para o nosso routing. Definimos as rotas utilizando o BrowserRouter e um componente chamado Routes no plural, que conterá todas as rotas.

<BrowserRouter>
  <Routes>
    
  </Routes>
</BrowserRouter>

Cada elemento Routes no plural pode possuir várias Route no singular. Na linha 11 da documentação, é mencionado que temos um Path, ou seja, um caminho e um elemento. Isso se refere ao Path que utilizamos, dado uma URL, como o LoginRegister, que exibirá o componente específico.

Podemos agora ir para o código e começar a implementar. No VS Code, dentro do BrowserRouter, criamos o Routes no plural. Todas as nossas rotas ficarão dentro dele. Em seguida, criamos uma Route no singular.

<Routes>
  <Route />
</Routes>

O VS Code já importou automaticamente tanto o Routes no plural quanto o Route no singular. Vamos prosseguir com a implementação.

Definição de Rotas no Componente

No nosso componente de rota, precisamos definir o path (caminho). Vamos usar o exemplo /auth/register. Além disso, precisamos definir o elemento que será renderizado, que é o nosso componente Register.

<Route path='/auth/register' element={<Register />} />

É importante notar que estamos utilizando o componente na forma de JSX, e não como uma função, pois o React Router não aceita dessa forma.

Já temos a rota /auth/register e podemos adicionar /auth/login.

<Route path='/auth/register' element={<Register />} />
<Route path='/auth/login' element={<Login />} />

Estamos utilizando o prefixo /auth para agrupar por contexto, já que estamos lidando com autenticação, como cadastrar um novo usuário e fazer login.

Podemos também definir a rota inicial. Quando alguém acessar /, exibiremos o feed de postagens.

<Route path='/auth/register' element={<Register />} />
<Route path='/auth/login' element={<Login />} />
<Route path='/' element={<Feed />} />

Se alguém acessar uma rota específica, exibiremos um blog-post, que será o elemento BlogPost.

<Route path='/auth/register' element={<Register />} />
<Route path='/auth/login' element={<Login />} />
<Route path='/' element={<Feed />} />
<Route path='/blog-post' element={<BlogPost />} />

Vamos remover os componentes soltos e deixar apenas as rotas organizadas. Ficamos com o StrictMode do lado de fora, o BrowserRouter, e dentro dele, as rotas. Temos quatro rotas conhecidas: cadastrar um usuário, fazer login, feed de blog e o post em si, o BlogPost.

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path='/auth/register' element={<Register />} />
        <Route path='/auth/login' element={<Login />} />
        <Route path='/' element={<Feed />} />
        <Route path='/blog-post' element={<BlogPost />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
)

Testando as Rotas

Após salvar, verificamos se tudo funciona. No navegador, ao recarregar a página, por padrão, o feed é carregado, que era o esperado. Ao acessar /auth/register, a página de cadastro é exibida. Em /auth/login, a página de login aparece. E ao acessar /blog-post, o BlogPost é carregado.

Implementação do Roteamento

O roteamento está implementado. Precisamos de um BrowserRouter, rotas e uma rota. Essa é a organização mínima para um React Router declarativo. Resumidamente, implementamos o roteamento e estamos reagindo à troca de rota. Usar essa biblioteca é mais interessante do que manualmente monitorar o objeto window, location e pathname.

Considerações Finais

Embora o roteamento esteja parcialmente implementado, precisamos entender o que está acontecendo. É importante compreender a arquitetura por trás da solução e prestar atenção aos detalhes ao usar o React Router. Vamos explorar mais a fundo no próximo vídeo.

Sobre o curso React: construindo SPAs com React router

O curso React: construindo SPAs com React router possui 84 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

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

• Configurando o roteamento
• Protegendo e agrupando rotas
• Trabalhando com Autenticação
• Utilizando URLs dinâmicas
• Implementando layouts e página 404