Criaremos um projeto para controle financeiro, seguindo os paramentos determinando no figma. Esse projeto é mais atualizado e aprimirado que o anterior
Esse projeto já foi desenvolvido na trilha anterior do React da Rocketseat, porém agora será feito com novas funcionalidades e novos estudo, e futuramente irei dar uma funcionalidades e aplicabilidade pessoais ao projeto.
Essa aplicação utiliza Styled components, (npm create vite@latest) para a criação inicial do projeto.
instalação no VSCode: npm i eslint -D
npm i @rocketseat/eslint-config -D
Utilizamos também para baixar e utilizar icones o “phosphor-react”.
Utilizamos também o @radix-ui/react-dialog para o modal e o @radix-ui/react-radio-group para o check box do botão do modal.
Temos que instalar uma API para simular um backend, para podermos trabalhar com o armazenamento de dados no app. Será usada o JSON SERVER.
Instalamos o Json-server como dependencia de Desenvolvimento
Depois rodamos o comando “npx json-server server.json -p 3333” //ele tenta subir na porta 3000, por isso passamos o parâmetro de “-p 3333”. Usamos o “-w” para que ele fique observando e atualizando sempre que tiver mudança no arquivo. Usamos também o “-d 500” para ver a questão do tempo de latência da aplicação, ou seja, a demora da resposta do servidor para colocarmos a questão de ‘carregando…’ na aplicação.
Utilizar nos formulários da aplicação o hook form. Temos que instalar algumas bibliotecas para trabalhar com o React hook form: npm i react-hook-form zod; npm i @hookform/resolvers ; Foi adicionado Controllers, e usamos também o axios. Usamos o useCallback e o useMemo para melhorar a performace da aplicação.
Telas do App:
Lista de busca:
Modal e lista pós inserção no modal:
