Creating an e-commerce website in React.

js is a more advanced project but a

great way to practice your skills. Below, I'll outline the structure and provide
some example code to get you started.

Project Idea: E-commerce Website

Features:

Browse Products: Users can see a list of products.

View Product Details: Users can click on a product to see more details.

Add to Cart: Users can add products to their shopping cart.

View Cart: Users can view the products in their cart.

Checkout: Users can proceed to checkout.

Setting Up the Project:

Make sure you have Node.js installed.

Create a new React application using Create React App:

sh

குறியீட்டை நகலெடுக்கவும்

npx create-react-app ecommerce-website

cd ecommerce-website

npm start

App Component Structure:

App: The main component.

ProductList: A component to display the list of products.

ProductItem: A component for each product.

ProductDetail: A component to display product details.

Cart: A component to display the shopping cart.

Checkout: A component to handle the checkout process.

Code:
1. App.js

javascript

குறியீட்டை நகலெடுக்கவும்

import React, { useState } from 'react';

import ProductList from './ProductList';

import ProductDetail from './ProductDetail';

import Cart from './Cart';

import Checkout from './Checkout';

function App() {

const [products] = useState([

{ id: 1, name: 'Product 1', price: 100, description: 'Description of Product 1'
},

{ id: 2, name: 'Product 2', price: 200, description: 'Description of Product 2'
},

]);

const [selectedProduct, setSelectedProduct] = useState(null);

const [cart, setCart] = useState([]);

const [isCheckout, setIsCheckout] = useState(false);

const addToCart = (product) => {

setCart([...cart, product]);

};

const removeFromCart = (product) => {

setCart(cart.filter(item => item.id !== product.id));

};
 return (

<div className="App">

<h1>E-commerce Website</h1>

{isCheckout ? (

<Checkout cart={cart} />

) : selectedProduct ? (

<ProductDetail product={selectedProduct} onAddToCart={addToCart}

onBack={() => setSelectedProduct(null)} />

):(

<ProductList products={products}
onProductSelect={setSelectedProduct} />

)}

<Cart cart={cart} onRemoveFromCart={removeFromCart}

onCheckout={() => setIsCheckout(true)} />

</div>

);

export default App;

2. ProductList.js

javascript

குறியீட்டை நகலெடுக்கவும்

import React from 'react';

import ProductItem from './ProductItem';

function ProductList({ products, onProductSelect }) {

return (
 <div>

{products.map(product => (

<ProductItem key={product.id} product={product}

onProductSelect={onProductSelect} />

))}

</div>

);

export default ProductList;

3. ProductItem.js

javascript

குறியீட்டை நகலெடுக்கவும்

import React from 'react';

function ProductItem({ product, onProductSelect }) {

return (

<div onClick={() => onProductSelect(product)}>

<h3>{product.name}</h3>

<p>${product.price}</p>

</div>

);

export default ProductItem;

4. ProductDetail.js

javascript
குறியீட்டை நகலெடுக்கவும்

import React from 'react';

function ProductDetail({ product, onAddToCart, onBack }) {

return (

<div>

<button onClick={onBack}>Back</button>

<h2>{product.name}</h2>

<p>{product.description}</p>

<p>${product.price}</p>

<button onClick={() => onAddToCart(product)}>Add to Cart</button>

</div>

);

export default ProductDetail;

5. Cart.js

javascript

குறியீட்டை நகலெடுக்கவும்

import React from 'react';

function Cart({ cart, onRemoveFromCart, onCheckout }) {

return (

<div>

<h2>Shopping Cart</h2>

{cart.length === 0 ? (

<p>Your cart is empty.</p>

 ):(

cart.map(product => (

<div key={product.id}>

<h3>{product.name}</h3>

<p>${product.price}</p>

<button onClick={() =>

onRemoveFromCart(product)}>Remove</button>

</div>

))

)}

{cart.length > 0 && <button

onClick={onCheckout}>Checkout</button>}

</div>

);

export default Cart;

6. Checkout.js

javascript

குறியீட்டை நகலெடுக்கவும்

import React from 'react';

function Checkout({ cart }) {

const total = cart.reduce((sum, product) => sum + product.price, 0);

return (

<div>
 <h2>Checkout</h2>

{cart.map(product => (

<div key={product.id}>

<h3>{product.name}</h3>

<p>${product.price}</p>

</div>

))}

<h3>Total: ${total}</h3>

<button>Proceed to Payment</button>

</div>

);

export default Checkout;

Explanation:

State Management:

products: An array of product objects.

selectedProduct: Stores the currently selected product for viewing details.

cart: An array to store the products added to the shopping cart.

isCheckout: A boolean to toggle between the checkout view and other views.

Components:

App: Manages the state and renders the appropriate components based on
the current state.

ProductList: Displays the list of products and allows selection.

ProductItem: Displays individual product information and handles selection.

ProductDetail: Shows detailed information about a selected product and
allows adding it to the cart.

Cart: Displays the products in the shopping cart and handles removal and
checkout.

Checkout: Displays the checkout details and the total price of items in the
cart.

Props:

Data and functions are passed as props between components to manage

state and interactions.

For example, ProductList receives the products array and the

onProductSelect function from App.

Event Handling:

Clicking on a ProductItem triggers the onProductSelect function, which

updates the selectedProduct state in App.

Adding a product to the cart calls the onAddToCart function, which updates
the cart state in App.

Removing a product from the cart calls the onRemoveFromCart function,

which updates the cart state in App.

Proceeding to checkout sets the isCheckout state to true, displaying the

Checkout component.

This project covers various React.js concepts and provides a solid foundation
for implementing more advanced features like user authentication, dynamic
product fetching, and payment integration.