Cards.jsx
import React from 'react';
import Images from './Images';
function Card(props)
{
//console.log(props);
return (
<>
<div className="cards">
<div className="card">
<Images imgsrc={props.imgsrc}
imgname={props.imgname}/>
<div className="card_info">
<span className="card_category">
{props.category}</span>
<h3 className="card_title">{props.tit}</h3>
<a href={props.link} target="_blank" rel="
noopener noreferrer">
<button className="card_button">
Watch Now</button>
</a>
</div>
</div>
</div>
</>
)
}
export default Card;
Sdata.jsx
const Sdata = [
{
id: 1,
imgsrc: "https://icdn2.digitaltrends.com
/image/digitaltrends/best-movies-on-netflix-marriage
-story-1200x9999.jpg",
imgname: "Marriage Story (2019)",
category: "ONE",
tit: "Marriage Story (2019)",
link: "https://www.imdb.com/title/tt7653254/?ref_=nv_sr_srsg_0"
},
{
id: 2,
imgsrc: "https://icdn3.digitaltrends.com
/image/digitaltrends/200612-da-5-bloods-1128_
583aa9bc99df786adfba4979f13d0761-1200x9999.jpg",
imgname: "Da 5 Bloods (2020)",
category: "TWO",
tit: "Da 5 Bloods (2020)",
link: "https://www.imdb.com/title/tt9777644/"
},
{
id: 3,
imgsrc: "https://icdn4.digitaltrends.com
/image/digitaltrends/lady-bird-netflix-1200x9999.jpg",
imgname:"Lady Bird (2017)",
category: "THREE",
tit: "Lady Bird (2017)",
link: "https://www.imdb.com/title/tt4925292/?ref_=nv_sr_srsg_0"
}
];
export default Sdata;
App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Card from './Cards';
import Sdata from './Sdata';
import "./index.css";
ReactDOM.render(
<>
<h1 className='top_head'> TOP 3 NETFLIX SHOWS</h1>
<Card
imgsrc ={Sdata[0].imgsrc}
imgname = {Sdata[0].imgname}
category = {Sdata[0].category}
tit = {Sdata[0].tit}
link = {Sdata[0].link}
/>
<Card
imgsrc ={Sdata[1].imgsrc}
imgname = {Sdata[1].imgname}
category = {Sdata[1].category}
tit = {Sdata[1].tit}
link = {Sdata[1].link}
/>
<Card
imgsrc ={Sdata[2].imgsrc}
imgname = {Sdata[2].imgname}
category = {Sdata[2].category}
tit = {Sdata[2].tit}
link = {Sdata[2].link}
/>
</>,
document.getElementById('root')
);
OR
import React from 'react';
import ReactDOM from 'react-dom';
import Card from './Cards';
import Sdata from './Sdata';
import "./index.css";
//Fat Arrow function (single line function)
//const addition = (a,b) => a+b;
//Array mapping
function cardC(val){
//console.log(val);
return(
<Card
key = {val.id}
imgsrc = {val.imgsrc}
imgname = {val.imgname}
category = {val.category}
tit = {val.tit}
link = {val.link}
/>
)
}
ReactDOM.render(
<>
<h1 className='top_head'> TOP 3 NETFLIX SHOWS</h1>
{Sdata.map(cardC)}
</>,
document.getElementById('root')
);
OR
import React from 'react';
import ReactDOM from 'react-dom';
import Card from './Cards';
import Sdata from './Sdata';
import "./index.css";
const App = () => (
<>
<h1 className='top_head'> TOP 3 NETFLIX SHOWS</h1>
{Sdata.map((val, index) => {
return (
<Card
key = {val.id}
imgsrc = {val.imgsrc}
imgname = {val.imgname}
category = {val.category}
tit = {val.tit}
link = {val.link}
/>
);
})}
</>);
export default App;
Images.jsx
import React from 'react';
const Images = (props) => {
return <img className="card_img" src={props.imgsrc}
alt={props.imgname}/>;
}
export default Images;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//Importing all from App
ReactDOM.render(<App />, document.getElementById('root'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
No comments:
Post a Comment