hello-without-jsx.html

web-cheat/react/hello-without-jsx.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<p><a href="https://cirosantilli.com/react">https://cirosantilli.com/react</a></p>
<div id="root"></div>
<script>
class Main extends React.Component {
  constructor(props) {
    super(props);
    console.log('Main.constructor');
    this.state = {n: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Main.handleClick');
    this.setState((state, props) => ({
      n: state.n + 1
    }));
  }

  render() {
    console.log('Main.render');
    return React.createElement('div', null,
      React.createElement("div", { onClick: this.handleClick }, "Click me"),
      React.createElement("div", null, this.state.n),
      React.createElement("div", null, Math.floor(this.state.n / 2))
    );
  }
}

ReactDOM.render(
  React.createElement(Main, {}, null),
  document.getElementById('root')
);
</script>
</body>
</html>