Understanding Event Handling in React

A button that shows an alert when clicked needs two steps in plain JavaScript, but only one in React. In plain JavaScript, you first find the element in the page and then attach a listener to it. In React, you write the listener into the JSX next to the element it belongs to.

Here is the plain JavaScript version:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Handling in Vanilla JS</title>
</head>
<body>
  <button id="myButton">Click Me!</button>

  <script>