React: modernizando rotas e dados com Remix

Entendendo o Remix - Apresentação

Apresentando o instrutor e o curso

Olá, estudante da Alura! Meu nome é Pedro Celestino de Mello, sou instrutor na Alura.

Audiodescrição: Pedro é um homem branco, com cabelos e barba escuros. Ele veste roupas pretas em um ambiente iluminado pelas cores azul e rosa.

Seja bem-vindo a mais um curso de React na Alura. Neste curso, vamos continuar explorando frameworks modernos, com foco na utilização do Remix, atualmente conhecido como React Router v7. Além disso, vamos entender um pouco da história por trás dessa mudança de nome, investigando por que o Remix não seguiu para a versão 3, como inicialmente planejado.

Apresentando o projeto da Remix

Também vamos apresentar o projeto da Remix, que é uma locadora de veículos. No site, enfrentamos alguns problemas de desempenho. No momento, estou demonstrando o site da Remix no meu navegador, onde podemos navegar entre categorias de veículos, detalhes de veículos e realizar pesquisas. Eles nos informaram sobre problemas de performance, então utilizei o Google Lighthouse, uma ferramenta essencial para detectar e entender esses problemas. Obtive uma nota de 64.

Após discussões com a equipe, propus uma solução: atualmente, o projeto utiliza apenas React e renderiza tudo do lado do cliente. Sugerimos uma abordagem que utilize mais o lado do servidor para pré-carregar algumas informações e exibi-las ao cliente, melhorando assim o desempenho.

Explicando a abordagem do curso

O objetivo aqui foi mostrar que, utilizando um framework como o Remix, é possível obter uma nota final de 94 em desempenho. Vale lembrar que essa pontuação não é a mais otimizada, pois estamos falando de um ambiente local, onde vários fatores influenciam essa pontuação final, incluindo a máquina em que estamos rodando. Todos os testes foram realizados durante a gravação, o que também impacta a pontuação final.

Neste curso, vamos aprender desde o início como criar um projeto com Remix, como realizar as trocas das funções puras do React, que são específicas do React, e passar a utilizar os Web Standards, que são as APIs nativas dos navegadores. Vamos nos basear em três pilares: desempenho, portabilidade e segurança, para fazer nosso projeto alcançar essa performance de 94 pontos.

Preparando-se para a jornada de aprendizado

É importante que já tenhamos passado por algumas etapas no desenvolvimento, pois abordaremos React, TypeScript, utilização de Tailwind CSS, e hooks como useState e useEffect. Todo esse conteúdo requer um conhecimento prévio, pois passaremos rapidamente por eles e focaremos bastante na parte do Remix, que é a novidade.

Se nos sentimos preparados, vamos juntos nessa jornada. Preparem-se, pois minha companheira está aqui ao lado para sempre me hidratar durante as aulas. Nos vemos na sequência para entender mais sobre o porquê do Remix, do React Router e para fazer algumas comparações com o React puro. Vamos juntos? Nos vemos em breve.

Entendendo o Remix - Aprendendo sobre o Remix

Introduzindo frameworks modernos com React

Vamos continuar nosso aprendizado sobre a utilização de frameworks modernos dentro da estrutura do React. Vamos relembrar alguns pontos sobre o que define um framework moderno no contexto do React. No título do slide, já temos um indicativo de que abordaremos o Remix, ou, como é chamado atualmente, o React Router na versão 7.

O que é um Framework?

Quando falamos de framework no contexto de front-end, estamos nos referindo a um conjunto de ferramentas, bibliotecas e convenções que estendem a utilização do React, a biblioteca front-end que utilizamos em nosso código. Se já acompanhamos a trilha de carreira, antes deste curso, tivemos uma introdução ao framework Next.js, que também possui um conjunto de ferramentas que facilitam alterações no código, como o funcionamento do roteamento e a abordagem do BFF (Back-end for Front-end), embora não tenhamos aprofundado nesse assunto até o momento.

Explorando as vantagens do uso de frameworks

Um framework oferece um conjunto de ferramentas prontas para uso, acelerando o desenvolvimento e padronizando a estrutura do projeto. Isso resulta em um código mais limpo e uma estrutura mais clara, conforme definido pelo framework. As convenções e regras do framework garantem que o projeto atenda a determinados requisitos, permitindo acesso a ferramentas que aceleram o desenvolvimento.

Apresentando o Remix e React Router

O Remix é um framework full stack, oferecendo suporte tanto para front-end quanto para back-end, semelhante ao que vimos com o Next.js em outro curso. O Remix sofreu uma atualização e se uniu ao React Router no final de 2024. O React Router, originalmente uma biblioteca de roteamento para React, evoluiu para oferecer três modos principais de funcionamento: modo framework, modo orientado a dados e modo declarativo de rotas.

