React Lecture

1. What does Babel compile <h1>Hello, {name}!</h1> into?

• A raw HTML string inserted into the page via innerHTML
• React.createElement('h1', null, 'Hello, ', name, '!') — a plain JavaScript object describing the UI node
• A direct document.createElement('h1') call that creates a real DOM node immediately
• A WebAssembly instruction that the browser renders natively

2. What does the { } curly-brace syntax do inside JSX?

• It defines a CSS class to style the content inside the element
• It escapes the { and } characters as HTML entities
• It switches from JSX mode back to JavaScript — any expression inside is evaluated and its result is inserted into the UI
• It creates a new JavaScript object stored in the DOM

3. React has a declarative nature. What does this mean?

• You write step-by-step instructions telling the browser exactly how to update each DOM element
• You describe what the UI should look like for a given state, and React figures out the minimal DOM updates needed
• React generates HTML on the server and sends it to the client before any JavaScript runs
• You declare global variables that React automatically synchronizes with the DOM

1. Why does React require a key prop on each element rendered inside .map()?

• It is used as the CSS class for the element
• React uses the key to uniquely identify list items and efficiently determine which ones changed, were added, or removed during re-renders
• The key is sent to the server to cache the rendered HTML
• It is required by JavaScript — arrays cannot be rendered without a key attribute

2. A student writes this to render the property list:

return (
  <ul>
    {properties.map(prop => <li>{prop.name}</li>)}
  </ul>
);

• The return keyword inside the arrow function
• A key prop on each <li> element
• An import statement for the map function
• Parentheses around the JSX inside the arrow function

3. What does properties.map((prop, index) => <li key={index}>{prop.name}</li>) return?

• A single concatenated string of all property names
• An array of JSX elements (Virtual DOM objects) that React renders as children
• A new real DOM <ul> element containing all list items
• A JavaScript generator that yields one list item at a time

1. What are props in a React component?

• Internal variables that the component manages itself and can change over time
• Read-only inputs passed from a parent component to a child — analogous to function arguments
• CSS properties attached to a component’s root element
• Reserved keywords that React uses to configure component behavior internally

2. Why must React component names start with a capital letter?

• JavaScript class syntax requires capital letters — components follow the same convention
• React uses capitalization to distinguish custom components from native HTML elements: lowercase → HTML tag, uppercase → React component
• Browser security policies prevent JavaScript from creating elements with lowercase names
• It is purely a style convention with no functional effect on rendering

3. A component is defined as:

const MonopolyProperty = ({ name, price, colorGroup }) => { ... };

• It declares three new state variables
• It destructures the props object — instead of props.name, props.price, props.colorGroup, you access them directly
• It restricts the component to only accept exactly three props and throws an error for any others
• It defines default values of undefined for each prop when they are not passed

4. Evaluate this code:

function MonopolyProperty(props) {
  props.price = props.price * 2; // double the price
  return <p>{props.price}</p>;
}

• Nothing — props can be freely modified inside the component that receives them
• Props are read-only. Mutating them breaks React’s unidirectional data-flow model and causes unpredictable bugs
• The component must use this.props.price instead of props.price
• You cannot use arithmetic operators inside a React component

1. What does const [houses, setHouses] = useState(0) do?

• Declares a CSS variable named houses with an initial display value of 0
• Creates a state variable houses initialized to 0, and a setter setHouses — calling setHouses(n) updates the value and triggers a re-render
• Declares two constants that persist between page reloads in localStorage
• Creates an HTML input element bound to a variable named houses

2. A student writes <button onClick={buyHouse()}>. What is wrong?

• Nothing — buyHouse() and buyHouse are equivalent when used in event handlers
• buyHouse() calls the function immediately during render. The correct syntax is onClick={buyHouse} to pass the function reference for React to call on click
• The onClick prop must receive a string — use onClick='buyHouse' instead
• Arrow functions cannot be used as React event handlers

3. Two <MonopolyProperty> cards are on the board. A player buys 3 houses on Royce Hall. What happens to Powell Library’s houses?

• Powell Library also gets 3 houses — components share state by default
• Powell Library resets to 0 because React re-renders the entire tree
• Powell Library is unaffected — each component instance has its own independent state
• Powell Library throws an error because two components cannot use the same hook

4. Evaluate this code:

function MonopolyProperty({ name }) {
  let houses = 0;
  const buyHouse = () => { houses = houses + 1; };
  return (
    <>
      <p>{name}: {houses} houses</p>
      <button onClick={buyHouse}>Buy</button>
    </>
  );
}

• Yes — houses changes when buyHouse is called, so the display will update
• No — modifying a plain let variable does not trigger a re-render. The display will always show 0 houses
• No — let cannot be used inside a React component; only const is allowed
• Yes — React automatically watches all variables inside component functions for changes

1. What is the Virtual DOM and why does React use it?

• A backup copy of the DOM stored on the server to recover from browser crashes
• A lightweight JavaScript object tree that mirrors the real DOM; React diffs the new vs. previous version to find the minimal set of real DOM changes needed
• A browser API that speeds up DOM updates by batching them
• A CSS-in-JS solution that generates stylesheets without touching the DOM

2. What is the key difference between a Single Page Application (SPA) and Server-Side Rendering (SSR)?

• SPAs use React; SSR uses only plain HTML — they are incompatible technologies
• In SPAs, all content is loaded by JavaScript on the client after a single HTML shell is delivered. In SSR, the server renders fully-formed HTML for each page request
• SPAs are faster in all scenarios; SSR is only used for legacy systems
• SSR requires a database connection; SPAs work without any backend

3. Which of the following is an advantage of SSR over SPA for a public news website?

• SSR requires less server compute because the client does all rendering
• SSR pages load faster initially and are better indexed by search engines because the HTML content is pre-rendered on the server
• SSR eliminates the need for a backend API entirely
• SSR gives faster user interaction because all navigation happens client-side

4. In the UCLA Monopoly game, you click “Collect Rent” which calls setWallet(wallet + totalRent). What does React update in the real DOM?

• The entire page re-renders from scratch — React replaces all DOM nodes
• Only the wallet display updates — React diffs the Virtual DOM and patches only the changed text node
• Nothing updates — setWallet only changes a JavaScript variable without affecting the DOM
• All six property cards re-render because they are children of the same parent component

5. The UCLA Monopoly code separates monopoly-game.js (application layer) from PropertyCard.jsx (presentation layer). What is the main benefit of this separation?

• It makes the code run faster because the browser can load files in parallel
• The game logic can be unit-tested without rendering any UI, and UI changes don’t require touching game rules
• React requires all components to be in separate files — it will not compile otherwise
• It reduces the total number of lines of code by eliminating duplication