React CRUD

1. Create (POST)

In the Create operation, users can add new data to the backend using an API. React handles form inputs and submits the data via a POST request.

Example:

Sample Form Component

import React, { useState } from "react";

function CreateUser() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch("https://api.example.com/users", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name, email }),
      });
      if (response.ok) {
        console.log("User created!");
      }
    } catch (error) {
      console.error("Error creating user:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Create</button>
    </form>
  );
}

export default CreateUser;

2. Read (GET)

The Read operation fetches data from the API and displays it in the UI. React commonly uses useEffect to load data on component mount.

Example:

Displaying Data from API

import React, { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/users");
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    };
    fetchData();
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name} - {user.email}</li>
      ))}
    </ul>
  );
}

export default UserList;

3. Update (PUT)

In the Update operation, existing data is modified via an API using a PUT or PATCH request. React provides controlled inputs to manage form data for updating.

Example:

Editing a User

import React, { useState } from "react";

function EditUser({ userId, existingName, existingEmail }) {
  const [name, setName] = useState(existingName);
  const [email, setEmail] = useState(existingEmail);

  const handleUpdate = async () => {
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name, email }),
      });
      if (response.ok) {
        console.log("User updated!");
      }
    } catch (error) {
      console.error("Error updating user:", error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
}

export default EditUser;

4. Delete (DELETE)

The Delete operation removes a resource via an API. A DELETE request is typically triggered by a button click.

Example:

Deleting a User

import React from "react";

function DeleteUser({ userId, onDelete }) {
  const handleDelete = async () => {
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`, {
        method: "DELETE",
      });
      if (response.ok) {
        console.log("User deleted!");
        onDelete(userId); // Update the UI
      }
    } catch (error) {
      console.error("Error deleting user:", error);
    }
  };

  return <button onClick={handleDelete}>Delete</button>;
}

export default DeleteUser;

Key notes

• State Management: Use React’s state (useState) to track form inputs, user lists, and API responses.
• Async Operations: Wrap API calls in try-catch blocks to handle errors gracefully.
• UI Updates: Refresh the UI dynamically after API calls (e.g., removing deleted items from the list).

CRUD API Principle

1. ReactJS Spring Boot CRUD Full Stack App - Full-stack CRUD app with ReactJS and Spring Boot
2. Redux CRUD - Redux library for managing CRUD operations in React applications
3. MERN Admin - Full-stack MERN-based admin panel with CRUD functionality
4. ReactJS To-Do List - Simple to-do list app showcasing CRUD operations in ReactJS
5. React Hooks Example - Examples of using React Hooks for CRUD operations
6. React CRUD with Web API - Example of a React CRUD application interacting with a RESTful Web API

‍