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

When you start building real React applications, sooner or later you need data — and that means working with APIs.

But what if your backend is not ready yet?
This is where json-server becomes a lifesaver.

In this guide, you’ll learn:

• How to simulate a REST API locally
• How to GET data using fetch in React
• How to POST data (create new records)
• Common mistakes beginners make
• SEO-friendly best practices

This is the exact workflow I used while building real projects, not just demos.

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.
You don’t need databases.
You just need 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

Example:

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

Step 2 — Start the Fake Server

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

Now you automatically have:

• 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?

Because React components re-render often.
You don’t want to fetch data every render — only once when the component mounts.

Handling Loading State (Important)

Real apps always show loading states.

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

This improves UX and prevents UI flickering.

Making a POST Request in React

POST means creating 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

Server won’t understand your data.

2. Not Using JSON.stringify

Objects must be converted to strings.

3. No Loading State

UI becomes confusing.

4. No Error Handling

Always wrap fetch in try/catch.

Real-World Best Practices

• Always show loading UI
• Use async/await for readability
• Handle errors gracefully
• Keep API URLs in a config file
• Never hard-code everything everywhere

Why json-server is Perfect for React Learners

• Instant backend
• Zero database setup
• Helps understand CRUD
• Builds real-world confidence
• Perfect for portfolio projects

Final Thoughts

Using json-server bridges the gap between learning React and building real applications.

You start thinking less like a tutorial watcher and more like a frontend engineer interacting with APIs.

Once you master GET and POST with a fake server, switching to a real backend becomes 10x easier.

Small steps like these are what turn simple React projects into production-ready skills.