Neste artigo, vamos explorar passo a passo a construção de uma aplicação web de gerenciamento de tarefas utilizando ReactJS no front-end e JSON Server para simular uma API REST no back-end. Você aprenderá como criar uma aplicação funcional que permite listar, adicionar, editar, marcar como concluídas e excluir tarefas, refletindo em tempo real em um ‘banco de dados’ fake provido pelo JSON Server. Além disso, abordaremos pré-requisitos, a criação do projeto React com Vite, a configuração da API REST falsa com JSON Server e a implementação de funcionalidades como listagem, exclusão, edição e adição de tarefas.

Construindo uma Aplicação de Gerenciamento de Tarefas com ReactJS e JSON Server

Neste artigo, vamos abordar a construção de uma aplicação web de gerenciamento de tarefas utilizando ReactJS no front-end e JSON Server para simular uma API REST no back-end. O React é uma biblioteca JavaScript muito popular para construção de interfaces de usuário interativas, enquanto o JSON Server é uma ferramenta útil para protótipos e testes. Ao final deste artigo, os leitores terão uma aplicação funcional capaz de listar, adicionar, editar, marcar como concluídas e excluir tarefas, refletindo em tempo real em um ‘banco de dados’ fake provido pelo JSON Server.

  • O artigo abordará a construção de uma aplicação web de gerenciamento de tarefas utilizando ReactJS no front-end e JSON Server no back-end
  • O React é uma biblioteca JavaScript popular para construção de interfaces de usuário interativas
  • O JSON Server é uma ferramenta útil para protótipos e testes
  • A aplicação final permitirá listar, adicionar, editar, marcar como concluídas e excluir tarefas

Pré-requisitos

Para acompanhar este tutorial, os leitores precisarão ter instalado o Node.js, NPM e um editor de código, como o Visual Studio Code. Além disso, é interessante ter conhecimento intermediário em JavaScript, React e consumo de APIs REST. Caso os leitores não tenham familiaridade com alguma dessas tecnologias, recomenda-se fazer uma pesquisa na internet para aprender os conceitos antes de iniciar o desenvolvimento.

  • Instalação necessária do Node.js, NPM e um editor de código, como o Visual Studio Code
  • Conhecimento intermediário em JavaScript, React e consumo de APIs REST é recomendado

Criando o Projeto React com Vite

O primeiro passo é criar o projeto React com o Vite, uma ferramenta rápida para esse propósito. Serão fornecidas as instruções para a criação do projeto e a instalação de bibliotecas necessárias, como o Axios e o React Icons.

  • Criação do projeto React com o Vite
  • Instruções para instalação de bibliotecas como o Axios e o React Icons

Criando a API REST Falsa com JSON Server

A criação da API REST falsa com o JSON Server é essencial para simular o back-end da aplicação. Os leitores aprenderão como instalar o JSON Server e criar um arquivo ‘db.json‘ para servir como ‘banco de dados’ mockado, além de iniciar o servidor para disponibilizar a API REST falsa em ‘http://localhost:3000’.

  • Instalação do JSON Server
  • Criação do arquivo ‘db.json‘ para simular o ‘banco de dados’ mockado
  • Inicialização do servidor para disponibilizar a API REST falsa

Listando Tarefas

A construção da interface no React será abordada, incluindo a criação do componente TaskList.jsx e a utilização das bibliotecas previamente instaladas, como o Axios e o React Icons. Os leitores aprenderão como listar as tarefas na aplicação.

  • Criação do componente TaskList.jsx
  • Utilização das bibliotecas previamente instaladas, como o Axios e o React Icons
  • Instruções para listar as tarefas na aplicação

Introdução ao Desenvolvimento de Aplicações

No desenvolvimento de aplicações web, é essencial entender a interação entre o front-end e o back-end, bem como a manipulação de dados. No exemplo apresentado, a aplicação realiza requisições para obter e manipular dados de tarefas, demonstrando a integração entre o front-end e um servidor back-end simulado.

Renderização e Manipulação de Tarefas

