📄 Assignments Of Class 3:
Components - Introduction
✅ Assignment 1: Create a Simple
Functional Component
🔹 Task:Create a functional component named Welcome that returns the text: "Welcome to React Components".
✅ Solution:
// Welcome.js
function Welcome() {
return <h1>Welcome to React Components</h1>;
}
export default Welcome;
➕ Use it in App.js:
import Welcome from './Welcome';
function App() {
return (
<div>
<Welcome />
</div>
);
}
export default App;
✅ Assignment 2: Create a Class
Component
🔹 Task:Create a class component named Message that returns the text: "This is a Class Component".
✅ Solution:
// Message.js
import React, { Component } from 'react';
class Message extends Component {
render() {
return <h2>This is a Class Component</h2>;
}
}
export default Message;
➕ Use it in App.js:
import Message from './Message';
function App() {
return (
<div>
<Message />
</div>
);
}
✅ Assignment 3: Pass a Name Using
Props
🔹 Task:Create a functional component Greeting that accepts a prop name and displays "Hello, {name}".
✅ Solution:
// Greeting.js
function Greeting(props) {
return <h2>Hello, {props.name}</h2>;
}
export default Greeting;
➕ Use in App.js:
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
✅ Assignment 4: Create a Header,
Content, and Footer Component
🔹 Task:Create three functional components: Header, Content, and Footer. Render them in App.js.
✅ Solution:
// Header.js
function Header() {
return <h1>My Website Header</h1>;
}
export default Header;
// Content.js
function Content() {
return <p>This is the content of the page.</p>;
}
export default Content;
// Footer.js
function Footer() {
return <footer>© 2025 My Website</footer>;
}
export default Footer;
➕ App.js:
import Header from './Header';
import Content from './Content';
import Footer from './Footer';
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
✅ Assignment 5: Use Multiple Props
🔹 Task:Create a component UserCard that accepts name and email as props and displays them.
✅ Solution:
// UserCard.js
function UserCard(props) {
return (
<div>
<h3>Name: {props.name}</h3>
<p>Email: {props.email}</p>
</div>
);
}
export default UserCard;
➕ App.js:
import UserCard from './UserCard';
function App() {
return (
<div>
<UserCard name="Alice" email="alice@example.com"
/>
<UserCard name="Bob" email="bob@example.com"
/>
</div>
);
}
✅ Assignment 6: Destructure Props
🔹 Task:Modify the Greeting component to use destructuring for props.
✅ Solution:
// Greeting.js
function Greeting({ name }) {
return <h2>Hello, {name}</h2>;
}
export default Greeting;
➕ App.js remains the same:
<Greeting name="Charlie" />
✅ Assignment 7: Component Inside a
Component
🔹 Task:Create a Main component that includes Header, Content, and Footer.
✅ Solution:
// Main.js
import Header from './Header';
import Content from './Content';
import Footer from './Footer';
function Main() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
export default Main;
➕ App.js:
import Main from './Main';
function App() {
return <Main />;
}
✅ Assignment 8: Create a List of
Greetings
🔹 Task:Create multiple Greeting components using different names and render them in a loop using .map().
✅ Solution:
// Greeting.js
function Greeting({ name }) {
return <h2>Hello, {name}</h2>;
}
export default Greeting;
// App.js
import Greeting from './Greeting';
const names = ['Alice', 'Bob', 'Charlie'];
return (
<div>
{names.map((n, index) => (
<Greeting key={index} name={n} />
))}
</div>
);
}
✅ Assignment 9: Conditional
Rendering in Component
🔹 Task: Create a component Status that accepts a prop isLoggedIn and shows different messages based on its value.
✅ Solution:
// Status.js
function Status({ isLoggedIn }) {
return <h2>{isLoggedIn ? 'Welcome back!' : 'Please log in.'}</h2>;
}
export default Status;
// App.js
import Status from './Status';
function App() {
return (
<div>
<Status isLoggedIn={true} />
<Status isLoggedIn={false} />
</div>
);
}
✅ Assignment 10: Style a Component
Using Props
🔹 Task: Create a StyledBox component that accepts color as a prop and changes background accordingly.
✅ Solution:
// StyledBox.js
function StyledBox({ color }) {
const boxStyle = {
backgroundColor: color,
padding: '20px',
margin: '10px',
color: 'white',
};
return <div style={boxStyle}>This box is {color}</div>;
}
export default StyledBox;
➕ App.js:
import StyledBox from './StyledBox';
return (
<div>
<StyledBox color="blue" />
<StyledBox color="green" />
<StyledBox color="red" />
</div>
);
}
