plain-jsx

Alternative JSX renderer. Creates plain DOM nodes instead of React objects.

explanation/usage

JSX doesn't have to be used with React. If you add /** @jsx foo */ at the top of your script, the JSX transformer will use foo instead of React.createElement as your rendering function.

Use plainJSX as your rendering function and you'll get real elements that you can append directly to the DOM.

For example, if you put this through Babel (try it in the REPL):

/** @jsx plainJSX */

document.body.appendChild(
  <section>
    <h1>ABC</h1>

    <ul class="list">
      {['A', 'B', 'C'].map(letter => <li>{letter}</li>)}
    </ul>
  </section>
);

...you get this:

/** @jsx plainJSX */

document.body.appendChild(plainJSX(
  'section',
  null,
  plainJSX(
    'h1',
    null,
    'ABC'
  ),
  plainJSX(
    'ul',
    { 'class': 'list' },
    ['A', 'B', 'C'].map(function (letter) {
      return plainJSX(
        'li',
        null,
        letter
      );
    })
  )
));

For this output to run, you just need the plainJSX global to exist:

<script src="plain-jsx/index.js"></script>

It's a tiny function that returns real DOM elements, constructed using nothing but document.createElement, .setAttribute, .appendChild, document.createTextNode.

install

$ bower install --save plain-jsx

Or:

$ npm install --save-dev plain-jsx

Or you could just copy and paste the plainJSX function into your app.

status

Seems to work fine. But it could do with some tests – PRs welcome!

licence

MIT