<div id="root"></div>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: #21214a;
}
.box {
  width: 300px;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}
View Compiled
// This one has an implicit return
const Title = props => (
  <h1 className="title">{props.text}</h1>
);

// Doesn't have to be ES6 if you don't want
function Copy() {
  return <p>Jaguar shark! So tell me - does it really exist? Checkmate... Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p>;
}

// They don't necessarily need to take props
// This one also has an explicit return
const App = () => {
  return(
    <div className="box">
      <Title text="Jeff Goldblum says:" />
      <Copy />
      <claps-button color="green"></claps-button>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css

External JavaScript

  1. https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js
  2. https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js
  3. https://unpkg.com/claps-button@1.0.8/dist/claps-button.js