💻Lecture Notes Of Class 19Project 2
Mini Blog App
(React.js)
🔰 Objective:
To
integrate all previously learned concepts in React.js by building a Mini
Blog App that includes routing, components, props, forms, state management,
and basic styling.
⏰ Total Duration: 1 Hour
✅ Class Plan Overview
|
Time |
Topic |
|
5 min |
Introduction & Objective |
|
10 min |
Folder Setup & Project Structure |
|
15 min |
Building Pages: Home, Blog List, Blog Detail |
|
15 min |
Add Blog using Form + useState |
|
10 min |
Routing Setup with React Router |
|
5 min |
Wrap-Up, Q&A, and Homework |
📍 1. Introduction (5 min)
🗣️ Say:
"Today,
we're going to build a Mini Blog App using everything you've learned so
far in React. We'll build multiple pages, handle form inputs, and use routes to
display individual blog posts."
💡 Skills Practiced:
- Components
- Props
- State
- React Router
- Form Handling
- Conditional Rendering
🧾 2. Project Setup (10 min)
📁 Folder Structure:
mini-blog-app/
├── public/
├── src/
│
├── components/
│
│ ├── BlogList.jsx
│
│ ├── BlogDetail.jsx
│
│ └── AddBlog.jsx
│
├── pages/
│
│ └── Home.jsx
│
├── App.jsx
│
├── main.jsx
✅ Steps:
1.
Create
project:
npm create vite@latest mini-blog-app -- --template react
cd mini-blog-app
npm install
npm install react-router-dom
npm run dev
2.
Clean
up boilerplate code.
🧱 3. Building Pages (15 min)
🔸 Home.jsx
function Home() {
return <h2>Welcome to the Mini Blog App</h2>;
}
export default Home;
🔸 BlogList.jsx
function BlogList({ blogs }) {
return (
<div>
<h3>Blog Posts</h3>
{blogs.map((blog) => (
<div key={blog.id}>
<h4>{blog.title}</h4>
<p>Author: {blog.author}</p>
</div>
))}
</div>
);
}
export default BlogList;
🔸 BlogDetail.jsx
import { useParams } from 'react-router-dom';
function BlogDetail({ blogs }) {
const { id } = useParams();
const blog = blogs.find((b) => b.id === parseInt(id));
if (!blog) return <h2>Blog not found</h2>;
return (
<div>
<h3>{blog.title}</h3>
<p>{blog.body}</p>
<small>By {blog.author}</small>
</div>
);
}
export default BlogDetail;
📝 4. Add Blog Form (15 min)
🔸 AddBlog.jsx
import { useState } from 'react';
function AddBlog({ addNewBlog }) {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const [author, setAuthor] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
const newBlog = {
id: Date.now(),
title,
body,
author
};
addNewBlog(newBlog);
setTitle('');
setBody('');
setAuthor('');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Title" value={title}
onChange={(e) => setTitle(e.target.value)} required />
<textarea placeholder="Body" value={body} onChange={(e)
=> setBody(e.target.value)} required />
<input type="text" placeholder="Author" value={author}
onChange={(e) => setAuthor(e.target.value)} required />
<button type="submit">Add Blog</button>
</form>
);
}
export default AddBlog;
🔁 5. Routing (10 min)
🔸 App.jsx
import { useState } from 'react';
import { BrowserRouter, Routes, Route,
Link } from 'react-router-dom';
import Home from './pages/Home';
import BlogList from './components/BlogList';
import BlogDetail from './components/BlogDetail';
import AddBlog from './components/AddBlog';
function App() {
const [blogs, setBlogs] = useState([]);
const addNewBlog = (blog) => {
setBlogs([...blogs, blog]);
};
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
| <Link to="/blogs">Blog List</Link> | <Link to="/add">Add
Blog</Link>
</nav>
<Routes>
<Route path="/" element={<Home
/>} />
<Route path="/blogs" element={<BlogList
blogs={blogs} />} />
<Route path="/blogs/:id" element={<BlogDetail
blogs={blogs} />} />
<Route path="/add" element={<AddBlog
addNewBlog={addNewBlog} />} />
</Routes>
</BrowserRouter>
);
}
export default App;
🧪 Example Output After
Adding Blog:
Blog Title: "React Basics"
Author: "John"
Body: "This is a beginner's
post about React.js..."
✅
The blog will appear in the blog list. Clicking on it (add link if needed) will
show the detail page.
🏁 6. Wrap-Up & Homework
(5 min)
🔁 Recap:
- Created a multi-page React
app with routing
- Passed state and props
between components
- Used forms and useState
for blog creation
- Used useParams() from React
Router to fetch blog by ID
📚 Homework:
1.
Finalize
the Mini Blog App:
o Add a "Read More" link in
the BlogList to view details.
o Style using CSS or Bootstrap for
better UI.
o Handle empty state (e.g., "No
blogs found").
o Optional: Save to localStorage.
2.
Extra
Challenge:
o Add a delete blog feature.
o Sort blog posts by newest first.
📌 Teaching Tip:
Use
live coding and pause frequently to ask questions or allow students to catch
up. Encourage students to write the code along with you and not just copy.
