Note: This document is a work in progress. You can help improve it.

React User Events and Lifecycle

Day Three
React event handling

HTML:

<button class="my-rad-button">Click me!</button>

JS:

const handleButtonClick = event => {
console.log('button was clicked')
}
document
.querySelector('.my-rad-button')
.addEventListener('click', handleButtonClick)

React way:

handleButtonClick = (event) => {
console.log("button was clicked")
}
render() {
return (
<div>
<button onClick={this.handleButtonClick} >Click me!</button>
</div>
);
}
}
  • In react we place the handle
  • onClick
  • onChange
  • onSubmit
  • preventDefault
React Lifecycle
Today's work