Building a Blogging Website with React.js: A Step-by-Step Guide
Tags: blogging, react, mern, javascript
Published: 2023-11-11 05:51:10

In the vast landscape of web development, React.js has emerged as a powerful library for building user interfaces. In this blog, we'll explore the process of creating a simple yet functional blogging website using React.js. By the end of this guide, you'll have a foundation upon which you can expand and customize based on your specific needs.

**Step 1: Project Setup**
Start by creating a new React.js project using Create React App or any preferred method.

```bash
npx create-react-app rs-blog
cd rs-blog
```
This sets up the basic structure and dependencies needed for a React project.

**Step 2: Install Dependencies**
For our blogging website, we'll need additional packages such as react-router-dom for routing and axios for making API requests.

```bash
npm install react-router-dom axios
```
**Step 3: Create Components**
Divide your application into components. Common components for a blogging website might include Header, PostList, PostDetail, and Footer. Organize them within a components folder.

###PostList 

```bash
import React, { useRef } from "react";
import { Link } from "react-router-dom";
import Blogs from 'data/Blogs';
import {
    Container,
    Row,
    Col,
} from "reactstrap";

import MainNavbar from "components/Navbars/MainNavbar.js";
import MainFooter from "components/Footers/MainFooter.js";

const Blog = () => {
    const mainRef = useRef(null);
    return (
        <>
            <MainNavbar />
            <main ref={mainRef}>
                <section className="section section-shaped section-lg">
                    <Container className="pt-lg">
                        <Row className="text-center justify-content-center">
                            <Col lg="10">
                                <h2 className="display-3 text-white">Blogs</h2>
                            </Col>
                        </Row>
                        <Row className="row-grid mt-5">
                            {Blogs.map((blog, index) => (
                                <div key={index} className="col-md-4">
                                    <div className="card mb-4 border-0">
                                        <div className="card-body p-0">
                                            <Link to={`/blog-details/${blog.id}`}>
                                                // { blog.blogImg } // paste this in src attribute of below image
                                                <img src="" alt="" className="img-fluid w-100" style={{ height: "150px" }} />
                                            </Link>
                                            <div className="p-1">
                                                <Link to={`/blog-details/${blog.id}`}>
                                                    <h6 className="card-title mb-0 pb-0 font-bold">{blog.title}</h6>
                                                </Link>
                                                <p className="card-text">{blog.content}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </Row>
                    </Container>
                </section>
            </main>
            <MainFooter />
        </>
    );
}
export default Blog;

```

### Blog Details page 

```bash
import React, { useState, useEffect, useRef } from "react";
import { Button, Container } from "reactstrap";
import { Link, useParams } from "react-router-dom";
import MainNavbar from "components/Navbars/MainNavbar.js";
import MainFooter from "components/Footers/MainFooter";
import Blogs from 'data/Blogs';
import blog from "../assets/img/blogs/24.png";

const BlogDetails = () => {
    const { blogId } = useParams();
    const [blogDetails, setBlogDetails] = useState(null);
    const mainRef = useRef(null);
    useEffect(() => {
        const selectedBlog = Blogs.find((blog) => blog.id === parseInt(blogId, 10));
        setBlogDetails(selectedBlog);
    }, [blogId]);
    if (!blogDetails) {
        return <div>Loading...</div>;
    }
    return (
        <>
            <MainNavbar />
            <main ref={mainRef}>
                <Container style={{ marginBottom: "20px" }} className="">
                    <div className="row m-2">
                        <div className="col-md-8 mb-4 shadow p-4">
                            // {blogDetails.blogImg} // paste this in src attribute of below image
                            <img src="" alt="" className="img-fluid d-inline mr-2 w-100" style={{ height: "300px" }} />
                            <section className="mb-3 mt-3">{blogDetails.title}</section>
                            <section>
                                <div>{blogDetails.content}</div>
                                <span className="fw-bold">Share this on <li className="fa fa-share pr-1"> </li></span>
                                <Button
                                    outline
                                    color="primary"
                                    style={{ textTransform: "capitalize" }}
                                > <li className="fa fa-linkedin"></li> Linkedin</Button>
                                <Button
                                    outline
                                    color="primary"
                                ><li className="fa fa-instagram"></li> Instagram</Button>
                                <Button
                                    outline
                                    color="primary"
                                ><li className="fa fa-twitter"></li> Twitter</Button>
                            </section>
                        </div>
                        <div className="col-md-4 mb-4 ">
                            <section className="sticky-top shadow p-4" style={{ position: "sticky", top: "80px" }} >
                                <section className=" mb-4">
                                    <div>
                                        <Link to={`/blog-details/${blogDetails.id}`}>
                                            // {blog} // paste this in src attribute of below image
                                            <img src="" alt="" className="img-fluid d-inline mr-2" style={{ width: "50px" }} />
                                        </Link>
                                        <Link to={`/blog-details/${blogDetails.id}`}>
                                            <h6 className="card-title mb-0 pb-0 d-inline">{blogDetails.title}</h6>
                                        </Link>
                                        <hr />
                                    </div>
                                </section>
                            </section>
                        </div>
                    </div>
                </Container>
            </main>
            <MainFooter />
        </>
    );
};

export default BlogDetails;

```

###blogdata

```bash
const Blogs = [
    {
        id: 1,
        title: 'What is MERN STACK Dev?',
        content: 'MERN Development.',
        blogImg: require('../assets/img/blogs/23.png'),
    },
    {
        id: 2,
        title: 'What is Frontend Development?',
        content: 'frontend Development.',
        blogImg: require('../assets/img/blogs/24.png'),
    },
];
export default Blogs;

```

_- make sure to style these components and adding necessary media files also header and footer components._

**Step 4: Set Up Routing**
Utilize react-router-dom to enable navigation within your application. Define routes in the App.js file, mapping URLs to specific components.

```bash
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";

import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/font-awesome/css/font-awesome.min.css";
import "assets/scss/jobx.scss?v1.1.0";

import Blog from "blog/blog";
import BlogDetails from "blog/blogDetails";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/blog" exact element={<Blog />} />
      <Route path="/blog-details/:blogId" exact element={<BlogDetails />} />      
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  </BrowserRouter>
);

```

**Step 5: Run Your App**
Start your application to see it in action.

```bash
npm start
```
Visit http://localhost:3000 in your browser to explore your blogging website.

**Step 6: Enhancements**
To make your blogging website more comprehensive, consider adding features like:

- Forms for creating and editing posts.
- User authentication for authoring posts.
- Commenting system for user engagement.
- Improved styling and layout for a polished user interface.
By the way,
Congratulations! You've successfully created a basic blogging website using React.js. Feel free to expand and customize based on your unique requirements. 

Happy coding!