foundation

JSX

Описывайте деревья элементов через JavaScript-выражения, атрибуты, children и правила безопасного экранирования.

JSX — синтаксический сахар для `React.createElement`. Он позволяет писать HTML-подобные деревья внутри JavaScript с выражениями в фигурных скобках. Атрибуты в camelCase (`className`, `onClick`); самозакрывающиеся теги заканчиваются `/`.

JSX по умолчанию экранирует текстовых потомков, что снижает риск XSS при выводе пользовательских строк. Fragment `<>...</>` группирует соседей без лишних DOM-узлов. Компонент должен возвращать один корень или fragment.

На интервью могут спросить, во что это компилируется и как условный render и списки вписываются в ту же модель.

					const label = <span className="badge">{count}</span>;
				

На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.

Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.

Компромисс часто между ясностью и переиспользованием или между явными props и удобством.

Чеклист:

  • Помните: JSX превращается в `createElement`.
  • Используйте `className` и DOM-props в camelCase.
  • Выражения в скобках держите простыми и чистыми.