blog-app-react-steps.md

Blog app guided practice

Main Features of the Static Blog App:

1. Blog Post List: Display a list of blog posts.
2. Blog Post Detail View: Show details for a selected blog post.
3. Search Functionality: Use hardcoded search functionality (no actual dynamic search or filtering).
4. Static Styling: Use CSS Modules for styling.

Step-by-Step Guide to Build the Static Blog App

---

Step 1: Static Blog Data

We'll create a static file that holds all the blog data. This will serve as the data source for the entire app.

Create a src/blogData.js file:

const blogs = [
  {
    id: 1,
    title: "Introduction to React",
    author: "John Doe",
    content: "React is a popular JavaScript library for building user interfaces...",
    date: "2024-09-28"
  },
  {
    id: 2,
    title: "Understanding Props and State",
    author: "Jane Smith",
    content: "In React, props and state are both plain JavaScript objects...",
    date: "2024-09-27"
  },
  {
    id: 3,
    title: "React Hooks Overview",
    author: "Bob Johnson",
    content: "React Hooks are functions that let you use state and other React features...",
    date: "2024-09-26"
  }
];

export default blogs;

---

Step 2: BlogCard Component

This component will render a simple card for each blog post.

src/components/BlogCard.js:

import React from 'react';
import styles from './BlogCard.module.css'; // CSS Modules

const BlogCard = ({ blog }) => {
  return (
    {/*Show title, author and a part of the content */}
  );
};

export default BlogCard;

Step 2: BlogList Component

This component will display the list of blog posts. We will pass the static blog data as props to this component.

src/components/BlogList.js:

import React from 'react';
import BlogCard from './BlogCard';

const BlogList = ({ blogs }) => {
  return (
    <div>
      {/* Map through the blogs and render a BlogCard component */}
    </div>
  );
};

export default BlogList;

CSS Styling (BlogCard.module.css):

.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
}

---

Step 4: BlogDetail Component

The BlogDetail component will display the full details of a blog post. Since we're building a static app, you can either display a specific blog post or just hardcode the detail of one of the posts.

src/components/BlogDetail.js:

import React from 'react';

const BlogDetail = ({ blog }) => {
  return (
    <div>
      {/*Show blog details here */}
    </div>
  );
};

export default BlogDetail;

---

Step 5: SearchBar Component (Static Search Text)

Since we're not using dynamic search with useState, we’ll simply display a search bar with static search text.

src/components/SearchBar.js:

import React from 'react';

const SearchBar = () => {
  return (
    <div>
      <input type="text" placeholder="Search blog posts..." disabled />
      <p>Search functionality is static in this demo.</p>
    </div>
  );
};

export default SearchBar;

---

Step 6: Putting It All Together in App.js

Here’s how to put everything together in the App.js file. You’ll hardcode the blog list and select a specific blog to display in the detail view. Everything is static, meaning no state changes.

src/App.js:

import React from 'react';
import blogs from './blogData'; // Static blog data
import BlogList from './components/BlogList';
import BlogDetail from './components/BlogDetail';
import SearchBar from './components/SearchBar';

function App() {
  // Pick a specific blog post to display statically in the detail view
  const selectedBlog = blogs[0];

  return (
    <div>
      <h1>Blog App (Static)</h1>

      {/* TODO: Add search bar component */}
      

      
      <h2>Blog Posts</h2>
      {/* TODO: Add Blog list component */}

      {/* TODO: Add Blog details of the selected blog */}
      <h2>Blog Details</h2>
    </div>
  );
}

export default App;

---

Next step: Add state to select the blog dynamically

We'll do it together