Working with REST APIs

Introduction

You now know how to fire off individual requests with fetch() and Axios. Real applications, however, rarely make just one type of request — they read lists of data, create new records, update existing ones, and delete records the user no longer wants. REST is the convention that most APIs follow to organize all of this.

This lesson ties together everything from the last two lessons into a single, realistic component: a task list that fetches items, adds a new one, and deletes one, all against a REST API, while keeping the code organized and the UI honest about loading and error states.

What REST Means in Practice

REST (Representational State Transfer) is a set of conventions for designing web APIs around "resources" — things like users, posts, or tasks. Each resource typically has its own URL, and you interact with it using standard HTTP methods rather than inventing a new endpoint for every action.

For example, a "tasks" resource is usually reachable at a URL like /tasks, with individual tasks at /tasks/:id. What changes between reading, creating, updating, and deleting the same resource is not the URL structure so much as the HTTP method used.

HTTP Methods and CRUD

CRUD stands for Create, Read, Update, Delete — the four basic operations you perform on any stored resource. REST APIs map each of these directly onto an HTTP method.

Building the Data Layer

Scattering fetch or axios calls directly inside components makes them harder to test, harder to reuse, and harder to change later if the API shifts. A cleaner approach is to put all API calls for a resource into their own module, and have components simply call functions from it.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

export function getTasks() {
  return api.get('/todos?_limit=5').then((res) => res.data);
}

export function createTask(task) {
  return api.post('/todos', task).then((res) => res.data);
}

export function deleteTask(id) {
  return api.delete(`/todos/${id}`);
}

Now any component can import getTasks, createTask, or deleteTask without knowing anything about URLs, headers, or Axios itself. If the API ever changes, you only update this one file.

Reading Data (GET)

Fetching the list happens once, when the component mounts, using useEffect and the getTasks function from the data layer.

import { useState, useEffect } from 'react';
import { getTasks, createTask, deleteTask } from './api/tasks';

function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    getTasks()
      .then((data) => setTasks(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

Creating Data (POST)

To add a new task, call createTask with the new data, then update local state with the server's response so the UI reflects the change immediately.

  const [title, setTitle] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleAdd = (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setSubmitting(true);
    createTask({ title, completed: false })
      .then((newTask) => {
        setTasks((prev) => [...prev, newTask]);
        setTitle('');
      })
      .catch((err) => setError(err.message))
      .finally(() => setSubmitting(false));
  };

Deleting Data (DELETE)

Deleting follows the same pattern: call the API, and once it succeeds, remove the item from local state so the list updates without a full refetch.

  const handleDelete = (id) => {
    deleteTask(id)
      .then(() => {
        setTasks((prev) => prev.filter((task) => task.id !== id));
      })
      .catch((err) => setError(err.message));
  };

  if (loading) return <p>Loading tasks...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <form onSubmit={handleAdd}>
        <input value={title} onChange={(e) => setTitle(e.target.value)} />
        <button type="submit" disabled={submitting}>Add Task</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            {task.title}
            <button onClick={() => handleDelete(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TaskList;

[input box] [Add Task]
• Buy groceries    [Delete]
• Finish homework  [Delete]
• Read a book      [Delete]

Handling Loading, Error, and Success States

A common source of bugs is forgetting that a request can be in one of several states at once: nothing has loaded yet, it succeeded, or it failed. The example above tracks loading and error separately from the tasks array itself, so the UI can always show the right thing.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

REST gives you a predictable vocabulary for working with any API: resources reached at consistent URLs, manipulated through standard HTTP methods. Combining that with a dedicated data-layer module and careful loading/error/success handling produces components that are both reliable and easy to read.

In this lesson, you learned REST conventions, mapped CRUD operations to HTTP methods, and built a task list component that reads, creates, and deletes data through a clean, reusable API module. Next, you will learn why hardcoding values like API URLs directly in your code is risky, and how environment variables solve that.