React Demos – Episode 3 – CRUD Operations

Introduction

This is the third post in this series of React Demo Projects. This series is focused on building common, simple, small applications to help with practical knowledge needed for building react applications.

CRUD operations are very common in web applications. They are the ‘HelloWorld’ equivalent of data oriented demos. Today we’ll see how to build this functionality in a React application.

If you haven’t already, I’ll suggest you to read the following two articles for background setup information.

• React Demos – Episode 1 – Setting the Scene
• React Demos – Episode2 – Ajax Data Loading

What Are We Building

Following screenshot shows the output of today’s exercise.

It is a simple page, with some buttons to perform typical CRUD operations.

Backend API

For the backend API, I’ll be using a .NET Core Web API with Postgres for data persistence. We’ll not go into the details, but if interested, you can check the following two posts for more details.

• Fasten your Data Layer with Dapper (A .NET Micro ORM)
• .NET on AWS – Data Persistence using RDS

For our React application, it doesn’t matter where the data store is and how it is implemented, as long as it allows for CRUD operations over REST API.

Users Index Page – Retrieving Data

Lets start with Users index page.

The code is self explanatory. We’ve a userData variable for state. The data is retrieved via useEffect hook and ajax call to the backend API (we covered this part in previous post). And we also have some static markup for the view. No data display yet. Let’s see how it looks in the browser

Its seems very empty, Lets add JSX for the table body

and with this change the view is updated as follows:

Next, we can add row’s Action buttons as shown below:

Notice that for two buttons Link components are used and they will trigger the routing when clicked (Details, Edit actions).

The delete button is wired-up with onDelete handler. Also data-letter attribute is used to store the user.id value, which will be used later inside onDelete function.

With these changes, we have now the following view update:

Lets see the code for loading the data and onDelete handler below

this code shall be self explanatory, mainly using axios library to make backend API calls.

We’ll cover the view and edit button actions a little later in the post.

Next, I’ve added the following markup for the top-buttons in the component:

and following are the handler methods for onClick

onClear() handler is simply setting the userData state variable to empty array.

onAddUser() handler is navigating user to a new URL.

Following is the updated UI after the changes:

We haven’t talked about Add/View/Edit actions in details. These actions are causing routing to happen and different view (component) will handle it further.

So let’s create these additional components next.

Additional Components (Add, Details, Edit)

I’ve created additional components for each of the above mentioned concerns as shown below

next, updated the app.js file for the routes as shown below

and now we can navigate to these components from our application.

Now, you can check the code for these components. Its mostly the same things we have already covered. So it shall be easy for you to follow.

Following are the screenshots from these components

Add User

User Details

Edit User

Summary

Implementing CRUD operations are very common requirement in web applications. In this post, we saw example of implementing CRUD in a react application.

You can download the source code from this git repository.

We’ll continue learning more about React using demos in coming posts. Let me know if you have some questions or comments. Till next time, happy coding.