The API

1. What is an API

Your app needs data it doesn't own. Weather, maps, payments, user posts. That data lives on someone else's server. The API is the door between your app and that server.

🧑‍💻 The Restaurant

You never enter the kitchen. Your app never touches the database. The API carries everything back and forth.

The Pattern

Every API call follows this shape:

You ask. It answers. That's it.

📌 Summary

2. JSON

The format your app and the server agree on. Keys and values.

🧑‍💻 Example

{
  "id": 1,
  "dish": "Suqaar",
  "price": 8
}

Rules:

1. Keys are always strings in double quotes
2. Values can be: strings, numbers, booleans, arrays, objects
3. No trailing commas

An array of items:

[
  { "id": 1, "dish": "Suqaar" },
  { "id": 2, "dish": "Bariis" }
]

📌 Summary

3. The Four Methods

Four things you can say to a server. That's the entire vocabulary.

🧑‍💻 Example

Status Codes

📌 Summary

4. useEffect

Code that runs after React renders the component. Not inside the return. Not above it. Inside useEffect.

🧑‍💻 Example

Run once when the component mounts:

useEffect(() => {
  console.log("Component loaded");
}, []);

Run every time count changes:

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

The dependency array controls when it runs:

📌 Summary

5. Fetch

Your React app talks to a server. fetch() sends the request. It returns a Promise: not the data, but a guarantee that data is coming.

What is a Promise

You ordered food. The waiter said "coming soon." That slip is a Promise. It's not the food. It's the guarantee that food is coming.

🧑‍💻 Example

function App() {
  const [users, setUsers] = useState([]);

  async function getUsers() {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    return data;
  }

  useEffect(() => {
    getUsers().then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

getUsers fetches the data and returns it. useEffect calls it and uses .then() to save the result in state.

📌 Summary

6. Loading and Error States

Your fetch works. But the screen is blank for 2 seconds, then data appears. No spinner. No error message. What if the server is down?

🧑‍💻 Example

function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  async function getUsers() {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    return data;
  }

  useEffect(() => {
    getUsers()
      .then((data) => setUsers(data))
      .catch((err) => setError("Something went wrong"))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <Spinner />;
  if (error) return <Text>{error}</Text>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Same getUsers from before. Three things chained in useEffect: .then() saves data, .catch() catches errors, .finally() stops the spinner.

The Pattern

Every fetch in every React app follows this shape:

📌 Summary

7. json-server

A fake backend you own. Saves data to a file. Full CRUD in 30 seconds.

🧑‍💻 Setup

Install:

npm install json-server

Create db.json:

{
  "posts": [
    { "id": 1, "title": "First post" },
    { "id": 2, "title": "Second post" }
  ]
}

Run it:

npx json-server db.json

Your API is live at http://localhost:3000/posts.

📌 Summary

8. POST and DELETE

Reading data is not enough. Your app needs to create and remove.

🧑‍💻 POST (create)

async function addPost(title) {
  const res = await fetch("http://localhost:3000/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: title }),
  });
  const newPost = await res.json();
  setPosts([...posts, newPost]);
}

🧑‍💻 DELETE (remove)

async function deletePost(id) {
  await fetch(`http://localhost:3000/posts/${id}`, {
    method: "DELETE",
  });
  setPosts(posts.filter((post) => post.id !== id));
}

The options object

GET has no options. You just pass the URL.

📌 Summary