Como Criar um Sistema de Carrinho de Compras com React -

Criar um sistema de carrinho de compras com React envolve gerenciar o estado do carrinho, a exibição dos itens e a interação com o usuário. Neste artigo, vamos passar por um exemplo simples para implementar um carrinho de compras funcional usando o React.

1. Configuração Inicial

Primeiro, você precisa ter o React instalado. Se ainda não tem, crie um novo projeto com o comando:

npx create-react-app carrinho-compras
cd carrinho-compras
npm start

Isso cria um novo projeto React e inicia o servidor de desenvolvimento.

2. Estrutura do Projeto

Dentro do seu projeto, você terá os seguintes componentes principais:

Cart: Exibe os itens do carrinho e o total.
Product: Representa um produto individual.
App: O componente principal onde os estados são gerenciados.

3. Criando o Componente de Produto

No arquivo Product.js, crie um componente que exibe o produto e possui um botão para adicionar ao carrinho.

import React from 'react';

function Product({ product, addToCart }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>Preço: R${product.price}</p>
      <button onClick={() => addToCart(product)}>Adicionar ao Carrinho</button>
    </div>
  );
}

export default Product;

4. Criando o Componente de Carrinho

Em Cart.js, crie o componente que irá exibir os itens do carrinho e o preço total.

import React from 'react';

function Cart({ cartItems }) {
  const total = cartItems.reduce((acc, item) => acc + item.price, 0);

  return (
    <div>
      <h2>Carrinho de Compras</h2>
      {cartItems.length === 0 ? (
        <p>O carrinho está vazio</p>
      ) : (
        <ul>
          {cartItems.map((item, index) => (
            <li key={index}>{item.name} - R${item.price}</li>
          ))}
        </ul>
      )}
      <h3>Total: R${total}</h3>
    </div>
  );
}

export default Cart;

5. Gerenciando o Estado no Componente Principal (App.js)

Agora, em App.js, gerencie o estado do carrinho e dos produtos. Adicione a lógica para adicionar produtos ao carrinho.

import React, { useState } from 'react';
import Product from './Product';
import Cart from './Cart';

function App() {
  const [cart, setCart] = useState([]);
  const products = [
    { name: 'Produto 1', price: 100 },
    { name: 'Produto 2', price: 200 },
    { name: 'Produto 3', price: 300 },
  ];

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  return (
    <div>
      <h1>Loja React</h1>
      <div>
        {products.map((product, index) => (
          <Product key={index} product={product} addToCart={addToCart} />
        ))}
      </div>
      <Cart cartItems={cart} />
    </div>
  );
}

export default App;

6. Estilizando o Carrinho de Compras

Embora a funcionalidade já esteja implementada, você pode adicionar estilos simples para melhorar a aparência. Adicione um pouco de CSS ao seu projeto para deixar a interface mais amigável.

/* styles.css */
div {
  margin: 20px;
}
button {
  margin-top: 10px;
}
h2, h3 {
  margin-top: 20px;
}

Importe o arquivo CSS em App.js:

import './styles.css';

7. Conclusão

Agora, ao rodar o aplicativo, você verá uma lista de produtos que podem ser adicionados ao carrinho. O carrinho exibirá os itens selecionados e o total de cada compra.

Este exemplo básico de carrinho de compras com React pode ser expandido com funcionalidades como remoção de itens, persistência de dados usando localStorage ou integração com APIs para um carrinho mais robusto e completo.