Nosso objetivo é entender o funcionamento de frameworks modernos com React, focando exclusivamente no modo framework. Se desejarmos aprender mais sobre o React Router no modo biblioteca, podemos explorar outros cursos na trilha que abordam roteamento com React Router, sem o uso de frameworks como Next.js ou React Router v7/Remix.

Concluindo com a evolução do Remix e React Router

A junção do Remix com o React Router foi um processo natural, e vamos explorar suas características no modo framework ao longo desta sequência de cursos. Para quem deseja entender melhor o roteamento, a trilha de iniciante básica oferece conteúdos que abordam a utilização do React Router no modo de roteamento, explorando sua origem e evolução.

Durante a React Conf, houve um grande impacto na comunidade em relação aos comentários. Muitas pessoas apoiaram, enquanto outras não gostaram. Isso é comum, pois sempre há quem apoie e quem seja contra. O React Router evoluiu tanto que começou a se assemelhar ao caminho que o Remix estava seguindo em sua versão 3, prevista para o final de 2024 ou início de 2025. A comunidade percebeu que era inevitável a junção das duas ferramentas, pois o Remix trazia toda a parte de Web Standards (padrões da web) para utilizarmos em um projeto de forma agnóstica, sem a obrigatoriedade de usar React ou outra ferramenta específica.

Explorando as funcionalidades do React Router v7

Como o JavaScript e o TypeScript, juntamente com a biblioteca React, são amplamente utilizados, as equipes do Remix e do React Router começaram a trabalhar juntas. O Remix já utilizava o React Router por baixo dos panos. Enquanto o Remix demorava para lançar novas funcionalidades, o React Router avançava rapidamente, até que se tornou evidente que fazia sentido unir os dois projetos. Assim, em vez de termos o Remix na versão 3, temos o React Router na versão 7, que incorpora todo o ecossistema do Remix e a usabilidade do React Router, com melhorias no modo framework.

É importante mencionar que, durante o curso, podemos nos referir ao React Router v7 como Remix, devido ao hábito de utilizar esse framework em projetos anteriores. Sempre que mencionarmos Remix, estaremos nos referindo à versão atual, que é o React Router v7.

O React Router v7 traz recursos como roteamento automático baseado em arquivos, algo que já vemos no Next.js e no Remix. Também oferece pré-renderização no servidor, uma das funcionalidades mais impressionantes dessa nova versão, e Code Splitting (divisão de código) automático. Embora ainda seja importante seguir boas práticas de Code Splitting para otimizar a performance, o fato de ser automático facilita o desenvolvimento.

Comparando React puro e React Router v7

Não abordaremos a utilização de agentes de IA no código, mas se for um assunto de interesse, podemos discutir na comunidade no Discord. Comparando com o React puro, onde o roteamento é manual, o React Router v7 oferece roteamento automático e diversas formas de lidar com isso. No Next.js, temos roteamento por app routes e page routes. No React Router, além do roteamento por pasta, há roteamento aninhado por arquivo, que veremos na prática.

No React puro, a renderização ocorre apenas no lado do cliente. Já no React Router v7, temos pré-renderização no servidor, resultando em carregamento mais rápido de páginas e acesso mais ágil a rotas. Por exemplo, ao passar o mouse sobre um link, uma chamada ao servidor é feita para carregar o HTML, permitindo acesso imediato ao clicar no link, sem loading.

Preparando para iniciar um projeto com React Router v7

No React, as configurações de roteamento e estrutura são manuais, enquanto no React Router v7, o framework está pronto para uso desde o início. Claro, se quisermos adicionar ferramentas como ESLint ou Prettier, ou configurar o servidor, isso exigirá ajustes manuais específicos do projeto. Para ter nosso servidor funcionando e um projeto básico, basta instalar a aplicação. Na sequência, veremos na documentação do React Router como iniciar um novo projeto nesse modo framework. Também analisaremos a estrutura do projeto da nossa locadora de veículos, a AirMax, para portá-lo para o React Router.

Nos encontramos na próxima etapa para continuar aprendendo sobre frameworks modernos e explorando o Remix com o React Router v7.

Entendendo o Remix - Conhecendo a base do projeto

Pesquisando a documentação do React Router

Estamos com o navegador aberto, na aba de endereços com o google.com digitado. Vamos procurar pela documentação do React Router para entender como iniciar um novo projeto e explorar outros modos, já que utilizaremos a documentação para compreender a portabilidade do nosso projeto.

