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

Written by

learnmodernjavascript

in

In today’s digital age, e-commerce is booming. From small businesses to global giants, everyone needs a way to sell their products online. One of the fundamental components of any e-commerce site is a shopping cart. This tutorial will guide you through building a simple, yet functional, shopping cart application using ReactJS. This project is perfect for beginners and intermediate developers looking to solidify their React skills and understand how to manage state, handle user interactions, and build a core e-commerce feature.

Why Build a Shopping Cart App?

Building a shopping cart app provides a practical, hands-on opportunity to learn and apply fundamental React concepts. You’ll gain experience with:

  • Component-Based Architecture: Learn how to break down a complex UI into reusable components.
  • State Management: Understand how to manage and update the application’s state (e.g., items in the cart, quantities).
  • Event Handling: Handle user interactions like adding items, updating quantities, and removing items.
  • Rendering Lists: Dynamically render lists of products and cart items.
  • User Experience (UX): Design and implement a user-friendly interface for adding, viewing, and modifying cart contents.

Moreover, a shopping cart app is a great portfolio piece to demonstrate your React proficiency to potential employers or clients.

Prerequisites

Before you start, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies is crucial for understanding the code and styling the app.
  • A text editor or IDE: Choose your preferred code editor (e.g., VS Code, Sublime Text, Atom) to write and edit your code.

Setting Up the Project

Let’s get started 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-app
cd react-shopping-cart-app

This command creates a new React project named “react-shopping-cart-app”. Navigate into the project directory using the cd command.

Project Structure

Your project directory should look like this:

react-shopping-cart-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

We will primarily work inside the src directory. Let’s clean up the src directory by removing unnecessary files and modifying the main files.

Creating Components

Our shopping cart app will consist of several components. Create the following files inside the src directory:

  • Product.js: Represents a single product.
  • ProductList.js: Displays a list of products.
  • Cart.js: Displays the shopping cart contents.
  • CartItem.js: Represents a single item in the cart.
  • App.js: The main application component, which will manage the overall state and render other components.

Product Component (Product.js)

This component will display the product information, including the image, name, description, and price. It will also include a button to add the product to the cart.

// src/Product.js
import React from 'react';

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

export default Product;

Explanation:

  • We receive a product prop, which is an object containing product details.
  • We display the product’s image, name, description, and price.
  • The onAddToCart prop is a function that will be called when the “Add to Cart” button is clicked. It will pass the product object to the parent component.

Product List Component (ProductList.js)

This component will display a list of products using the Product component. We will define an array of product objects here. In a real-world scenario, you would fetch this data from an API or a database.

// src/ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products, onAddToCart }) {
  return (
    <div className="product-list">
      {products.map((product) => (
        <Product key={product.id} product={product} onAddToCart={onAddToCart} />
      ))}
    </div>
  );
}

export default ProductList;

Explanation:

  • We receive products and onAddToCart props.
  • The products prop is an array of product objects.
  • We use the .map() method to iterate over the products array and render a Product component for each product.
  • We pass the product object and onAddToCart function as props to the Product component.
  • The key prop is essential for React to efficiently update the list.

Cart Item Component (CartItem.js)

This component will display a single item in the cart, including the product name, quantity, and a button to remove the item.


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

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

export default CartItem;

Explanation:

  • We receive item, onRemoveFromCart and onUpdateQuantity props.
  • The item prop is an object containing the product details and quantity.
  • We display the product name, price, and quantity.
  • We have buttons to increase, decrease, and remove the item from the cart.
  • onRemoveFromCart is a function to remove the item.
  • onUpdateQuantity is a function to update the item’s quantity.

Cart Component (Cart.js)

This component will display the contents of the shopping cart, including the cart items and the total price.


// src/Cart.js
import React from 'react';
import CartItem from './CartItem';

