1. JSX, components and props

// JSX compiles to function calls: <h1 className="t">Hi</h1>  →  jsx("h1", { className: "t", children: "Hi" })
function OrderCard({ order, onSelect }) {            // props are read-only
  const isBig = order.total > 10000;
  return (
    <div className={`card ${isBig ? "big" : ""}`} onClick={() => onSelect(order.id)}>
      <h3>#{order.id} — {order.customer}</h3>
      <p>{order.total.toLocaleString("en-IN", { style: "currency", currency: "INR" })}</p>
    </div>
  );
}

function OrderList({ orders }) {
  return (
    <>                                               {/* Fragment: no extra DOM node */}
      {orders.map(o => (
        <OrderCard key={o.id} order={o} onSelect={id => console.log(id)} />
      ))}
    </>
  );
}