Conectando com APIs Backend
Área: Frontend | Nível recomendado: Iniciante
Vídeo
Link direto: https://youtu.be/hTncMAFn0ns
Tópicos
Introdução às APIs e Uso da Fetch API:
Discussão sobre o papel das APIs na comunicação entre frontend e backend.
Como usar a Fetch API para realizar requisições GET e POST para um servidor backend.
Hooks para Gerenciamento de Estado e Efeitos:
Detalhes sobre como utilizar os hooks
useState
euseEffect
para gerenciar o estado e lidar com efeitos colaterais em React.Exemplos práticos de como esses hooks são essenciais para interações dinâmicas com APIs.
Manipulação de Respostas e Tratamento de Erros:
Técnicas para manipular respostas de API e realizar tratamento adequado de erros.
Estratégias para garantir que a aplicação se comporte de maneira robusta em cenários de erro.
Construção de um Componente Interativo:
Implementação de um componente que faz requisições a uma API e exibe dados.
Inclusão de funcionalidades interativas, permitindo aos usuários enviar dados para o backend e receber respostas que alteram a UI.
Material de Apoio
Repositório no GitHub
PDF para Download
Miro
Exercícios de Fixação
Exercícios de Validação
Desafio de Código
Crie um componente React que busque dados de uma API e exiba uma lista de personagens. O componente deve:
Utilizar a Fetch API para buscar dados.
Gerenciar o estado dos dados usando
useState
.Utilizar
useEffect
para realizar a busca de dados quando o componente for montado.Exibir os dados na interface do usuário.
Revisão de Código
Analise o código a seguir, encontre e corrija o erro.
import React, { useState, useEffect } from 'react';
import { Api } from './api';
export default function Personagens() {
const [personagens, setPersonagens] = useState([]);
useEffect(function () {
async function fetchData() {
try {
const response = await Api.buildApiGetRequest(Api.personagem.readAll());
const data = await response.json();
setPersonagens(data);
} catch (error) {
console.error('Erro ao buscar dados:', error);
}
}
fetchData();
}, [personagens]);
return (
<div>
<h1>Lista de Personagens</h1>
<ul>
{personagens.map(function (personagem) {
return <li key={personagem._id}>{personagem.nome}</li>;
})}
</ul>
</div>
);
}
Projeto Prático
Crie uma aplicação React que inclua:
Um componente que busque dados de uma API e exiba uma lista de itens.
Funcionalidade para deletar itens da lista através de uma requisição DELETE.
Tratamento de erros e exibição de mensagens de erro usando react-toastify.
Tarefas
Configuração Inicial:
Inicialize um novo projeto React.
Instale as dependências necessárias, incluindo react-toastify.
Implementação dos Endpoints no api.js:
Implemente funções para realizar requisições GET e DELETE.
Criação do Componente React:
Crie um componente que faça uso das funções do
api.js
para buscar e deletar itens da lista.Utilize react-toastify para tratar e exibir erros.
Last updated