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

You will need something to transform the JSX into JS function calls. React uses Babel to do this -- you would probably be best off with that too.

There's a library by the creators of Preact that essentially does what you're after called vhtml. The tagline is "Render JSX/Hyperscript to HTML strings, without VDOM".

Here is a copy of the Readme at time of writing:

Usage

// import the library:
import h from 'vhtml';

// tell babel to transpile JSX to h() calls:
/** @jsx h */

// now render JSX to an HTML string!
let items = ['one', 'two', 'three'];

document.body.innerHTML = (
  

    
Hi!
    
Here is a list of {items.length} items:
    

      { items.map( item => (
        
{ item }
      )) }
    
  
);

New: "Sortof" Components!

vhtml intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML. However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".

When vhtml is given a Function as the JSX tag name, it will invoke that function and pass it { children, ...props }. This is the same signature as a Pure Functional Component in react/preact, except children is an Array of already-serialized HTML strings.

This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.

Here's a more complex version of the previous example that uses a component to encapsulate iteration items:

let items = ['one', 'two'];

const Item = ({ item, index, children }) => (
  

    
{item}
    {children}
  
);

console.log(
  

    
Hi!
    

      { items.map( (item, index) => (
        
          This is item {item}!
        
      )) }
    
  
);

The above outputs the following HTML:

  
Hi!
  

    

      
one
This is item one!
    
    

      
two
This is item two!