No Google, clicamos na barra de pesquisas e digitamos "React Router", pressionando "Enter". O primeiro resultado é o site reactrouter.com. Ao clicar, acessamos a documentação do React Router, que, diferentemente de outras documentações como a do React, não possui tradução em andamento. No entanto, é fácil se orientar no site, mesmo sem conhecimento em inglês. Se estivermos usando o Google Chrome, podemos clicar com o botão direito na página e selecionar a opção "Traduzir para o português". Embora a tradução seja literal, ela oferece uma orientação útil para quem não domina o inglês.

Explorando a documentação do React Router

Na página inicial do React Router, clicamos na aba "Documentos". Com a página traduzida, vemos o início do guia do React Router, que explica como começar, os modos disponíveis (declarativo, de dados e estrutura). O modo estrutura é o modo framework, enquanto o modo de dados é baseado em dados para navegação. O modo declarativo, mais conhecido, é o browser router, utilizado em projetos React sem frameworks para roteamento.

Na aba lateral esquerda, ao clicar em "Instalação", encontramos os guias de instalação. Para iniciar um projeto, basta digitar npx create-react-router@latest, utilizando a versão mais recente, que é a 7.9.4. Versões anteriores, como 6.30.1, 4, 5 e 3, também estão disponíveis, mas funcionam de maneira diferente. Ao clicar, por exemplo, na versão 5, somos redirecionados para a documentação antiga do React Router, focada no modo de navegação declarativa, a forma padrão conhecida.

Utilizando templates do Remix e React Router

Utilizando a versão mais nova, temos o conteúdo atualizado de Remix e React Router. Descendo um pouco na tela, após o título de introdução, encontramos dois links que redirecionam para o GitHub, onde há um demo de uma aplicação Remix e modelos prontos para implantação. Clicamos no segundo link para mostrar algo importante que o Remix oferece, essencial para nosso progresso. O Remix está ganhando popularidade em relação ao Next. Se preferir, pode compartilhar sua preferência entre Team Remix ou Team Next em nosso grupo no Discord ou comunidades.

No GitHub, na página do React Router Templates do Remix Run, vemos os templates disponíveis. O template original, que utilizaremos, já vem com server-side rendering configurado, TypeScript, Tailwind CSS e suporte a Docker. Isso significa que ele é completo e não precisamos de ferramentas externas, exceto para configuração do servidor, que estará fora do repositório. O template oficial do React Router v7/Remix é tão completo que não precisamos de mais nada.

Explorando opções de templates e funcionalidades

Além disso, há um template mínimo, com apenas o essencial para o funcionamento, e o restante do React Router precisará ser instalado por partes. Para quem prefere JavaScript, há essa opção, embora atualmente trabalhemos apenas com TypeScript. Existem também dois modos com servidor Node pronto para implementação: um com Node configurado, permitindo acesso a middlewares e configuração do back-end, e outro com Node e PostgreSQL instalados e configurados, oferecendo suporte a banco de dados SQL com PostgreSQL, tudo dentro do Remix, sem necessidade de recursos externos.

No repositório do GitHub, temos guias de deploy para Cloudflare, Netlify e Vercel, que são amplamente utilizados, principalmente de forma gratuita, para fazer deploys de aplicações. Além disso, há templates da comunidade, mas não entraremos em detalhes sobre eles. Destacamos a utilização do ShadCN com o Vite, que é muito interessante, pois o ShadCN é uma biblioteca que apreciamos utilizar em projetos, especialmente em trabalhos freelance. O ShadCN é uma excelente biblioteca para incluir nos projetos. Também há suporte ao Zustand e outras funcionalidades, tornando este um template muito interessante da comunidade. Já realizamos alguns testes com ele, utilizando o deploy do ShadCN junto com o Vite para fazer o build e todo o suporte do React Router 7. É um ótimo template para utilizar, e vamos até deixar uma estrela no repositório do React Router Templates.

Criando e configurando o projeto React Air Max

No guia de instalação, já temos o comando npx create-react-router-latest-my-react-router-app. Vamos apenas alterar o final do nome do projeto para rmx. Copiaremos o comando e, no editor de texto, com a aba do projeto aberta, criaremos o projeto com o rmx. Analisando a base de código, temos o React Air Max, a pasta database com um servidor JSON para retornar modelos de carros, fotos e especificações. No React Air Max, a estrutura funcional do projeto utiliza Vite, React puro, TypeScript e Tailwind. Na pasta assets, estão os recursos do projeto, e na pasta public, algumas imagens para facilitar o carregamento do lado do servidor, além do favicon.

Na pasta src, temos componentes como banner, breadcrumbs para navegação, card para visualização de detalhes de carro, e skeletons separados dos componentes para facilitar alterações. Há também um card de categorias, um skeleton do card de categorias, um error boundary simples e padrão, com poucas alterações para adequá-lo ao projeto. O restante do funcionamento é um error boundary padrão do React. Temos também um header e um campo de busca. Além disso, há um index.ts para exportação dos componentes, e utilizamos o React context para ter um contexto de carros e categorias no projeto, algo que não teremos da mesma forma no projeto Remix.

