Consumindo API com React.js

Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos

Passo 1: Criar um aplicativo ReactJS

Para consumir API, vamos criar uma aplicação, tal como visto em React.js: Criação de um aplicativo, mas vamos precisar usar uma API.

Usando uma API

Para poder consumir uma API, vamos usar uma biblioteca externa chamada axios. No site deles explica a instalação e utilização.

https://www.npmjs.com/package/axios

Você pode olhar mais a fundo a documentação deles, mas já vamos adiantar as coisas aqui. Então, dentro da pasta do projeto, instale o axios da seguinte forma:

Windows:

C:\React\Projetos\consumo_api\ npm install --save axios

Linux:

user@pc:~/React/Projetos/consumo_api$ npm install --save axios

Agora vamos usar uma API para nossa aplicação. Para esse exemplo, vamos utilizaro o site www.tvmaze.com e vamos fazer uma pesquisa sobre star trek.

https://www.tvmaze.com/search?q=star+trek

Eles possuem uma API e vamos utilizá-la trocando www por api e ao invés de search, usamos show:

https://api.tvmaze.com/search/shows?q=star%20trek

Api.js

Para gerenciar essa API, vamos criar um novo arquivo na pasta src. O nome pode ser de sua escolha, mas aqui vamos criá-lo como src/Api.js. Nesse arquivo, vamos importar o axios, adicionar a API que queremos consumir e exportá-la:

// Vamos importar o axios para nosso projeto
import axios from 'axios';

/* Aqui criamos uma constante chamada api, mas o nome pode
ser qualquer outro. Nela, vamos colocar um axios.create,
genérico para a chamada da url. */
const api = axios.create({
    baseURL: 'https://api.tvmaze.com'
});

// Agora exportamos essa nossa api.
export default api;

Mais informações sobre a API você encontra em: https://www.tvmaze.com/api

App.js

Depois alteramos o código do arquivo src/App.js para utilizar a API:

import React, { Component } from 'react';
import api from './Api';

// Criaremos uma classe para nossa aplicação e damos o extends em Component.
class App extends Component {

  // Criamos um state para armazenar a lista de filmes
  state = {
    movies: [],
  };

  /* Vamos criar nosso constructor para criar um atributo especial inputRef.
  Esse atributo vai colocar o cursor no campo texto da pesquisa depois que
  nossa aplicação tiver sido montada.
  */
  constructor(props) {
    super(props);
    // Criamos a referência para o input no construtor
    this.inputRef = React.createRef();
  }

  // Método executado depois de montada a aplicação.
  componentDidMount() {
    // Depois de montada a aplicação, colocamos o cursor no campo de pesquisa.
    this.inputRef.current.focus();
  }

  mySubmitHandler = async (event) => {
    try {
      // Prevenimos o padrão de submissão de formulários html.
      event.preventDefault();

      // Pegamos o valor digitado no campo de pesquisa e colocamos em query.
      const query = document.getElementById('query').value;

      /* A constante response utiliza o await porque é uma operação assíncrona.
      Também, quando usamos o get com a operação que será chamada, passamos os
      parâmetros que precisamos para a nossa pesquisa
      */
      const response = await api.get('/search/shows', {
        params: {
          q: query,
        }
      });

      // Atualizamos a lista de filmes
      this.setState({ movies: [] });
      this.setState({ movies: response.data });
    } catch (error) {
      console.error("Execution error :", error);
    }
  }

  // 2. Criamos nosso render
  render() {
    // Vamos buscar os dados de this.state e jogar para a posição movies
    const { movies } = this.state;

    return (
      <div>
        <h1>Filmes</h1>
        <form onSubmit={this.mySubmitHandler}>
          <input type='text' id='query' ref={this.inputRef} />
          <button type='submit'>Buscar</button>
        </form>

        {/* Como temos uma array, podemos usar um maps para percorrê-la.
        Veja que temos que ver no resultado da API os atributos que vamos
        mostrar, como name e url, por exemplo.
        */}
        {movies.map(movie => (
          <li key={movie.show.id}>
            <h2>
              {movie.show.name}
            </h2>
            <p><a href={movie.show.url} target="_blank">
              {movie.show.url}</a></p>
          </li>
        ))}
      </div>
    );
  }
}

export default App;

Atividades

Desafio 1

Use bootstrap para deixar a visualização mais bonita.

Desafio 2

Implemente uma aplicação que consuma alguma outra API de sua escolha.