JSX (JavaScript XML)
JSX (JavaScript XML) — расширение синтаксиса, позволяющее писать HTML-подобные элементы интерфейса прямо в коде JavaScript. JSX используется преимущественно в React для описания внешнего вида компонентов и преобразуется в вызовы JavaScript-функций во время сборки.
MIME-тип
text/jsx
Тип
Текст
Сжатие
Без потерь
Преимущества
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
Недостатки
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
Когда использовать .JSX
Используйте .jsx (или .js с JSX) для React-компонентов. Расширение .jsx помогает инструментам и разработчикам определить файлы с JSX-синтаксисом.
Технические детали
JSX преобразуется в вызовы React.createElement() (или jsx-runtime в React 17+) с помощью Babel или SWC. Выражения заключаются в фигурные скобки {}, className заменяет HTML class, а htmlFor — HTML for. Файлы .jsx указывают на наличие синтаксиса JSX, хотя многие сборщики обрабатывают JSX и в файлах .js.
История
Facebook представил JSX в 2013 году вместе с React как способ описания структуры интерфейса в JavaScript. Хотя поначалу он вызвал споры из-за смешения HTML и JavaScript, JSX стал стандартным подходом в разработке на React.