Simple E-Commerce Website with React.js Run In VS CODE /Virtual Studio Code

Step 1: Install VS Code

Step 2: Install node.js   

Step 3: Run these Commands in Terminal Of VS Code :

1)npx create-react-app appname

2) cd appname

3)npm install

4)npm start

App.js:

import React, { useState } from 'react';
import './App.css';

import product1Image from './product1.png';
import product2Image from './product2.png';
import product3Image from './product3.png';
import product4Image from './product4.png';

function App() {
  const [products, setProducts] = useState([
    { id: 1, name: 'Product 1', price: 10, image: product1Image },
    { id: 2, name: 'Product 2', price: 20, image: product2Image },
    { id: 3, name: 'Product 3', price: 30, image: product3Image },
    { id: 4, name: 'Product 4', price: 40, image: product4Image },
  ]);

  const [cartItems, setCartItems] = useState([]);

  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
  };

  const handlePurchase = () => {
    // Calculate the total price
    const totalPrice = cartItems.reduce((total, item) => total + item.price, 0);

    // Show the total amount below the purchase button
    const totalAmountElement = document.getElementById('total-amount');
    totalAmountElement.innerText = `Total Amount: RS ${totalPrice}`;
  };

  return (
    <div className="App">
      <header>
        <h1>E-commerce Website</h1>
      </header>
      <div className="product-list">
        {products.map((product) => (
          <div className="product" key={product.id}>
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p>Price: RS {product.price}</p>
            <button onClick={() => addToCart(product)}>Add to Cart</button>
          </div>
        ))}
      </div>
      <div className="cart">
        <h2>Cart</h2>
        {cartItems.length === 0 ? (
          <p>Your cart is empty.</p>
        ) : (
          <ul>
            {cartItems.map((item) => (
              <li key={item.id}>
                {item.name} - RS {item.price}
              </li>
            ))}
          </ul>
        )}
        {cartItems.length > 0 && (
          <div>
            <button className="purchase-button" onClick={handlePurchase}>
              Purchase
            </button>
            <p id="total-amount"></p>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

Add Four Images in src Folder 


App.cs:

body {
  background-color: #f9f9f9;
}

.App {
  text-align: center;
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.logo {
  font-size: 24px;
  margin: 0;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  display: inline-block;
  margin-right: 10px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
}

header {
  background-color: #f2f2f2;
  padding: 20px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  background-color: #fff;
}

.product img {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.cart {
  background-color: #f9f9f9;
  padding: 20px;
  margin: 20px;
}

.cart h2 {
  margin-top: 0;
}

.cart ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart li {
  margin-bottom: 10px;
}

.purchase-button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.purchase-button:hover {
  background-color: #555;
}


If any Doubt then Comment