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 - Entendendo o que é uma SPA

Discutindo o funcionamento do React Router

Vamos discutir sobre o React Router e entender o que acontece nos bastidores. O React Router é uma biblioteca de roteamento que utiliza URLs para determinar qual componente será exibido. Com poucos passos, seguindo a documentação, conseguimos fazer com que, dada uma URL, um componente específico seja exibido. Por exemplo, se quisermos exibir a página de cadastro e acessarmos codeconnect.com/cadastro, o componente de cadastro será exibido. O mesmo ocorre para login e feed.

Ao utilizar o React Router de forma declarativa, estamos construindo uma SPA (Single Page Application, ou Aplicação de Página Única). Isso significa que temos nossa aplicação React publicada em algum lugar, ou no próprio ambiente de desenvolvimento do Vite. Quando o cliente, no sentido de client-side (a pessoa que está usando o navegador), acessa a URL codeconnect.com/cadastro, a requisição é processada e algo é entregue. Esse algo é composto por HTML, CSS e JavaScript, mas o HTML está vazio inicialmente. Somente após o carregamento no navegador é que ele saberá o que fazer, renderizando a página de login ou qualquer outra página com a qual o usuário interaja.

Explicando o processo de renderização em SPAs

Após o login, por exemplo, o usuário é encaminhado para a página inicial. Isso já está implementado pelo React Router. O ponto é que, quando fazemos essa requisição, o HTML não existe previamente. Quem cria o HTML é o próprio React. Na primeira requisição, a URL, o HTML, as imagens e os formulários não existem. Eles só passam a existir depois que o navegador solicita o HTML, que é carregado junto com o JavaScript. O JavaScript, contendo o React, inicia e renderiza tudo. Esse processo é conhecido como client-side.

Em uma Single Page Application, solicitamos ao servidor uma vez e, depois disso, não precisamos mais fazer novas requisições para renderizar a página inteira novamente. Podemos trocar informações, solicitar dados ou outros elementos, mas a página não é renderizada completamente de novo.

Contextualizando a criação das SPAs

Agora, vamos contextualizar historicamente por que as SPAs (Single Page Applications) foram criadas. Quando começamos a trabalhar com esse tipo de aplicação, entre 2013 e 2015, dependendo do framework, a ideia era criar páginas extremamente dinâmicas e interativas para a pessoa usuária, sem a necessidade de ir ao servidor, carregar e passar por ciclos de carregamento e renderização completos. Resumidamente, buscávamos mais dinamismo para as aplicações.

Atualmente, temos um ambiente híbrido. Algumas aplicações ainda utilizam SPA, enquanto outras voltaram a depender mais do servidor, pois as transições hoje são muito mais atualizadas e aprimoradas do que eram há 8, 9 ou 10 anos. Apesar disso, as single page applications continuam relevantes. Por quê? Primeiro, ainda faz sentido construir uma aplicação nessa arquitetura em muitos casos. Diversos fatores podem influenciar a decisão de construir ou não uma aplicação dessa forma. E isso se aplica a novas aplicações. Quando analisamos uma base de código já existente, o que chamamos de software "legado", encontramos muitas coisas já construídas com React Router. Portanto, ainda é relevante e precisamos conhecê-lo.

Comparando as versões 5 e 6 do React Router

Com o React Router, da versão 5 para a 6, muitas mudanças ocorreram. Vamos ver um exemplo de código de como funcionava na versão 5:

// App.js com RRD v5
<Router>
    <Switch>
        <Route path="/sobre" component={Sobre} />
        <Route path="/" component={Home} />
    </Switch>
</Router>

Na versão 5, utilizávamos Router e Switch para definir as rotas. Agora, vejamos como isso mudou na versão 6:

// App.js com RRD v6
<BrowserRouter>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sobre" element={<Sobre />} />
    </Routes>
</BrowserRouter>

Na versão 6, passamos a usar BrowserRouter, Routes e Route, o que simplifica e moderniza a forma como definimos as rotas.

Resumindo o papel do React Router em SPAs

Para resumir, uma SPA entrega um HTML uma vez e múltiplas views (visões), ou seja, múltiplas páginas, mas tudo via JavaScript, sem solicitar nada do servidor, sem pedir HTML ou CSS em lugar algum. O JavaScript, com o React, cuida disso para nós. Além disso, o React Router DOM, ou React Router, gerencia a navegação. A versão 6, que estamos utilizando agora, é bem diferente da versão 5. Portanto, ao trabalhar em um projeto, verifique o package.json para entender qual versão do React Router está sendo usada e o que pode ou não ser utilizado.

Agora que já discutimos bastante, é hora de explorar ainda mais as possibilidades do React Router dentro do projeto CodeConnect, que já começamos a desenvolver. Esse foi o tema da nossa conversa. Nos vemos na sequência. Até mais!

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á!

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