Build a React User Form with Insert, Update, Delete Using JSON Server

In this tutorial, you’ll learn how to build a complete User Registration System using React JS, React Router, and JSON Server. You’ll create a form to insert data, a user list view, an edit form, and delete functionality — all connected to a mock REST API.

📦 Step 1: Setup Your React App

npx create-react-app react-json-crud
cd react-json-crud
npm install axios react-router-dom

🗂️ Step 2: JSON Server Setup

npm install -g json-server

Then create a db.json file in the root folder:

{
  "users": []
}

json-server --watch db.json --port 5000

Now your fake API is available at: http://localhost:5000/users

📁 Step 3: Project Structure

• src/pages/Register.js
• src/pages/UserList.js
• src/pages/EditUser.js
• src/App.js

🔧 Step 4: Configure Routes in App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Register from './pages/Register';
import UserList from './pages/UserList';
import EditUser from './pages/EditUser';

function App() {
  return (
    <Router>
      <div style={{ padding: '2rem' }}>
        <nav>
          <Link to="/register">Register</Link> | 
          <Link to="/users">User List</Link>
        </nav>
        <hr />
        <Routes>
          <Route path="/register" element={<Register />} />
          <Route path="/users" element={<UserList />} />
          <Route path="/edit/:id" element={<EditUser />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

📝 Step 5: Create Register Page

src/pages/Register.js

import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: ''
  });

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    await axios.post('http://localhost:5000/users', form);
    alert('User registered!');
    setForm({ firstName: '', lastName: '', email: '', password: '' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Register User</h3>
      <input name="firstName" placeholder="First Name" value={form.firstName} onChange={handleChange} /><br />
      <input name="lastName" placeholder="Last Name" value={form.lastName} onChange={handleChange} /><br />
      <input name="email" type="email" placeholder="Email" value={form.email} onChange={handleChange} /><br />
      <input name="password" type="password" placeholder="Password" value={form.password} onChange={handleChange} /><br />
      <button type="submit">Register</button>
    </form>
  );
};

export default Register;

👥 Step 6: Create User List Page

src/pages/UserList.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

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

  const fetchUsers = async () => {
    const res = await axios.get('http://localhost:5000/users');
    setUsers(res.data);
  };

  const deleteUser = async (id) => {
    await axios.delete(`http://localhost:5000/users/${id}`);
    fetchUsers();
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div>
      <h3>User List</h3>
      {users.map(user => (
        <div key={user.id}>
          {user.firstName} {user.lastName} - {user.email}
          <Link to={`/edit/${user.id}`}> Edit</Link>
          <button onClick={() => deleteUser(user.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
};

export default UserList;

✏️ Step 7: Create Edit Page

src/pages/EditUser.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useParams, useNavigate } from 'react-router-dom';

const EditUser = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: ''
  });

  useEffect(() => {
    axios.get(`http://localhost:5000/users/${id}`).then(res => setForm(res.data));
  }, [id]);

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    await axios.put(`http://localhost:5000/users/${id}`, form);
    navigate('/users');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Edit User</h3>
      <input name="firstName" value={form.firstName} onChange={handleChange} /><br />
      <input name="lastName" value={form.lastName} onChange={handleChange} /><br />
      <input name="email" value={form.email} onChange={handleChange} /><br />
      <input name="password" value={form.password} onChange={handleChange} /><br />
      <button type="submit">Update</button>
    </form>
  );
};

export default EditUser;

🚀 Final Step: Run the App

• Start JSON Server: json-server --watch db.json --port 5000
• Start React App: npm start

🎉 Done!

You now have a full working CRUD app using React + React Router + JSON Server. Users can be registered, edited, listed, and deleted. It’s perfect for learning full frontend API interaction before moving to real backends.