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 allows you to add <em>event handlers</em> to your JSX. Event handlers are functions that you create, and they get triggered when users interact with your app, like clicking, hovering, or focusing on form inputs, etc.#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 first need to define a function, 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 right JSX tag. For example, here is a button that doesn't do anything yet:#thedivisor#You can make it display a message when a user clicks by following these three steps:#thedivisor#<li class="leading-relaxed mb-1">Create 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">Write 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> plus the event name. You will 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 simply, using an arrow function: