Build a Blog App with React — Intro, and Set-Up (Part 1)

Hello everyone! The best way to learn something is by doing. So, let’s build a simple Blog app using React to understand how things work. We won’t be making a very feature-rich blogging website with cool designs and all. Instead, it would be simple — to serve the purpose of learning.

It would be a simple blog website with very few functionalities, enabling you to learn better.

Notice: I will publish the complete detailed version of all the articles on the Medium website. Here I will give an overview and give the codes for the various pages part by part.
So, please click here to go to Medium and read it in completion. (These are friend links so do not worry about paywall)

The features we are going to build into this blog are:-

1. Fetching blogs from a local JSON server and displaying the blogs in list form.
2. Fetching details about individual blogs and displaying them.
3. Adding new blogs.
4. Deleting blogs.

It would be pure React, and we will not be using any backend server for this blogging website. So, the changes we make, i.e. the blogs we delete or add, will reset once the page is refreshed. So, it won’t be saving any data on any server.

This article series is aimed at beginners currently, so we would go into all the things In detail so that you can understand how things work and will be able to implement more features into it.

In the initial phase of this tutorial series, we will only use React with no backend or cloud to store any data. It all gets reset once we refresh the page.

But, later on, I plan to add a backend to this React project to make it full-stack. We will use Express, Node.js, and MongoDB to build the backend for this application and then connect the front-end and back-end.

Furthermore, if the article series gets a good response, I would add some more features into the series with more parts, including authentication and some other features to make it more practical. But we keep these things for a later date and may or may not be added.

So, let’s focus on the initial phase for now, which is primarily aimed at beginners.

So, let’s start by installing Node Package Manager (npm) into our machine. You can do it by going to the npm website.

After installing npm, let’s move to our desired directory to start building our project.

We would be using create-react-app for building our React project. To do so, we can type the following command on our terminal:

npx create-react-app react-blog

Here, npx is a package runner tool that comes bundled with npm. So, the above line creates a new React project inside of a folder named react-blog.

It will also create a basic React program. We see there is a package.json file in there. Also, we have node modules, a folder named src, and a public folder.

Most of our work would be done within the src folder. Here is our package.json file.

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

In the package.json file, we find that we have many dependencies which React requires to work. Create React App has already installed those for us. We also have various scripts to perform various functionalities in the project.

E.g., Running the command npm start will start the development server for us and open our React app in the browser.

When we run the command, we see the React website, pre-built with the Create React App. We would be removing all of those pre-built content and would then start building our own blog website.

We would also set up a Github Repository for our project, which we would keep updating after every change to keep track of changes and revert to a previous state if something goes wrong. It is a great practice to follow while working on any project.

So, let’s build a new Repository on Github, and we name it react-blog. We then initialise a new Git Repo in our project folder.

git init

We then link this with the Github repository using this command:-

git remote add origin your-repo

We then add our existing files to the git repo we initialised earlier. We can do this by:-

git add -A

Then we make a commit into the Git repository by:-

git commit -m "First commit"

Finally, we can push all our local Git Repositories to the Github repository by writing:-

git push origin master

We are ready to start building the project. So, we have to repeat these three steps — git add , git commit and git push to update our repository after each significant change we make.

So, this was all for the first part. We would start building our blog project from the next part onwards and discussing everything important in detail.

I hope you liked this new series being started. I hope you are excited about this new series, and I would love to hear feedback from you.

To read the complete tutorial, please move to Medium and read the complete article.