Stop 10 · API IntegrationTopics · 1/16

REST APIs

In short

You already know what REST is. Now comes the real work: calling it from React, turning the JSON into screens, and coping when the server says no.

Consuming REST APIs from the frontend — the day-to-day work of calling endpoints, handling responses, and wiring the results into your UI.

The jaadu hands a slip at the hostel mess counter and gets a plate of hot food back.

Think of it like this

Ordering from the hostel mess

You hand a slip at the counter (the request), the mess staff cook (the server), and a plate comes back (the response). Your job as the frontend is to write clear slips, check the plate, and serve it nicely on the table.

Watch it happen

One click, one round trip

Component

api.ts

REST API

getPosts()

1/5The page opens, so the component calls getPosts(). It doesn't know or care about URLs.

The big ideas

What you need to know

Read the API docs first

Docs tell you the base URL, the endpoints, which method each needs, and the exact shape of the JSON you'll get back.

Keep calls in one place

Put API calls in a small api.ts file instead of scattering fetch calls across twenty components.

Type the response

Write a TypeScript type for what the API returns, so your editor catches typos like post.titel.

Three states, always

Every API call is either loading, done with data, or failed. Your UI should have a screen for each.

See it in code

Walk through the code

1// api.ts2export type Post = { id: number; title: string; body: string };3 4const BASE = "https://jsonplaceholder.typicode.com";5 6export async function getPosts(): Promise<Post[]> {7  const res = await fetch(`${BASE}/posts`);8  if (!res.ok) throw new Error(`Request failed: ${res.status}`);9  return res.json();10}

1/4A TypeScript type that describes exactly what one post looks like.

One typed function per endpoint. Components just call getPosts() and never worry about URLs or status codes.

Save yourself the pain

Common mistakes

Oops

Copy-pasting the full API URL into every component that needs data.

Do this instead

Keep the base URL in one constant (or an env variable) and build endpoints from it.

Oops

Assuming the API always returns exactly what the docs promised.

Do this instead

Fields can be missing or null. Use optional chaining and fallbacks like post.author?.name ?? "Unknown".

Your mission

Build your first api.ts

~25 min

Quick check

Why keep all API calls inside one api.ts file?

Go deeper

1Build a small feature end-to-end against a real public REST API.
2Read the API's documentation fully before writing any fetching code.
3Practice handling both success and failure responses from the same endpoint.