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 conosumir e exportá-la:

// Importando o axios para nosso projeto
import axios from 'axios';

/* Vamos criar uma constante chamada api, mas o nome pode
ser qual você quiser. Nela, vamos colocar um axios.create,
genérico e chamamos nossa URL. */
const api = axios.create({
    baseURL: 'https://api.tvmaze.com/search/shows?q=start%20trek'
});

// 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';

/* 1. Criaremos uma classe para nossa aplicação e
damos o extends em Component. Observe que agora
é adicionado no import. */
class App extends Component {

  // 3. Criamos um state para armazenar os filmes
  state = {
    filmes: [],
  }

  /* 4. Vamos adicionar um componente para buscar
  os dados na API. */
  async componentDidMount() {
    /* 5. Veja que a constante response utiliza o await
    porque usamos async. */
    const response = await api.get('');

    /* Colocamos o console log para poder inspecionar
    os elementos para debug, mas não é utilizado na 
    aplicação*/
    //console.log(response.data);

    // 6. jovar os valores recebidos para filmes
    this.setState({ filmes: response.data });
  }

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

    return (
      <div>
        <h1>Filmes</h1>
        { console.log(filmes)}

        {/* 8. Como temos uma array, então vamos usar um maps
        para percorrê-la. Vejaj que temos que ver no resultado
        da API os atributos que vamos mostrar, como name e url.*/}
        {filmes.map(filme => (
          <li key={filme.show.id}>
            <h2>
              {filme.show.name}
            </h2>
            <p><a href={filme.show.url} target="_blank">
              {filme.show.url}</a></p>
          </li>
        ))}
      </div>
    );
  }
}

export default App;

Podemos tirar, do baseURL o que procuramos, start%20trek do arquivo api.js e colocar como parâmetro no api.get do arquivo Api.js.

const response = await api.get('start%20trek');

Mas, para deixar a busca melhor, você pode criar um campo texto para que o usuário digite o assunto que ele quer buscar na API que utilizamos.

Se você quiser usar o bootstrap no React, basta seguir as orientações aqui.

Atividades

Desafio 1

1. Implemente o exemplo anterior no seu computador e adicione um campo texto, para que o usuário digite o que se quer procurar.

2. Mostre os resultados dentro de uma tabela.

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

Desafio 2

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