Что такое JSX в React?

JSX (JavaScript XML) — это синтаксическое расширение для JavaScript, которое используется в React для описания структуры пользовательского интерфейса. JSX позволяет писать компоненты, которые выглядят как HTML, но в действительности являются JavaScript-кодом.

Зачем нужен JSX?

• Удобство и читаемость. JSX позволяет описывать элементы интерфейса в знакомом формате, похожем на HTML, но при этом имеет все преимущества JavaScript.

• Интеграция с логикой. JSX позволяет встраивать JavaScript-выражения прямо в разметку, что упрощает создание динамических и интерактивных интерфейсов.

• Компиляция в JavaScript. JSX не является стандартным синтаксисом JavaScript, поэтому он компилируется в обычный JavaScript код с помощью транспайлера, например, Babel.

Пример использования JSX

function Greeting() {
  const name = "Иван";
  return <h1>Привет, {name}!</h1>;
}

В этом примере JSX используется для возврата элемента <h1>, который выводит приветственное сообщение. {name} — это JavaScript-выражение, которое вставляется внутрь JSX.

Важные особенности JS

• JSX элементы всегда должны быть заключены в один корневой элемент. Например, если возвращаются несколько элементов, их нужно обернуть в контейнер, такой как <div> или использовать React.Fragment.

• В JSX используется camelCase для именования атрибутов, таких как className вместо class, а также htmlFor вместо for.