Você já usou esta biblioteca popular? se não, você veio ao artigo certo. Neste artigo, explicarei simplesmente como buscar dados com o Axios e exibi-los, vamos lá!!

Axios é uma biblioteca popular usada para fazer solicitações HTTP. Axios nos permite comunicar facilmente com APIs em nossos aplicativos de reação. Existem muitos usos do Axios, mas no geral, o Axios é uma biblioteca versátil que facilita o manuseio de vários tipos de solicitações HTTP em aplicativos de reação.

para seu uso, você pode seguir estas etapas:

Etapa 1: criar um projeto ReactJS

O primeiro passo, precisamos criar um projeto ReactJS. Crie um usando a seguinte linha de comando:

com cra

npx create-react-app (your project name)
cd (your project name)
npm start

npm create vite
? Project name: (your project name)
? Select a framework: React
? Select a variant: Javascript
cd (your project name)
npm install
npm run dev

Em seguida, instalaremos o Axios usando o comando abaixo

npm install axios

Agora, importe o Axios em seu arquivo como no exemplo a seguir

import axios from "axios"

Faça uma solicitação GET

O método GET é uma solicitação HTTP para obter recursos do servidor. Podemos enviar uma solicitação GET e renderizar os dados usando o método abaixo:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((result) => {
        console.log(result.data);
        setPosts(result.data);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <div>
      {posts.map((data) => {
        return (
          <div key={data.id}>
            <h4>{data.title}</h4>
            <p>{data.body}</p>
          </div>
        );
      })}
    </div>
  );
}

export default App;

Observe que a URL termina com /todo/1. Ele recuperará o objeto post com "id": 1.

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then((result) => {
        console.log(result.data);
        setPosts(result.data);
      })
      .catch((error) => console.log(error));
  }, []);

  return (
    <div className="container">
      <h4>{posts.title}</h4>
      <p>{posts.body}</p>
    </div>
  );
}

export default App;