The Mental Model
Everything is a Pipe.
Coding is not math. Coding is plumbing. Your job is not to be a genius; it is to build a pipe that moves data from Point A to Point B without leaking.
Input: The raw ingredients. A user clicks, types, or uploads data.
Process: The recipe. Code checks validity, calculates, or saves.
Output: The meal. The screen updates. The user sees the result.
// The Universal Pattern
Every feature you build follows this flow. Login? Input password, process check, output success. Search? Input query, process filter, output results.
The Vocabulary
Variables (Buckets)
STORING DATA
A variable is just a labelled box. You put data inside so you can find it later.
let userName = "Alex";
let balance = 420;
const isLoggedIn = true;
Functions (Recipes)
DOING THINGS
Reusable instructions. Instead of rewriting steps, you give them a name.
function greet(name) {
return "Hello " + name;
}
// Usage:
greet("Alex"); // "Hello Alex"
The Data Shapes
Beginners confuse these two. Understanding when to use each is crucial.
Arrays [ ]
LISTS OF THINGS
Ordered by index (0, 1, 2...). Use for feeds, search results, galleries, todos.
const todos = [
"Buy milk",
"Walk dog",
"Code"
];
// Access by index:
todos[0]; // "Buy milk"
Objects { }
SUITCASES OF DETAILS
Named properties. Use for a User, Product, Settings: one thing with many details.
const user = {
name: "Alex",
age: 28,
isPro: true
};
// Access by name:
user.name; // "Alex"
Pro tip: Arrays of Objects is the most common pattern. A feed of posts, a list of users, search results: all are arrays containing objects.
The Architecture
Think of a web app like a restaurant. Each part has a job.
The Waiter
React / HTML / CSS
Talks to the customer (User). Takes the order, but cannot cook the food.
The Ticket
Fetch / Endpoints
The message system. Waiter writes "Burger" and passes it to the kitchen.
The Chef
Node / SQL
Works in private. Checks ingredients (Data), cooks it (Logic), hands plate back.
The Control Flow
If / Else
The crossroads. "If this is true, do A. Otherwise, do B."
if (user.isPro) {
showDashboard();
} else {
showUpgradeScreen();
}
Use for: Login checks, permissions, feature flags, validation.
Loops / Map
Do the same thing for each item. "For each post, render a card."
// Render a list of posts
posts.map((post) => (
<Card
key={post.id}
title={post.title}
/>
));
Use for: Feeds, search results, galleries, any list of items.
The Exercises
Solidify this mental model before moving to the code.
The Dictionary
Map Your Data
- →List your app's main Objects
- →e.g., User, Product, Order
- →List properties for each
- →e.g., User: name, email, isPro
The Blueprint
Map One Feature
- →Pick one feature (e.g., Login)
- →Write the Input (email, password)
- →Write the Process (check DB)
- →Write the Output (dashboard)
The Actions
List Your Verbs
- →List what users can DO
- →e.g., createPost, deleteItem
- →Each becomes a function
- →Note what data each needs
📋 Quick Reference Cheatsheet
Variable
let name = "value";Function
function doThing() { }Array Loop
items.map(i => <X />)