Integrating React with a RESTful API: A Complete CRUD Example

React and RESTful APIs go hand-in-hand when building modern web applications. Whether you’re fetching data from a database or sending form submissions to a backend, mastering API integration is a must.

In this guide, we’ll walk through a complete CRUD (Create, Read, Update, Delete) example using React and a RESTful API.

---

⚙️ Setup Overview

We'll build a simple User Management App that lets you:

• Create a new user

• View a list of users

• Update a user's details

• Delete a user

🔧 Tools Used:

• React (with hooks)

• Axios (for HTTP requests)

• JSON Server (as mock REST API)

---

📦 Step 1: Set Up JSON Server

Install JSON Server globally:

npm install -g json-server

Create a db.json file:

{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" }
  ]
}

Start the server:

json-server --watch db.json --port 3001

Your REST API is now running at http://localhost:3001/users.

---

⚛️ Step 2: Create the React App

Create the React app:

npx create-react-app react-crud
cd react-crud
npm install axios

---

📄 Step 3: Read (GET) - Fetch Users

// src/components/UserList.tsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('http://localhost:3001/users')
      .then(res => setUsers(res.data));
  }, []);

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

export default UserList;

---

🆕 Step 4: Create (POST) - Add New User

// src/components/UserForm.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserForm({ selectedUser, refresh, clearSelection }) {
  const [form, setForm] = useState({ name: '', email: '' });

  useEffect(() => {
    if (selectedUser) setForm(selectedUser);
  }, [selectedUser]);

  const handleChange = e => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = e => {
    e.preventDefault();

    if (form.id) {
      axios.put(`http://localhost:3001/users/${form.id}`, form).then(refresh);
    } else {
      axios.post('http://localhost:3001/users', form).then(refresh);
    }

    setForm({ name: '', email: '' });
    clearSelection();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} placeholder="Name" />
      <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
      <button type="submit">{form.id ? 'Update' : 'Add'} User</button>
    </form>
  );
}

export default UserForm;

---

✏️ Step 5: Update (PUT) and Delete (DELETE)

Extend UserList.tsx to handle deletes:

<button onClick={() => handleDelete(user.id)}>Delete</button>

Define the handleDelete method:

const handleDelete = (id) => {
  axios.delete(`http://localhost:3001/users/${id}`)
    .then(() => {
      setUsers(users.filter(user => user.id !== id));
    });
};

---

🧩 Step 6: Bring It All Together

// src/App.tsx
import React, { useState, useEffect } from 'react';
import UserForm from './components/UserForm';
import UserList from './components/UserList';
import axios from 'axios';

function App() {
  const [selectedUser, setSelectedUser] = useState(null);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const refresh = () => setRefreshTrigger(prev => prev + 1);
  const clearSelection = () => setSelectedUser(null);

  return (
    <div>
      <h1>User Management</h1>
      <UserForm
        selectedUser={selectedUser}
        refresh={refresh}
        clearSelection={clearSelection}
      />
      <UserList
        key={refreshTrigger}
        onEdit={setSelectedUser}
      />
    </div>
  );
}

export default App;

---

✅ Summary

By combining React hooks and Axios, you can build a complete CRUD app that interacts smoothly with any RESTful API.

Key Concepts:

• GET for reading data

• POST for creating new entries

• PUT for updating data

• DELETE for removing items

---

📌 Final Thoughts

Once you master CRUD operations, you unlock the ability to build real-world apps like task managers, dashboards, and admin panels. From here, consider:

• Adding form validation

• Using React Query or SWR for advanced fetching

• Integrating authentication and error handling

Happy coding! 🎯

---