Components, props & state in plain English

You don't need to write React to build with it — but three of its ideas, held clearly, are the difference between steering the assistant and being taken for a ride. Everything on every screen is these three:

• Components are LEGO bricks. A screen isn't built as one piece; it's assembled from named chunks — MessageList, MessageCard, ReplyBox, StatusBadge — each defined once, reused everywhere. Why you care: when something's wrong with how messages display, you say 'fix MessageCard', not 'fix the inbox somehow'. Naming the brick is half of every request you'll make this course.
• Props are the labels you pass in. The same MessageCard brick renders a hundred different messages because each gets its data passed in as props — 'here's your sender, your subject, your status.' Why you care: 'the card shows the wrong date' is a props question (wrong data passed in) vs. 'the date is formatted badly' is a component question (right data, wrong rendering). That distinction routes half your bug reports correctly.
• State is short-term memory that redraws the screen. Which filter is selected, what's typed in the reply box, is the AI drafting right now — values that change as the user acts, held in state, with the golden rule: when state changes, the screen updates itself. You never say 'now update the screen' — you change the state and React redraws. Why you care: 'it saved but the list didn't update' is a state bug, and now you can say so.

Reading a component (the 60-second version)

// A component is a function: props in, screen-stuff out.
export function StatusBadge({ status }: { status: string }) {
  //                           ^ the prop it accepts
  const color =
    status === "new" ? "bg-amber-100 text-amber-800"
    : status === "replied" ? "bg-blue-100 text-blue-800"
    : "bg-green-100 text-green-800";   // <- plain logic: pick a look

  return <span className={`rounded px-2 text-xs ${color}`}>{status}</span>;
  //     ^ the HTML-looking part (JSX): what actually appears,
  //       with {curly braces} splicing values in
}

That's a complete, real component, and every one the assistant generates has the same anatomy: props at the top, logic in the middle, JSX at the bottom. When you review generated UI code, read it in that order and ask the assistant about anything that doesn't fit the pattern — deviations are where bugs and cleverness both live, and at your stage those deserve equal suspicion.