React Js
Props handling;
Main .jsx:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
App.jsx:
import React from 'react'
import Web from './Project2/Web'
import One from './propshandling/One'
import MapOne from './Map method/MapOne'
// import Project1 from './Project1'
const App = () => {
return (
<div>
{/* <Project1/> */}
{/* <Web/> */}
{/* <One/> */}
<MapOne/>
</div>
)
}
export default App
1. PropsHandling/One.jsx:
# Passing the elements using paramaters .
# Can able to change the data’s of the child components from the parent component .
import React from 'react'
import './Two'
import Two from './Two'
const One = () => {
const hours= new Date(). getHours() % 24
let timeOfday
if(hours < 12){
timeOfday="Morning"
}
else if( hours >=12 && hours <=17 ){
timeOfday="Afternoon"
}
else if( hours < 21 ){
timeOfday="Evening"
}
else{
timeOfday="Night"
}
return (
<div>
<h1>
Good {timeOfday}
</h1>
<Two
Name ="Berlin"
email="
[email protected]"
Age ={22}
/>
</div>
)
}
export default One
Project using Props: (Travel Journey)
Web.jsx:
import React from 'react'
import Header from './Header'
import './Entry'
import Entry from './Entry'
const Web = () => {
return (
<div className='Web-container'>
<Header/>
<Entry
img={{
src: "https://scrimba.com/links/travel-journal-japan-
image-url",
alt: "Mount Fuji"
}}
title="Mount-Fuji"
country="JAPAN"
text="Mount Fuji is the tallest mountain in Japan,
standing at 3,776 meters (12,380 feet). Mount Fuji is the single most
popular tourist site in Japan, for both Japanese and foreign
tourists."
map="https://maps.app.goo.gl/6RLYZDuuuqJ7kNGZ9"
date="12 Jan, 2021 - 24 Jan, 2021"
/>
<Entry
img={{
src: "https://scrimba.com/links/travel-journal-australia-
image-url",
alt: "Sydney Opera House"
}}
title="Sydney Opera house"
country="Australia"
text="The Sydney Opera House is a multi-venue performing
arts centre in Sydney. Located on the banks of the Sydney Harbour, it
is often regarded as one of the 20th century's most famous and
distinctive buildings."
map="https://maps.app.goo.gl/Zr17SCrsJeCEKMd36"
date="27 May, 2021 - 8 Jun, 2021"
/>
<Entry
img={{
src: "https://scrimba.com/links/travel-journal-norway-
image-url",
alt: "Geirangerfjord"
}}
title="Geiranjar-Ford"
country="Norway"
text="he Sydney Opera House is a multi-venue performing
arts centre in Sydney. Located on the banks of the Sydney Harbour, it
is often regarded as one of the 20th century's most famous and
distinctive buildings."
map="https://maps.app.goo.gl/fhkJuBhmFDv47tiB7"
date="01 Oct, 2021 - 18 Nov, 2021"
/>
</div>
)
}
export default Web
Data .js:
export default [
{
id: 1,
img: {
src: "https://scrimba.com/links/travel-journal-japan-
image-url",
alt: "Mount Fuji"
},
title: "Mount Fuji",
country: "Japan",
googleMapsLink: "https://maps.app.goo.gl/6RLYZDuuuqJ7kNGZ9",
dates: "12 Jan, 2021 - 24 Jan, 2021",
text: "Mount Fuji is the tallest mountain in Japan, standing
at 3,776 meters (12,380 feet). Mount Fuji is the single most popular
tourist site in Japan, for both Japanese and foreign tourists."
},
{
id: 2,
img: {
src: "https://scrimba.com/links/travel-journal-australia-
image-url",
alt: "Sydney Opera House"
},
title: "Sydney Opera House",
country: "Australia",
googleMapsLink: "https://maps.app.goo.gl/Zr17SCrsJeCEKMd36",
dates: "27 May, 2021 - 8 Jun, 2021",
text: "The Sydney Opera House is a multi-venue performing
arts centre in Sydney. Located on the banks of the Sydney Harbour, it
is often regarded as one of the 20th century's most famous and
distinctive buildings."
},
{
id: 3,
img: {
src: "https://scrimba.com/links/travel-journal-norway-
image-url",
alt: "Geirangerfjord"
},
title: "Geirangerfjord",
country: "Norway",
googleMapsLink: "https://maps.app.goo.gl/fhkJuBhmFDv47tiB7",
dates: "01 Oct, 2021 - 18 Nov, 2021",
text: "The Geiranger Fjord is a fjord in the Sunnmøre region
of Møre og Romsdal county, Norway. It is located entirely in the
Stranda Municipality."
},
]
Header.jsx :
import React from 'react'
import img from'../earth.jpg'
import "./Header.css"
const Header = () => {
return (
<>
<div className='container'>
<img src={img} alt="" className='image' />
<h1>my travel journel</h1>
</div>
</>
)
}
export default Header
Header.css :
html body{
margin: 0;
}
.container{
width: 100%;
height: 40px;
display: flex;
background-color: red;
align-items: center;
justify-content: center;
color: white;
}
.container h1{
font-weight: 500;
font-size: 1rem;
font-family: inherit;
}
.image{
width: 20px;
background: transparent;
}
Entry.jsx :
import React from 'react'
import marker from './Images/marker.png'
import './Entry.css'
const Entry = (props) => {
console.log(props);
return (
<article className='place-one'>
<div className="image1-container">
<img src={props.img.src} alt={props.img.alt}
className='image1'/>
</div>
<div>
<img src={marker} alt="marker" className='Marker' />
<span>{props.country}</span>
<a href={props.map}>
View on Google Map
</a>
<h2>
{props.title}
</h2>
<p>
{props.date}
</p>
<p>
{props.text}
</p>
</div>
</article>
)
}
export default Entry
Entry.css :
.place-one{
display: flex;
align-items: center;
justify-content: center;
width: 90%;
gap: 20px;
}
.image1-container{
width: 125px;
height: 168px;
overflow: hidden;
border-radius: 5px;
flex-shrink: 0;
}
.image1{
width: 100%;
height: 100%;
object-fit: cover;
}
.Marker{
width: 20px;
}
Map method:
Map is used to change and handle the items that are inside the array or objects one by one
seperatly.
In React JS, the map() method is commonly used to render lists of elements dynamically. It's a
standard JavaScript array method that creates a new array by calling a function on each element of the
original array
Example :
MapOne.jsx ;
import React from 'react'
const MapOne = () => {
const nums=[1,2,3,4,5]
// squaring the each item inside the nums variable
const Squares=nums.map((item)=>{
return item * item
})
console.log(Squares);
return (
<div></div>
)
}
export default MapOne
Example two :
import React from 'react'
const names = [ "berlin", "merbina" ];
const upperCase = names.map((name) =>{
// changing the 1st letter to uppercase and starts the words from the captalized letter
return name[0].toUpperCase() + name.slice(1)
// name.slice(1) is a JavaScript string method that returns a substring starting from the
second character of the string name
})
console.log(upperCase);
const MapTwo = () => {
return (
<div></div>
)
}
export default MapTwo
OutPut :
[ ‘Berlin’,’Merbina’ ]
Example 3:
import React from 'react'
const names = [ "berlin", "merbina" ];
const upperCase = names.map((name) =>{
// changing the 1st letter to uppercase and starts the words from the captalized letter
return name[0].toUpperCase() + name.slice(1)
// name.slice(1) is a JavaScript string method that returns a substring starting from the
second character of the string name
})
console.log(upperCase);
const Pokemon = [ "Bulbasaur", "charmander", "Squirtle" ]
const para = Pokemon.map( (item)=>{
return ` <p>${item}</p> `
// changing the output into the para format
} )
console.log(para);
const MapTwo = () => {
return (
<div></div>
)
}
export default MapTwo
Output:
[ ‘<p>Bulbasuar</p>’,’<p> charmander </p>’,’<p> Squirtle</p> ]
