<div id="root"></div>
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container {
  width: 100%;
  max-width: 1300px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}


header {
  background-color: #282c34;
  color: white;
  padding: 20px 0;
}
h1 {
  margin: 0;
}
h2 {
  margin-bottom: 40px;
}
main {
  margin-top: 40px;
}
p span {
  color: green;
  font-weight: bold;
}
const {useState, useEffect} = React;

function Counter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        this.change()
    }, [])
  
  change = () =>  {
    setCount(prevCount => prevCount + 1);
  }

    return (
        <div>
        <h1>{count}</h1>
      <button onClick={this.change}>Change!</button>
        </div>
    );
}

ReactDOM.render(
  <div className="App">
        <header>
          <div className="container">
            <h1>React Hooks</h1>
          </div>
        </header>
        <main>
          <div className="container">
            <Counter/>
          </div>
        </main>
      </div>,
  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.8.4/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js