React sem JSX

JSX não é obrigatório para utilizar o React. Utilizar o React sem JSX é especialmente conveniente quando você não quer configurar compilação no seu ambiente de build.

Cada elemento JSX é apenas açúcar sintático (syntactic sugar) para a chamada da função React.createElement(component, props, ...children). Assim, quaisquer coisas que você pode fazer com JSX também podem ser feitas simplesmente com JavaScript.

Por exemplo, esse código escrito com JSX:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

pode ser compilado para esse código que não usa JSX:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

Se você estiver curioso para ver mais exemplos de como JSX é convertido para JavaScript, pode checar o compilador online do Babel.

O componente pode ser fornecido como uma string, como uma subclasse de React.Component ou como uma função simples.

Se você se cansar de ter que digitar sempre React.createElement, um padrão comum é atribuir a função à uma variável auxiliar:

const e = React.createElement;

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

Se você utilizar essa forma resumida de React.createElement, pode ser quase tão conveniente de utilizar o React sem JSX.

Por outro lado, você pode buscar por projetos da comunidade como react-hyperscript e hyperscript-helpers que oferecem uma sintaxe mais amigável.