Indeed. When we did our first React applications without a JSX compile step, we even went further with the syntax with the power of functional programming. You could do stuff like:

    div({className: 'm-3', onClick }, 'the text')

Or go an abstraction step further create your own elements as a function, that take in custom parameters:

    navBar([navItem('Home', '/'), navItem('About', '/about')])

I mean, isn't that line actually quite expressive? It felt powerful to build the DOM exactly as you needed. You could generate anything without having to worry about JSX syntax, cause it's all JS and you can abstract using all of your toolkit. And if something goes wrong, you never have to look at JSX documentation or the JSX compiler output.

For a long time React docs had a very prominent place for "React without JSX" that showed that JSX was nothing but a bunch of functions [1], and you could skip all of them by doing

  var h = React.createElement

  h(...)

A few people where doing that. And early on you could switch to Preact by substituting Preact.* functions for React.* functions in the transpilation tools.

[1] It's still there in advanced guides: https://reactjs.org/docs/react-without-jsx.html