Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a Blog app using ReactJS ?

  • Difficulty Level : Basic
  • Last Updated : 31 Oct, 2021

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:
    },
    {
      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:
    },
    {
      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:
    },
    {
      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:
    },
  ];
  
  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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!