Como consumir dados da API com React


Neste tutorial será dado a continuidade a série sobre React. Esse tutorial é a continuação do anterior como criar rotas no React.

Neste tutorial será apresentado como consumir dados da API com React. Primeiro será apresentado como utilizar o axios para conectar React com API. Em seguida como consumir com React os dados retornado da API. Para finalizar será apresentado como listar os registros retornado da API.

Download do código fonte desenvolvido na aula: DOWNLOAD


Vamos para explicação textual o que é implementado nesse tutorial.

Primeiro será instalado o React, utilizando o prompt de comando do Windows.

npx create-react-app nome_do_projeto

Em seguida será acessado o diretório que foi instalado o React.

cd nome_do_projeto

Em seguida será aberto o projeto no "Visual Studio Code" utilizando o comando.

code .

Com o projeto aberto no "Visual Studio Code", será aberto novo terminal no editor, com o terminal aberto será executado o comando abaixo para rodar o projeto.

npm start

No arquivo "src/index.js", somente deixado os "import" necessário para o projeto.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Em seguida instalado a dependência Axios para realizar a conexão com a API.

npm install --save axios

Com a dependência instalada, criado o arquivo "src/api.js" com a instrução para buscar os dados na API.

import axios from 'axios';

const api = axios.create({
    baseURL: 'https://api.tvmaze.com/search/shows?q='
});

export default api;

O próximo passo é incluir o arquivo "src/api.js" no arquivo "src/App.js". Arquivo responsável em imprimir os dados retornados da API na tela.

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

class App extends Component {

  state = {
    filmes: [],
  }

  async componentDidMount() {
    const response = await api.get('star%20wars');

    this.setState({ filmes: response.data });
  }

  render() {

    const { filmes } = this.state;

    return (
      <div>
        <h1>Listar os Filmes</h1>
        {filmes.map(filme => (
          <li key={filme.show.id}>
            <h2>
              <strong>Título: </strong>
              {filme.show.name}
            </h2>
            <p>
              {filme.show.url}
            </p>

          </li>
        ))}
      </div>
    );
  };
};

export default App;

Após implementado, pode ser acessada a rota "http://localhost:3000/" no navegador para ver o resultado.

Para baixar o código fonte do projeto implementado até esse tutorial "DOWNLOAD", após baixar executar o comando "npm install" para instalar todas as dependências e o comando "npm start" para rodar o servidor.

Portanto, nesse tutorial foi abordado como consumir dados da API com React. Para ver todas as aulas de React acesse a PlayList.