Реагировать без JSX

JSX не является обязательным требованием для использования React. Использование React без JSX особенно удобно, когда вы не хотите настраивать компиляцию в вашей среде сборки.

Каждый элемент JSX является просто синтаксическим сахаром для вызова React.createElement (component, props, ... children). Таким образом, все, что вы можете сделать с JSX, можно сделать с помощью простого JavaScript.

Например, этот код написан с помощью JSX:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}
ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

может быть скомпилирован в этот код, который не использует JSX:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

Компонент может быть предоставлен либо в виде строки, либо в качестве подкласса React.Component, либо в виде простой функции для компонентов без состояния.

Если вы устали набирать React.createElement так много, одним из распространенных шаблонов является назначение сокращения:

const e = React.createElement;
ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

Если вы используете эту сокращенную форму для React.createElement, использование React без JSX может быть почти таким же удобным.

В качестве альтернативы вы можете обратиться к проектам сообщества, таким как response-hyperscript и hyperscript-helpers, которые предлагают более короткий синтаксис.