Building a Simple React Shopping Cart App: A Beginner’s Guide

Written by

FixTechToday

in

In the world of web development, e-commerce has exploded, and with it, the need for skilled developers who can create user-friendly and efficient online shopping experiences. One of the fundamental components of any e-commerce platform is the shopping cart. This is where users gather the items they wish to purchase before proceeding to checkout. Building a shopping cart from scratch might seem daunting, but with React JS, it becomes a manageable and rewarding project, perfect for solidifying your understanding of React concepts.

Why Build a Shopping Cart App?

Creating a React shopping cart app offers several benefits, particularly for those learning React:

  • Practical Application: It allows you to apply core React concepts like state management, component composition, and event handling in a real-world scenario.
  • Skill Enhancement: You’ll gain experience working with data structures, array manipulation, and conditional rendering.
  • Portfolio Piece: A functional shopping cart app is an excellent project to showcase your React skills to potential employers.
  • Foundation for E-commerce: It provides a solid foundation for understanding the complexities of building more advanced e-commerce applications.

This tutorial will guide you through the process of building a basic, yet functional, shopping cart app using React. We’ll cover everything from setting up the project to implementing key features like adding items, updating quantities, and calculating the total.

Prerequisites

Before you begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the React development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code and styling the app.
  • A text editor or IDE: Choose your preferred code editor, such as Visual Studio Code, Sublime Text, or Atom.

Setting Up the React Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-shopping-cart
cd react-shopping-cart

This command creates a new React project named “react-shopping-cart” and navigates you into the project directory. Next, start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000.

Project Structure

Let’s familiarize ourselves with the project structure that Create React App generates. The main files and directories we’ll be working with are:

  • src/: This directory contains the source code for your React application.
  • src/App.js: The main component of your application, where you’ll define the structure and logic.
  • src/index.js: The entry point of your application, where you render the root component (App).
  • src/App.css: Where you’ll put the styles for your application.

Creating the Components

Our shopping cart app will consist of several components. Let’s create these components:

  • Product Component: Displays product information (name, price, image) and an “Add to Cart” button.
  • CartItem Component: Displays an item in the shopping cart, including the quantity and a “Remove” button.
  • ShoppingCart Component: Manages the cart, displaying the items and the total amount.
  • App Component: The main component that orchestrates the other components.

Inside the src/ directory, create a new folder called components. Inside the components folder, create the following files:

  • Product.js
  • CartItem.js
  • ShoppingCart.js

Building the Product Component (Product.js)

The Product component will display the details of a single product and provide a way to add it to the cart. Here’s the code for Product.js:

import React from 'react';

function Product({ product, onAddToCart }) {
  return (
    <div className="product">
      <img src={product.image} alt={product.name} style={{ width: '100px', height: '100px' }} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => onAddToCart(product)}>Add to Cart</button>
    </div>
  );
}

export default Product;

Explanation:

  • We import React.
  • The component receives product and onAddToCart as props.
  • It displays the product image, name, and price.
  • The “Add to Cart” button calls the onAddToCart function, passing the product as an argument. This function will be defined in the parent component (App.js).

Building the CartItem Component (CartItem.js)

The CartItem component displays a single item within the shopping cart, including the quantity and a button to remove it. Here’s the code for CartItem.js:

import React from 'react';

function CartItem({ item, onRemoveFromCart }) {
  return (
    <div className="cart-item">
      <p>{item.name} x {item.quantity}</p>
      <p>${item.price * item.quantity}</p>
      <button onClick={() => onRemoveFromCart(item.id)}>Remove</button>
    </div>
  );
}

export default CartItem;

Explanation:

  • We import React.
  • The component receives item and onRemoveFromCart as props.
  • It displays the item name, quantity, and total price.
  • The “Remove” button calls the onRemoveFromCart function, passing the item’s ID as an argument. This function will be defined in the parent component (ShoppingCart.js).

Building the ShoppingCart Component (ShoppingCart.js)

The ShoppingCart component is responsible for displaying the contents of the cart and calculating the total. Here’s the code for ShoppingCart.js:

import React from 'react';
import CartItem from './CartItem';

function ShoppingCart({ cart, onRemoveFromCart }) {
  const total = cart.reduce((acc, item) => acc + item.price * item.quantity, 0);

  return (
    <div className="shopping-cart">
      <h2>Shopping Cart</h2>
      {cart.length === 0 ? (
        <p>Your cart is empty.</p>
      ) : (
        <div>
          {cart.map(item => (
            <CartItem key={item.id} item={item} onRemoveFromCart={onRemoveFromCart} />
          ))}
          <p>Total: ${total}</p>
        </div>
      )}
    </div>
  );
}

