******************************22 oct****************************************
step1 src/App.js
import React from 'react'
function App() {
return (
<div> welcome</div>
)
}
export default App
step2
npm start
step3
https://www.npmjs.com/package/react-router-dom
npm i react-router-dom
step4 terminal
PS G:\21octreactproject\frontend> npm i react-router-dom
step5 src/pages/ Home.js
import React from 'react'
function Home() {
return (
<div>welcome Home Page</div>
)
}
export default Home
step6 App.js
import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home/>}/>
</Routes>
</Router>
)
}
export default App
step7 terminal
npm start
***************************6 Nov
2024********************************************************
step1 package.json
npm i react-bootstrap
npm i react-dom
npm i react-router-bootstrap
npm i react-router-dom
***************************7 Nov
2024*******************************************************
step1frontend/src/components/HeroSection.js
import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
const HeroSection=()=>{
return(
<div className="hero-section">
<Container>
<Row className="align-items-center">
<Col md={6}>
<h1>sarso</h1>
</Col>
<Col md={6}>
<h1>aalo</h1>
</Col>
</Row>
</Container>
</div>
}
export default HeroSection
step2 frontend/src/pages/Home.js
import React from 'react'
import HeroSection from '../components/HeroSection'
function Home() {
return (
<div>
<HeroSection/>
<div>welcome Home Page</div>
</div>
)
}
export default Home
*************************************11 Nov
2024***************************************
step1frontend/src/components/HeroSection.js
import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
const HeroSection=()=>{
return(
<div className="hero-section">
<Container>
<Row className="align-items-center">
<Col md={6}>
<h1>Welcome to DellDen</h1>
<p>Your one-stop destination for the best products at unbeatable prices!</p>
<Button variant="primary" href="/">Shop Now</Button>
</Col>
<Col md={6}>
<img src='https://img.freepik.com/free-photo/view-table-with-articles-food-
family_1398-5025.jpg?semt=ais_hybrid'
alt="Shopping"
className="hero-image"
/>
</Col>
</Row>
</Container>
</div>
}
export default HeroSection
step2frontend/src/components/HeroSection.css
.hero-section {
background-color: #f8f9fa; /* Light background color */
padding: 4rem 0; /* Padding for the section */
text-align: left; /* Left align text */
}
.hero-section h1 {
font-size: 3rem; /* Large heading size */
color: #333; /* Dark text color */
}
.hero-section p {
font-size: 1.25rem; /* Medium text size */
color: #666; /* Grey text color */
}
.hero-image {
max-width: 100%; /* Responsive image */
height: auto; /* Maintain aspect ratio */
border-radius: 0.5rem; /* Rounded corners for the image */
}
step3frontend/src/components/HeroSection.js
import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
import './HeroSection.css'
const HeroSection=()=>{
return(
<div className="hero-section">
<Container>
<Row className="align-items-center">
<Col md={6}>
<h1>Welcome to DellDen</h1>
<p>Your one-stop destination for the best products at unbeatable prices!</p>
<Button variant="primary" href="/">Shop Now</Button>
</Col>
<Col md={6}>
<img src='https://img.freepik.com/free-photo/view-table-with-articles-food-
family_1398-5025.jpg?semt=ais_hybrid'
alt="Shopping"
className="hero-image"
/>
</Col>
</Row>
</Container>
</div>
}
export default HeroSection
*********************************12 nov
2024*********************************************
step1 frontend/src/data/Products.js
const products=[
{
id: 1,
name: 'Smartphone',
price: 299.99,
description: 'Latest model smartphone with amazing features.',
image: '/images/im1.jpg'
},
{
id: 2,
name: 'Laptop',
price: 799.99,
description: 'High-performance laptop for gaming and work.',
image: '/images/im2.jpg'
},
{
id: 3,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im3.jpg'
},
{
id: 4,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im4.jpg'
},
{
id: 5,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im5.jpg'
},
{
id: 6,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im6.jpg'
},
{
id: 7,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im7.jpg'
},
{
id: 8,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im8.jpg'
},
step2frontend/public/images
step3 download images and paste images folder
