react-playground

index.html

<div id="app"></div>

playground.json

{
  "scripts": [
    "react",
    "react-dom",
    "https://cdnjs.cloudflare.com/ajax/libs/d3-axis/1.0.10/d3-axis.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"
  ],
  "styles": [
    "font-awesome"
  ]
}

script.js

function App() {
    return <div>
        <h1>Hi, I'm GistPad { _.random() } 👋</h1>
        <p>Feel free to edit the HTML, JavaScript and CSS in this playground. The preview will update in real-time, so that you can visually explore your ideas.</p>
        <button onClick={() => alert("Hi!")}>Say Hi <span className="fa fa-heart" /></button>
    </div>;
}

ReactDOM.render(<App />, document.getElementById("app"));

style.css

body {
    background-color: lightblue;
}