Como Consumir API com React e Axios

Aprenda de forma prática como consumir qualquer API com React e Axios com este tutorial completo.

Para consumir uma API com React e Axios, instale o Axios (npm install axios), crie um estado com useState para guardar os dados e faça a requisição dentro de um useEffect com axios.get(url). Ao receber a resposta, atualize o estado e renderize os dados na tela — o Axios simplifica as requisições HTTP e o tratamento do JSON.

Introdução

Fala, impressionador!

Você já criou sua primeira aplicação em React mas não sabe como conectar ela com uma API? Se sua resposta foi sim este guia foi feito para você.

Consumir APIs é uma das habilidades mais importantes para qualquer desenvolvedor front-end. É através dela que buscamos dados de servidores, exibimos informações de forma dinâmica e criamos aplicações interativas.

Neste artigo, você vai aprender de forma prática e direta como fazer requisições HTTP usando React e Axios. Vamos criar um projeto do zero, fazer uma requisição real para uma API e exibir os dados na tela.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Bora começar?

Entendendo a API de Teste

Para este tutorial, vamos usar a JSONPlaceholder, uma API fake perfeita para testes.

Ao acessar essa URL, ela retorna uma lista de posts em formato JSON. É exatamente isso que vamos consumir e exibir no nosso frontend.

Criando o Projeto React

Para este projeto usaremos como editor de código o VS Code e criaremos a estrutura do projeto com o Vite por ser mais rápido e eficiente.  Para isso precisamos do Node instalado, para gerenciar os pacotes de instalação que usaremos, incluindo o próprio Vite.

O primeiro passo é criar uma pasta na área de trabalho ou em qualquer local que desejar com o nome "consumindo-api". É nela que guardaremos as dependências do projeto.

Em seguida, com o editor de código aberto, use o atalho CTRL + O e selecione a pasta. Depois, use o atalho CTRL + J para abrir o terminal integrado do VS Code e digite o comando:

npm create vite@latest

Preencha as perguntas que forem feitas da seguinte maneira:

• Ok to proceed: y
• Project name: consumir-api
• Select a framework: React
• Select a variant: JavaScript
• Use a rolldown-vite (Experimental): no
• Install with npm and start now?: Yes

Abra o projeto no link "http://localhost:5173/" e pronto! Seu projeto React já está rodando com o template que o Vite traz por padrão.

O próximo passo é apagar informações que não vamos utilizar:

• Pasta public;
• Pasta de assets localizada dentro da pasta src
• Arquivo README.md;

Ao apagar o arquivo no projeto aberto no navegador você receberá o seguinte erro: "Failed to resolve import "./assets/react.svg" from "src/App.jsx". Does the file exist?". Isto acontece, pois o arquivo App.jsx está buscando uma imagem SVG dentro da pasta assets que apagamos.

Para resolver esse erro, precisamos fazer uma alteração no código do arquivo App.jsx que está localizado dentro da pasta src:

import './App.css'
function App() {
  return (
    <>
      <h1>Olá, mundo!</h1>
    </>
  )
}
export default App

Agora sim podemos começar a preparar o projeto para fazer requisições para a API.

Instalando o Axios

Para fazer as requisições usaremos a biblioteca Axios que tem inúmeras vantagens, como:

• Menos código para escrever (menos verboso);
• Tratamento de erros mais simples;
• Sintaxe mais limpa e intuitiva;
• Funcionalidades extras que facilitam o desenvolvimento.

Caso queira ver saber mais sobre o Axios e ver um comparativo com a biblioteca nativa que faz requisições (Fetch), você pode conferir o vídeo AXIOS vs FETCH: Qual a melhor forma de consumir APIs.

Como essa biblioteca não é nativa, ela precisa ser instalada, portanto, abra um novo terminal no VS Code dentro da pasta do projeto, clicando com o botão direito do mouse em cima da pasta "consumir-api" e selecione a opção Open in integrated Terminal.

Em seguida digite o comando:

npm install axios

