💻Lecture Notes Of Class 12
Project 1 – Profile Card App
Objective:
- Learn how to use props
to pass data between components.
- Understand state and how
it controls component behavior.
- Handle events to update
state dynamically.
- Apply these concepts by
building a card-based profile app with toggling features.
- Homework: Style the app with
CSS.
Lecture Outline (One Hour)
1. Introduction to the Project (5
minutes)
- Today, we will build a Profile
Card App using React.
- The app will show a card with
user details like name, profession, and a profile picture.
- We will add buttons to
toggle more information using state.
- We will pass data using props
from a parent to a child component.
- This practical project will
help understand how React works with real interactive UI.
2. Recap: What are Props, State, and
Events? (10 minutes)
- Props: Short for "properties", these are inputs to React components. Props let us pass data from a parent component to child components.
function ProfileCard(props) {
return <h1>{props.name}</h1>;
}
- State: State is internal to a
component and can change over time. State changes cause the component to
re-render.
import React, { useState } from "react";
function ToggleButton() {
const [isOn, setIsOn] = useState(false);
return (
<button onClick={() => setIsOn(!isOn)}>
{isOn ? "ON" : "OFF"}
</button>
);
}
- Events: Events are actions triggered
by user interactions, like clicks. We handle events in React using event
handlers.
Example:
onClick, onChange, onSubmit.
3. Step-by-Step Building of the
Profile Card App (40 minutes)
Step 1: Setup the React Project (5
minutes)
- Create a new React app using
Create React App or any starter:
npx create-react-app profile-card-app
cd profile-card-app
npm start
- Explain the file structure
briefly.
Step 2: Create a ProfileCard
Component (10 minutes)
- This component will receive props:
name, role, imageUrl.
- Code example:
function ProfileCard(props) {
return (
<div className="card">
<img src={props.imageUrl} alt="Profile" />
<h2>{props.name}</h2>
<h4>{props.role}</h4>
</div>
);
}
- Explain how props pass data.
Step 3: Use ProfileCard in App.js
and Pass Props (5 minutes)
import React from "react";
import ProfileCard from "./ProfileCard";
function App() {
return (
<div>
<ProfileCard
name="John Doe"
role="Web Developer"
imageUrl="https://randomuser.me/api/portraits/men/75.jpg"
/>
</div>
);
}
export default App;
- Explain passing data from
parent (App) to child (ProfileCard).
Step 4: Add State to Toggle Extra
Info (15 minutes)
- We want a button to toggle
showing extra info, like email and phone.
- Add state in the parent
component (App.js):
import React, { useState } from "react";
import ProfileCard from "./ProfileCard";
function App() {
const [showDetails, setShowDetails] = useState(false);
return (
<div>
<ProfileCard
name="John Doe"
role="Web Developer"
imageUrl="https://randomuser.me/api/portraits/men/75.jpg"
showDetails={showDetails}
/>
<button onClick={() => setShowDetails(!showDetails)}>
{showDetails ? "Hide Details"
: "Show Details"}
</button>
</div>
);
}
export default App;
- Modify ProfileCard to
conditionally show details based on props.showDetails:
function ProfileCard(props) {
return (
<div className="card">
<img src={props.imageUrl} alt="Profile" />
<h2>{props.name}</h2>
<h4>{props.role}</h4>
{props.showDetails && (
<div>
<p>Email: john.doe@example.com</p>
<p>Phone: +1 234 567 890</p>
</div>
)}
</div>
);
}
- Explain how clicking the button
changes the state, which updates the props, causing re-render.
Step 5: Explain Event Handling and
State Updates (5 minutes)
- Emphasize how onClick triggers
a function to update the state (setShowDetails).
- Explain that when state
changes, React re-renders the component tree.
- Show the flow: user clicks →
event handler runs → state updates → UI updates.
4. Summary and Q&A (5 minutes)
- Recap key points:
- Props pass data to components.
- State controls dynamic
behavior.
- Events handle user actions to
update state.
- This app shows real interaction
with toggling info.
- Encourage students to explore
by adding more fields or buttons.
5. Homework
- Style the Profile Card App
using CSS.
- Add borders, shadows, padding,
and colors to make it visually appealing.
- Bonus: Add hover effects on the
card or button.
- Optional: Add more toggle
buttons for different sections (like hobbies or social media links).
Additional Notes for the Teacher:
- Encourage students to type the
code themselves.
- Show live demo after each step.
- Provide error explanations if students
face issues.
- Motivate students to ask
questions about props, state, or events.
