React.js Topics
Day 20:
- Rules of JSX
- Components and Props
Rules of JSX:
ReactWithCDNLinks.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body id="root">
<script type="text/babel">
function reactReuse(name, age, img) {
return (
<div
style={{
width: "250px",
textAlign: "center",
boxShadow: "0 0 10px black",
padding: "10px",
}}
>
<img src={img} alt="TATA" width="100%" height="300px" />
<h2>{name}</h2>
<p>{age}</p>
</div>
);
}
function reactCall() {
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
{reactReuse(
"Rathan TATA",
86,
"https://assets.gqindia.com/photos/645e034efc79052643f24e8e/16:9/w_1920,c_limit/Ratan-Tata.jpg"
)}
{reactReuse(
"Sundar Pichai",
51,
"https://sugermint.com/wp-content/uploads/2020/04/Biography-of-Sundar-Pichai.jpg"
)}
{reactReuse(
"Nadella Satya",
56,
"https://akm-img-a-in.tosshub.com/indiatoday/images/story/202306/rtx6otlw-sixteen_nine.jpg?VersionId=G9LYYNj7sPJp7BvqwTUD95L69H74FjNB&size=690:388"
)}
{reactReuse(
"Jaya Varma Sinha",
60,
"https://sambadenglish.com/wp-content/uploads/2023/08/Jaya-Verma-Sinha-e1693478762805.jpg"
)}
</div>
);
}
ReactDOM.render(reactCall(), document.getElementById("root"));
reactCall();
</script>
</body>
</html>
Components and Props:
ComponentAndProps.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body id="root">
<script type="text/babel">
function ReactReuse(props) {
return (
<div
style={{
width: "250px",
textAlign: "center",
boxShadow: "0 0 10px black",
padding: "10px",
}}
>
<img src={props.img} alt="TATA" width="100%" height="300px" />
<h2>{props.name}</h2>
<p>{props.age}</p>
</div>
);
}
function ReactCall() {
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ReactReuse
name="Rathan TATA"
age={86}
img="https://assets.gqindia.com/photos/645e034efc79052643f24e8e/16:9/w_1920,c_limit/Ratan-Tata.jpg"
/>
<ReactReuse
name="Sundar Pichai"
age={51}
img="https://sugermint.com/wp-content/uploads/2020/04/Biography-of-Sundar-Pichai.jpg"
/>
<ReactReuse
name="Nadella Satya"
age={56}
img="https://akm-img-a-in.tosshub.com/indiatoday/images/story/202306/rtx6otlw-sixteen_nine.jpg?VersionId=G9LYYNj7sPJp7BvqwTUD95L69H74FjNB&size=690:388"
/>
<ReactReuse
name="Jaya Varma Sinha"
age={60}
img="https://sambadenglish.com/wp-content/uploads/2023/08/Jaya-Verma-Sinha-e1693478762805.jpg"
/>
</div>
);
}
ReactDOM.render(<ReactCall/>, document.getElementById("root"));
</script>
</body>
</html>
Interview Questions:
1. How do you embed JavaScript expressions in JSX?
2. What is a React component?
3. How do you access props in a functional component?
No comments:
Post a Comment