O próximo passo é importar a biblioteca para dentro do arquivo App.jsx com o código:

import axios from "axios"

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Criando a Variável de Estado

Dentro da tela App.jsx crie uma constante com um estado chamado arrayPosts para armazenar a lista de posts. Inicia com um array vazio e usa setArrayPosts para atualizar os dados, geralmente após consumir uma API. Utilize o código abaixo:

function App() {
  const [arrayPosts, setArrayPosts] = useState([])
   return (
    <div>
      <h1>Consumindo API com React</h1>
    </div>
  )
}

Lembre-se de importar o useState com o comando: import { useState } from 'react'.

No React, quando queremos que uma mudança de dado atualize a tela automaticamente, usamos variáveis de estado. O useState cria uma variável (arrayPosts) e uma função para modificá-la (setArrayPosts).

Fazendo a Requisição com Axios

Agora vem a parte mais importante: criar a função que vai buscar os dados da API.

const requisicaoAPI = async () => {
  const respostaAPI = await axios.get('https://jsonplaceholder.typicode.com/posts')
  setArrayPosts(respostaAPI.data)
}

No código acima:

1. async/await: Como a requisição demora um pouco, usamos JavaScript assíncrono para "esperar" a resposta chegar;
2. axios.get(): Faz uma requisição do tipo GET para a URL;
3. respostaAPI.data: O Axios retorna os dados dentro de uma propriedade chamada data;
4. setArrayPosts(): Atualiza nossa variável de estado com os dados recebidos.

Usando o useEffect

Para garantir que a requisição seja feita apenas uma vez , quando o componente for montado, vamos utilizar o hook do React useEffect. Sem ele, toda vez que uma variável de estado mudar, a requisição seria feita de novo, o que não é ideal.

useEffect(() => {
  requisicaoAPI()
}, [])

No código acima:

1. A função requisicaoAPI() é chamada uma única vez, logo após o componente ser montado;
2. O array de dependências vazio ([]) indica que o efeito não será executado novamente em re-renderizações.

Lembre-se de importar o useEffect com o código import { useEffect, useState } from 'react'. Você pode colocar o mouse no final do hook e usar o atalho CTRL + techa SPACE para obter sugestões de importação.

Exibindo os Dados na Tela

Agora que temos os dados, vamos exibi-los usando o método map():

<ul>
        {arrayPosts.map((post) => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>

No código acima, o map() percorre cada item do array e cria um elemento para cada um. Ou seja:

• Para cada post no arrayPosts;
• Cria um <li> com o título do post;
• A propriedade key é obrigatória para o React identificar cada item.

Caso queira saber mais sobre a função map()você pode consultar o vídeo Tudo que você precisa saber de JavaScript antes de aprender React.

Código Completo

Após relaizar todos os passos anteriores, o arquivo App.jsx deve ficar assim:

import './App.css'
import axios from 'axios'
import { useEffect, useState } from 'react'

function App() {
  const [arrayPosts, setArrayPosts] = useState([])

  const requisicaoAPI = async () => {
    const respostaAPI = await axios.get('https://jsonplaceholder.typicode.com/posts')
    setArrayPosts(respostaAPI.data)
  }

  useEffect(() => {
    requisicaoAPI()
  }, [])


  return (
    <>
      <h1>Consumindo API com React</h1>
      <ul>
        {arrayPosts.map((post) => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    </>
  )
}

export default App

Conclusão

Consumir APIs com React e Axios é uma habilidade essencial para qualquer desenvolvedor frontend.

A prática leva à perfeição! Teste com outras APIs, experimente exibir diferentes informações e não tenha medo de errar.

Quer se aprofundar ainda mais? Temos um mini curso gratuito de HTML  e CSS e o curso completo de FullStack.

Além disso, caso prefira esse conteúdo no formato de vídeo-aula, pode acessar o vídeo no nosso canal do Youtube.

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Posts mais recentes de Full Stack

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Try Catch no JavaScript: Programação Defensiva na Prática27 de novembro de 2025
  Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.