React без 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')
);

Если вам интересно посмотреть больше примеров того, как JSX преобразуется в JavaScript, вы можете воспользоваться онлайн-компилятором Babel.

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

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

const e = React.createElement;

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

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

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