React Basics

What we build today

Before React: build this by hand

<style>
  body {
    margin: 0;
    font-family: -apple-system, sans-serif;
    background-color: #fffbe8; /* try a different color */
  }
  .card {
    padding: 24px;
  }
</style>

<div class="card">
  <h1>mini chat</h1>
  <p>Write something here…</p>
</div>

the point: every line above was typed by a human. The rest of today: teach the screen to type them for you, from data.

Read the data before you render it

const messages = [
  { id: "m1", role: "assistant", text: "Hi! This is a mock chat" },
  { id: "m2", role: "user", text: "How is React different?" },
  { id: "m3", role: "assistant", text: "We describe the screen from data" },
];

console.log(messages);
console.log(messages.length);
console.log(messages[0]);
console.log(messages[0].text);

// your turn: log the role of the last message

Try it: console.log(messages[3]) — there is no fourth message. What prints, and is that an error?

Loop through data, one index at a time

const names = ["Ada Lovelace", "Grace Hopper", "Katherine Johnson"];

for (let index = 0; index < names.length; index++) {
  const name = names[index];
  console.log(index + " " + name);
}

// your turn: also console.log(names.length) before the loop starts

hold that thought: a for loop is one way to visit every item — later today, .map() does the same job, but returns the screen instead of a console line.

The web begins as documents

Style and behavior split off

document.querySelector("#visits")
  .textContent = "3rd visit!";

The web becomes apps

The page on screen is the DOM, not your HTML

const item = document.createElement("li");  // 1 create the node
item.className = "me";
item.textContent = message;                 // 2 fill it in
document.querySelector("#log").append(item); // 3 attach it

Command the DOM by hand

// The header shows a message count: append must keep it honest
// too, or the screen lies. Every spot you must remember by
// hand is pain — hold that feeling for the next slide.
// TODO: append a few messages, then make the count follow

function appendMessage(text) {
  const item = document.createElement("li");
  item.className = "me";
  item.textContent = text;
  document.querySelector("#log").append(item);
}

appendMessage("first message, by hand");

React: the screen as a function of data

const messages = [
  { me: false, text: "Hi!" },
  { me: true, text: "So, why React?" },
  { me: false, text: "Sync, for free." },
];

Derive the screen from one data source

One command, a dev server with hot reload

$ npm create vite@latest my-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript

$ cd my-app
$ npm install
$ npm run dev

  VITE ready in 320 ms
  ➜  Local:   http://localhost:5173/

Every file has one job

my-app/
├── node_modules/   ← installed packages
├── public/
│   └── vite.svg    ← static files, served as-is
├── src/
│   ├── assets/     ← images, fonts
│   ├── App.jsx     ← the root component
│   ├── App.css
│   ├── main.jsx    ← entry point
│   └── index.css
├── index.html      ← the one real HTML page
├── package.json    ← scripts + dependencies
└── vite.config.js

One card, three ways

<div class="card">
  <img class="avatar" src="ada.png">
  <p>Ada Lovelace</p>
</div>

const card = document.createElement("div");
card.className = "card";
const img = document.createElement("img");
img.className = "avatar";
card.append(img);
card.append(p);

function AvatarCard() {
  return (
    <div className="card">
      <img className="avatar" src="ada.png" />
      <p>Ada Lovelace</p>
    </div>
  );
}

Predict first: what does the JSX we write arrive at the browser as: a new HTML file, JavaScript, or the DOM directly?

Three rules the compiler enforces

function Bio() {
  return (
    <h1>Ada Lovelace</h1>
    ①<p ②class="intro">First programmer</p>
    <img src="ada.png"③>
  );
}

function Bio() {
  return (
    <>
      <h1>Ada Lovelace</h1>
      <p className="intro">First programmer</p>
      <img src="ada.png" />
    </>
  );
}

Predict: <img CLASS="x" /> — which rule does it break, and what would you write instead?

Curly braces: a window into JavaScript

const person = {
  name: "Gregorio Y. Zara",
  theme: { background: "#111", color: "#fff" },
};

function Profile() {
  return (
    <section ①style={person.theme}>
      <h1>②{person.name}'s todos</h1>
      <img
        className="avatar"
        ③src={getImageUrl(person)}
        alt={person.name}
      />
    </section>
  );
}

Predict: why does { if (done) "✔" } break the build, and how would you write the same idea correctly?

A component is a JavaScript function

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      </section>
  );
}

Split it up: export, import, render

import Gallery from "./Gallery.js";

export default function App() {
  return <Gallery />;
}

import Profile from "./Profile.js";

export default function Gallery() {
  return (
    <section>
      <Profile />
      <Profile />
    </section>
  );
}

export default function Profile() {
  return <img src="…" alt="Katherine Johnson" />;
}

Predict: two files both export a Profile: what does import Profile from "./B.js" pick — the one from B, both of them, or whichever loads first?

Your first component: MessageBubble

your move: ① put the message text between <p> and </p> ② fix the broken tag in App so it renders <MessageBubble /> ③ add a second <MessageBubble />, then press Check answers.

props: the data coming in

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      width={size}
    />
  );
}

