Making a Fetch Request & POST Request with json-server in React (Beginner-to-Real App Guide)

Source: Dev.to

When you start building real React applications, sooner or later you need data — and that means working with APIs.
If your backend isn’t ready yet, json-server is a lifesaver.

In this guide you’ll learn how to:

• Simulate a REST API locally
• GET data using fetch in React
• POST data (create new records)
• Avoid common beginner mistakes
• Apply SEO‑friendly best practices

What is json-server?

json-server is a tiny tool that turns a simple db.json file into a full fake REST API.
You don’t need Node backend knowledge or a database—just JSON.

Installation

npm install -g json-server

Or as a dev dependency:

npm install json-server --save-dev

Step 1 — Create a db.json File

{
  "cities": [
    { "id": 1, "name": "London" },
    { "id": 2, "name": "Paris" }
  ]
}

Step 2 — Start the Fake Server

json-server --watch db.json --port 8000

The server now provides:

• GET /cities
• POST /cities
• DELETE /cities/:id
• PUT /cities/:id

Just like a real backend.

Making a GET Request in React

Fetching data usually happens inside useEffect.

Basic Pattern

useEffect(() => {
  async function fetchData() {
    const response = await fetch("URL_HERE");
    const data = await response.json();
    console.log(data);
  }

  fetchData();
}, []);

Why useEffect?

React components re‑render often. You want to fetch data once when the component mounts, not on every render.

Handling Loading State (Important)

setIsLoading(true);
// fetch logic
setIsLoading(false);

Showing a loading UI improves UX and prevents flickering.

Making a POST Request in React

POST creates new data.

Clean POST Example

fetch("URL_HERE", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: 2,
    name: "John",
    lastName: "Doe",
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

What’s Happening Here?

Common Beginner Mistakes

1. Forgetting Content-Type

The server won’t understand your payload without the correct header.

2. Not Using JSON.stringify

Objects must be converted to strings before sending.

3. No Loading State

Without feedback the UI feels confusing.

4. No Error Handling

Always wrap fetch calls in try / catch (or handle .catch).

Real‑World Best Practices

• Show a loading UI for every request.
• Prefer async/await for readability.
• Handle errors gracefully and inform the user.
• Keep API URLs in a config file; never hard‑code them throughout the codebase.

Why json-server is Perfect for React Learners

• Instant backend, zero setup.
• No database required.
• Helps you understand CRUD operations.
• Boosts confidence for portfolio projects.

Final Thoughts

Using json-server bridges the gap between learning React and building real applications.
It shifts your mindset from “following a tutorial” to thinking like a frontend engineer interacting with APIs.

Mastering GET and POST with a fake server makes the transition to a real backend 10× easier, turning simple React demos into production‑ready skills.