JAVASCRIPT

counter app in react class based component

import React, { Component } from 'react'

export default class CounterAppClass extends Component {

    constructor(props) {
        super();
        this.state = {
            count: 0
        }
    }

    handleIncrease() {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div className='card'>
                <div className="card-body">
                    <h3 className='text-center mb-2'>Class based Component Counter</h3>
                    <h5>Count is: {this.state.count}</h5>
                    <button className='btn btn-primary w-100 mt-3' onClick={this.handleIncrease.bind(this)}>Increase</button>
                </div>
            </div>
        )
    }
}

counter example using classes react without jsx

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id='root'></div>
<script>
class Hello extends React.Component {
 constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }

  render() {
    return React.createElement('div', null, React.createElement("button",{onClick: () => this.setState({ count: this.state.count + 1})}, "Inc "+ this.state.count));
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
</script>