Building a Full CRUD App with React and Node.js

An Phạm
13h
204
0
1

Article

Introduction

Building a full-stack CRUD (Create, Read, Update, Delete) application is a core skill in modern web development. If you understand CRUD, you understand how real-world apps like e-commerce platforms, dashboards, and admin panels work.

In this article, we will build a simple and practical CRUD application using React (frontend) and Node.js with Express (backend). We will keep everything in simple words so beginners can follow easily.

SEO Keywords: React CRUD App, Node.js CRUD API, Full Stack Development, MERN Stack Basics, REST API Tutorial

What is CRUD

CRUD stands for four basic operations that every application performs:

Create → Adding new data (like adding a product or user)
Read → Fetching data (like viewing products)
Update → Editing data (like updating user profile)
Delete → Removing data (like deleting a product)

Real-life example: Think of a to-do app:

You add a task → Create
You see all tasks → Read
You edit a task → Update
You delete a task → Delete

Architecture Overview

In a full-stack application, frontend and backend work together:

Frontend: React (handles UI)
Backend: Node.js with Express (handles logic)
API: REST API (communication layer)

Flow in simple words:

User clicks a button in React
React sends a request to backend
Backend processes request
Backend sends response
React updates UI

This is the core of full-stack development.

Backend Setup using Node.js and Express

First, we create a simple Express server:

const express = require("express");
const app = express();

app.use(express.json());

let items = [];

Here:

express.json() allows us to read JSON data
items array acts like a temporary database

Create Operation (POST API)

This API adds new data:

app.post("/items", (req, res) => {
  items.push(req.body);
  res.send("Item Added");
});

Explanation in simple words:

Client sends data (like item name)
Server stores it in array
Server responds with success message

Read Operation (GET API)

This API fetches all data:

app.get("/items", (req, res) => {
  res.json(items);
});

Explanation:

Client requests all items
Server sends full list as JSON

Update Operation (PUT API)

This API updates existing data:

app.put("/items/:id", (req, res) => {
  const id = req.params.id;
  items[id] = req.body;
  res.send("Item Updated");
});

Explanation:

We pass item ID in URL
Server replaces old data with new data

Delete Operation (DELETE API)

This API removes data:

app.delete("/items/:id", (req, res) => {
  const id = req.params.id;
  items.splice(id, 1);
  res.send("Item Deleted");
});

Explanation:

Server removes item using index
Data is permanently deleted

Frontend Setup using React

Now we connect React with backend:

import { useEffect, useState } from "react";

function App() {
  const [items, setItems] = useState([]);

Read Data in React (GET Request)

useEffect(() => {
  fetch("/items")
    .then(res => res.json())
    .then(setItems);
}, []);

Explanation:

useEffect runs when component loads
Data is fetched from backend
UI updates automatically

Create Data in React (POST Request)

const addItem = async () => {
  await fetch("/items", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Item 1" })
  });
};

Explanation:

We send data to backend
Backend stores it

Update Data in React (PUT Request)

const updateItem = async (id) => {
  await fetch(`/items/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Updated Item" })
  });
};

Delete Data in React (DELETE Request)

const deleteItem = async (id) => {
  await fetch(`/items/${id}`, {
    method: "DELETE"
  });
};

Simple UI Example

return (
  <div>
    <button onClick={addItem}>Add Item</button>

    {items.map((item, index) => (
      <div key={index}>
        {item.name}
        <button onClick={() => updateItem(index)}>Update</button>
        <button onClick={() => deleteItem(index)}>Delete</button>
      </div>
    ))}
  </div>
);

Step-by-Step Flow

User clicks button
React sends API request
Express handles request
Data is updated in server
Response is sent back
React updates UI automatically

Real-World Use Case

Example: E-commerce website

Admin adds products → Create
Users view products → Read
Admin edits product → Update
Admin removes product → Delete

This is exactly how real applications work.

Advantages of Full CRUD App

Helps understand full-stack development
Clean separation of frontend and backend
Easy to scale and maintain
Works with databases like MongoDB, MySQL

Disadvantages

Requires understanding of both frontend and backend
More setup compared to simple apps

Best Practices

Use unique IDs instead of array index
Always validate input data
Handle errors properly
Use environment variables for URLs
Connect to real database instead of array

Summary

In this article, we learned how to build a full CRUD application using React and Node.js with a REST API. We covered Create, Read, Update, and Delete operations with simple examples and real-world use cases. Understanding CRUD is essential for full-stack development and is widely used in modern web applications. Once you are comfortable with this, you can extend it by adding a database, authentication, and deploying your app to production.