1. Folder Structure:
my-ecommerce-website/
|-- src/
| |-- components/
| | |-- ProductList.js
| | |-- ShoppingCart.js
| |-- App.js
| |-- index.js
|-- public/
| |-- index.html
|-- package.json
|-- README.md
2. ProductList.js
– Product Listing Component:
import React, { useState } from 'react';
const ProductList = ({ products, addToCart }) => {
return (
<div>
<h2>Product List</h2>
<ul>
{products.map((product) => (
<li key={product.id}>
{product.name} - ${product.price}
<button onClick={() => addToCart(product)}>Add to Cart</button>
</li>
))}
</ul>
</div>
);
};
export default ProductList;
3. ShoppingCart.js
– Shopping Cart Component:
import React from 'react';
const ShoppingCart = ({ cart, removeFromCart }) => {
return (
<div>
<h2>Shopping Cart</h2>
<ul>
{cart.map((item, index) => (
<li key={index}>
{item.name} - ${item.price}
<button onClick={() => removeFromCart(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default ShoppingCart;
4. App.js
– Main Application Component:
import React, { useState } from 'react';
import './App.css';
import ProductList from './components/ProductList';
import ShoppingCart from './components/ShoppingCart';
const App = () => {
const [products] = useState([
{ id: 1, name: 'Product 1', price: 10.99 },
{ id: 2, name: 'Product 2', price: 19.99 },
{ id: 3, name: 'Product 3', price: 7.49 },
]);
const [cart, setCart] = useState([]);
const addToCart = (product) => {
setCart([...cart, product]);
};
const removeFromCart = (index) => {
const updatedCart = [...cart];
updatedCart.splice(index, 1);
setCart(updatedCart);
};
return (
<div className="App">
<ProductList products={products} addToCart={addToCart} />
<ShoppingCart cart={cart} removeFromCart={removeFromCart} />
</div>
);
};
export default App;
5. index.js
– ReactDOM Rendering:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Read More Topics
Architectural Patterns in System Design
Scalability and Performance in System Design
Database Design in System Design
Distributed Systems in System Design
System Integration and APIs in System Design
Cloud Computing in Sestem Design
Containerization and Orchestration in System Design
High Availability and Disaster Recovery
Performance Tuning and Optimization
Case Studies and Real-World Projects
B.Tech 4 YEAR CS/IT PROJECTS And Placement