Summary
Keywords
Full Transcript
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nesta aula, a gente avança ainda mais na estruturação do nosso projeto de React criando os serviços responsáveis por fazer a comunicação entre o frontend e o servidor mocado com MirageJS. Depois de ter implementado todos os endpoints no servidor — incluindo GET, POST, PUT e DELETE — agora chegou a hora de organizar essas chamadas dentro de um service. Esse service vai centralizar tudo que se refere à API, o que é uma prática fundamental em qualquer aplicação profissional, facilitando a manutenção e melhorando a separação de responsabilidades no código. A implementação começa com a criação de uma pasta shared/services/api e de um arquivo todoApi.ts, que será o ponto central das chamadas. A primeira função implementada é o getAll, usando a biblioteca axios para fazer a requisição GET para /api/todos. O retorno é processado, extraindo os dados relevantes para o frontend. Isso permite que no componente App, por exemplo, tu consigas chamar o getAll, receber os dados dos todos e atualizar o estado da aplicação com eles. Além disso, tu viu como criar uma instância de axios com axios.create(), que no futuro pode ser usada para configurar headers, interceptadores ou até autenticação. Como desafio, tu vai implementar os outros métodos da API: create, updateById e deleteById. Já viste um exemplo de como o POST pode ser feito, passando os dados no segundo argumento do axios.post(). Com base nisso e no entendimento dos métodos HTTP, tu consegue completar o restante. Isso vai te dar ainda mais confiança no uso de APIs no React e te deixar mais preparado para projetos reais. Se quiser seguir com mais conteúdo e já assistir às próximas aulas, lembra que os membros do canal têm acesso antecipado e ainda podem conferir o curso avançado, que é a continuação direta desse. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/308532c3b1ae9b414c89a849d8bc7e97d5d1718b 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Apresentação da aula 0:40 | Avisos importantes 2:40 | Revisando os endpoints no server mocado 8:30 | Criando os services para chamar a API mocada 15:00 | Desafio para a próxima aula 16:20 | Finalização e agradecimentos CODARSE - Servidor mocado, chamadas de API, useEffect #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
