<div id="root"></div>
* {
  box-sizing: border-box;
  font-family: 'Open Sans', Arial;
  padding: 0;
  margin: 0;
}

.counter {
  background-color: #61dafb;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.counter > * {
  margin: 10px 0;
}

.counter h2 {
    font-size: 21px;
    text-align: center;
    max-width: 600px;
}

.counter p {
  font-size: 18px;
  text-align: center;
}

.counter button {
  background: #20232a;
  border: 0;
  border-radius: 10px;
  color: #FFF;
  cursor: pointer;
  font-size: 18px;
  outline: none;
  padding: 10px 20px;
}

.counter button:active {
  background-color: #2c2f37;
}

a {
  position: absolute;
  bottom: 3px;
  font-style: italic;
}
function CounterComponent() {
  // Declares a "count" state variable initialized with value 0.
  const [count, setCount] = React.useState(0);

  // Sets the new state of "count"
  const handleClick = () => setCount(count + 1);
  
  return (
    <div>
      <h2>A React counter made with the useState Hook!</h2>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
      <a href="https://enmascript.com/articles/2018/10/26/react-conf-2018-understanding-react-hooks-proposal-with-simple-examples">source: EnmaScript.com</a>
    </div>
  );
}

ReactDOM.render(
  <CounterComponent />,
  document.getElementById('root')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.0/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js