How to create a Blog app using React.js?

Before you end up diving deep learning about how to create a blog app using React.js you need to firstly know what React.js is all about. ReactJS is basically an open-source JavaScript library that is used for building awesome user interfaces for the front end of the website. Additionally, React.js is also prominent for declarative component based and learn once write anywhere in code.

Under this article you can learn everything about creating A blog app using React.js. Firstly you can learn about how to create the project name MY APP by entering all the commands NPX create react app my app and install the modules. Then you have to create the folder name component under SRC and just make two JSX files post. JSX and posts. JSX. You can also add this styling element JSX component by post.CSS and posts.CSS. Lastly you have to import the element into the apps. JS and style into the main app.CSS.

Major components of building A blog with React.js

App.js

it is the major element of the app, and it uses browser router to link all the different pages and give them parts and components to load for that page

Home.js

It is the home page of the blog website and would show all the blogs in the list format. It does not contain the logic to display the blogs in the list format, but it calls the blog list element and passes in some blogs to that component to display the blogs. The home component will fetch the blog using use fetch custom hook. It is the element to display the home page of the blog website.

BlogList.js

This element receives the blocks from the home component and also displays them.

Create.js

This is where you would create some new blogs and add them to the previous blog list.

Navbar.js

It is basically the navbar element that would display the NAV bar on each page.

NotFound.js

It is the page that would load if the user lands on a page which does not exist.

Index.js

It is the default file which will load up the app file.

Steps to create a blog app using React.js

Step One
- You have to create your react project
- npm create vite@latest blog-app --template react
- cd blog-app
Step Two
- Now the entry point of the application would be App.js where in the header you have to import the CSS file and import react. You can create that through node package manager. You have imported the post that you have created for writing all the blogs in the BlogList component
```
import React from "react";
import "./App.css";
import Home from "./components/home";

const App = () => {
  return <Home />;
};

export default App;
```

Step Three

The next step is to make component folder insider src and come up with two files known as Home and BlogList in it. You already created BlogList component and now we are importing it into home component and we are passing objects of array named blogs to BlogList component.

import React from "react";
import blogs from "../content/blogs";
import BlogList from "./bloglist";

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

export default Home;

Step Four

Adding style to bloglist. Js and for the blog posts here you need to design the skeleton of the article where you have to add the style for the body and .post container inside the style tag

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

const BlogList = ({ blogs }) => {
  return (
    <>
      {blogs.length > 0 &&
        blogs.map((blog, i) => (
          <div className="post-container" key={`blog-i-${i}`}>
            <h1 className="heading">{blog.title}</h1>
            <img className="image" src={blog.imgUrl} alt="post" />
            <p>{blog.body}</p>{" "}
            <div className="info">
              <h4>Written by: {blog.author}</h4>
            </div>
          </div>
        ))}
    </>
  );
};

export default BlogList;

Step Five
- We have already created an array of objects in the home. Js and now we import them using jsx expression including name of the blog post author name article content last image URL.
Step Six
- So, after calling the JSX expression there is a need to style the element for showing the article that we have already created. bloglist.css is a container of the POS that is used to set the body post. And heading we post the heading of the post and then set the width and height of the image as per the screen
- bloglist.css
```
body {
  background-color: #0e9d57;
}

.posts-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
Step Seven
- It is high time for us to open the terminal and run the project command.
- npm start

These are the steps you can consider using if you want to create a blog app by using React.js. There are different scripts available you can choose the one which runs perfectly with your system

By Shrestha Master