function Cart({ cartItems, onRemoveFromCart, onUpdateQuantity }) {
  const totalPrice = cartItems.reduce((total, item) => total + item.price * item.quantity, 0);

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

export default Cart;

Explanation:

  • We receive cartItems, onRemoveFromCart and onUpdateQuantity props.
  • We calculate the totalPrice using the .reduce() method.
  • We conditionally render a message if the cart is empty or display the cart items and total price.
  • We map over the cartItems array and render a CartItem component for each item.

App Component (App.js)

This is the main component that orchestrates the entire application. It manages the state of the shopping cart and renders the ProductList and Cart components.


// src/App.js
import React, { useState } from 'react';
import ProductList from './ProductList';
import Cart from './Cart';
import './App.css';

const productsData = [
  { id: 1, name: 'Product 1', description: 'Description for product 1', price: 19.99, image: 'https://via.placeholder.com/150' },
  { id: 2, name: 'Product 2', description: 'Description for product 2', price: 29.99, image: 'https://via.placeholder.com/150' },
  { id: 3, name: 'Product 3', description: 'Description for product 3', price: 9.99, image: 'https://via.placeholder.com/150' },
];

function App() {
  const [cartItems, setCartItems] = useState([]);

  const handleAddToCart = (product) => {
    const existingItemIndex = cartItems.findIndex((item) => item.id === product.id);

    if (existingItemIndex !== -1) {
      // If the item already exists, increase the quantity
      const updatedCartItems = [...cartItems];
      updatedCartItems[existingItemIndex].quantity += 1;
      setCartItems(updatedCartItems);
    } else {
      // If the item doesn't exist, add it to the cart
      setCartItems([...cartItems, { ...product, quantity: 1 }]);
    }
  };

  const handleRemoveFromCart = (productId) => {
    setCartItems(cartItems.filter((item) => item.id !== productId));
  };

  const handleUpdateQuantity = (productId, newQuantity) => {
    if (newQuantity <= 0) {
      handleRemoveFromCart(productId);
      return;
    }
    setCartItems(cartItems.map((item) =>
      item.id === productId ? { ...item, quantity: newQuantity } : item
    ));
  };

  return (
    <div className="app">
      <header>
        <h1>Shopping Cart App</h1>
      </header>
      <main>
        <ProductList products={productsData} onAddToCart={handleAddToCart} />
        <Cart
          cartItems={cartItems}
          onRemoveFromCart={handleRemoveFromCart}
          onUpdateQuantity={handleUpdateQuantity}
        />
      </main>
    </div>
  );
}

export default App;

Explanation:

  • We import the necessary components and the CSS file.
  • We define a productsData array, which contains sample product data. In a real-world application, this data would come from an API or a database.
  • We use the useState hook to manage the cartItems state. This state holds an array of objects, where each object represents an item in the cart.
  • handleAddToCart: This function adds a product to the cart. It checks if the product is already in the cart. If it is, the quantity is increased. If not, the product is added to the cart with a quantity of 1.
  • handleRemoveFromCart: This function removes an item from the cart.
  • handleUpdateQuantity: This function updates the quantity of an item in the cart. It also handles removing the item if the quantity drops to zero or below.
  • We render the ProductList component, passing the productsData and handleAddToCart function as props.
  • We render the Cart component, passing the cartItems, handleRemoveFromCart, and handleUpdateQuantity functions as props.

Styling the App (App.css)

Create a CSS file named App.css in the src directory and add the following styles:

/* src/App.css */
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

header {
  background-color: #f0f0f0;
  padding: 1em;
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
}

main {
  display: flex;
  width: 80%;
  justify-content: space-around;
}

.product-list {
  width: 60%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
}

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

.product img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5em;
}

.cart {
  width: 30%;
  border: 1px solid #ccc;
  padding: 1em;
}

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

.cart-item button {
  margin: 0 0.25em;
}

Explanation:

  • This CSS provides basic styling for the app, including the layout, fonts, colors, and spacing.
  • Adjust the styles to match the desired look and feel of your shopping cart app.

Integrating the Components

