JSX и условный рендеринг

JSX — синтаксис, который компилируется в вызовы создания элементов. Внутри фигурных скобок — любое выражение JavaScript.

function OrderCard({ order }) {
  return (
    <>
      <h3 className="title">Заказ №{order.id}</h3>
      {order.paid ? <Badge>Оплачен</Badge> : <PayButton id={order.id} />}
      {order.comment && <p>{order.comment}</p>}
    </>
  );
}

Что важно знать

• className вместо class, htmlFor вместо for, стили — объектом: style={{ marginTop: 8 }}.
• Один корневой элемент; фрагмент <>…</> — без лишнего div.
• Условия: тернарный оператор, &&, ранний return null.
• Ловушка &&: {count && <List />} при count = 0 выведет «0» — писать {count > 0 && …}.
• Компоненты называются с большой буквы — иначе JSX считает их HTML-тегом.
• Вставленные строки экранируются автоматически — защита от XSS; dangerouslySetInnerHTML её отключает.