3.7 React без JSX

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

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

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

    
  class MessageBox extends React.Component {
    render() {
      return <div>{this.props.message}</div>;
    }
  }

  ReactDOM.render(
    <MessageBox message="Привет, мир!" />,
    document.getElementById('root')
  );
  

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

    
  class MessageBox extends React.Component {
    render() {
      return React.createElement('div', null, this.props.message);
    }
  }

  ReactDOM.render(
    React.createElement(MessageBox, {message: 'Привет, мир!'}, null),
    document.getElementById('root')
  );
  

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

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

Если вам надоело каждый раз набирать руками React.createElement, можно использовать общий паттерн - назначить сокращенное название:

    
  const elem = React.createElement;

  ReactDOM.render(elem('div', null, 'Привет, мир!'), document.getElementById('root'));
  

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

Как альтернатива, вы можете ссылаться на комьюнити-проекты, такие как и , которые предлагают краткий синтаксис.