<div id="app"></div>
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };

    this.handleClick = this.handleClick.bind(this);
  }

  sayHi() {
    window.alert('Hello Ray.');
  }
  
  handleClick() {
    this.setState((prevState) => ({
      count: prevState.count += 1,
    }));
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Count is: { this.state.count }
        </button>
        <hr />
        <button type="button" onClick={ this.sayHi }>打招呼</button>
      </div>
    );
  }
}

const app = ReactDOM.createRoot(document.getElementById('app'));
app.render(<App />);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@18/umd/react.development.js
  2. https://unpkg.com/react-dom@18/umd/react-dom.development.js