React event handlers

React's event system uses internally a wrapper, called SyntheticEvent, around the native HTML DOM events for cross-browser support. React events follow the W3C spec, which can be found at https://www.w3.org/TR/DOM-Level-3-Events/.

React event names are camel-cased as opposed to HTML DOM events, which are lowercased. For instance, the HTML DOM event onclick would be called onClick in React. For a complete list of supported events, visit the React official documentation about events: https://reactjs.org/docs/events.html

Getting ready

In this recipe, you will write a component to see how it is defined and how it works. Before you start, create a new package.json file with the following content:

{ 
  "scripts": { 
    "start": "parcel serve -p 1337 index.html" 
  }, 
  "devDependencies": { 
    "babel-plugin-transform-class-properties": "6.24.1", 
    "babel-preset-env": "1.6.1", 
    "babel-preset-react": "6.24.1", 
    "babel-core": "6.26.3", 
    "parcel-bundler": "1.8.1...