No contexto do artigo, a renderização das tarefas é realizada por meio do mapeamento de um array, resultando na exibição de cada tarefa com seus respectivos botões de edição e exclusão. Além disso, a função de exclusão é implementada tanto no front-end quanto no back-end, utilizando o método HTTP DELETE para remover a tarefa do servidor simulado.

  • O mapeamento de um array permite a renderização dinâmica de elementos em uma lista, como as tarefas apresentadas no exemplo.
  • A implementação da exclusão no front-end e no back-end demonstra a integração completa da funcionalidade de exclusão de tarefas.
  • A utilização do método HTTP DELETE segue as práticas recomendadas para a manipulação de recursos em aplicações web.

Edição de Tarefas e Manipulação de Estados

No artigo, a funcionalidade de edição de tarefas é introduzida, permitindo ao usuário editar o texto de uma tarefa selecionada. O estado de edição é controlado por um novo estado do componente, possibilitando a visualização e edição da tarefa selecionada. Adicionalmente, são apresentados os campos para a alteração da tarefa, enriquecendo a interatividade da aplicação.

  • A adição da funcionalidade de edição amplia a interatividade da aplicação, oferecendo ao usuário a capacidade de modificar as tarefas existentes.
  • O controle do estado de edição por meio de um novo estado do componente é uma prática comum no desenvolvimento de aplicações React.
  • A apresentação dos campos para alteração da tarefa reforça a usabilidade e a experiência do usuário na manipulação das tarefas.

Atualizando tarefas existentes

Para atualizar as tarefas existentes, é necessário implementar a função `updateTask` e chamá-la no botão de salvar. Dentro dessa função, uma requisição PUT é feita para atualizar a tarefa no backend. Após a atualização, o estado de edição é resetado e a lista de tarefas é atualizada. Além disso, a função `getTasks` é utilizada para buscar a lista atualizada em diferentes momentos.

  • A implementação da função `updateTask` é essencial para permitir a edição das tarefas existentes.
  • A requisição PUT é responsável por enviar o texto editado para atualizar a tarefa no backend.
  • O reset do estado de edição e a atualização da lista de tarefas garantem a consistência dos dados.

Adicionando novas tarefas

Além de atualizar tarefas existentes, é importante permitir a adição de novas tarefas. Para isso, é necessário criar um estado para representar os dados de uma nova tarefa em branco. Um formulário é adicionado para inserir o texto da nova tarefa, juntamente com um handler para atualizar o texto. Ao submeter o formulário, a função `createTask` é acionada para criar a tarefa no backend e atualizar a lista de tarefas.

  • A criação de um estado para novas tarefas permite a manipulação dos dados da nova tarefa.
  • A adição de um formulário facilita a inserção do texto da nova tarefa de forma interativa.
  • A função `createTask` é responsável por criar a tarefa no backend e atualizar a lista de tarefas após a submissão do formulário.

Ao finalizar o tutorial, é importante destacar algumas melhorias que podem ser feitas no aplicativo de gerenciamento de tarefas, como a adição de autenticação para usuários, a persistência de dados utilizando localStorage, melhorias no feedback visual ao usuário, implementação de paginação na lista de tarefas e o deploy em ambiente de produção. Além disso, é ressaltado que o código fonte completo está disponível no GitHub para consulta e que dúvidas ou sugestões são bem-vindas.

  • A adição de autenticação para usuários pode garantir a segurança e personalização da experiência.
  • A persistência de dados utilizando localStorage pode permitir que as tarefas sejam mantidas entre sessões.
  • A implementação de melhorias no feedback visual ao usuário pode tornar a aplicação mais amigável e intuitiva.
  • A paginação na lista de tarefas pode ser útil para lidar com um grande volume de tarefas.
  • O deploy em ambiente de produção possibilita que a aplicação seja acessada por um maior número de usuários.
  • Disponibilizar o código fonte no GitHub demonstra transparência e incentiva a comunidade a contribuir.
  • O convite para dúvidas e sugestões mostra abertura para feedback e melhoria contínua.

Conclusão

Ao longo deste artigo, demonstramos como é possível desenvolver uma aplicação de gerenciamento de tarefas do zero utilizando React e JSON Server. Com isso, você aprendeu a trabalhar com componentes, estado, hooks, requisições HTTP e mais. Além disso, exploramos algumas melhorias que podem ser implementadas no projeto, como adicionar autenticação para usuários, salvar estado no localStorage, melhorar o feedback visual ao usuário, implementar paginação da lista de tarefas e realizar o deploy em produção. Com o código fonte completo disponível no GitHub, você tem uma excelente base para continuar evoluindo o projeto e aprimorar suas habilidades em desenvolvimento web.