How to create a Blog app using ReactJS ?
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 :
Project Structure: It will look like the following.
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.
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.
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.
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.
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.
Step to run the application: Open the terminal and run the project using the command.
Output: Your project is shown in the URL http://localhost:3000/