React-Mouse-Event-Test

by Ric Pumanes

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<div id="mainContainer"></div>

Babel + JSX

class App extends React.Component {
	
  onEnter() {
		console.log('enter');  
  }
  
  onOver() {
		console.log('over');  
  }
  
	render() {
  	return (
    	<div style={{ backgroundColor: 'red', padding: '20px' }} onMouseOver={this.onOver}>
    	  <h1 onMouseEnter={this.onEnter}>Hello World</h1>
    	</div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('mainContainer'));