react event listener

import React, { Component } from 'react';

class App extends Component {
  
  constructor(props) {
    super(props);
    this.sayHello = this.sayHello.bind(this);
  }

  sayHello() {
    alert('Hello!');
  }
  
  return (
    <button onClick={this.sayHello}>
      Click me!
    </button>
  );
}

export default App;import React from 'react';

const App = () => {
  
const message = () => {
 console.log("Hello World!") 
}

return (
<button onClick={message}> Press me to print a message! </button>
  );
}import React from 'react';

function App() {

  function sayHello() {
    alert('Hello!');
  }
  
  return (
    <button onClick={sayHello}>
      Click me!
    </button>
  );
}

export default App;<button onClick={sayHello}>Click</button>// it a component
import React from 'react';

class App extends React.Component {
      //call function (ECMAScript 5) from tag input:text
  handleChange = e => {
    //
    console.log(`${e.target.value}`)
  }
  render() { 
    return (
      <div className="App">
        <input type="text" name="input" id="" placeholder="" onChange={this.handleChange}/>
      </div>
    );
}
}

export default App;onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp