{"id":2351,"date":"2026-08-23T15:24:18","date_gmt":"2026-08-23T18:24:18","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2351"},"modified":"2026-08-23T15:27:38","modified_gmt":"2026-08-23T18:27:38","slug":"react-com-json-server-crie-um-crud-sem-precisar-de-um-backend","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2351","title":{"rendered":"React com JSON Server: Crie um CRUD sem Precisar de um Backend"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Voc\u00ea est\u00e1 desenvolvendo uma aplica\u00e7\u00e3o em <strong>React<\/strong>, mas o backend ainda n\u00e3o est\u00e1 pronto?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso n\u00e3o significa que o desenvolvimento do frontend precisa parar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das possibilidades \u00e9 utilizar o <strong>JSON Server<\/strong> para criar uma API REST simulada e continuar desenvolvendo e testando sua aplica\u00e7\u00e3o React normalmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto vamos construir um <strong>Gerenciador de Tarefas com React e JSON Server<\/strong>, utilizando uma estrutura que permite posteriormente substituir a API simulada por um backend real sem precisar reconstruir toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 JSON Server?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Durante o desenvolvimento de uma aplica\u00e7\u00e3o frontend, nem sempre temos uma API real dispon\u00edvel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine uma equipe em que o frontend e o backend est\u00e3o sendo desenvolvidos simultaneamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O desenvolvedor frontend precisa criar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>componentes;<\/li>\n\n\n\n<li>formul\u00e1rios;<\/li>\n\n\n\n<li>listagens;<\/li>\n\n\n\n<li>valida\u00e7\u00f5es;<\/li>\n\n\n\n<li>integra\u00e7\u00e3o com API;<\/li>\n\n\n\n<li>tratamento dos dados.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Mas os endpoints do backend ainda n\u00e3o est\u00e3o dispon\u00edveis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em vez de esperar, podemos trabalhar com uma <strong>API simulada<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 exatamente a\u00ed que entra o JSON Server.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A arquitetura utilizada durante o desenvolvimento pode ser representada assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React\n   \u2193\nService\n   \u2193\nHTTP\n   \u2193\nJSON Server\n   \u2193\ndb.json\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O React continua realizando requisi\u00e7\u00f5es HTTP normalmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A diferen\u00e7a \u00e9 que, em vez de uma API desenvolvida em Node.js, Java, PHP, Python, C# ou outra tecnologia, quem responde temporariamente \u00e0s requisi\u00e7\u00f5es \u00e9 o JSON Server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Projeto: Gerenciador de Tarefas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para colocar esse conceito em pr\u00e1tica, desenvolvemos um pequeno <strong>Gerenciador de Tarefas<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A aplica\u00e7\u00e3o permite:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>listar tarefas;<\/li>\n\n\n\n<li>cadastrar novas tarefas;<\/li>\n\n\n\n<li>marcar uma tarefa como conclu\u00edda;<\/li>\n\n\n\n<li>reabrir uma tarefa;<\/li>\n\n\n\n<li>excluir tarefas;<\/li>\n\n\n\n<li>confirmar antes da exclus\u00e3o;<\/li>\n\n\n\n<li>manter os dados armazenados no <code>db.json<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar de ser uma aplica\u00e7\u00e3o simples, ela permite trabalhar v\u00e1rios conceitos importantes do desenvolvimento com React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tecnologias utilizadas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto utilizamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React;<\/li>\n\n\n\n<li>Vite;<\/li>\n\n\n\n<li>JavaScript;<\/li>\n\n\n\n<li>JSON Server;<\/li>\n\n\n\n<li>Fetch API;<\/li>\n\n\n\n<li>HTML;<\/li>\n\n\n\n<li>CSS.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m trabalhamos conceitos importantes do React, como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>componentes;<\/li>\n\n\n\n<li><code>useState<\/code>;<\/li>\n\n\n\n<li><code>useEffect<\/code>;<\/li>\n\n\n\n<li>props;<\/li>\n\n\n\n<li>eventos;<\/li>\n\n\n\n<li>renderiza\u00e7\u00e3o de listas;<\/li>\n\n\n\n<li>atualiza\u00e7\u00e3o de estado;<\/li>\n\n\n\n<li>comunica\u00e7\u00e3o com uma API.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">O arquivo db.json<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O JSON Server utiliza um arquivo JSON como base para os dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No nosso projeto temos uma estrutura semelhante a esta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"tarefas\": &#91;\n    {\n      \"id\": 1,\n      \"titulo\": \"Estudar React\",\n      \"concluida\": false\n    },\n    {\n      \"id\": 2,\n      \"titulo\": \"Aprender JSON Server\",\n      \"concluida\": true\n    }\n  ]\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A partir desse pequeno arquivo, conseguimos trabalhar com endpoints HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET    \/tarefas\nPOST   \/tarefas\nPATCH  \/tarefas\/:id\nDELETE \/tarefas\/:id\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permite que nossa aplica\u00e7\u00e3o React trabalhe como se estivesse consumindo uma API REST.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GET: buscando as tarefas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para buscar as tarefas utilizamos uma requisi\u00e7\u00e3o <code>GET<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const resposta = await fetch(\n  \"http:\/\/localhost:3001\/tarefas\"\n);\n\nconst dados = await resposta.json();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Os dados recebidos podem ent\u00e3o ser armazenados em um estado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setTarefas(dados);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Na aplica\u00e7\u00e3o utilizamos tamb\u00e9m o <code>useEffect<\/code> para realizar o carregamento inicial dos dados.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useEffect(() =&gt; {\n  carregarTarefas();\n}, &#91;]);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, quando o componente \u00e9 carregado, o React solicita os dados da nossa API simulada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">POST: cadastrando uma nova tarefa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para cadastrar uma tarefa utilizamos o m\u00e9todo HTTP <code>POST<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const resposta = await fetch(\n  \"http:\/\/localhost:3001\/tarefas\",\n  {\n    method: \"POST\",\n\n    headers: {\n      \"Content-Type\": \"application\/json\"\n    },\n\n    body: JSON.stringify({\n      titulo: titulo,\n      concluida: false\n    })\n  }\n);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui aparecem conceitos importantes quando trabalhamos com APIs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>m\u00e9todo HTTP;<\/li>\n\n\n\n<li>cabe\u00e7alhos;<\/li>\n\n\n\n<li><code>Content-Type<\/code>;<\/li>\n\n\n\n<li>corpo da requisi\u00e7\u00e3o;<\/li>\n\n\n\n<li>convers\u00e3o de objetos JavaScript para JSON.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">PATCH: atualizando uma tarefa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quando queremos alterar apenas parte de um recurso podemos utilizar <code>PATCH<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No nosso exemplo, precisamos alterar apenas a propriedade:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>concluida\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos enviar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  concluida: true\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">para:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PATCH \/tarefas\/1\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa maneira conseguimos marcar uma tarefa como conclu\u00edda ou reabri-la.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DELETE: excluindo uma tarefa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para remover uma tarefa utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DELETE \/tarefas\/:id\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>await fetch(\n  `http:\/\/localhost:3001\/tarefas\/${id}`,\n  {\n    method: \"DELETE\"\n  }\n);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de realizar a exclus\u00e3o, nossa aplica\u00e7\u00e3o tamb\u00e9m solicita uma confirma\u00e7\u00e3o do usu\u00e1rio.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const confirmar = window.confirm(\n  \"Tem certeza que deseja excluir esta tarefa?\"\n);\n\nif (!confirmar) {\n  return;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse pequeno detalhe evita exclus\u00f5es acidentais e tamb\u00e9m permite discutir boas pr\u00e1ticas de interface com o usu\u00e1rio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Organizando a comunica\u00e7\u00e3o com a API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um ponto importante do projeto \u00e9 n\u00e3o espalhar chamadas <code>fetch()<\/code> por todos os componentes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Criamos uma camada de servi\u00e7o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>src\/\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 Header.jsx\n\u2502   \u251c\u2500\u2500 Footer.jsx\n\u2502   \u251c\u2500\u2500 FormTarefa.jsx\n\u2502   \u2514\u2500\u2500 ListaTarefas.jsx\n\u2502\n\u251c\u2500\u2500 services\/\n\u2502   \u2514\u2500\u2500 tarefaService.js\n\u2502\n\u251c\u2500\u2500 App.jsx\n\u2514\u2500\u2500 main.jsx\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O arquivo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>tarefaService.js\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">fica respons\u00e1vel pela comunica\u00e7\u00e3o com a API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim podemos ter fun\u00e7\u00f5es como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>buscarTarefas();\ncriarTarefa();\natualizarStatus();\nexcluirTarefa();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Os componentes n\u00e3o precisam conhecer todos os detalhes da comunica\u00e7\u00e3o HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Temos ent\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>COMPONENTES REACT\n        \u2193\n       APP\n        \u2193\ntarefaService.js\n        \u2193\n      API\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Por que separar o Service?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Essa separa\u00e7\u00e3o se torna especialmente interessante quando pensamos na evolu\u00e7\u00e3o de uma aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoje podemos ter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React\n   \u2193\nService\n   \u2193\nJSON Server\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Amanh\u00e3 podemos substituir por:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React\n   \u2193\nService\n   \u2193\nNode.js + Express\n   \u2193\nBanco de Dados\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ou at\u00e9:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React\n   \u2193\nService\n   \u2193\nJava + Spring\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O frontend n\u00e3o deveria precisar conhecer a tecnologia utilizada internamente pelo backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O importante \u00e9 conhecer o <strong>contrato da API<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se os endpoints e os dados esperados continuarem compat\u00edveis, grande parte da aplica\u00e7\u00e3o React pode permanecer exatamente igual.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O frontend n\u00e3o precisa esperar o backend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Esse talvez seja o conceito mais importante deste projeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em projetos reais, frontend e backend podem ser desenvolvidos simultaneamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O desenvolvedor frontend n\u00e3o deveria precisar ficar parado esperando toda a implementa\u00e7\u00e3o do servidor ficar pronta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos definir previamente como ser\u00e1 a comunica\u00e7\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/tarefas\nPOST \/tarefas\nPATCH \/tarefas\/:id\nDELETE \/tarefas\/:id\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e qual ser\u00e1 a estrutura dos dados:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"id\": 1,\n  \"titulo\": \"Estudar React\",\n  \"concluida\": false\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com esse contrato definido, podemos criar uma API simulada e desenvolver o frontend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Posteriormente, o mock \u00e9 substitu\u00eddo pela API real.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3digo completo no GitHub<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O projeto completo utilizado neste artigo est\u00e1 dispon\u00edvel gratuitamente no GitHub.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No reposit\u00f3rio voc\u00ea encontrar\u00e1 o c\u00f3digo React, os componentes, o Service, o arquivo <code>db.json<\/code> e a implementa\u00e7\u00e3o do CRUD com JSON Server.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Acesse o projeto:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/marcoscaldas\/ReactComJSONServer\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/marcoscaldas\/ReactComJSONServer<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O reposit\u00f3rio tamb\u00e9m possui vers\u00f5es do projeto que podem ser utilizadas para acompanhar o desenvolvimento passo a passo.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Para iniciar o JSON Server:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run server\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Em outro terminal, execute o React:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Em breve: live com o projeto completo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83c\udfa5 <strong>Em breve teremos uma live completa no canal Desvendando o C\u00f3digo desenvolvendo este projeto passo a passo.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na live vamos entender como utilizar o JSON Server como uma API simulada, consumir os dados com React e construir as opera\u00e7\u00f5es de um CRUD utilizando <code>GET<\/code>, <code>POST<\/code>, <code>PATCH<\/code> e <code>DELETE<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim que a aula estiver dispon\u00edvel, o v\u00eddeo ser\u00e1 adicionado aqui ao artigo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JSON Server n\u00e3o substitui o aprendizado de desenvolvimento backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A proposta \u00e9 outra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele permite <strong>simular uma API durante o desenvolvimento do frontend<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Isso possibilita desenvolver componentes, telas, formul\u00e1rios e integra\u00e7\u00f5es sem precisar esperar que uma API real esteja completamente implementada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste projeto utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React\n   \u2193\nService\n   \u2193\nJSON Server\n   \u2193\ndb.json\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mas futuramente podemos evoluir para:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React\n   \u2193\nService\n   \u2193\nAPI REST real\n   \u2193\nBackend\n   \u2193\nBanco de Dados\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">E \u00e9 justamente essa separa\u00e7\u00e3o que permite que frontend e backend evoluam de maneira independente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 aprendendo React, clone o projeto, volte para a vers\u00e3o inicial e tente reconstruir o CRUD antes de consultar a vers\u00e3o final.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 uma \u00f3tima forma de praticar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea est\u00e1 desenvolvendo uma aplica\u00e7\u00e3o em React, mas o backend ainda n\u00e3o est\u00e1 pronto? Isso n\u00e3o significa que o desenvolvimento do frontend precisa parar. Uma das possibilidades \u00e9 utilizar o JSON Server para criar uma API REST simulada e continuar desenvolvendo e testando sua aplica\u00e7\u00e3o React normalmente. Neste projeto vamos construir um Gerenciador de Tarefas com React e JSON Server, utilizando uma estrutura que permite posteriormente substituir a API simulada por um backend real sem precisar reconstruir toda a aplica\u00e7\u00e3o. O que \u00e9 JSON Server? Durante o desenvolvimento de uma aplica\u00e7\u00e3o frontend, nem sempre temos uma API real dispon\u00edvel. Imagine uma equipe em que o frontend e o backend est\u00e3o sendo desenvolvidos simultaneamente. O desenvolvedor frontend precisa criar: Mas os endpoints do backend ainda n\u00e3o est\u00e3o dispon\u00edveis. Em vez de esperar, podemos trabalhar com uma API simulada. \u00c9 exatamente a\u00ed que entra o JSON Server. A arquitetura utilizada durante o desenvolvimento pode ser representada assim: O React continua realizando requisi\u00e7\u00f5es HTTP normalmente. A diferen\u00e7a \u00e9 que, em vez de uma API desenvolvida em Node.js, Java, PHP, Python, C# ou outra tecnologia, quem responde temporariamente \u00e0s requisi\u00e7\u00f5es \u00e9 o JSON Server. Projeto: Gerenciador de Tarefas Para colocar esse conceito em pr\u00e1tica, desenvolvemos um pequeno Gerenciador de Tarefas. A aplica\u00e7\u00e3o permite: Apesar de ser uma aplica\u00e7\u00e3o simples, ela permite trabalhar v\u00e1rios conceitos importantes do desenvolvimento com React. Tecnologias utilizadas Neste projeto utilizamos: Tamb\u00e9m trabalhamos conceitos importantes do React, como: O arquivo db.json O JSON Server utiliza um arquivo JSON como base para os dados. No nosso projeto temos uma estrutura semelhante a esta: A partir desse pequeno arquivo, conseguimos trabalhar com endpoints HTTP. Por exemplo: Isso permite que nossa aplica\u00e7\u00e3o React trabalhe como se estivesse consumindo uma API REST. GET: buscando as tarefas Para buscar as tarefas utilizamos uma requisi\u00e7\u00e3o GET. Os dados recebidos podem ent\u00e3o ser armazenados em um estado: Na aplica\u00e7\u00e3o utilizamos tamb\u00e9m o useEffect para realizar o carregamento inicial dos dados. Assim, quando o componente \u00e9 carregado, o React solicita os dados da nossa API simulada. POST: cadastrando uma nova tarefa Para cadastrar uma tarefa utilizamos o m\u00e9todo HTTP POST. Aqui aparecem conceitos importantes quando trabalhamos com APIs: PATCH: atualizando uma tarefa Quando queremos alterar apenas parte de um recurso podemos utilizar PATCH. No nosso exemplo, precisamos alterar apenas a propriedade: Podemos enviar: para: Dessa maneira conseguimos marcar uma tarefa como conclu\u00edda ou reabri-la. DELETE: excluindo uma tarefa Para remover uma tarefa utilizamos: Por exemplo: Antes de realizar a exclus\u00e3o, nossa aplica\u00e7\u00e3o tamb\u00e9m solicita uma confirma\u00e7\u00e3o do usu\u00e1rio. Esse pequeno detalhe evita exclus\u00f5es acidentais e tamb\u00e9m permite discutir boas pr\u00e1ticas de interface com o usu\u00e1rio. Organizando a comunica\u00e7\u00e3o com a API Um ponto importante do projeto \u00e9 n\u00e3o espalhar chamadas fetch() por todos os componentes. Criamos uma camada de servi\u00e7o: O arquivo: fica respons\u00e1vel pela comunica\u00e7\u00e3o com a API. Assim podemos ter fun\u00e7\u00f5es como: Os componentes n\u00e3o precisam conhecer todos os detalhes da comunica\u00e7\u00e3o HTTP. Temos ent\u00e3o: Por que separar o Service? Essa separa\u00e7\u00e3o se torna especialmente interessante quando pensamos na evolu\u00e7\u00e3o de uma aplica\u00e7\u00e3o. Hoje podemos ter: Amanh\u00e3 podemos substituir por: Ou at\u00e9: O frontend n\u00e3o deveria precisar conhecer a tecnologia utilizada internamente pelo backend. O importante \u00e9 conhecer o contrato da API. Se os endpoints e os dados esperados continuarem compat\u00edveis, grande parte da aplica\u00e7\u00e3o React pode permanecer exatamente igual. O frontend n\u00e3o precisa esperar o backend Esse talvez seja o conceito mais importante deste projeto. Em projetos reais, frontend e backend podem ser desenvolvidos simultaneamente. O desenvolvedor frontend n\u00e3o deveria precisar ficar parado esperando toda a implementa\u00e7\u00e3o do servidor ficar pronta. Podemos definir previamente como ser\u00e1 a comunica\u00e7\u00e3o: e qual ser\u00e1 a estrutura dos dados: Com esse contrato definido, podemos criar uma API simulada e desenvolver o frontend. Posteriormente, o mock \u00e9 substitu\u00eddo pela API real. C\u00f3digo completo no GitHub O projeto completo utilizado neste artigo est\u00e1 dispon\u00edvel gratuitamente no GitHub. No reposit\u00f3rio voc\u00ea encontrar\u00e1 o c\u00f3digo React, os componentes, o Service, o arquivo db.json e a implementa\u00e7\u00e3o do CRUD com JSON Server. Acesse o projeto: https:\/\/github.com\/marcoscaldas\/ReactComJSONServer O reposit\u00f3rio tamb\u00e9m possui vers\u00f5es do projeto que podem ser utilizadas para acompanhar o desenvolvimento passo a passo. Depois: Para iniciar o JSON Server: Em outro terminal, execute o React: Em breve: live com o projeto completo \ud83c\udfa5 Em breve teremos uma live completa no canal Desvendando o C\u00f3digo desenvolvendo este projeto passo a passo. Na live vamos entender como utilizar o JSON Server como uma API simulada, consumir os dados com React e construir as opera\u00e7\u00f5es de um CRUD utilizando GET, POST, PATCH e DELETE. Assim que a aula estiver dispon\u00edvel, o v\u00eddeo ser\u00e1 adicionado aqui ao artigo. Conclus\u00e3o JSON Server n\u00e3o substitui o aprendizado de desenvolvimento backend. A proposta \u00e9 outra. Ele permite simular uma API durante o desenvolvimento do frontend. Isso possibilita desenvolver componentes, telas, formul\u00e1rios e integra\u00e7\u00f5es sem precisar esperar que uma API real esteja completamente implementada. Neste projeto utilizamos: Mas futuramente podemos evoluir para: E \u00e9 justamente essa separa\u00e7\u00e3o que permite que frontend e backend evoluam de maneira independente. Se voc\u00ea est\u00e1 aprendendo React, clone o projeto, volte para a vers\u00e3o inicial e tente reconstruir o CRUD antes de consultar a vers\u00e3o final. \u00c9 uma \u00f3tima forma de praticar.<\/p>\n","protected":false},"author":1,"featured_media":2352,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2351"}],"version-history":[{"count":4,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2351\/revisions"}],"predecessor-version":[{"id":2356,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2351\/revisions\/2356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2352"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}