Checkpoint: the first half | React for Beginners

Optional · Lessons 1–6 · 10 questions

Ten questions on everything before state. Nothing is stored, nothing is sent anywhere, and getting one wrong costs you nothing but a link back to the lesson.

01 This is the add handler. The remove handler next to it updates the array and the list, but not the counter. What goes wrong?

function addItem(name) {
  items.push(name);
  list.insertAdjacentHTML("beforeend", `<li>${name}</li>`);
  counter.textContent = items.length;
}

It crashes when the list empties Nothing, until someone reloads the page The count and the list stop matching It leaks memory as the list grows

Right. The truth about the list lives in two places, the array and the page, and everything that changes it has to update both by hand. Nothing in that code says the counter shows the number of items, so nothing can notice when it goes stale. You end up looking at 2 items above three of them. React does not help you fix that bug. It stops you writing it.

Not this one. The truth about the list lives in two places, the array and the page, and everything that changes it has to update both by hand. Nothing in that code says the counter shows the number of items, so nothing can notice when it goes stale. You end up looking at 2 items above three of them. React does not help you fix that bug. It stops you writing it.

Lesson 1: Why React exists →

02 What does it mean to say a component rendered?

Something new appeared on the screen The browser repainted that part of the page React asked your function what to draw React replaced that part of the real DOM

Right. A render is React asking your code a question. Whether anything changes on screen depends on what the answer differs from - most renders end with React deciding almost nothing needs touching.

Not this one. A render is React asking your code a question. Whether anything changes on screen depends on what the answer differs from - most renders end with React deciding almost nothing needs touching.

Lesson 1: Why React exists →

03 You write <greeting /> instead of <Greeting />. What happens?

It works. JSX is case-insensitive The build fails with an unknown component error You get an empty <greeting></greeting> in the page Nothing renders, and nothing tells you why

Right. A lowercase tag is an HTML element as far as React is concerned. It is not silent, though: the console says the tag is unrecognised and tells you to start the name with an uppercase letter. That console is where most of this course's dead ends are two seconds long instead of twenty minutes.

Not this one. A lowercase tag is an HTML element as far as React is concerned. It is not silent, though: the console says the tag is unrecognised and tells you to start the name with an uppercase letter. That console is where most of this course's dead ends are two seconds long instead of twenty minutes.

Lesson 3: Components and JSX →

04 Why is it className rather than class?

React renamed it to avoid clashing with CSS class is a reserved word in JavaScript className is faster to apply to the DOM Nothing. Both work the same way

Right. The DOM property has always been className for the same reason. Writing class does not break your styling - React passes the attribute through - but it logs a warning while it does it, which is the kind of failure worth recognising on sight.

Not this one. The DOM property has always been className for the same reason. Writing class does not break your styling - React passes the attribute through - but it logs a warning while it does it, which is the kind of failure worth recognising on sight.

Lesson 3: Components and JSX →

05 Which of these will not work inside JSX braces?

<p>{ /* ... */ }</p>

A ternary A function call An if statement A property lookup

Right. Braces take an expression - something that produces a value. if, for and while are statements, so they cannot go in. That sounds limiting until lessons 5 and 6, which are entirely about the expressions you use instead.

Not this one. Braces take an expression - something that produces a value. if, for and while are statements, so they cannot go in. That sounds limiting until lessons 5 and 6, which are entirely about the expressions you use instead.

Lesson 3: Components and JSX →

06 What does React 19 do with this?

Greeting.defaultProps = { name: "friend" };

Applies the default, as it always did Applies it, and logs a deprecation warning Ignores it. The prop arrives as undefined Fails the build

Right. React 19 dropped defaultProps for function components, and the removal is silent. A default parameter in the destructuring is the answer now: function Greeting({ name = "friend" }).

Not this one. React 19 dropped defaultProps for function components, and the removal is silent. A default parameter in the destructuring is the answer now: function Greeting({ name = "friend" }).

Lesson 4: Props: passing data down →

07 TagList sorts the array it was given. What happens to the parent's copy?

function TagList({ tags }) {
  const sorted = tags.sort();
  return <ul>{sorted.map((t) => <li key={t}>{t}</li>)}</ul>;
}

Nothing. The component got its own copy React throws, because props are read-only React logs a warning about mutating a prop It is reordered too, and nothing warns you

Right. sort() sorts in place, and a prop is a reference to the caller's own array - so that line reaches back up and rearranges data belonging to whoever rendered the component. Nothing throws and nothing is logged; the symptom turns up somewhere else entirely. Copy first: toSorted(), or [...tags].sort().

Not this one. sort() sorts in place, and a prop is a reference to the caller's own array - so that line reaches back up and rearranges data belonging to whoever rendered the component. Nothing throws and nothing is logged; the symptom turns up somewhere else entirely. Copy first: toSorted(), or [...tags].sort().

Lesson 4: Props: passing data down →

08 What does a key actually do?

Makes rendering the list faster Tells React which item is which between renders Keeps the item unique across the whole page Sets the order the items appear in

Right. Without keys React matches by position, which is a guess. With them it can see that three items are unchanged and one is new, and insert a single element rather than rewriting four.

Not this one. Without keys React matches by position, which is a guess. With them it can see that three items are unchanged and one is new, and insert a single element rather than rewriting four.

Lesson 5: Rendering lists, and what keys are for →

09 A list keyed by index, where every row has a text input. You type in the second row, then delete the first. What happens to the text?

It moves up with its row It stays put, now in a different row It is cleared, because the list changed Nothing. Keys do not affect inputs

Right. The index identifies a position, not a thing. Delete a row and everything below shifts up into a different index, so React reuses the same DOM element for what is now a different item - and the text lives in that element, not in your data. Anything with state of its own, from a checkbox to a video's playback position, gets stranded the same way.

Not this one. The index identifies a position, not a thing. Delete a row and everything below shifts up into a different index, so React reuses the same DOM element for what is now a different item - and the text lives in that element, not in your data. Anything with state of its own, from a checkbox to a video's playback position, gets stranded the same way.

Lesson 5: Rendering lists, and what keys are for →

10 notes is an empty array. What does this render?

{notes.length && <p>You have notes.</p>}

Nothing The paragraph A 0 on the page The word false

Right. && returns the left value when it is falsy, so the expression evaluates to the number 0 - and a number renders itself. Every other falsy value renders as nothing, which is exactly why this one catches people out. Write notes.length > 0 && and it can never surprise you.

Not this one. && returns the left value when it is falsy, so the expression evaluates to the number 0 - and a number renders itself. Every other falsy value renders as nothing, which is exactly why this one catches people out. Write notes.length > 0 && and it can never surprise you.

Lesson 6: Showing things conditionally →