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.
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.
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
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
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
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.
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.
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!
Top comments (0)