React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by brigand

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<pre id="out"></pre>

Babel + JSX

/* @jsx createElement */

function createElement(type, props, ...children) {
	children = children.flat();
  const attrs = props && JSON.stringify(props).slice(1, -1).replace(/^(.)/, ' $1') || '';
  return `<${type}${attrs}>\n  ${children.join('\n').split('\n').join('\n  ')}\n</${type}>`;
}


out.textContent = <div>
  <h2 style="color: red">Header</h2>
  <p>Lorem <strong>ipsum dolor</strong> sit amet, consectetur adipisicing elit. Maxime laborum quo eveniet ipsum corporis iure ut quae ducimus tempore! Vitae repudiandae quaerat culpa nobis. Nulla commodi cumque, obcaecati repellendus dignissimos.</p>
</div>