{"id":22266348,"url":"https://github.com/hbtlucas/templates-web-react","last_synced_at":"2025-03-25T14:22:37.349Z","repository":{"id":257682318,"uuid":"859018474","full_name":"hbtlucas/templates-web-react","owner":"hbtlucas","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-23T23:26:53.000Z","size":56,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T13:13:56.159Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hbtlucas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-17T23:53:22.000Z","updated_at":"2024-09-23T23:26:57.000Z","dependencies_parsed_at":"2024-09-18T04:10:42.893Z","dependency_job_id":"138a2c83-9b29-4607-970f-dbe4f05eedee","html_url":"https://github.com/hbtlucas/templates-web-react","commit_stats":null,"previous_names":["hbtlucas/templates-web-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbtlucas%2Ftemplates-web-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbtlucas%2Ftemplates-web-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbtlucas%2Ftemplates-web-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbtlucas%2Ftemplates-web-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hbtlucas","download_url":"https://codeload.github.com/hbtlucas/templates-web-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245477250,"owners_count":20621797,"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","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":"2024-12-03T10:18:29.438Z","updated_at":"2025-03-25T14:22:37.316Z","avatar_url":"https://github.com/hbtlucas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eGuia de Anotações para Projetos React\u003c/h1\u003e\n\n\u003ch4\u003e1.1. Criar um Novo Projeto React\u003cbr\u003e\u003c/h4\u003e\nnpx create-react-app nome-do-projeto\u003cbr\u003e\n\n\u003ch4\u003e2.1. Instalar Dependências\u003cbr\u003e\u003c/h4\u003e\nnpm install\u003cbr\u003e\n\n\u003ch4\u003e2.2. Adicionar Novas Dependências\u003cbr\u003e\u003c/h4\u003e\nnpm install nome-da-dependencia\u003cbr\u003e\n\nPara adicionar uma dependência de desenvolvimento (devDependency):\u003cbr\u003e\nnpm install nome-da-dependencia --save-dev\u003cbr\u003e\n\n\u003ch4\u003e3.1. Iniciar o Servidor de Desenvolvimento\u003cbr\u003e\u003c/h4\u003e\nnpm start\u003cbr\u003e\n\n\u003ch4\u003e3.2. Construir o Projeto para Produção\u003cbr\u003e\u003c/h4\u003e\nnpm run build\u003cbr\u003e\n\n\u003ch1\u003e4. Solução de Problemas Comuns\u003c/h1\u003e\n\n4.1. next não é reconhecido como um comando\u003cbr\u003e\nnpm install next react react-dom\u003cbr\u003e\n\n4.2. Diretório .next não encontrado\u003cbr\u003e\nnpm run build\u003cbr\u003e\n\n4.3. Erros de Vulnerabilidades de Segurança\u003cbr\u003e\nnpm audit fix\u003cbr\u003e\n\nPara forçar correções (pode atualizar para versões incompatíveis):\u003cbr\u003e\nnpm audit fix --force\u003cbr\u003e\n\n\u003ch4\u003e5. Comandos Úteis\u003cbr\u003e\u003c/h4\u003e\n5.1. Atualizar Dependências\u003cbr\u003e\nnpm update\u003cbr\u003e\n\n6. Ambiente de Desenvolvimento\u003cbr\u003e\n6.1. Configuração de Variáveis de Ambiente\u003cbr\u003e\nCrie um arquivo .env na raiz do projeto para definir variáveis de ambiente. Exemplo:\u003cbr\u003e\nREACT_APP_API_URL=http://api.exemplo.com\u003cbr\u003e\n\n6.2. Limpar Cache\u003cbr\u003e\nnpm cache clean --force\u003cbr\u003e\n\n\n\u003ch1\u003eConceitos:\u003c/h1\u003e\n\n### Objetos\nObjetos são coleções de dados e funcionalidades em JavaScript. Eles são usados para armazenar informações como pares de chave-valor e são extremamente úteis para organizar dados.\n\n```js\n// Exemplo de um objeto:\nconst pessoa = {\n  nome: 'João',\n  idade: 30,\n  profissao: 'Desenvolvedor',\n  saudacao: function() {\n    console.log(`Olá, meu nome é ${this.nome}`);\n  }\n};\n\n// Acessando propriedades e métodos do objeto:\nconsole.log(pessoa.nome); // João\npessoa.saudacao(); // Olá, meu nome é João\n```\n\n### Arrays\nArrays são listas ordenadas de valores. Eles podem armazenar qualquer tipo de dado, incluindo números, strings, objetos e até mesmo outros arrays.\n\n```js\n// Exemplo de um array:\nconst numeros = [1, 2, 3, 4, 5];\n\n// Acessando elementos e métodos do array:\nconsole.log(numeros[0]); // 1\nnumeros.push(6); // Adiciona 6 ao final do array\nconsole.log(numeros.length); // 6\n```\n\n### Funções\nFunções são blocos de código reutilizáveis que executam uma tarefa específica. Elas podem receber parâmetros e retornar valores.\n\n```js\n// Exemplo de uma função:\nfunction soma(a, b) {\n  return a + b;\n}\n\nconst resultado = soma(3, 4); // 7\nconsole.log(resultado); // 7\n```\n\n### Promises\nPromises são usadas para lidar com operações assíncronas, como requisições HTTP ou leituras de arquivos. Elas representam um valor que pode estar disponível agora, no futuro ou nunca.\n\n```js\n// Exemplo de uma Promise:\nconst promessa = new Promise((resolve, reject) =\u003e {\n  const sucesso = true;\n\n  if (sucesso) {\n    resolve('Operação bem-sucedida!');\n  } else {\n    reject('Ocorreu um erro.');\n  }\n});\n\npromessa\n  .then((mensagem) =\u003e {\n    console.log(mensagem); // 'Operação bem-sucedida!'\n  })\n  .catch((erro) =\u003e {\n    console.log(erro);\n  });\n```\n\n### Funções Async/Await\nAsync/Await é uma sintaxe mais simples para trabalhar com Promises. `async` define uma função assíncrona, e `await` pausa a execução da função até que a Promise seja resolvida.\n\n```js\n// Exemplo de função async/await:\nasync function obterDados() {\n  try {\n    const resposta = await fetch('https://api.example.com/dados');\n    const dados = await resposta.json();\n    console.log(dados);\n  } catch (erro) {\n    console.error('Erro ao obter dados:', erro);\n  }\n}\n\nobterDados();\n```\n\n### Arrow Functions\nArrow Functions são uma sintaxe mais concisa para escrever funções. Elas são especialmente úteis em callbacks e funções de array. A principal diferença é que elas não têm seu próprio `this` ou `arguments`.\n\n```js\n// Exemplo de Arrow Function:\nconst saudacao = (nome) =\u003e `Olá, ${nome}!`;\n\nconsole.log(saudacao('Maria')); // Olá, Maria!\n\n// Exemplo com map:\nconst numeros = [1, 2, 3, 4];\nconst dobro = numeros.map((numero) =\u003e numero * 2);\nconsole.log(dobro); // [2, 4, 6, 8]\n```\n\nEsses conceitos são fundamentais para entender e trabalhar com JavaScript de forma eficiente. Se precisar de mais detalhes sobre algum deles, posso aprofundar mais!\n\n\u003ch1\u003ePossíveis problemas\u003c/h1\u003e\n\nPara que a lista de usuários adicionados no componente Add apareça na sua home.js, você precisará garantir que a lista dadosTable seja compartilhada entre os dois componentes. No momento, Home e Add têm seus próprios estados independentes, o que significa que as adições feitas em Add não são refletidas em Home.\n\nAqui estão algumas maneiras de resolver isso:\n\n1. Usar um Componente Pai para Compartilhar Estado\nUma abordagem comum em React é elevar o estado ao componente pai. Aqui está um exemplo de como você pode fazer isso:\n\nCriar um Componente Pai\njavascript\nCopiar código\nimport React, { useState } from 'react';\nimport Add from './Add'; // ajuste o caminho conforme necessário\nimport Home from './Home'; // ajuste o caminho conforme necessário\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nfunction App() {\n    const [dadosTable, setDadosTable] = useState(DadosTable);\n\n    return (\n        \u003cRouter\u003e\n            \u003cRoutes\u003e\n                \u003cRoute path=\"/\" element={\u003cHome dadosTable={dadosTable} setDadosTable={setDadosTable} /\u003e} /\u003e\n                \u003cRoute path=\"/create\" element={\u003cAdd setDadosTable={setDadosTable} /\u003e} /\u003e\n            \u003c/Routes\u003e\n        \u003c/Router\u003e\n    );\n}\n\nexport default App;\n2. Modificar o Componente Add\nAgora, modifique o seu componente Add para usar o setDadosTable que foi passado como uma prop:\n\njavascript\nCopiar código\nfunction Add({ setDadosTable }) {\n    // ... o resto do código\n    const AddUser = (newUser) =\u003e {\n        if (newUser.name \u0026\u0026 newUser.age \u0026\u0026 newUser.email) {\n            const newUserWithId = {\n                id: String(dadosTable.length + 1), // Gera um novo id baseado no comprimento do array\n                name: newUser.name,\n                age: newUser.age,\n                email: newUser.email\n            };\n            setDadosTable(prevDados =\u003e [...prevDados, newUserWithId]); // Atualiza a tabela de dados\n            history('/'); // Navega de volta para a página inicial\n        } else {\n            alert(\"Por favor, preencha todos os campos!\");\n        }\n    };\n    // ... o resto do código\n}\n3. Modificar o Componente Home\nAtualize seu componente Home para usar a lista de usuários passada como props:\n\njavascript\nCopiar código\nfunction Home({ dadosTable, setDadosTable }) {\n    let history = useNavigate();\n\n    const DeleteFunction = (id) =\u003e {\n        const newTable = dadosTable.filter(item =\u003e item.id !== id);\n        setDadosTable(newTable);\n        history('/'); \n    };\n\n    return (\n        \u003cFragment\u003e\n            \u003cdiv style={{margin:\"20px\"}}\u003e\n                \u003cTable\u003e\n                    \u003cthead\u003e\n                        \u003ctr\u003e\n                            \u003cth\u003eNome\u003c/th\u003e\n                            \u003cth\u003eIdade\u003c/th\u003e\n                            \u003cth\u003eEmail\u003c/th\u003e\n                            \u003cth\u003eAções\u003c/th\u003e\n                        \u003c/tr\u003e\n                    \u003c/thead\u003e\n                    \u003ctbody\u003e\n                        {\n                            dadosTable.map((item) =\u003e (\n                                \u003ctr key={item.id}\u003e\n                                    \u003ctd\u003e{item.name}\u003c/td\u003e\n                                    \u003ctd\u003e{item.age}\u003c/td\u003e\n                                    \u003ctd\u003e{item.email || 'N/A'}\u003c/td\u003e\n                                    \u003ctd\u003e\n                                        \u003cButton onClick={() =\u003e alert(item.id)} variant=\"primary\"\u003eEditar\u003c/Button\u003e\n                                        \u003cButton onClick={() =\u003e DeleteFunction(item.id)} variant=\"danger\" style={{ marginLeft: \"10px\" }}\u003eExcluir\u003c/Button\u003e\n                                    \u003c/td\u003e\n                                \u003c/tr\u003e\n                            ))\n                        }\n                    \u003c/tbody\u003e\n                \u003c/Table\u003e\n                \u003cbr /\u003e\n                \u003cLink to=\"/create\"\u003e\n                    \u003cButton\u003eCreate\u003c/Button\u003e\n                \u003c/Link\u003e\n            \u003c/div\u003e\n        \u003c/Fragment\u003e\n    );\n}\n\nexport default Home;\nResumo\nCom essas modificações, agora Home e Add compartilham o mesmo estado dadosTable. Quando um usuário é adicionado em Add, ele será refletido em Home quando você navegar de volta. Isso garante que as duas partes do seu aplicativo funcionem juntas corretamente.\n\nSe precisar de mais assistência, é só avisar!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhbtlucas%2Ftemplates-web-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhbtlucas%2Ftemplates-web-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhbtlucas%2Ftemplates-web-react/lists"}