Consumindo uma API no React

Contexto

O código dessa aplicação está nesse link, o resultado final se encontra aqui.

Uma duvida muito comum quando se inicia no desenvolvimento web é como fazer aplicações o backend e o frontend se comunicarem. Como que eu posso fazer minha aplicação react se comunicar com minha API ? Essas são as dúvidas que eu vou tentar responder brevemente com esse post.

Como ?

A comunicação entre essas partes do sistema pode ser feita a partir do método http, que é um protocolo de comunicação onde através dele é possível a comunicação entre os diferentes pontos de um sistema. O protocolo Http possui métodos que são utilizados para diferentes finalidades, os principais são o GET e o POST, explicando de forma mínima o GET teria a função de pegar dados do servidor enquanto o POST teria a função de transmitir dados para o servidor.

Como eu faço isso em uma aplicação React

O Código abaixo é uma função javascript que vai receber o nome de uma personagem e vai fazer uma requisição para para a api retornar os personagens que coincidem com aqueles nomes.

const fetchCharacters = async (charactersName) => {
    const response = await fetch(`https://www.breakingbadapi.com/api/characters/?name=${charactersName}`);
    const data = await response.json();
    return data;
  };

Na primeira linha há uma requisição é feita a requisição para o a rota api/characters/ passando o parâmetro name que vai receber o parâmetro da função, a constante response vai receber uma Promise de uma resposta http, para extrair os dados dessa resposta utilizamos na proxima linha o método .json() que também é um Promise só que agora da resposta do servidor com o nome do personagem, apelido...

No caso da minha aplicação essa função é chamada ao enviar do formulário que pergunta o nome do personagem da seguinte forma:

const handleSubmit = async (e) => {
    e.preventDefault();
    const inputValue = e.target[0].value;
    const charachtersData = await fetchCharacters(inputValue);
    setCharacters(charachtersData);
  };
  <form onSubmit={handleSubmit}>

A primeira linha da função handleSubmit vai evitar que a página recarregue por conta do comportamento padrão do elemento form, o inputValue armazena o nome do personagem pesquisado, o charachtersData vai armazenar a resultado da função que foi apresentada anteriormente, e por último a reposta da api é definida como estado pelo setCharacters, agora é só exibir esses dados como queira.

Uma outra forma de fazer essa requisição é quando o componente é montado, digamos que você quer exibir as informações do Walter White enquanto o usuário não escolhe o personagem, você pode ter pensado em fazer da seguinte forma:

const SearchBar = () => {
cosnt [characters, setCharacters] = useState(null)
fetchCharacters('Walter White').then(data => {setCharacters(data)})
  return (
    <form>
      {/*Componentes do formulário*/}
    </form>
  );
};

Se feito dessa forma, você vai ter um problema desse componente ser renderizado infinitamente pois, como ele atualiza o estado do componente, ele força que o componente remonte, e durante o processo de montagem ele vai novamente fazer a requisição e assim por diante...

Para fazer essa requisição enquanto o componente monta é necessário utilizar o hook useEffect, /UTILIZANDO ARRAY DE DEPENDÊNCIAS/

const SearchBar = () => {
cosnt [characters, setCharacters] = useState(null)
useEffect(() => {
  fetchCharacters('Walter White').then(data => {setCharacters(data)},[])
}, [])

  return (
    <form>
      {/*Componentes do formulário*/}
    </form>
  );
};

Dessa forma toda vez que o componente SearchBar for montado a função fetchCharacters vai ser chamada e seu retorno passado para o setCharacters que vai modificar o estado.

Essas são as formas de comunicação http através do React, a partir da montagem do componente ou através de um evento como o enviar do formulário.