how to use an event listener in a react js component

1var Box = React.createClass({
2  getInitialState: function() {
3    return {windowWidth: window.innerWidth};
4  },
5
6  handleResize: function(e) {
7    this.setState({windowWidth: window.innerWidth});
8  },
9
10  componentDidMount: function() {
11    window.addEventListener('resize', this.handleResize);
12  },
13
14  componentWillUnmount: function() {
15    window.removeEventListener('resize', this.handleResize);
16  },
17
18  render: function() {
19    return <div>Current window width: {this.state.windowWidth}</div>;
20  }
21});
22
23ReactDOM.render(<Box />, mountNode);
24

1// it a component
2import React from 'react';
3
4class App extends React.Component {
5      //call function (ECMAScript 5) from tag input:text
6  handleChange = e => {
7    //
8    console.log(`${e.target.value}`)
9  }
10  render() { 
11    return (
12      <div className="App">
13        <input type="text" name="input" id="" placeholder="" onChange={this.handleChange}/>
14      </div>
15    );
16}
17}
18
19export default App;

1class Button extends React.Component {
2  scream() {
3    alert('AAAAAAAAHHH!!!!!');
4  }
5
6  render() {
7    return <button onClick={this.scream}>AAAAAH!</button>;
8  }
9}
10
11ReactDOM.render(<Button />, document.getElementById('app'));