How to Build an E-commerce Website Using React.js: A Practical Guide

Sandip Banerjee

— 4 min read
How to Build an E-commerce Website Using React.js: A Practical Guide

Building an e-commerce website is a major step for anyone looking to run an online business. React.js, with its component-based architecture and vast ecosystem, is one of the best tools to create a dynamic and efficient e-commerce website. In this guide, we'll walk through the process of building an e-commerce site with React.js, focusing on practical steps and best practices.

Prerequisites

Before diving into the development, make sure you have the following tools and knowledge:

  • Node.js and npm (or yarn) installed on your system.
  • Basic knowledge of JavaScript and React.js.
  • React Router, Redux (or context API), and familiarity with Axios for API calls.
  • A code editor like VS Code.

Step 1: Setting Up the React.js Environment

First, set up the development environment by creating a new React application using create-react-app.

npx create-react-app ecommerce-site
cd ecommerce-site
npm start

This sets up a basic React.js app with all the dependencies installed. The default page should now load at http://localhost:3000.

Step 2: Structuring the E-commerce Project

E-commerce websites generally require a structured folder architecture to keep the code organized. Here's a basic structure:

/src
  /components
    /ProductList
    /ProductDetails
    /Cart
    /Checkout
  /pages
    /HomePage
    /ProductPage
    /CartPage
    /CheckoutPage
  /redux (for state management)
    /actions
    /reducers
  /utils (for utility functions, API calls)
  /assets (for images, fonts)

Components:

  • ProductList: Displays all the products.
  • ProductDetails: Shows details for a single product.
  • Cart: Manages products added to the cart.
  • Checkout: Handles checkout and order processing.

Pages:

  • HomePage: Landing page.
  • ProductPage: A page with product listings or categories.
  • CartPage: Where users can view and modify their cart.
  • CheckoutPage: The final step where users complete their purchase.

Step 3: Implementing Routing with React Router

Set up React Router to navigate between different pages.

npm install react-router-dom

In src/index.js, wrap the app with BrowserRouter:

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

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

In src/App.js, define the routes:

import { Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProductPage from './pages/ProductPage';
import CartPage from './pages/CartPage';
import CheckoutPage from './pages/CheckoutPage';

function App() {
  return (
    <Switch>
      <Route path="/" exact component={HomePage} />
      <Route path="/products" component={ProductPage} />
      <Route path="/cart" component={CartPage} />
      <Route path="/checkout" component={CheckoutPage} />
    </Switch>
  );
}

export default App;

Step 4: Creating the Product List Component

Next, you'll want to display products on your site. You can either fetch products from an API or have a static array of product objects for now.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('https://fakestoreapi.com/products')
      .then(res => setProducts(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div className="product-list">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <img src={product.image} alt={product.title} />
          <h3>{product.title}</h3>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

Step 5: Adding a Shopping Cart

To add cart functionality, use React's state management solution. Redux or React’s Context API can handle the global state.

Install Redux:

npm install redux react-redux

Set up a cartReducer and an action to add items to the cart.

// src/redux/actions/cartActions.js
export const addToCart = (product) => ({
  type: 'ADD_TO_CART',
  payload: product
});

// src/redux/reducers/cartReducer.js
const cartReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return [...state, action.payload];
    default:
      return state;
  }
};

export default cartReducer;

To combine reducers:

// src/redux/reducers/index.js
import { combineReducers } from 'redux';
import cartReducer from './cartReducer';

const rootReducer = combineReducers({
  cart: cartReducer
});

export default rootReducer;

Wrap your App component with the Redux Provider in index.js.

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/reducers';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Now, you can dispatch actions to add items to the cart:

// src/components/ProductCard.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { addToCart } from '../redux/actions/cartActions';

function ProductCard({ product }) {
  const dispatch = useDispatch();

  return (
    <div className="product-card">
      <img src={product.image} alt={product.title} />
      <h3>{product.title}</h3>
      <p>{product.price}</p>
      <button onClick={() => dispatch(addToCart(product))}>Add to Cart</button>
    </div>
  );
}

export default ProductCard;

Step 6: Checkout Process

The checkout process typically involves form validation and integrating with a payment gateway.

For simplicity, you can use a library like React Hook Form to manage form states:

npm install react-hook-form

In CheckoutPage.js:

import React from 'react';
import { useForm } from 'react-hook-form';

function CheckoutPage() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    // Process payment or order submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="name" ref={register({ required: true })} placeholder="Name" />
      {errors.name && <span>This field is required</span>}
      
      <input name="address" ref={register({ required: true })} placeholder="Address" />
      {errors.address && <span>This field is required</span>}
      
      <button type="submit">Submit Order</button>
    </form>
  );
}

export default CheckoutPage;

Step 7: Styling the Website

You can use CSS frameworks like Bootstrap or TailwindCSS to make your site visually appealing.

For Bootstrap:

npm install bootstrap

Import Bootstrap in src/index.js:

import 'bootstrap/dist/css/bootstrap.min.css';

For custom styles, create a src/styles.css and import it globally in your App.js.

Step 8: Hosting Your E-commerce Website

Once you have built the core features, you can deploy your website. There are several options like:

  • Netlify
  • Vercel
  • GitHub Pages

For example, with Netlify, push your project to GitHub and connect it to Netlify for automatic deployment.

Conclusion

In this practical guide, we covered the essentials for building an e-commerce website using React.js. From setting up React, handling routing, creating product listings, managing a cart, and processing checkout, this guide gives you a solid foundation to build and scale an online store. Continue to iterate on your design, add features like user authentication, and integrate real payment gateways to turn this project into a full-fledged e-commerce platform.

Read more