Rotas - Um pouco de React com Router Dom

Fala, Dev. Hoje, trago o tema de rotas.

Quando falamos em JavaScript como tecnologia e começamos a aprender React, esse é um dos principais temas, pois, com React temos o conceito de Single Page Application (SPA), ou traduzindo... Aplicação de Única Página.

A ideia é simples. Você cria uma aplicação que fica renderizando a página, a medida que o usuário interage (cliques, eventos e mais). Logo, não é preciso recarregar as informações, dando reloads. Tudo acontece dinamicamente, no navegador.

Para isso, o carregamento inicial pode até ser um pouco mais lento do que o tradicional. Mas, depois disso, você tem ganho de performance e melhora a experiência do usuário.

A aplicação fica mais rápida e dinâmica. A Rota é semelhante a "tag a", de âncora. No React, instalamos a dependência React Router Dom, e já temos a disponibilidade de uso dos componentes, tal como, BrowserRouter, Routes, Route, Link.

A ideia é bastante simples, mas a criação é poderosa. Um BrowserRouter é como um local que acolhe a estrutura de navegação da sua aplicação. As Route são gerenciadas pelo componente Routes, que nada mais é do que um armazenador de diversas Rotas, que são os componentes. Veja abaixo a estrutura para ficar mais claro:

<BrowserRouter>

<Navbar />

<Routes>

<Route path='/' element={<Home />} />

<Route path='/sobre' element={<Sobre />} />

</Routes>

</BrowserRouter>

Acima, pode-se perceber que dentro de Routes, tem várias Route. Já dentro de BrowserRouter tem a Navbar e as Routes.

Nada mais é do que uma estrutura de componentes, que representam as páginas, as URLs, ou melhor dizendo, as Rotas.

Além das rotas comuns, podemos criar a rota 404, quando o usuário digita uma url inválida, tal como: <Route path="*" element={<NotFound />} /> representado por um asterisco no path (endereço). Já o element, informa o nome do componente, que possui todas as informações da página, tal como, títuto, detalhes, links e mais, assim como, a estilização do css.

No exemplo que citei, NotFound é um componente que representa uma página web, que informa ao usuário que ele digitou uma url inválida, e pode ter uma botão que o leve para a home.

Como eu gostava muito de criar tudo de uma vez só, deu um trabalho para me adaptar a esse conceito de componentes, hierarquias, estilização separada (componetizada) e rotas.

Mas, hoje, vejo que facilita demais a manutenção, pois, tudo é separado e as modificações realizadas não afetam o código geral, e sim, apenas o componente desejado.

Posso reutilizar o mesmo componente em vários locais, e assim, tudo fica mais simples, organizado e prático de gerenciar.

Com as rotas o projeto fica bem estruturado, com pastas organizadas, e com responsabilidades bem definidas.

Temos as pastas de componentes, de rotas, de hooks. Já tive a oportunidade de trabalhar com Json server, que simula uma API Rest, onde você pode aplicar com Programação Assíncrona em javascript, utilizando os async, fetch, await, para criar os métodos, get, post, delete e update, que são responsáveis por salvar dados, deletar, atualizar ou apenas requisitar, para adicionar a página dinamicamente, sem precisar de reload.

Quando se tem as rotas, você pode dar dinamicidade, através dos paths, passando parâmetros de url, que podem ser acessados dentro dos componentes e assim, com a ajuda do consumo de API, deixar os componentes dinâmicos e fáceis de construir páginas para cada um dos dados acessados.

Depois de instalar a dependência do React Router Dom, no Node.js, basta importar para o projeto com: import {BrowserRouter, Routes, Route} from 'react-router-dom';

O pensamento principal é:

1º Crie todas as rotas, mesmos que os componentes ainda não tenham sido criados

2º Crie os componentes

3º Adicione os Links, nos locais que precisará acessar os componentes, através das rotas.

No React Router Dom, temos o componente Link, que serve para apresentar os links sem precisar de reload. Veja abaixo um exemplo:

<Link to="/">Voltar a Home</Link>

No exemplo acima, o Link é a mensagem "Voltar a Home", que leva para a raiz do projeto, como informado no parâmetro "to". É algo bem intuitivo, mas não vou romantizar dizendo que é fácil de se acostumar.

Particularmente, antes de ter essa afinidade que tenho hoje, precisei rever o mesmo vídeo algumas vezes, e começar a por a mão na massa, para me acostumar com a nova forma de escrever códigos.

Agora, o próximo passo, depois do React é subir a aplicação em um Plataforma como Serviço (PaaS), que roda JavaScript e React, para ver os projetos serem acessados na web.

Já encontrei a plataforma Heroku, mas ainda não a utilizei. Se já tiver alguma alternativa para hospedagem gratuita, com finalidade de testes, aceito dicas e sugestões.

O que achou desse tema? Já utilizou as rotas? Já programa em React ou utiliza outra tecnologia? O que sentiu ao sair do JavaScript tradicional e interagir com um framework?

Espero que tenha gostado da visão.

Linkedin: https://www.linkedin.com/in/olivalpaulino/