simple counter react

1import React, { useState } from 'react';
2import ReactDOM from 'react-dom';
3
4export const Counter = (props) => {
5  const [count, setCount ] = useState(0)
6
7  return (
8    <div id="mainArea">
9      button count: <span>{count}</span>
10      <button id="mainButton" onClick={() => {setCount(count + 1)}}>Increase</button>
11    </div>
12  );
13
14}
15
16ReactDOM.render(
17  <Counter />,
18  document.getElementById('root')
19);

1import React from 'react';
2import ReactDOM from 'react-dom';
3
4class Counter extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = {
8      count : 0
9    }
10    this.increment = this.increment.bind(this);
11  }
12
13  increment() {
14    this.setState({count:this.state.count+1});
15  }
16
17  render() {
18    return (
19      <div id="mainArea">
20        button count: <span>{this.state.count}</span>
21        <button onClick={this.increment} id="mainButton">Increase</button>
22      </div>
23    );
24  }
25}
26
27ReactDOM.render(
28  <Counter />,
29  document.getElementById('root')
30);
31