function Profile() {
  return (
    <Avatar
      person={{ name: "K. Saruhashi", imageId: "YfeOqp2" }}
      size={100}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// whatever the caller nests inside is children
<Card>
  <Avatar person={katsuko} size={100} />
</Card>

Predict: <Avatar size="100" /> vs <Avatar size={100} /> — what is the type of size in each, and why does it matter for width={size}?

Pass props to MessageBubble

your move: ① catch { name, text } in the signature ② render each one with curly braces instead of the hardcoded label and text ③ Check answers: three calls, three different bubbles.

Branching JSX: if, ternary, &&

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li>{name} ✔</li>;
  }
  return <li>{name}</li>;
}

<li>
  {isPacked
    ? name + " ✔"
    : name}
</li>

<li>
  {name} {isPacked && "✔"}
</li>

Predict: isPacked = false — what does the ternary render? What does the && version render?

filter(), then map(): data becomes the list

const people = [
  { id: 0, name: "Ada Lovelace", field: "computing" },
  { id: 1, name: "K. Saruhashi", field: "geochemistry" },
  { id: 2, name: "Grace Hopper", field: "computing" },
];

// 1. filter: pick the rows you want
const chemists = people.filter(
  (person) => person.field === "computing"
);

// 2. map: transform every row → an element
const items = chemists.map((person) => (
  <li key={person.id}>{person.name}</li>
));

return <ul>{items}</ul>;

Predict: the same name is in the data twice and you use the name as the key — what breaks, and why does the id fix it?

Build the conversation from data

your move: ① render {text} in the empty <p> ② use role for label + side (ternary, pattern in the TODO): then press Add message and watch the map keep up.

A component must not keep secrets

let guest = 0;

function Cup() {
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
    </>
  );
}

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Predict: the impure TeaSet — what do the two cups show on the first render? And after a re-render?

The chatbox is a tree of components

Predict: a new TypingIndicator rendered inside MessageList — is it a leaf or top-level? And which file must import it?

Assemble the chatbox

your move: ① MessageList: map messages → MessageBubble with a key ② ChatHeader: render {children} ③ wire ChatApp: pass the data down, header text as children.

State changes trigger a re-render

function App() {
  let draft = "";            // a plain variable

  function handleInput() {
    draft = "hello";         // changed... the screen doesn't care
  }

  return (
    <p className="preview">Typing: {draft}</p>
  );
}

React works in three beats

<header>{messages.length} messages</header>
<ul>
  {messages.map(m => <MessageBubble key={m.id} {...m} />)}
</ul>

A controlled input reads and updates state

const [draft, setDraft] = useState("");

<input
  value={draft}
  onChange={(event) => setDraft(event.target.value)}
/>

Build the composer

your move: add the draft state, bind value + onChange, add a Clear button, and make the preview follow ( {draft || "…"}). A plain variable changes: state re-renders.

Input from outside, or memory of your own

// the parent decides, the child renders
<MessageBubble role="user" text="How?" />

function MessageBubble({ role, text }) {
  return <p className="text">{text}</p>;
}

// the component remembers; nobody else can touch it
const [draft, setDraft] = useState("");

setDraft(e.target.value); // the only way in

Predict: a sent message's text lives in messages in App and arrives in MessageBubble as … what? While typing, the same words live in draft — why two homes?

Send button and Enter are the same thing

<form onSubmit={handleSubmit}>
  <input value={draft} onChange={...} />
  <button type="submit">Send</button>
</form>

function handleSubmit(event) {
  event.preventDefault();  // no page reload
  // ... send the message
}

Create a new array: never edit the old one

setMessages((previous) => [...previous, yours, reply]);
setDraft("");

// provided: unique ids for every message (even duplicates)
let nextId = messages.length + 1;
const newId = () => "m" + nextId++;

Assemble: send + reply

your move: finish handleSubmit: prevent, trim, stop on empty, then setMessages(p => [...p, yours, reply]) and clear the draft. Button and Enter share one onSubmit.

Render empty and disabled states

your move: the blank log says nothing and Send looks alive on empty input — the screen lies. Fix both with disabled={!draft.trim()} and the empty state.

Mount, update, unmount

{open && <ChatRoom roomId={roomId} />}

// open:   false → true  = mount
// typing / switching roomId = update
// open:   true → false = unmount

Predict first: in the next demo: does typing a message make the connection reconnect?

Predict, then press: watch the event log

// setLog is stable; roomId is the dependency that changes
useEffect(() => {
  const connection = createConnection(roomId, (line) =>
    setLog((previous) => [...previous, line])
  );
  connection.connect();
  return () => connection.disconnect();
}, [roomId, setLog]);

Answers to check for: typing → a quiet update, no reconnect · switching rooms → cleanup of the old room, then setup of the new one (no unmount) · closing → unmount + cleanup of the last room

The Effect lifecycle

Every action re-renders the component, but the Effect only restarts when its dependency, roomId, changes. Quiet steps are where typing does not touch the connection.

Your first Effect

your move: render may not scroll (purity), Send only covers sends: write the useEffect with [messages] deps. Typing must not move the log.

Extract ChatLog: the map() from Lab 3, one more time

your move: write ChatLog({ messages, logRef }) — same map() + key as Lab 3, now behind its own component. Stuck? press Show solution.

You've been rendering a list the entire time

function ChatLog({ messages, logRef }) {
  return (
    <ul className="log" ref={logRef}>
      {messages.map((m) => (
        <MessageBubble key={m.id} role={m.role} text={m.text} />
      ))}
    </ul>
  );
}

Predict: delete the key prop — the app still renders. What breaks later, and when would you actually notice?

The screen is wrong: what do you open first?