Build a Blog App with React — Intro and Setup

Photo by Anete Lūsiņa on Unsplash

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.

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, what is React?

React is a Javascript-based library used to build the frontend of websites. React is the most popular choice among developers for building the Frontend of any website.

This introduction to React by Eric Elliott is a great piece of article for anyone new to React and want to understand how it works, why it's popular and how to get started with it.

Also, I would like to link this great book named React for Real by The Pragmatic Programmers. This one is a good book to learn React.

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:

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:

gir 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.

The next parts are:

Part 2: Building Components

Part 3: Component and Hooks

Part 4: Finishing the Project