Можно ли использовать JSX без React

«Можно ли использовать JSX без React» — вопрос из категории JavaScript, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, JSX можно использовать без React. JSX — это синтаксическое расширение JavaScript, которое преобразуется в обычный JS-код с помощью транспиляторов, таких как Babel.

Пример использования JSX с альтернативными библиотеками (например, Preact, Inferno) или даже без них:

// Настройка Babel для JSX без React
/** @jsx h */
import { h, render } from 'preact';

function App() {
  return <div>Hello without React!</div>;
}

render(<App />, document.body);

Или с собственным преобразованием:

/** @jsx myJsx */
function myJsx(tag, props, ...children) {
  return { tag, props, children };
}

const element = <div>Custom JSX</div>;
console.log(element); // { tag: 'div', props: {}, children: ['Custom JSX'] }

Ключевое — указать Babel или другой инструмент, как преобразовывать JSX (через @jsx pragma).