Chapter 1: Quick Start

Core Idea

This single page covers ~80% of the React concepts used daily: components, JSX, styling via className, displaying data with {}, conditional rendering, list rendering with key, event handlers, and state via useState — everything else in the docs is depth on these fundamentals.

Key Concepts

Component: a JavaScript function, capitalized, that returns markup (JSX). Capitalization is how React (and JSX) distinguishes a custom component (<MyButton />) from a native HTML tag (<button>).
JSX: stricter than HTML — self-closing tags are mandatory (<br />), and a component can only return one root element (wrap siblings in <div> or a fragment <>...</>).
className is React's class — CSS still lives in a separate .css file; React itself doesn't prescribe how you load it.
{} in JSX escapes back into JavaScript — for text content ({user.name}) or, without quotes, for attribute values (src={user.imageUrl}). style={{...}} is just a plain JS object passed through that same escape hatch, not special syntax.
Conditional rendering uses plain JavaScript — if/else, the ternary ? : (works inline in JSX, unlike if), or && for an "only render when true" shortcut.
List rendering uses array.map(), and every resulting element needs a stable key (usually a data ID) so React can track inserts/removes/reorders correctly.
Event handlers: pass the function reference (onClick={handleClick}), never call it (onClick={handleClick()} fires immediately at render time instead of on click).
useState: const [count, setCount] = useState(0) — gives a state variable and its setter; calling the setter re-renders the component with the new value. Each rendered instance of a component owns its own independent state.
Hooks are functions starting with use; they may only be called at the top level of a component (or another Hook) — never inside conditions, loops, or nested functions.
Lifting state up: to share state between sibling components, move the useState call to their closest common parent and pass the value + updater down as props — this is how independent per-button counters become one shared counter.

Code Examples

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}

export default function MyApp() {
  const [count, setCount] = useState(0);
  function handleClick() { setCount(count + 1); }
  return (
    <div>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

What it demonstrates: state lifted from MyButton into the shared parent MyApp, then passed back down as props (count, onClick) so both buttons stay in sync — the canonical "lifting state up" pattern.

Key Takeaways

Component name capitalization isn't cosmetic — it's the mechanism JSX uses to tell a custom component apart from a host HTML element.
Never call an event handler in the JSX attribute (onClick={fn()}); pass the reference (onClick={fn}).
Every list item needs a key, ideally a stable ID from your data — not the array index, which breaks on reorder/insert/delete.
When two components need to reflect the same value, the fix is almost always to lift the state to their nearest common parent, not to synchronize two separate useState calls.
Hooks have a hard rule: top-level calls only. This is enforced further in the Rules of Hooks (Ch 116) and by the eslint-plugin-react-hooks lint rules (Ch 46-47).

Connects To

Ch 2 (Tutorial: Tic-Tac-Toe): applies these exact concepts in a real mini-app.
Ch 21 (State: A Component's Memory): the deeper treatment of useState only introduced here.
Ch 29 (Sharing State Between Components): the full "lifting state up" chapter.
Ch 116 (Rules of Hooks): the formal rule behind "Hooks only at the top level."