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