Counter

Functional Component

<!DOCTYPE html> 
<html> 
<head> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
</head> 
<body> 
<div id="app"></div> 
<script type="text/babel"> 

   function Component_Counter(props) { 
      const [s_counter, sf_setCounter] = React.useState(0); 
      const f_handleIncrement = () => { 
         sf_setCounter(s_counter + 1); 
      } 
      const f_handleDecrement = () => { 
         sf_setCounter(s_counter - 1); 
      }; 
      const f_handleResetCount = () => { 
         sf_setCounter(0); 
      }; 
      return ( 
         <div> 
           <h1>Count: {s_counter}</h1> 
           <button onClick={f_handleIncrement}>Increment</button> 
           <button onClick={f_handleDecrement}>Decrement</button> 
           <button onClick={f_handleResetCount}>Reset</button> 
         </div> 
      ) 
   } 
   ReactDOM.render(<Component_Counter/>, document.getElementById('app'));  

</script> 
</body> 
</html>

Class Component

class Component_Counter extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      s_counter: 0 
    }; 
    this.f_handleIncrement = this.f_handleIncrement.bind(this); 
  }; 
  f_handleIncrement() { 
    this.setState({ 
      s_counter: this.state.s_counter + 1 
    }); 
  } 
  f_handleDecrement() { 
    this.setState(previousState => ({ 
      s_counter: previousState.s_counter - 1 
    })); 
  } 
  render() { 
    return ( 
      <div> 
        <h1>Count: {this.state.s_counter}</h1> 
        <button onClick={this.f_handleIncrement}>Increment</button> 
        <button onClick={this.f_handleDecrement.bind(this)}>Decrement</button> 
        <button onClick={ () => this.setState({ s_counter: 0 }) }>Reset</button> 
      </div > 
    ); 
  } 
} 
ReactDOM.render(<Component_Counter/>, document.getElementById('app'));

ES 2009 Component

<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/create-react-class/15.5.0/create-react-class.js"></script> 

var Component_Counter = createReactClass({ 
   getInitialState: function() { 
      return { 
         s_counter: 0 
      }; 
   }, 
   f_handleIncrement: function() { 
      this.setState( { s_counter : this.state.s_counter + 1 } );   
   }, 
   f_handleDecrement: function() { 
      this.setState( { s_counter : this.state.s_counter - 1 } ); 
   }, 
   f_handleResetCount: function() { 
      this.setState( { s_counter : 0 } ); 
   }, 
   render: function() { 
      return ( 
        <div> 
           <h1>Count: {this.state.s_counter}</h1> 
           <button onClick={this.f_handleIncrement}>Increment</button> 
           <button onClick={this.f_handleDecrement}>Decrement</button> 
           <button onClick={this.f_handleResetCount}>Reset</button> 
        </div> 
      ); 
   } 
}) 
ReactDOM.render(<Component_Counter/>, document.getElementById('app'));