{"id":3533,"date":"2022-05-10T08:00:00","date_gmt":"2022-05-10T11:00:00","guid":{"rendered":"https:\/\/coodesh.com\/blog\/?p=3533"},"modified":"2022-08-11T09:35:32","modified_gmt":"2022-08-11T12:35:32","slug":"como-fazer-uma-to-do-list-em-react","status":"publish","type":"post","link":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/","title":{"rendered":"Como fazer uma to do list em React?"},"content":{"rendered":"\n<p>O React \u00e9 uma biblioteca JavaScript de c\u00f3digo aberto cujo foco \u00e9 criar interfaces de usu\u00e1rio em p\u00e1ginas web.&nbsp;<\/p>\n\n\n\n<p>Supondo que voc\u00ea recebeu o desafio de realizar uma to do list em React, veja dicas dos melhores passos a serem seguidos no desenvolvimento.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Requisitos do desafio&nbsp;<\/h2>\n\n\n\n<p>Neste challenge, a miss\u00e3o \u00e9 fazer uma to do list com base nos seguintes requisitos:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Adicionar uma nova tarefa;<\/li><li>Concluir uma tarefa;<\/li><li>Alternar entre Todos, Ativos e Conclu\u00eddos;<\/li><li>Remover uma ou todas as tarefas na guia Conclu\u00eddo;<\/li><li>(Opcional): armazenar os dados no armazenamento local de modo que, quando atualizo a p\u00e1gina, ainda posso ver meu progresso.<\/li><\/ol>\n\n\n\n<p>Em s\u00edntese, o objetivo era praticar os conhecimentos adquiridos e fixar as bases necess\u00e1rias para desenvolver uma aplica\u00e7\u00e3o em React.&nbsp;<\/p>\n\n\n\n<p>Ent\u00e3o, acompanhe a seguir os melhores passos adotados para criar a to do list em React.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In\u00edcio do projeto&nbsp;<\/h2>\n\n\n\n<p>Para criar a to do list em <a href=\"https:\/\/pt-br.reactjs.org\/\">React<\/a>, iniciaremos abrindo o terminal e rodando os seguintes comandos:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create-react-app nome-do-projeto\ncd nome-do-projeto\ncode .\nnpm run start<\/code><\/pre>\n\n\n\n<p>Ap\u00f3s rodar os comandos anteriores, \u00e9 hora de colocar em pr\u00e1tica o primeiro passo.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Deixe apenas o arquivo App.js e o Index.js na pasta src;<\/li><li>Remova as importa\u00e7\u00f5es dos arquivos exclu\u00eddos, pois do contr\u00e1rio vai aparecer a famigerada tela de erro;&nbsp;<\/li><li>Crie as seguintes pastas dentro do src (consideradas necess\u00e1rias para o projeto):<\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Assets<\/strong>: pasta em que foi colocada a imagem do lixeiro;<\/li><li><strong>Components<\/strong>: pasta que possui o Header, o componente de adicionar tarefa e o material UI que transita entre All, Active e Completed;<\/li><li><strong>Pages<\/strong>: pasta que possui as p\u00e1ginas de All, Active e Completed;<\/li><li><strong>Providers<\/strong>: pasta para o Global State.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>LEIA TAMB\u00c9M&nbsp;<\/p><p><a href=\"https:\/\/coodesh.com\/blog\/candidates\/carreiras\/veja-22-lugares-para-fazer-cursos-de-front-end-react-js\/\">Veja 22 lugares para fazer cursos de Front-end React.js<\/a><\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Resolu\u00e7\u00e3o do desafio&nbsp;<\/h2>\n\n\n\n<p>Dando continuidade \u00e0 nossa to do list em React, partimos agora para a resolu\u00e7\u00e3o do projeto. Veja as etapas seguintes:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Base para manipula\u00e7\u00e3o das tarefas<\/h3>\n\n\n\n<p>A solu\u00e7\u00e3o projetada foi criar um useState que fosse receber as informa\u00e7\u00f5es contidas no localStorage ou um array vazio que iria receber as tarefas como objetos dentro desse array cada vez que fosse adicionado.&nbsp;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/46549e012be9ad21d54657255ff41a64.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Adicionar uma nova tarefa<\/h3>\n\n\n\n<p>Para adicionar uma nova tarefa foi criada uma fun\u00e7\u00e3o que iria receber o value (nome da atividade) e seria atualizada essa nova informa\u00e7\u00e3o no array com o spread operator.&nbsp;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/552f40c7ce3bc8af27d64c3c7d43c289.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Concluir uma tarefa<\/h3>\n\n\n\n<p>Esse objeto tem o id, nome da tarefa e uma verifica\u00e7\u00e3o de true (completa) ou false (incompleta). A melhor op\u00e7\u00e3o foi colocar uma verifica\u00e7\u00e3o no input de checked. Quando clicado, uma fun\u00e7\u00e3o vai verificar se existe o mesmo id para modificar o false (incompleta) para true (completa) e vice-versa.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/f68aca253eb8289e5c0dcf2d6e680b9f.js\"><\/script>\n\n\n\n<p>Observe que na imagem acima h\u00e1 uma verifica\u00e7\u00e3o e, ent\u00e3o, retorna a tarefa diferente de como estava. Se estivesse true, iria para false, e se estivesse false retornaria para true.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Poder alternar entre Todos ativos e Conclu\u00eddos<\/h3>\n\n\n\n<p>Neste caso, como utilizamos o Material UI para alterar entre All, Active e Completed, aproveitamos para fazer a verifica\u00e7\u00e3o no mesmo arquivo.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/5e2816f2cb9a4838eef32d82227cc573.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Poder remover<\/h3>\n\n\n\n<p>Para ser removido, foi criada uma fun\u00e7\u00e3o que verifica se o id clicado existe no array e, se existir, vai retornar o restante das tarefas. Para remover todas as atividades conclu\u00eddas, siga a mesma linha de racioc\u00ednio.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/ea9ae70d73ce924fa2b7b9aad38f7398.js\"><\/script>\n\n\n\n<p>Portanto, observe que na fun\u00e7\u00e3o de \u201cremover todas as conclu\u00eddas\u201d foi utilizada a mesma l\u00f3gica, por\u00e9m sem a verifica\u00e7\u00e3o do id.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(Opcional) Poder atualizar a p\u00e1gina e n\u00e3o perder os dados<\/h3>\n\n\n\n<p>Nesta etapa do desafio, colocamos que o localStorage vai receber o token ou um array vazio caso ainda n\u00e3o exista esse token e, assim, n\u00f3s temos a possibilidade de setar no useState diretamente. Ap\u00f3s isso, colocamos que o useEffect vai setar um novo item no token do localStorage cada vez que o task for modificado.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/224c5c9076deab04fcef4075f28cef59.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Fazendo a to do list com Next.js&nbsp;<\/h2>\n\n\n\n<p>Para fazer uma to do list em Next.js, usamos os seguintes passos.&nbsp;<\/p>\n\n\n\n<p>Ela segue a mesma l\u00f3gica do React, mas por causa da necessidade de tratamento SSR, a melhor op\u00e7\u00e3o \u00e9 fazer a fragmenta\u00e7\u00e3o com useReduce.<\/p>\n\n\n\n<p>Portanto, foi separado um arquivo para o useEffect que iria fazer a primeira atualiza\u00e7\u00e3o e alterar a cada modifica\u00e7\u00e3o (adicionar, remover, etc). Enfim, segue-se a mesma l\u00f3gica que foi feita em React.<\/p>\n\n\n\n<p>No mesmo princ\u00edpio, usamos dois useEffect, sendo um para a primeira renderiza\u00e7\u00e3o quando entrar na aplica\u00e7\u00e3o e outro useEffect a cada modifica\u00e7\u00e3o das tasks.<\/p>\n\n\n\n<p>J\u00e1 as informa\u00e7\u00f5es de <strong>key<\/strong> e <strong>reducer<\/strong> foram passadas no ContextAPI.&nbsp;<\/p>\n\n\n\n<p>O dispatch no reduce funciona como o set do useState, por\u00e9m com benef\u00edcios.<\/p>\n\n\n\n<p><a href=\"https:\/\/pt-br.reactjs.org\/docs\/hooks-reference.html\">Leia a documenta\u00e7\u00e3o<\/a>.&nbsp;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/817447de4829c799ba9be997ad2372ef.js\"><\/script>\n\n\n\n<p>No AppContext, mantivemos as informa\u00e7\u00f5es. As fun\u00e7\u00f5es criadas em React foram movidas para um arquivo separado ReducerTasks. Esse arquivo, ali\u00e1s, possui todas as l\u00f3gicas dentro de uma fun\u00e7\u00e3o que est\u00e1 sendo enviada para o LocalStorage.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/7169f4c2907a3044ad56435dc686c7f0.js\"><\/script>\n\n\n\n<p>\u00c9 justamente nesse \u00faltimo arquivo da fragmenta\u00e7\u00e3o que toda a l\u00f3gica acontece. O state tem como padr\u00e3o ser undefined, mas lembre-se do circuito.<\/p>\n\n\n\n<p>Assim que a aplica\u00e7\u00e3o inicia, vai para o arquivo do LocalStorage com type \u2018set\u2019. Isso me coloca na primeira condi\u00e7\u00e3o do switch, tendo como retorno todas as tasks guardadas no actions. E ao mesmo tempo que o localStorage colocou&nbsp; o \u2018set\u2019 como type, ele tamb\u00e9m coloca que as tasks \u00e9 o que est\u00e1 salvo no localStorage do usu\u00e1rio. Assim, ele retorna essas informa\u00e7\u00f5es.<\/p>\n\n\n\n<p>O restante das condi\u00e7\u00f5es do switch \u00e9 para adicionar, remover, concluir, etc. Seguindo a mesma l\u00f3gica, mas \u00e9 usando dispatch e setando um objeto com o type (para ser verificado) e atualizar as tasks com as novas informa\u00e7\u00f5es.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/andreyna1808\/a266bfb3fb7e30c3edf99bc4c2bacbe0.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o&nbsp;<\/h2>\n\n\n\n<p>Como voc\u00ea viu o passo a passo inicial, foi criada a to do list em React. Sendo assim, o projeto como base inicial funciona. Mas agora s\u00f3 falta implementar os adicionais que ser\u00e3o acrescentados no futuro.<\/p>\n\n\n\n<p>E, ent\u00e3o, que tal aplicar o passo a passo para ir testando seus conhecimentos em React? Afinal, esse \u00e9 um dos recursos mais importantes do ecossistema JavaScript.&nbsp;<\/p>\n\n\n\n<p>Que tal testar seus conhecimentos no Fast Challenge e no Project Challenge da Coodesh? A dica b\u00f4nus \u00e9 fazer seu perfil totalmente gratuito na Coodesh, validar suas skills e aumentar as suas chances de conseguir o primeiro emprego ou a recoloca\u00e7\u00e3o no mercado tech.&nbsp;<a href=\"https:\/\/coodesh.com\/desenvolvedores\">Clique aqui<\/a> para saber mais.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O React \u00e9 uma biblioteca JavaScript de c\u00f3digo aberto cujo foco \u00e9 criar interfaces de usu\u00e1rio em p\u00e1ginas web.&nbsp; Supondo que voc\u00ea recebeu o desafio de realizar uma to do list em React, veja dicas dos melhores passos a serem seguidos no desenvolvimento.&nbsp; Requisitos do desafio&nbsp; Neste challenge, a miss\u00e3o \u00e9 fazer uma to do [&hellip;] <a class=\"g1-link g1-link-more\" href=\"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/\">Ler mais<\/a><\/p>\n","protected":false},"author":9,"featured_media":3563,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[711,46,51,228,49,713,712],"class_list":{"0":"post-3533","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-desafios","8":"tag-challenge","9":"tag-desenvolvedor","10":"tag-desenvolvimento","11":"tag-framework","12":"tag-javascript","13":"tag-passo-a-passo","14":"tag-to-do-list"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como fazer uma to do list em React?<\/title>\n<meta name=\"description\" content=\"O desenvolvedor pode conferir o passo a passo de como fazer uma to do list em React, um dos frameworks mais usados no desenvolvimento web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como fazer uma to do list em React?\" \/>\n<meta property=\"og:description\" content=\"O desenvolvedor pode conferir o passo a passo de como fazer uma to do list em React, um dos frameworks mais usados no desenvolvimento web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-10T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-11T12:35:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/05\/fazer-to-do-list-em-react-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andreyna Carvalho\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andreyna Carvalho\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/\"},\"author\":{\"name\":\"Andreyna Carvalho\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/person\\\/daed196213bd7a7cd96924ff38e42019\"},\"headline\":\"Como fazer uma to do list em React?\",\"datePublished\":\"2022-05-10T11:00:00+00:00\",\"dateModified\":\"2022-08-11T12:35:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/\"},\"wordCount\":1106,\"publisher\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/fazer-to-do-list-em-react-scaled.jpg\",\"keywords\":[\"challenge\",\"desenvolvedor\",\"desenvolvimento\",\"framework\",\"Javascript\",\"passo a passo\",\"to do list\"],\"articleSection\":[\"Desafios\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/\",\"name\":\"Como fazer uma to do list em React?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/fazer-to-do-list-em-react-scaled.jpg\",\"datePublished\":\"2022-05-10T11:00:00+00:00\",\"dateModified\":\"2022-08-11T12:35:32+00:00\",\"description\":\"O desenvolvedor pode conferir o passo a passo de como fazer uma to do list em React, um dos frameworks mais usados no desenvolvimento web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/fazer-to-do-list-em-react-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/fazer-to-do-list-em-react-scaled.jpg\",\"width\":2560,\"height\":1440,\"caption\":\"fazer to do list em react\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/como-fazer-uma-to-do-list-em-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desafios\",\"item\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/desafios\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como fazer uma to do list em React?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/\",\"name\":\"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o\",\"description\":\"Conte\u00fados para ajudar sua empresa a contratar profissionais de tecnologia e dicas para programadores sobre: carreira, hard skills e soft skills. Confira! \",\"publisher\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#organization\",\"name\":\"Coodesh\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Original2x.png\",\"contentUrl\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Original2x.png\",\"width\":800,\"height\":246,\"caption\":\"Coodesh\"},\"image\":{\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/coodesh.com\\\/blog\\\/#\\\/schema\\\/person\\\/daed196213bd7a7cd96924ff38e42019\",\"name\":\"Andreyna Carvalho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g\",\"caption\":\"Andreyna Carvalho\"},\"description\":\"Sempre levei a tecnologia e a paix\u00e3o pelos c\u00f3digos al\u00e9m de uma simples forma de trabalho. Estou focada em me aprofundar e conseguir impactar as pessoas com novas tecnologias. Hoje sou DevRel na Coodesh.\",\"url\":\"https:\\\/\\\/www.linkedin.com\\\/in\\\/andreyna-carvalho-997273231\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como fazer uma to do list em React?","description":"O desenvolvedor pode conferir o passo a passo de como fazer uma to do list em React, um dos frameworks mais usados no desenvolvimento web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/","og_locale":"pt_BR","og_type":"article","og_title":"Como fazer uma to do list em React?","og_description":"O desenvolvedor pode conferir o passo a passo de como fazer uma to do list em React, um dos frameworks mais usados no desenvolvimento web.","og_url":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/","og_site_name":"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o","article_published_time":"2022-05-10T11:00:00+00:00","article_modified_time":"2022-08-11T12:35:32+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/05\/fazer-to-do-list-em-react-scaled.jpg","type":"image\/jpeg"}],"author":"Andreyna Carvalho","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andreyna Carvalho","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#article","isPartOf":{"@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/"},"author":{"name":"Andreyna Carvalho","@id":"https:\/\/coodesh.com\/blog\/#\/schema\/person\/daed196213bd7a7cd96924ff38e42019"},"headline":"Como fazer uma to do list em React?","datePublished":"2022-05-10T11:00:00+00:00","dateModified":"2022-08-11T12:35:32+00:00","mainEntityOfPage":{"@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/"},"wordCount":1106,"publisher":{"@id":"https:\/\/coodesh.com\/blog\/#organization"},"image":{"@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#primaryimage"},"thumbnailUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/05\/fazer-to-do-list-em-react-scaled.jpg","keywords":["challenge","desenvolvedor","desenvolvimento","framework","Javascript","passo a passo","to do list"],"articleSection":["Desafios"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/","url":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/","name":"Como fazer uma to do list em React?","isPartOf":{"@id":"https:\/\/coodesh.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#primaryimage"},"image":{"@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#primaryimage"},"thumbnailUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/05\/fazer-to-do-list-em-react-scaled.jpg","datePublished":"2022-05-10T11:00:00+00:00","dateModified":"2022-08-11T12:35:32+00:00","description":"O desenvolvedor pode conferir o passo a passo de como fazer uma to do list em React, um dos frameworks mais usados no desenvolvimento web.","breadcrumb":{"@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#primaryimage","url":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/05\/fazer-to-do-list-em-react-scaled.jpg","contentUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2022\/05\/fazer-to-do-list-em-react-scaled.jpg","width":2560,"height":1440,"caption":"fazer to do list em react"},{"@type":"BreadcrumbList","@id":"https:\/\/coodesh.com\/blog\/desafios\/como-fazer-uma-to-do-list-em-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coodesh.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Desafios","item":"https:\/\/coodesh.com\/blog\/desafios\/"},{"@type":"ListItem","position":3,"name":"Como fazer uma to do list em React?"}]},{"@type":"WebSite","@id":"https:\/\/coodesh.com\/blog\/#website","url":"https:\/\/coodesh.com\/blog\/","name":"Blog: Recrutar Desenvolvedores e Conte\u00fado de Programa\u00e7\u00e3o","description":"Conte\u00fados para ajudar sua empresa a contratar profissionais de tecnologia e dicas para programadores sobre: carreira, hard skills e soft skills. Confira! ","publisher":{"@id":"https:\/\/coodesh.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/coodesh.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/coodesh.com\/blog\/#organization","name":"Coodesh","url":"https:\/\/coodesh.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/coodesh.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2020\/08\/Original2x.png","contentUrl":"https:\/\/coodesh.com\/blog\/wp-content\/uploads\/2020\/08\/Original2x.png","width":800,"height":246,"caption":"Coodesh"},"image":{"@id":"https:\/\/coodesh.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/coodesh.com\/blog\/#\/schema\/person\/daed196213bd7a7cd96924ff38e42019","name":"Andreyna Carvalho","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b9039c62055bb58c71929dc27d8ffd6f181394394f15e8144ee40af38f33c43?s=96&d=mm&r=g","caption":"Andreyna Carvalho"},"description":"Sempre levei a tecnologia e a paix\u00e3o pelos c\u00f3digos al\u00e9m de uma simples forma de trabalho. Estou focada em me aprofundar e conseguir impactar as pessoas com novas tecnologias. Hoje sou DevRel na Coodesh.","url":"https:\/\/www.linkedin.com\/in\/andreyna-carvalho-997273231\/"}]}},"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts\/3533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/comments?post=3533"}],"version-history":[{"count":8,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts\/3533\/revisions"}],"predecessor-version":[{"id":3573,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/posts\/3533\/revisions\/3573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/media\/3563"}],"wp:attachment":[{"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/media?parent=3533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/categories?post=3533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coodesh.com\/blog\/wp-json\/wp\/v2\/tags?post=3533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}