Now, let’s connect all the components in App.js to create the core functionality of the shopping cart.

  1. Import the ProductList and Cart components.
  2. Define an array of product objects (productsData).
  3. Create a state variable (cartItems) using the useState hook to manage the items in the cart.
  4. Create functions to handle adding, removing, and updating the quantity of items in the cart.
  5. Pass the necessary data and functions as props to the ProductList and Cart components.

Rendering the App (index.js)

Edit the src/index.js file to render the App component.


// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Running the App

Save all the files and run the following command in your terminal to start the development server:

npm start

This will open your app in your browser (usually at http://localhost:3000). You should see a list of products and an empty cart. You can add items to the cart, and the cart will update accordingly. You can also remove items and change the quantities.

Common Mistakes and Solutions

Here are some common mistakes and how to fix them:

  • Incorrect import paths: Double-check that your import paths are correct. Ensure that the file names match the component names and that the file extensions are correct (e.g., .js).
  • Missing props: Make sure you pass all the required props to the child components. Check the console for any warnings related to missing props.
  • Incorrect state updates: When updating the state, always create a new array or object instead of directly modifying the existing one. Use the spread operator (...) to create a copy of the array or object before making changes.
  • Incorrect event handling: Ensure that your event handler functions are correctly bound to the component and that you are passing the correct arguments to the event handlers.
  • Not handling edge cases: Consider edge cases, such as an empty cart or a product quantity of zero. Handle these cases gracefully in your code.

Key Takeaways

  • You’ve successfully built a basic shopping cart application using React.
  • You’ve learned how to create and use components.
  • You’ve learned how to manage state using the useState hook.
  • You’ve learned how to handle user interactions.
  • You’ve learned how to render lists of data.

Enhancements and Next Steps

This is a basic shopping cart app. You can extend it further by adding more features such as:

  • Product details page: Implement a page to display detailed information about each product.
  • Persistent storage: Use local storage or a database to save the cart items so they persist across sessions.
  • Checkout process: Add a checkout process to simulate the purchase of items.
  • API integration: Integrate with a real e-commerce API to fetch product data and manage orders.
  • Styling: Improve the app’s styling using CSS frameworks like Bootstrap, Material-UI, or Tailwind CSS.
  • Error handling: Implement error handling to handle potential issues, such as network errors or invalid data.
  • Testing: Write unit tests and integration tests to ensure your app functions correctly.

Summary

Building a shopping cart app in React is an excellent way to learn and practice fundamental React concepts. This tutorial provided a step-by-step guide to create a simple, yet functional, shopping cart app. By following this guide, you can solidify your understanding of React and create a valuable portfolio piece. Remember to practice, experiment, and continue learning to enhance your React skills. Congratulations on building your first shopping cart app!

FAQ

Q: How can I add more products to the app?

A: You can add more products by adding more objects to the productsData array in the App.js file. In a real-world scenario, you would fetch product data from an API or a database.

Q: How can I persist the cart items across sessions?

A: You can use local storage to save the cart items. When the app loads, you can retrieve the cart items from local storage. When the cart items change, you can update the local storage. Use localStorage.setItem('cartItems', JSON.stringify(cartItems)) to save and JSON.parse(localStorage.getItem('cartItems')) to retrieve.

Q: How can I improve the user interface?

A: You can improve the user interface by adding more styling using CSS or a CSS framework like Bootstrap, Material-UI, or Tailwind CSS. You can also add animations and transitions to make the app more interactive.

Q: How can I handle different product variations (e.g., size, color)?

A: You can add properties to your product objects to represent the variations. You can then add a component to allow the user to select the variations before adding the product to the cart. You may need to modify the product’s `id` based on the selected variations.

Q: How can I deploy this app?

A: You can deploy the app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting for static websites. You will need to build your React app using npm run build before deploying it.

This guide provides a solid foundation for building a shopping cart application. The concepts covered are fundamental to many web applications, and understanding them will serve you well as you continue your journey in React development. Embrace the opportunity to experiment, try out new features, and refine your skills. Every project is a chance to learn and grow, so keep building and exploring!

More posts