In the fast-paced digital landscape of today, having a robust and visually appealing e-commerce website is essential for businesses to thrive. With the advent of cutting-edge technologies, React.js has emerged as a popular choice for developing dynamic and user-friendly web applications. In this comprehensive guide, we'll delve into the world of building your dream e-commerce website using React.js, offering you a step-by-step walkthrough to create a site that stands out from the crowd.
Simple E-Commerce Website with React.js and Run In VS CODE /Virtual Studio Code
Follow These Steps To Create Simple E-Commerece website in React.js
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 code:
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 the src Folder
App.cs code:
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