Aprenda a criar um sistema de favoritos usando React Router

Criando um sistema de favoritos no React Router

Neste tutorial, vamos explorar como implementar um sistema de 'favoritos' utilizando o React Router. Essa funcionalidade é bastante útil em aplicações onde os usuários desejam salvar itens para referência futura, tornando a experiência de navegação mais personalizada e eficiente. Ao final deste guia, você terá um sistema funcional que pode ser facilmente adaptado a qualquer projeto React.

Entendendo o React Router

O React Router é uma biblioteca poderosa que permite a navegação em aplicações React de forma eficiente. Ele facilita a criação de rotas para diferentes componentes, permitindo que os usuários naveguem entre as páginas sem recarregar a aplicação. Vamos começar instalando o React Router em nosso projeto:

npm install react-router-dom

Após a instalação, podemos configurar nosso roteador. No arquivo principal da nossa aplicação, vamos importar os componentes necessários e definir as rotas:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
    return (
        <Router>
            <Switch>
                <Route path='/' exact component={Home} />
                <Route path='/favoritos' component={Favoritos} />
            </Switch>
        </Router>
    );
}

Neste exemplo, criamos duas rotas: uma para a página inicial (Home) e outra para a página de favoritos (Favoritos). O Switch garante que apenas uma rota seja renderizada por vez.

Gerenciando o estado dos favoritos

Para que o sistema de favoritos funcione, precisamos gerenciar o estado dos itens que o usuário deseja salvar. Podemos usar o useState do React para isso. Vamos criar um contexto que nos permitirá acessar facilmente os favoritos em toda a aplicação.

import React, { createContext, useContext, useState } from 'react';

const FavoritosContext = createContext();

export function FavoritosProvider({ children }) {
    const [favoritos, setFavoritos] = useState([]);

    const adicionarFavorito = (item) => {
        setFavoritos([...favoritos, item]);
    };

    return (
        <FavoritosContext.Provider value={{ favoritos, adicionarFavorito }}>
            {children}
        </FavoritosContext.Provider>
    );
}

export const useFavoritos = () => useContext(FavoritosContext);

No código acima, criamos um contexto chamado FavoritosContext que armazena o estado dos favoritos e uma função para adicionar novos itens. Essa estrutura nos permite acessar e manipular o estado dos favoritos facilmente em qualquer componente.

Adicionando e removendo favoritos

Para interagir com os favoritos, precisamos de uma interface que permita ao usuário adicionar e remover itens. Vamos criar um componente simples que exibe uma lista de itens e permite que o usuário salve seus favoritos:

import React from 'react';
import { useFavoritos } from './FavoritosProvider';

function ItemList() {
    const { adicionarFavorito } = useFavoritos();

    const itens = ['Item 1', 'Item 2', 'Item 3'];

    return (
        <div>
            {itens.map((item, index) => (
                <div key={index}>
                    <span>{item}</span>
                    <button onClick={() => adicionarFavorito(item)}>Adicionar aos Favoritos</button>
                </div>
            ))}
        </div>
    );
}

Neste exemplo, temos uma lista de itens que o usuário pode adicionar aos favoritos. Quando o botão 'Adicionar aos Favoritos' é clicado, o item correspondente é adicionado ao estado dos favoritos.

Exibindo os favoritos

Agora, vamos criar a página de favoritos onde exibiremos todos os itens salvos pelo usuário:

import React from 'react';
import { useFavoritos } from './FavoritosProvider';

function Favoritos() {
    const { favoritos } = useFavoritos();

    return (
        <div>
            <h2>Meus Favoritos</h2>
            {favoritos.length === 0 ? (
                <p>Nenhum favorito encontrado.</p>
            ) : (
                <ul>
                    {favoritos.map((item, index) => (
                        <li key={index}>{item}</li>
                    ))}
                </ul>
            )}
        </div>
    );
}

O componente Favoritos utiliza o contexto para acessar a lista de favoritos e exibi-la. Se não houver itens salvos, uma mensagem informativa será mostrada.

Conclusão

Neste tutorial, abordamos como implementar um sistema de 'favoritos' baseado na URL utilizando o React Router. Aprendemos a gerenciar o estado dos favoritos com o useState e a criar um contexto para facilitar o acesso a esse estado em toda a aplicação. Agora você pode expandir essa implementação adicionando funcionalidades como remoção de favoritos ou persistência em localStorage. A personalização e a experiência do usuário são fundamentais em aplicações modernas, e essa funcionalidade é um excelente passo para melhorar a interatividade do seu projeto.

A importância de um sistema de favoritos em aplicações web

Implementar um sistema de favoritos em aplicações web é uma prática cada vez mais comum, especialmente em plataformas onde o usuário precisa salvar itens para consulta futura. Este conceito não apenas melhora a experiência do usuário, mas também incentiva a fidelização, pois permite que os usuários regressem e encontrem facilmente o que mais lhes interessa. No React, essa implementação pode ser realizada de maneira eficiente com a ajuda do React Router, que permite a navegação fluida entre diferentes componentes da aplicação. Neste contexto, a gestão do estado se torna crucial, pois é necessário garantir que os dados dos favoritos estejam sempre atualizados e acessíveis em toda a aplicação. Através de contextos e hooks, como o useState, conseguimos criar uma solução robusta e escalável.

Algumas aplicações:

• Facilita a navegação em plataformas de e-commerce.
• Permite que usuários salvem conteúdos interessantes para leitura posterior.
• Melhora a experiência do usuário em aplicações de streaming de vídeo ou música.

Dicas para quem está começando

• Comece criando uma estrutura básica de rotas no seu projeto React.
• Utilize o contexto para gerenciar estados compartilhados entre componentes.
• Teste diferentes abordagens para adicionar e remover itens dos favoritos.
• Considere a persistência dos dados usando localStorage.
• Explore a documentação do React Router para entender todas as suas funcionalidades.

Compartilhe este tutorial