How to create a Blog app using ReactJS ?

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:        "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
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.