Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um inglês mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      React lets you add <em>event handlers</em> to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.#thedivisor#<li class="leading-relaxed mb-1">Different ways to write an event handler</li>
<li class="leading-relaxed mb-1">How to pass event handling logic from a parent component</li>
<li class="leading-relaxed mb-1">How events propagate and how to stop them</li>#thedivisor#To add an event handler, you will first define a function and then <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/passing-props-to-a-component">pass it as a prop</a> to the appropriate JSX tag. For example, here is a button that doesn’t do anything yet:#thedivisor#You can make it show a message when a user clicks by following these three steps:#thedivisor#<li class="leading-relaxed mb-1">Declare a function called <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">handleClick</code> <em>inside</em> your <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Button</code> component.</li>
<li class="leading-relaxed mb-1">Implement the logic inside that function (use <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">alert</code> to show the message).</li>
<li class="leading-relaxed mb-1">Add <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick={handleClick}</code> to the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;button&gt;</code> JSX.</li>#thedivisor#You defined the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">handleClick</code> function and then <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/passing-props-to-a-component">passed it as a prop</a> to <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;button&gt;</code>.  <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">handleClick</code> is an <strong class="font-bold">event handler.</strong> Event handler functions:#thedivisor#<li class="leading-relaxed mb-1">Are usually defined <em>inside</em> your components.</li>
<li class="leading-relaxed mb-1">Have names that start with <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">handle</code>, followed by the name of the event.</li>#thedivisor#By convention, it is common to name event handlers as <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">handle</code> followed by the event name. You’ll often see <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onClick={handleClick}</code>, <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">onMouseEnter={handleMouseEnter}</code>, and so on.#thedivisor#Alternatively, you can define an event handler inline in the JSX:#thedivisor#Or, more concisely, using an arrow function: