💻 Lecture Notes Of Class 20
Objective:
- Recap key React concepts
learned so far
- Clarify doubts through Q&A
- Conduct student project
presentations and viva (oral questioning)
- Finalize project submission and
documentation guidelines
1. Introduction (5 minutes)
- Welcome students to the final
class.
- Explain today is focused on
revision and demonstration of their mini blog app projects.
- Stress the importance of
understanding key React concepts: props, state, useEffect, routing, forms.
- Mention there will be a short
viva and quiz to check their understanding.
- Encourage active participation.
2. Revision of Key React Concepts
(30 minutes)
2.1 Props (5 minutes)
- Definition: Props (short for properties)
are read-only inputs passed from a parent component to a child component.
- Purpose: They help components
communicate and reuse code by passing data and functions.
- Example:
function BlogItem(props) {
return <h2>{props.title}</h2>;
}
function BlogList() {
return <BlogItem title="My First Blog" />;
}
- Key points:
- Props are immutable inside
child components.
- Used to customize component
output.
2.2 State and useState Hook (7
minutes)
- Definition: State is local data managed
within a component that can change over time.
- useState Hook:
const [count, setCount] = useState(0);
- count is the current state
value.
- setCount updates the state and
triggers a re-render.
- Usage:
- To handle user input (e.g.,
form fields).
- To toggle UI elements (e.g.,
show/hide sections).
- Example:
const [title, setTitle] = useState("");
function handleInput(e) {
setTitle(e.target.value);
}
2.3 useEffect Hook (7 minutes)
- Purpose: To run side effects in
functional components — such as fetching data, updating DOM, or timers.
- Basic Syntax:
useEffect(() => {
console.log("Component mounted or updated");
}, [dependencyArray]);
- Dependency Array: Controls when the effect runs.
- Empty array []: Runs once on
mount (componentDidMount).
- With dependencies: Runs when
those values change.
- Example:
useEffect(() => {
document.title = `Blog: ${title}`;
}, [title]);
- Important: Avoid infinite loops by
properly managing dependencies.
2.4 Routing with React Router (6
minutes)
- Purpose: To navigate between different
pages or views in a React SPA without reloading the page.
- Key Components:
- <BrowserRouter>: Wraps
the app to enable routing.
- <Routes> and <Route>:
Define URL paths and components to render.
- Example:
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/blogs/:id" element={<BlogDetails />}
/>
</Routes>
</BrowserRouter>
- useParams Hook: To access dynamic URL
parameters like blog ID.
const { id } = useParams();
2.5 Forms in React (5 minutes)
- Controlled Components: Form inputs tied to React
state to manage their values.
- Example:
const [body, setBody] = useState("");
<textarea value={body} onChange={e
=> setBody(e.target.value)} />
- Form Submission: Prevent default browser reload
and handle form data in React.
function handleSubmit(e) {
e.preventDefault();
// Add blog logic
}
- Key Points:
- Always use controlled inputs
for predictable form handling.
- Validate inputs before
submission.
3. Activity: Viva and Quiz (15
minutes)
- Conduct a short viva by
asking questions on the above topics. Examples:
- What is the difference between
props and state?
- How does useEffect work and
why do we need it?
- Explain how React Router helps
in SPA navigation.
- What does e.preventDefault()
do in a form?
- Alternatively, conduct a quick online
quiz or paper-based quiz with MCQs.
4. Student Project Demos (10
minutes)
- Each student or group presents
their mini blog app project.
- Demonstrate:
- Blog list display using props
and map function.
- Form to add a new blog using
controlled components and state.
- Blog details page using
routing and useParams.
- Use of useEffect if any (e.g.,
for side effects like updating document title).
- Provide feedback and
suggestions for improvement.
5. Homework and Final Submission (5
minutes)
- Remind students to submit
their final project code and documentation by the deadline.
- Documentation should include:
- Project overview and features
- Description of key React
concepts used
- Instructions to run the
project
- Encourage students to revisit
the lecture notes and practice coding.
- Invite students to ask final
questions.
Summary
- Props are for passing data from
parent to child components.
- State manages internal
component data and UI changes.
- useEffect handles side effects
and lifecycle events.
- React Router enables
client-side navigation without page reloads.
- Forms in React use controlled
components for input management.
- Practice is key to mastering
React fundamentals.
