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 a JSX renderer (try it in Babel):

/** @jsx plainJSX */

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

    <ul class="list">
      {['A', 'B', 'C'].map(function (letter) {
        return <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
      );
    })
  )
));

To make that work, 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

$ npm install --save-dev plain-jsx

Or just copy and paste it somewhere.

status

This is new and probably misses parts of JSX. Open an issue if there's something else it should do.

licence

MIT