Introduction:
React js is an open-source JavaScript library used to build her Awesome User Interface for the front end of the website. React JS is also known for being declarative,component-based, and learn-once-code anywhere.
Approach:
In this article, we created a blog app using Reactjs. First, I entered the command npx create-react-app MY-APP tocreateaprojectnameMY-APP and installed all modules. Then create a folder name component under src and create two jsx files post.jsx and posts.jsx and style the jsx component in post.css and posts.css. Finally, import the component in App.js and style the main component in App.css. If you wish to uncover extra more about how to create Blog Application using React JS, do visit us at The React Company.
Let’stakealookata a step-by-step implementation for creating a blog app in Reactjs.
Step 1: Create React Project
npx create-react-app MY-APP
Step 2:
Change directories and enter the main folder MY-APP as follows:
cd my-app
Project structure:
It should look like this.
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 3:
App.Js is the entry point for applications that import CSS files into the header and build via NPM (Node Package Manager). I imported the one I created to write all posts in the post component.
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 inside src and create 2 files named Post and Posts in it.
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;
Next, create a components folder named Insider src and create two files in it named Post and Posts. In Posts.jsx, create an arrow function called blog posts, and within the blog post create an array of objects named title for the blog body tiles, and within the body, for the name imageUrl of the author posting the blog Create another object named author. URL of the image.
Step 5:
Add styles to post.jsx. For Post.jsx blog posts, you need to style the post skeleton by adding a body style and .post_conatiner inside the style tag.
If you want to get the latest information on Steps To Create React App From Scratch? do visit us at The React Company.
body {
background-color: #0e9d57;
}
.posts-container {
display: flex;
justify-content: center;
align-items: center;
}
Step 6:
Then in post.jsx, import the array of objects created in Post.jsx into this component, with JSX expressions such as the blog post name, author name, post content, and finally the image url used in Post. call. Here’s a brief summary of How To Repair React Router URL Whilst Refreshing Or Writing that you don’t want to miss out.
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
Therefore, after calling the JSX expression, we need to format the component to display the created article. Inside this post container, Post.css is the post container used to set the body post. Heading sets the heading for the post and sets the width and height of the image to fit the screen.
.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;
}
Steps to run the application:
Open a terminal and run the project with the command.
npm start
