Scribd
Upload
30 views6 pages

22 Oct 2024 Start Reactjs Project

React

Uploaded by

Abhishek tripathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
30 views6 pages

22 Oct 2024 Start Reactjs Project

React

Uploaded by

Abhishek tripathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

******************************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

You might also like