export default ShoppingCart;

Explanation:

  • We import React and the CartItem component.
  • The component receives cart and onRemoveFromCart as props.
  • It calculates the total using the reduce method.
  • It displays a message if the cart is empty.
  • It maps over the cart array and renders a CartItem component for each item.
  • It displays the total amount.

Building the App Component (App.js)

The App component is the main component of our application. It manages the state of the shopping cart and orchestrates the other components. Here’s the code for App.js:

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

function App() {
  const [cart, setCart] = useState([]);

  const products = [
    { id: 1, name: 'Product 1', price: 10, image: 'https://via.placeholder.com/100' },
    { id: 2, name: 'Product 2', price: 20, image: 'https://via.placeholder.com/100' },
    { id: 3, name: 'Product 3', price: 30, image: 'https://via.placeholder.com/100' },
  ];

  const handleAddToCart = (product) => {
    const existingItem = cart.find(item => item.id === product.id);

    if (existingItem) {
      const updatedCart = cart.map(item =>
        item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
      );
      setCart(updatedCart);
    } else {
      setCart([...cart, { ...product, quantity: 1 }]);
    }
  };

  const handleRemoveFromCart = (productId) => {
    const updatedCart = cart.filter(item => item.id !== productId);
    setCart(updatedCart);
  };

  return (
    <div className="app">
      <h1>Shopping Cart</h1>
      <div className="products-container">
        {products.map(product => (
          <Product key={product.id} product={product} onAddToCart={handleAddToCart} />
        ))}
      </div>
      <ShoppingCart cart={cart} onRemoveFromCart={handleRemoveFromCart} />
    </div>
  );
}

export default App;

Explanation:

  • We import React and the useState hook.
  • We import the Product and ShoppingCart components.
  • We initialize the cart state using useState([]). This state variable holds an array of items in the cart.
  • We define an array of products with sample data.
  • handleAddToCart function:
    • Checks if the product already exists in the cart.
    • If it exists, it increases the quantity.
    • If it doesn’t exist, it adds the product to the cart with a quantity of 1.
  • handleRemoveFromCart function:
    • Removes an item from the cart based on its ID.
  • The component renders:
    • A heading.
    • A container for the products, mapping over the products array and rendering a Product component for each product. The onAddToCart prop is passed to the Product component.
    • The ShoppingCart component, passing the cart and onRemoveFromCart props.

Styling the Application (App.css)

To make the application visually appealing, add the following CSS styles to src/App.css:

.app {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.products-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  width: 150px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  width: 300px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

Integrating the Components

With all the components in place, let’s integrate them into our main App.js file. This is where we’ll bring everything together.

We’ve already implemented this in the “Building the App Component (App.js)” section. The key is to import the Product and ShoppingCart components and pass the necessary props.

Running the Application

Save all the files and run your React application using npm start. You should see the list of products and an empty shopping cart. When you click “Add to Cart”, the products should appear in your cart. You can also remove items from the cart.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React shopping cart apps and how to avoid them:

  • Incorrect State Management: The most common mistake is not correctly managing the cart’s state. Make sure you’re using useState to store the cart data and that you’re updating it immutably (e.g., using the spread operator or map/filter).
  • Props Drilling: Passing props down multiple levels of components can become cumbersome. Consider using Context API or a state management library like Redux or Zustand for more complex applications.
  • Not Handling Edge Cases: Forget to handle edge cases like adding the same product multiple times or removing the last item from the cart. Always consider these scenarios when writing your code.
  • Incorrect Array Manipulation: When updating the cart, make sure to correctly use map, filter, and the spread operator to avoid unexpected behavior.
  • Ignoring Component Re-renders: Be mindful of how your components re-render when the state changes. Optimize your components using React.memo or other techniques if performance becomes an issue.

Key Takeaways and Summary

This tutorial has walked you through building a basic React shopping cart application. You’ve learned about:

  • Creating components and organizing your project structure.
  • Managing state using the useState hook.
  • Passing data between components using props.
  • Handling user interactions (adding and removing items).
  • Calculating the total amount.

This project provides a solid foundation for understanding core React concepts and building more complex e-commerce applications. Remember to practice and experiment to solidify your skills. Consider adding more features like:

  • Quantity adjustments.
  • A checkout process (simulated, without actual payment processing).
  • Local storage to persist the cart data.
  • More product details.
  • More advanced styling.

As you delve deeper into React and e-commerce, you’ll find that the skills you’ve acquired here are directly applicable to more sophisticated projects. The key is to consistently practice and explore new features, always remembering that the fundamentals are the cornerstone of any successful application.

More posts