{"id":26175315,"url":"https://github.com/fernandozuchi/pratica17-09","last_synced_at":"2026-03-15T02:33:19.250Z","repository":{"id":257441409,"uuid":"858245383","full_name":"FernandoZuchi/pratica17-09","owner":"FernandoZuchi","description":"Repositório template para a prática da semana que irei aplicar na mentoria do dia 17/09 - Tema - Lidando com eventos no React","archived":false,"fork":false,"pushed_at":"2024-09-16T16:39:55.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T20:56:08.353Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FernandoZuchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-16T15:04:55.000Z","updated_at":"2024-09-17T14:44:17.000Z","dependencies_parsed_at":"2024-09-16T19:49:45.180Z","dependency_job_id":null,"html_url":"https://github.com/FernandoZuchi/pratica17-09","commit_stats":null,"previous_names":["fernandozuchi/pratica17-09"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/FernandoZuchi/pratica17-09","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica17-09","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica17-09/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica17-09/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica17-09/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FernandoZuchi","download_url":"https://codeload.github.com/FernandoZuchi/pratica17-09/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica17-09/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28016994,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T20:56:11.113Z","updated_at":"2025-12-25T02:03:38.308Z","avatar_url":"https://github.com/FernandoZuchi.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prática da Semana - 16/09 à 20/09 | Tema - Lidando com eventos no React\n\n**O tratamento de eventos é fundamental para entender como o React processa eventos do navegador e atualiza o DOM. Essa prática aborda como configurar manipuladores de eventos e prossegue para técnicas mais avançadas de gerenciamento de eventos. Você aprenderá como criar eventos em componentes React, passar argumentos para os manipuladores e evitar comportamentos padrão.**\n\n## **Criando o projeto**\n\nAbra a pasta desse repositório prática que você clonou com o VSCode, abra o terminal e inicie um projeto react:\n\n```prompt\nnpm create vite@latest\n```\n\nApós nomear o projeto, entrar na pasta e instalar as dependências com:\n\n```prompt\ncd nome_do_projeto\nnpm install\n```\n\nPodemos limpar os arquivos padrões que vem com o React + vite e rodar a aplicação para testar:\n\n```prompt\nnpm run dev\n```\n\n## **Como criar manipuladores de eventos em componentes React**\n\n### **Evento onClick**\nA criação de um evento no React começa com a anexação do nome do evento ao elemento que o disparará, com a função do manipulador referenciada nele. \n\n**Exemplo:**\n```html\n\u003cbutton onClick={handleClick}\u003e\n  Clique aqui\n\u003c/button\u003e\n```\n\nSeguido da definição de uma função manipuladora, ou seja, a função que será executada quando o evento for disparado.\n\n**Exemplo:**\n```javascript\nconst handleClick = () =\u003e {\n   alert('You clicked me');\n};\n```\n\nPara isso, dentro da pasta `src` crie a pasta `Components`. Dentro dessa pasta iremos criar um componente chamado `Button.jsx` com o seguinte código: \n\n```javascript\nimport React from 'react'\n\nconst Button = () =\u003e {\n    const handleClick = () =\u003e {\n        alert('Você clicou no botão!');\n    }\n\n    return (\n        \u003c\u003e\n            \u003cbutton onClick={handleClick}\u003e\n                Clique aqui\n            \u003c/button\u003e\n        \u003c/\u003e\n    )\n}\n\nexport default Button\n```\n\nAgora que temos nosso componente botão, vamos importá-lo e usá-lo no `App.jsx` de nossa aplicação:\n\n```javascript\nimport './App.css'\nimport Button from './Components/Button'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003cButton /\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n\n```\n\n## **Atualizando um estado com base em um evento**\n\nPara atualizar um estado no react, utilizamos do hook `useState`. Vamos criar agora um novo componente em nossa aplicação para reforçar esse conceito, crie na pasta `Components` o arquivo `CounterButton.jsx`:\n\n```javascript\nimport React from 'react'\nimport { useState } from 'react'\n\nconst CounterButton = () =\u003e {\n    const [count, setCount] = useState(0);\n\n    return (\n        \u003cdiv\u003e\n            \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrementar ⬆️\u003c/button\u003e\n            \u003ch1\u003e{count}\u003c/h1\u003e\n            \u003cbutton onClick={() =\u003e setCount(count - 1)}\u003eDecrementar ⬇️\u003c/button\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default CounterButton\n```\n\nRenderize isso em tela:\n\n```javascript\nimport './App.css'\nimport Button from './Components/Button'\nimport CounterButton from './Components/CounterButton'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      {/* \u003cButton /\u003e */}\n      \u003cCounterButton /\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n### **Evento onChange**\n\n`onChange` e `onSubmit` são outros eventos populares no React. `onChange` é usado em elementos de entrada de texto(`input`) e `onSubmit` são usados em elementos `form`.\n\nDentro da pasta `Components` crie um novo componente chamado input, para utilizarmos esses eventos na prática:\n\n```javascript\nimport React, { useState } from 'react'\n\nconst Input = () =\u003e {\n    const [inputValue, setInputValue] = useState('');\n\n    const handleChange = () =\u003e {\n        setInputValue(event.target.value);\n    }\n\n    return (\n        \u003cdiv\u003e\n            \u003cinput \n                type=\"text\"\n                value={inputValue}\n                onChange={handleChange}\n                placeholder='Digite algo...'\n            /\u003e\n            \u003cp\u003eVocê digitou: {inputValue}\u003c/p\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default Input\n```\n\nRenderize isso em tela:\n\n```javascript\nimport './App.css'\nimport Button from './Components/Button'\nimport CounterButton from './Components/CounterButton'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      {/* \u003cButton /\u003e */}\n      \u003cCounterButton /\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\nVeremos um exemplo de `onSubmit` na seção sobre como evitar comportamentos padrãa do navegador ao enviar um `form`\n\nOutros exemplos de eventos incluem eventos de teclado como `onKeyDown`, `onKeyPress`, e `onKeyUp`, eventos de mouse como `onMouseUp`, `onMouseDown`, `onMouseEnter`, `onDrag`, e mais. Qualquer evento popular em JavaScript está disponível em React. A única diferença é que os eventos são escritos em camelCaseReact.\n\n## **Passando argumentos/parâmetros para funções manipuladoras de eventos**\n\nPassar argumentos para manipuladores de eventos no React é um requisito comum quando você precisa executar ações em dados específicos associados a um evento. Por exemplo, excluir ou editar um recurso.\n\nPara fazer isso, a função manipuladora precisa receber um parâmetro:\n\n**Exemplo:**\n```javascript\nconst handleClick = (item) =\u003e {\n   console.log('Button click for:', item);\n };\n```\n\nEm seguida, você passa um argumento correspondente a esse parâmetro para a função anônima do evento:\n\n```html\n\u003cbutton onClick={() =\u003e handleClick(item)}\u003eClick Me\u003c/button\u003e\n```\n\nVamos agora criar um componente novo, para vermos isso na prática. Dentro da pasta `Components` crie o componente `TaskManager.jsx`:\n\n```javascript\nimport React, { useState } from 'react'\n\nconst TaskManager = () =\u003e {\n    // Tarefas predefinidas\n    const [tasks, setTasks] = useState([\n        { id: 1, text: 'Ler um artigo' },\n        { id: 2, text: 'Ler um livro' },\n        { id: 3, text: 'Estudar React' },\n        { id: 4, text: 'Dormir ' },\n    ])\n\n    // Função para deletar uma tarefa, de acordo com o ID da mesma\n    const deleteTask = (taskId) =\u003e {\n        console.log(taskId);\n\n        setTasks((currentTasks) =\u003e {\n            return currentTasks.filter((task) =\u003e task.id !== taskId)\n        });\n        alert('Deletada a task com ID: ' + taskId);\n    }\n\n\n    return (\n        \u003cdiv\u003e\n            \u003cul\u003e\n                {tasks.map((task) =\u003e (\n                    \u003cli key={task.id}\u003e\n                        {task.text}\n                        \u003cbutton onClick={() =\u003e deleteTask(task.id)}\u003e🗑️\u003c/button\u003e\n                    \u003c/li\u003e\n                ))}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default TaskManager\n```\n\nRenderize isso em tela:\n\n```javascript\nimport './App.css'\nimport Button from './Components/Button'\nimport CounterButton from './Components/CounterButton'\nimport Input from './Components/Input'\nimport TaskManager from './Components/TaskManager'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      {/* \u003cButton /\u003e */}\n      {/* \u003cCounterButton /\u003e */}\n      {/* \u003cInput /\u003e */}\n      \u003cTaskManager /\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n## **Padrões comuns no tratamento de eventos React**\n\nOs padrões de manipulação de eventos referem-se às técnicas para manipular interações do usuário dentro dos componentes React.\n\nDentro da pasta `Components`, crie o componente `CheckLogin.jsx`:\n\n```javascript\nimport React, { useState } from 'react'\n\nconst CheckLogin = () =\u003e {\n    const [isLoggedIn, setLoggedIn] = useState(false);\n\n    const toggleLogin = () =\u003e {\n        setLoggedIn(!isLoggedIn);\n    }\n\n    const handleLogin = () =\u003e {\n        if(isLoggedIn) {\n            alert('AVISO: Usuário está logado!');\n        }\n        else {\n            alert('AVISO: Usuário não está logado!');\n        }\n    }\n    \n\n    return (\n        \u003cdiv\u003e\n            \u003ch2\u003e\n                {isLoggedIn ? 'Usuário logado' : 'Usuário não logado'}\n            \u003c/h2\u003e\n            \u003cbutton onClick={handleLogin}\u003e\n                Checar estado\n            \u003c/button\u003e\n            \u003cbutton onClick={toggleLogin}\u003e\n                { isLoggedIn ? 'Log Out' : 'Log In'}\n            \u003c/button\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default CheckLogin\n```\n\nRenderize isso em tela:\n\n```javascript\nimport './App.css'\nimport Button from './Components/Button'\nimport CheckLogin from './Components/CheckLogin'\nimport CounterButton from './Components/CounterButton'\nimport Input from './Components/Input'\nimport TaskManager from './Components/TaskManager'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      {/* \u003cButton /\u003e */}\n      {/* \u003cCounterButton /\u003e */}\n      {/* \u003cInput /\u003e */}\n      {/* \u003cTaskManager /\u003e */}\n      \u003cCheckLogin /\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App\n```\n\n## **Melhores práticas para tratamento eficiente de eventos no React (EXTRA)**\n\n### Evite usar funções de seta anônimas dentro de eventos\n\nParece conveniente usar funções de seta diretamente em eventos, como `onClick={() =\u003e console.log('button clicked')})`. A desvantagem disso é que pode levar a problemas de desempenho porque uma nova função é criada em cada renderização.\n\nSempre defina a função do manipulador a ser executada quando o evento for disparado fora do método render para evitar esses problemas de desempenho.\n\n### Memorize eventos com o gancho useCallback\n\nPara componentes que são renderizados novamente com frequência, memorizar os manipuladores nele com o hook `useCallback` pode evitar renderizações novamente desnecessárias. Isso é útil ao passar eventos como props para componentes filhos que podem ser renderizados novamente desnecessariamente.\n\n### Evite comportamento padrão quando necessário\n\nUse `event.preventDefault()` em seus manipuladores de eventos quando precisar impedir que o navegador execute ações padrão, como enviar um formulário. No entanto, você deve usar esse método com prudência para evitar bloquear comportamentos do navegador desnecessariamente.\n\n### Limpar ouvintes de eventos\n\nSe você configurar seus ouvintes de eventos em `useEffect`, sempre retorne uma função de limpeza para remover o ouvinte de eventos. Caso contrário, isso causará vazamentos de memória.\n\n### Manipuladores de eventos de teste\n\nCertifique-se de que seus manipuladores de eventos estejam cobertos em seus testes unitários e de integração. Frameworks de teste como Jest combinados com React Testing Library podem ajudar a verificar se seus manipuladores de eventos estão funcionando conforme o esperado.\n\n# Conclusão\n\nNesta prática, você aprendeu os fundamentos do tratamento de eventos no React, com foco em como usar o sistema de eventos sintéticos do React para criar eventos em aplicativos da web React.\n\nExploramos a definição de manipuladores de eventos, a passagem de argumentos e a prevenção de comportamentos padrão do navegador para melhorar a experiência do usuário. Com esse conhecimento básico, você pode seguir aprofundando em React e implementar o tratamento de eventos em seus projetos para melhorar tanto a funcionalidade quanto o engajamento do usuário.\n\nAgradeço aos que chegaram até aqui, focos nos estudos!\n\nAbraços, \nFernando Zuchi\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Fpratica17-09","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandozuchi%2Fpratica17-09","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Fpratica17-09/lists"}