Executando e testando o projeto

As páginas incluem a página inicial, a página de detalhes, a página de veículo, a página de categorias, a página de detalhes de uma categoria e a página de retorno dos dados de busca. No terminal, rodaremos npm run server na raiz do projeto. Se a porta 3001 já estiver em uso, provavelmente o servidor já está rodando. No terminal, acessaremos cd react-rmax e digitaremos npm run dev, que abrirá na porta 5173. Clicando na porta 5173, o servidor já estará rodando, permitindo visualizar os carros e seus detalhes, juntamente com as especificações retornadas pelo servidor JSON. A página de categorias também está funcional, mostrando as categorias e redirecionando para a busca de carros dentro das categorias, com informações como valor da diária, aluguel de veículo e quantidade de veículos disponíveis.

O site está totalmente funcional. Nosso desafio é melhorar a experiência do usuário ao acessar o site, especialmente em relação à performance. Algumas reclamações indicam que, com uma internet ruim, o site pode demorar para carregar informações, especialmente imagens e pré-carregamentos. O objetivo é trabalhar na performance da aplicação. Vamos rodar o Google Lighthouse para medir as métricas de performance do site. Na aba do desenvolvedor, com o Lighthouse instalado, faremos uma análise rápida da página para identificar pontos de melhoria que podem não ser observados na primeira navegação.

Analisando a performance e SEO com Google Lighthouse

O Lighthouse indicou uma performance de 64 e um SEO de 83. O SEO de 83 não é ruim, mas pode melhorar, especialmente para uma locadora de veículos, onde a otimização para motores de busca é crucial. O cliente deseja que a aplicação se destaque nos motores de busca. Entendemos a estrutura do projeto e suas particularidades no Vite. Temos uma pasta de services com api.ts para busca no servidor JSON e uma pasta types com index.ts para tipagens do projeto, como category e car.

Para iniciar a estrutura com Vite, Remix e React Router v7, pararemos a execução, voltaremos uma pasta e colaremos o comando copiado para criar o site. O comando npx create-react-router-latest será utilizado para o projeto Remix Air Max. Utilizaremos Remix, pois é a forma comum de se referir ao React Router v7. Houve questionamentos na comunidade sobre a união dos times do Remix e React Router, mas o nome React Router v7 prevaleceu, o que pode confundir. Chamaremos o projeto de Remix Air Max para deixar claro que estamos utilizando Remix na versão 3, que é o React Router v7.

Configurando o projeto Vite e React Router

Durante a instalação, surgiram duas perguntas: se queremos iniciar um repositório do Git e se queremos instalar as dependências com NPM. Optamos por não inicializar o Git, pois já estamos em um repositório, e sim instalar as dependências com NPM, apesar de utilizarmos o PNPM em outros projetos. Enquanto as dependências são instaladas, nos encontraremos na sequência para ver a estrutura criada e fazer o nosso Hello World em tela, pois é importante mostrar que o projeto iniciou. Vamos juntos na sequência.

Agora, vamos começar a configurar nosso projeto. Primeiro, precisamos criar um novo projeto Vite. Para isso, utilizamos o seguinte comando:

npx create-vite@latest

Após criar o projeto Vite, o próximo passo é instalar o React Router, que será utilizado para gerenciar as rotas da nossa aplicação. Para isso, executamos o comando:

npm i react-router

Inicializando a aplicação React com BrowserRouter

Com o React Router instalado, podemos configurar o ponto de entrada da nossa aplicação. Vamos importar os módulos necessários e configurar o BrowserRouter para gerenciar as rotas. Aqui está o código inicial:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

Esse código inicializa a aplicação React e envolve o componente App com o BrowserRouter, permitindo que o React Router gerencie as rotas.

Adicionando rotas específicas à aplicação

Para adicionar mais funcionalidades, como rotas específicas, podemos expandir o código para incluir Routes e Route. Veja como fazemos isso:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
        </Routes>
    </BrowserRouter>
);

Com essa configuração, definimos uma rota padrão que renderiza o componente App quando o caminho da URL é /. Isso nos dá uma base sólida para começar a adicionar mais rotas e funcionalidades à nossa aplicação React.

Sobre o curso React: modernizando rotas e dados com Remix

O curso React: modernizando rotas e dados com Remix possui 297 minutos de vídeos, em um total de 46 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:

• Entendendo o Remix
• Realizado migração da base
• Migrando componentes reutilizáveis
• Integrando telas com Loaders
• Implementando formulário com actions