jherr / vanilla-jsx

Using JSX to create DOM elements

vanilla-jsx

A thought experiment in using the JSX parser to create vanilla DOM elements. So instead of something like this:

document.getElementById('test').innerHTML = `<div>...<div>`;

Or this:

const myDiv = document.createElement('div');
myDiv.className = 'foo';
myDiv.setAttribute('blah', 'baz');
document.getElementById('test').appendChild(myDiv);

You could do this:

/** @jsx dom */
import dom from 'something';

document.getElementById('test').appendChild(
  <div>
    Foobar
    ...
    <span>Blah</span>
    {someArray.map(elem => <div>{elem}</div>)}
  </div>
);