React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Vladimir Kutepov

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>

CSS

main {
  background: yellow;
}
div {
  background: orange;
}

Babel + JSX

class Hello extends React.Component {
  render() {
    return (
      <main>
        <div style={{ backgroundColor: null }}>{`<div style={{ backgroundColor: null }} />`}</div>
        <div style={{ backgroundColor: '' }}>{`<div style={{ backgroundColor: '' }} />`}</div>
        <div style={{ backgroundColor: 'transparent' }}>{`<div style={{ backgroundColor: 'transparent' }} />`}</div>
        <div style={{ backgroundColor: 'inherit' }}>{`<div style={{ backgroundColor: 'inherit' }} />`}</div>
        <div style={{ background: 'none' }}>{`<div style={{ background: 'none' }} />`}</div>
      </main>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.body
);