React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by robstarbuck

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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<!-- This element's contents will be replaced with your component. -->
<div id="container" />

CSS

* {
  font-family: sans-serif
}
.fab{
  color: #61dafb;
}

Babel + JSX

const Heading = ({level, children, ...props}) => {
	return React.createElement(`h${level}`, props , children)
}

// Heading.propTypes{...}

ReactDOM.render(
	<div>
	  <Heading level={1}>Heading 1</Heading>
    <Heading level={2}>Heading 2</Heading>
    <Heading level={3}>Heading 3</Heading>
    
    <hr />
    
    <Heading level={1}><i class="fab fa-react" /> Icon + h1</Heading>
    <Heading level={2}><i class="fab fa-react" /> Icon + h2</Heading>
    <Heading level={3}><i class="fab fa-react" /> Icon + h3</Heading>

  </div>,
  document.getElementById('container')
);