Faça um carrinho de compras com React

O desenvolvimento de aplicações web tem se tornado cada vez mais popular, com o React se posicionando como uma das bibliotecas mais utilizadas para a criação de interfaces de usuário interativas.

Neste artigo vou te ensinar como fazer um carrinho de compras usando React.

React é uma das plataformas líderes para desenvolvimento de aplicações web. Quando se trata de criar um carrinho de compras em um aplicativo de comércio eletrônico, o React oferece muitas vantagens.

Em primeiro lugar, o React é altamente modular, o que significa que você pode construir componentes pequenos e reutilizáveis ​​para montá-los em aplicativos completos de forma eficiente. Ao criar um carrinho de compras, isso significa que você pode dividir a funcionalidade em pequenas partes e combiná-las para criar um todo completo.

Em segundo lugar, o React usa o modelo de programação de estado único, o que significa que todas as informações necessárias para criar uma aplicação estão em um só lugar. Isso facilita o gerenciamento das informações e permite uma atualização mais rápida do aplicativo.

Terceiro, o React possui integração perfeita com outras ferramentas e bibliotecas JavaScript, o que significa que você pode acessar uma ampla gama de recursos e tecnologias para melhorar a funcionalidade do seu carrinho de compras.

O que é um carrinho de compras?

Um carrinho de compras é uma funcionalidade comum em lojas online que permite aos usuários selecionar produtos e acompanhar os itens que desejam comprar. É essencial para qualquer loja online fornecer uma experiência tranquila e rápida aos usuários.

Conforme mostra a imagem, à direita aparece um painel com a quantidade e produtos selecionados pelo usuário, além de ter o cálculo e o total a pagar.

Configuração do ambiente

Para começar, certifique-se de ter o Node.js instalado em sua máquina e siga estas etapas:

1) Crie um novo diretório para o seu projeto e abra-o no seu terminal.

2) Execute o seguinte comando para inicializar um novo projeto React:

npm create vite, em seguida, inserimos o nome do projeto, carrito-de-compras (carrinho de compras).

Uso do Vite

Vite é um comando que permite a criação rápida de um novo projeto web com o Vite como ferramenta de construção e empacotamento de aplicativos. Vite é uma estrutura poderosa e moderna de desenvolvimento de aplicativos da web que se concentra na velocidade e no desempenho. Com npm create vite projetos básicos podem ser gerados a partir de diferentes tecnologias, como React, Vue, TypeScript, JavaScript e mais, facilitando o início de um novo projeto com o Vite e evitando a configuração inicial do projeto.

O Vite possui vários recursos importantes que o tornam adequado para o desenvolvimento de aplicações web em React. Esses recursos incluem construção instantânea, capacidade de definir uma visualização em tempo real das alterações feitas, suporte completo para hot reloading e ótima otimização de carga para renderização rápida de aplicativos.

Agora que sabemos o que é Vite, selecionamos o framework React e a variante JavaScript + SW.

Depois que o projeto for criado, entre no diretório do projeto:

cd carrito-de-compras

Agora você pode instalar o projeto com o seguinte comando:

npm install

Com o comando code podemos editar o projeto. Então abrimos um novo terminal e copiamos npm run dev, é assim que executaremos o aplicativo que criamos.

Se pressionarmos a tecla Ctrl e clicarmos com o botão esquerdo na linha Local http://localhost:5173/, você terá um aplicativo React em execução no seu navegador. Existe a possibilidade de esta porta falhar, então recomendo modificar este código no arquivo vite.config.js.

Estrutura do projeto

Antes de desenvolver a funcionalidade do carrinho de compras, é importante estabelecer uma estrutura de arquivos organizada. Abaixo mostro uma estrutura de arquivos sugerida para este projeto:

carrito-de-compras/

src/

components/

Header.js

ProductList.js

App.js

index.css

main.jsx

data.js

Nesta estrutura, criamos uma pasta components para armazenar nossos componentes reutilizáveis. Além disso, criamos um arquivo App.jsx que servirá como ponto de entrada de nossa aplicação e o arquivo data.js para armazenar os dados de cada produto.

Criando o componente de cabeçalho Header.jsx

O componente Header.jsx é um elemento importante em nosso carrinho de compras, pois fornece navegação e informações básicas ao usuário. Vamos criar um componente de cabeçalho simples usando React. No arquivo Header.jsx podemos escrever o seguinte código:

Neste código, criamos um componente de função Header que renderiza um cabeçalho com título, ícone com a quantidade de produtos selecionados e containers com as informações do produto (imagem, nome, preço e botão).

Criando o arquivo data.js

