📄Assignments Of Class 19
Project 2 – Mini Blog App
(React.js)
✅ Assignment 1: Create the Project
Using Vite and Set Up the Folder Structure
🔹 Problem:Create a new React project using Vite and install React Router DOM. Prepare folders: components, pages, and clean the template.
🎯 Expected Outcome:A clean project ready for development with proper folder setup.
✅ Solution:
npm create vite@latest mini-blog-app -- --template react
cd mini-blog-app
npm install
npm install react-router-dom
npm run dev
Clean
up:
- Delete unnecessary files (e.g.,
App.css, logo.svg)
- Create folders: src/components
and src/pages
✅ Assignment 2: Create a Home Page
Component
🔹 Problem:Create a simple Home.jsx in the pages folder that displays a welcome message.
🎯 Expected Outcome:Visiting / should show "Welcome to the Mini Blog App".
✅ Solution:
// src/pages/Home.jsx
function Home() {
return <h2>Welcome to the Mini Blog App</h2>;
}
export default Home;
✅ Assignment 3: Set Up Navigation
Using React Router
🔹 Problem:Use BrowserRouter, Routes, and Link components to switch between Home, Blog List, and Add Blog.
🎯 Expected Outcome:Users should navigate using links without page reload.
✅ Solution (in App.jsx):
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import BlogList from './components/BlogList';
import AddBlog from './components/AddBlog';
function App() {
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={[]} />} />
<Route path="/add" element={<AddBlog
addNewBlog={() => {}} />} />
</Routes>
</BrowserRouter>
);
}
✅ Assignment 4: Display Blog List
with Props
🔹 Problem:Pass a static list of blog objects and render their titles and authors using BlogList.jsx.
🎯 Expected Outcome:A list of blogs should appear under the "Blog List" route.
✅ Solution:
// In App.jsx
const blogs = [
{ id: 1, title: "React Intro", author: "John" },
{ id: 2, title: "JS Basics", author: "Jane" }
];
// In JSX:
<Route path="/blogs" element={<BlogList blogs={blogs} />} />
// 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;
✅ Assignment 5: Use useState to
Store Blog Posts
🔹 Problem:Replace static blog data with a useState array and use a function to add new blogs.
🎯 Expected Outcome:New blogs can be added dynamically and shown in the list.
✅ Solution:
// In App.jsx
import { useState } from 'react';
function App() {
const [blogs, setBlogs] = useState([]);
const addNewBlog = (blog) => {
setBlogs([...blogs, blog]);
};
return (
<Routes>
<Route path="/blogs" element={<BlogList blogs={blogs}
/>} />
<Route path="/add" element={<AddBlog addNewBlog={addNewBlog}
/>} />
</Routes>
);
}
✅ Assignment 6: Create the AddBlog
Form
🔹 Problem:Create a form with fields: Title, Body, Author. Submit should call addNewBlog.
🎯 Expected Outcome:Filling the form and submitting adds the blog to the state.
✅ Solution:
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 blog = { id: Date.now(), title, body, author };
addNewBlog(blog);
setTitle('');
setBody('');
setAuthor('');
};
return (
<form onSubmit={handleSubmit}>
<input value={title} onChange={e => setTitle(e.target.value)}
placeholder="Title" required />
<textarea value={body} onChange={e => setBody(e.target.value)}
placeholder="Body" required />
<input value={author} onChange={e => setAuthor(e.target.value)}
placeholder="Author" required />
<button type="submit">Add Blog</button>
</form>
);
}
export default AddBlog;
✅ Assignment 7: Implement Blog
Detail Page Using ID
🔹 Problem:Use useParams() from React Router to show details of a blog when its ID is passed in URL.
🎯 Expected Outcome:Blog detail page should display full content when route is /blogs/:id.
✅ Solution:
// 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>
<h2>{blog.title}</h2>
<p>{blog.body}</p>
<small>By {blog.author}</small>
</div>
);
}
export default BlogDetail;
// In App.jsx
<Route path="/blogs/:id"
element={<BlogDetail blogs={blogs} />} />
✅ Assignment 8: Add “Read More” Link
in Blog List
🔹 Problem:Each blog in the list should include a link to /blogs/{id}.
🎯 Expected Outcome:Clicking "Read More" opens the detail page for that blog.
✅ Solution:
import { Link } from 'react-router-dom';
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>
<Link to={`/blogs/${blog.id}`}>Read
More</Link>
</div>
))}
</div>
);
}
✅ Assignment 9: Display "No
Blogs Found" if Empty
🔹 Problem:If there are no blogs, show a message like "No blogs found".
🎯 Expected Outcome:Conditional rendering should display a friendly message when the blog array is empty.
✅ Solution:
function BlogList({ blogs }) {
return (
<div>
<h3>Blog Posts</h3>
{blogs.length === 0 ? (
<p>No blogs found</p>
) : (
blogs.map((blog) => (
<div key={blog.id}>
<h4>{blog.title}</h4>
<p>Author: {blog.author}</p>
</div>
))
)}
</div>
);
}
✅ Assignment 10: Apply Basic CSS
Styling
🔹 Problem:Apply styling to the app to make it look cleaner and more like a blog.
🎯 Expected Outcome:Clean layout with spacing, fonts, and form alignment.
✅ Solution:
/* style.css */
body {
font-family: Arial;
margin: 20px;
background-color: #f9f9f9;
}
nav {
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
padding: 8px;
font-size: 16px;
}
button {
width: 100px;
padding: 8px;
background-color: #007bff;
color: white;
border: none;
}
Import
in main.jsx:
import './style.css';
