🧑‍💻 How to Build a Simple Blog in React (Step-by-Step for Beginners)

If you're new to React and want to create your very first project, this guide is for you! In this article, we'll build a simple blog website using:

✅ React (via Create React App)
✅ JavaScript (no TypeScript, no back-end)
✅ CSS for styling
✅ React Router for navigation
✅ Clean file and folder structure

Let’s dive in! 🚀

---

📦 Step 1: Create the Project

Open your terminal and run the following commands:

npx create-react-app react-blog
cd react-blog
npm install react-router-dom

• create-react-app sets up a complete React project for you.
• react-router-dom lets us add page navigation (called “routing”) to our app.

---

📁 Step 2: Set Up Folder Structure

Inside the src/ folder, organize it like this:

src/
├── assets/            # (Optional) Images, icons
├── components/        # Reusable UI components (e.g., Header)
├── data/              # Static blog post data
├── pages/             # Main pages (Home, PostDetail, NotFound)
├── App.js             # Main component
├── App.css            # Global styles
└── index.js           # Entry point

Why? Because clean structure = easy maintenance, especially as your project grows.

---

🧭 Step 3: Set Up Routing in App.js

Create 3 simple pages:

1. Home page (list of blog posts)
2. Post detail page (single blog post)
3. 404 page (when page not found)

src/App.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import PostDetail from "./pages/PostDetail";
import NotFound from "./pages/NotFound";
import "./App.css";

function App() {
  return (
    <Router>
      <Header />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/post/:id" element={<PostDetail />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

• Routes contains all available pages.
• path="/" is the home page.
• :id is a dynamic part (e.g., /post/1) used for individual posts.

---

🔗 Step 4: Create the Header

src/components/Header.js

import { Link } from "react-router-dom";
import "./Header.css";

const Header = () => (
  <header className="header">
    <h1><Link to="/">My Blog</Link></h1>
  </header>
);

export default Header;

src/components/Header.css

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

.header a {
  color: white;
  text-decoration: none;
}

This gives your app a simple but clean top navigation bar.

---

📰 Step 5: Add Blog Post Data

Create some fake blog posts to display.

src/data/posts.js

const posts = [
  {
    id: 1,
    title: "First Blog Post",
    excerpt: "This is a short intro to the first blog post.",
    content: "This is the full content of the first blog post. Welcome!"
  },
  {
    id: 2,
    title: "Second Blog Post",
    excerpt: "A quick teaser of the second post...",
    content: "Full content of the second blog post goes here."
  }
];

export default posts;

---

🏠 Step 6: Home Page – List Blog Posts

src/pages/Home.js

import { Link } from "react-router-dom";
import posts from "../data/posts";

const Home = () => {
  return (
    <div>
      <h2>Latest Posts</h2>
      {posts.map((post) => (
        <div key={post.id} className="post-preview">
          <h3><Link to={`/post/${post.id}`}>{post.title}</Link></h3>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
};

export default Home;

• We loop through the posts array and show the title and excerpt.
• Each title is clickable, leading to the full blog post.

---

📄 Step 7: Post Detail Page

src/pages/PostDetail.js

import { useParams } from "react-router-dom";
import posts from "../data/posts";

const PostDetail = () => {
  const { id } = useParams();
  const post = posts.find((p) => p.id === parseInt(id));

  if (!post) {
    return <h2>Post not found.</h2>;
  }

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
};

export default PostDetail;

• useParams() grabs the :id from the URL.
• We find the matching post by ID and show its full content.

---

❌ Step 8: NotFound Page

src/pages/NotFound.js

const NotFound = () => {
  return <h2>404 - Page Not Found</h2>;
};

export default NotFound;

This page appears when the route doesn’t match any existing route.

---

🎨 Step 9: Add Some CSS

src/App.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
}

.container {
  padding: 20px;
  max-width: 800px;
  margin: auto;
  background: white;
}

.post-preview {
  margin-bottom: 20px;
}

a {
  color: #007bff;
  text-decoration: none;
}

Just some basic styles to make your app more pleasant.

---

🚀 Next Steps (Optional)

Want to make it even better?

• Add forms to create new posts
• Use localStorage to save posts
• Connect to a real back-end using Firebase or Node.js
• Add categories or tags

---