O arquivo data.js é responsável por exibir as informações de cada produto no carrinho de compras online. Da mesma forma, os arquivos .js no React são arquivos JavaScript que contêm código para definir componentes, manipular eventos e gerenciar o estado do aplicativo. Por outro lado, esses arquivos geralmente são usados ​​em conjunto com outros arquivos, como arquivos .jsx (que permitem definir componentes usando a sintaxe JSX).

Em um arquivo React .js típico, você pode encontrar:

- A definição de um componente, que pode incluir propriedades (props) e status (state).

- Manipulação de eventos, que são funções executadas quando determinadas ações ocorrem na aplicação.

- A renderização de elementos HTML, que é feita usando a sintaxe JSX.

Da mesma forma, React fornece um conjunto de funções e classes que facilitam o desenvolvimento de aplicações web complexas.

Continuamos com o arquivo data.js, no qual podemos escrever o seguinte código:

Neste código, criamos um arquivo chamado data que prende as propriedades id, img, nameProduct, price e quantity, onde podemos obter a url ou https da imagem em um banco de fotos gratuito, clicando com o botão direito na imagem selecionada e procurando a opção de copiar o endereço da imagem; isso impedirá que as imagens sejam baixadas para o nosso computador.

Criando o componente ProductList.jsx

Este componente é responsável por exibir os produtos selecionados pelo usuário e permitir que ele execute ações como adicionar produtos ao carrinho. No arquivo ProductList.jsx, podemos escrever o seguinte código:

Neste código, criamos a função map, usada para percorrer um array e retornar um novo com dados transformados. Neste exemplo, temos um array com dados do produto, no qual podemos aplicar a função map para gerar um novo array para exibir os dados armazenados no arquivo data.js na página web.

Também no React, a função map é amplamente utilizada para construir listas com dados dinâmicos. Por exemplo, se tivermos um array de objetos que representam produtos, podemos usar a função map para construir uma lista de elementos HTML que exibem os detalhes de cada produto.

Criando o arquivo App.jsx

O arquivo App.jsx é um arquivo React que contém o componente principal de um aplicativo baseado em React. Este componente é o ponto inicial da aplicação e responsável por renderizar todos os outros componentes. Neste arquivo são definidas as propriedades e o estado do componente, bem como os métodos e funções necessários ao seu funcionamento. Além disso, outros componentes e bibliotecas necessários à aplicação podem ser importados. O arquivo App.jsx deve ser utilizado como template base para criação de uma aplicação React e pode ser customizado de acordo com a necessidade do projeto.

Neste arquivo criamos uma função chamada App, para definir três useStates que irão determinar (todos os produtos, total da compra e soma de todos os produtos). Então vamos usá-los nos componentes Header e ProductList.

UseState é um método usado no React para declarar estados em componentes funcionais. Com a ajuda de useState, os desenvolvedores podem atualizar o estado de um componente e o React irá renderizar novamente o componente com os novos dados. Da mesma forma, permite que componentes funcionais tenham estados locais e lidem com alterações neles, o que resulta em aplicações mais dinâmicas e escaláveis.

Recurso para adicionar produtos ao carrinho

A função find é usada para procurar um elemento dentro de um array em JavaScript. No React, você pode usar esta função para procurar um objeto específico dentro de um array de objetos.

Nesta etapa, a função find procura um objeto no array de itens que tenha um id igual a product.id. Sua condição é que, caso o usuário clique diversas vezes em um produto, ele seja exibido apenas em uma única linha e adicione um à quantidade existente. Por outro lado, é realizado o cálculo da compra total, que consiste em somar o total mais multiplicar o preço pela quantidade do produto.

Função excluir e esvaziar carrinho

No React, a função filter é usada para filtrar elementos de um conjunto de dados. Esta função pode ser usada para filtrar elementos de um array ou para filtrar elementos de um objeto.

Neste código, criamos uma função onDeleteProduct para encontrar os itens de cada produto com base em seu id, para que quando o usuário apertar o X aquele produto seja retirado do carrinho e subtraído do total. Além disso, a função onCleanCart só será ativada quando o usuário clicar no botão de carrinho vazio. Se isso acontecer, o status de todos os produtos mudará para vazio e o contador total e de produtos será zero.

Neste artigo, aprendemos como fazer um carrinho de compras usando React. Criamos componentes reutilizáveis ​​para cabeçalho, produtos e carrinho. Além disso, exploramos os principais recursos do React e como podemos usá-los para criar uma experiência de compra interativa e contínua.

Espero que você tenha achado este guia útil e se sinta inspirado para criar seus próprios aplicativos de carrinho de compras com React!