Can I use jsx without React to inline HTML in script?

Question

Can I use inline HTML in a script as below by using a library like jsx:

Answer 1

React renders JSX html syntax to JS using functions such as React.createElement (among others for Fragments and so on). But that all boils down to the @babel/plugin-transform-react-jsx plugin which does the transpiling of this:

return(
Hello World
)

into this...

return React.createElement('div', {id: 'hello'}, 'Hello World');

However you can replace React.createElement with you're own function to do this. You can read more on that here: https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html

You should also look at libraries which do exactly this such as nervjs, jsx-render and deku. All of these use a JSX html syntax without react. Some (such as jsx-render) are only focused on converting JSX to the final JS, which might be what you're looking for.

The author of that package wrote an article on it here: https://itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561

Also Typescript can do this if you use that...but I've no first hand experience with it.

To sum up

You can do it without React, but not without Babel or Typescript.