How to create a Blog app using ReactJS ?

Introduction: React js is an open-source JavaScript library used for building the  Awesome User Interface for the website’s front end. React JS is also famous for Declarative,component-based, and Learn Once, Write Anywhere in code.

Approach: In this article, we have created the blog app using react js, First of all, we have created the project name MY-APP by entering the command npx create-react-app MY-APP and installing all modules. Then we create the folder name component under src and make two jsx file post.jsx and posts.jsx and styling the jsx component by post.css and posts.css. And last we import the component into App.js and styling the main into App.css.

Now let’s see the step-by-step implementation to create a blog app in Reactjs.

Step 1: Create React Project 

npx create-react-app MY-APP

Step 2: Change your directory and enter your main folder MY-APP as :

cd MY-APP

Project Structure: It will look like the following.

Project Structure

Step 3: App.Js is the entry point of the application in which in the header we have imported the CSS file and import react that we have created through NPM (Node Package Manager). We have imported the  </post/> that we have created for writing all the posts in the Post component.

Javascript

import React from "react";
import "./App.css";

import Posts from "./components/Posts/Posts";

const App = () => {
  return (
    <div className="main-container">
      <h1 className="main-heading">
        Blog App using React Js
      </h1>
      <Posts />
    </div>
  );
};

export default App;

Step 4: Now the next step is to make a component folder insider src and create 2 files named Post and Posts in it. In Posts, jsx we have created an arrow function named blogposts, and inside a blog post, we create an array of objects named as title fro tile of blog body and inside the body create another object name author for the name of the author that posts the blog, imageUrl for URL of the image.

Javascript

import React from "react";
import "./Posts.css";
import Post from "../Post/Post";

const Posts = () => {
  const blogPosts = [
    {
      title: "JAVASCRIPT",
      body: `JavaScript is the world most popular
      lightweight, interpreted compiled programming
      language. It is also known as scripting
      language for web pages. It is well-known for
      the development of web pages, many non-browser
      environments also use it. JavaScript can be
      used for Client-side developments as well as
      Server-side developments`,
      author: "Nishant Singh ",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/diving-into-excel-thumbnail.png",
    },
    {
      title: "Data Structure ",
      body: `There are many real-life examples of
      a stack. Consider an example of plates stacked
      over one another in the canteen. The plate
      which is at the top is the first one to be
      removed, i.e. the plate which has been placed
      at the bottommost position remains in the
      stack for the longest period of time. So, it
      can be simply seen to follow LIFO(Last In
      First Out)/FILO(First In Last Out) order.`,
      author: "Suresh Kr",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/coa-gate-2022-thumbnail.png",
    },
    {
      title: "Algorithm",
      body: `The word Algorithm means “a process
      or set of rules to be followed in calculations
      or other problem-solving operations”. Therefore
      Algorithm refers to a set of rules/instructions
      that step-by-step define how a work is to be
      executed upon in order to get the expected
      results. `,
      author: "Monu Kr",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/google-test-series-thumbnail.png",
    },
    {
      title: "Computer Network",
      body: `An interconnection of multiple devices,
      also known as hosts, that are connected using
      multiple paths for the purpose of sending/
      receiving data media. Computer networks can
      also include multiple devices/mediums which
      help in the communication between two different
      devices; these are known as Network devices
      and include things such as routers, switches,
      hubs, and bridges. `,
      author: "Sonu Kr",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/cp-maths-java-thumbnail.png",
    },
  ];

  return (
    <div className="posts-container">
      {blogPosts.map((post, index) => (
        <Post key={index} index={index} post={post} />
      ))}
    </div>
  );
};

export default Posts;

Step 5: Adding style to post.jsx. For the blogposts in Post.jsx we need to design the skeleton of the article so in which we add the style for the body and  .post_conatiner inside the style tag.

Posts.css

body {
    background-color: #0e9d57;
}
.posts-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Step 6: Now in post.jsx the array of objects we have created in the Post.jsx we import in this component and then we call using the JSX expression like name of the blog posts, name of the author, content of the article, and last the image URL that we have used there in Post.

Post.jsx

import React from "react";
import "./Post.css";
const Post = ({ post: { title, body,
imgUrl, author }, index }) => {
  return (
    <div className="post-container">
      <h1 className="heading">{title}</h1>
      <img className="image" src={imgUrl} alt="post" />
      <p>{body}</p>
      <div className="info">
        <h4>Written by: {author}</h4>
      </div>
    </div>
  );
};

export default Post;

Step 7: So after calling the JSX expression there is a need to style the component for showing the article for that we have created the. Post.css in this Post-container is a container of the pos that is used to set the body post. In heading the heading of the post and set the width and height of the image according to the screen.

Post.css

.post-container {
    background: #e2e8d5;
    display: flex;
    flex-direction: column;
    padding: 3%;
    margin: 0 2%;
}
.heading {
    height: 126px;
    text-align: center;
    display: flex;
    align-items: center;
}
.image {
    width: 100%;
    height: 210px;
}

Step to run the application:  Open the terminal and run the project using the command.

npm start

Output: Your project is shown in the URL http://localhost:3000/

Output