The Mental Model
It's just an XLR cable.
Think of your Frontend (React) as the Speaker and the Backend (Database) as the Instrument.
Without a cable connecting them, the speaker makes no sound. In web dev, that cable is an API Request. The signal traveling through the cable is JSON.
- Request: You asking the band to play.
- Latency: The time it takes sound to travel.
- Response: The music hitting your ears.
The Sheet Music
The Object
Curly braces {} represent a single "thing." A user, a song, a setting.
const kickDrum = {
id: 1,
type: "sample",
velocity: 127,
tuned: true
};
The Array
Square brackets [] represent a list. A playlist, a grid of cards, a table.
const beatPattern = [
{ note: "C1", time: 0 },
{ note: "C1", time: 4 },
{ note: "D1", time: 8 },
// ... infinite list
];
The Latency
Don't block the beat.
JavaScript is impatient. It wants to read your code from top to bottom instantly. If it hits a network request (which takes time), it crashes the rhythm.
We use await to tell JavaScript:
"Chill for a second. Wait for the drummer to finish this fill before you play the next chord."
async function getSong() {
// 1. Start the request
const response = await fetch("/api/song");
// 2. Code PAUSES here until data arrives...
... tick tock ...
// 3. Resume execution
const data = await response.json();
return data;
}
The Mixing Board
Playback
Read data. Like hitting play on a track. Non-destructive.
Record
Create data. Like recording a new take. Adds to the DB.
Remix
Update data. Changing the EQ or volume of existing audio.
Erase
Remove data. Deleting a bad take from the project.
Common Patterns
✗ Static Noise
"I'll build the API first"
No. Build the UI with fake data. You'll know what shape you need.
"I need to handle every error"
For a demo? Just console.log errors. Perfect error handling comes later.
"I need loading spinners everywhere"
Start with nothing. Add one loading state. That's usually enough.
"I need caching and optimization"
Make it work first. Make it fast later. Premature optimization kills momentum.
✓ Clean Signal
Start with mock data
A JSON file in /lib/data.ts is your local database.
One fetch, one state
const [data, setData] = useState(null) — that's your entire data layer.
Console is your friend
console.log(data) before you render. See what you're working with.
Happy path first
Build as if every request succeeds. Add error handling when it matters.
The Exercises
Soundcheck your understanding.
The Oscilloscope
Inspect Network
- →Right click > Inspect
- →Go to Network tab
- →Refresh this page
- →Click the "Fetch/XHR" filter
Composition
Write JSON
- →Open a code editor
- →Create an object representing You
- →Include keys: Name, Stack (array), Exp (number)
- →Validate it is valid JSON
Live Test
Fetch in Console
- →Open Chrome Console
- →await fetch('https://api.github.com')
- →Look at the Promise result
📋 Quick Reference Cheatsheet
Format
{ "key": "value" }Wait for it
await fetch(...)Convert
response.json()