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.
- Выражения в скобках держите простыми и чистыми.