Introdução

No mundo do desenvolvimento web, a capacidade de consumir APIs é essencial para criar aplicações dinâmicas e interativas. O React, uma das bibliotecas JavaScript mais populares para construção de interfaces, oferece uma maneira eficiente de gerenciar o estado e atualizar a interface do usuário em resposta a dados externos. Neste artigo, será abordado como usar o Axios, uma biblioteca para fazer requisições HTTP, em conjunto com o React para construir uma aplicação que consome uma API RESTful. Este conhecimento é vital para desenvolvedores que desejam integrar dados em tempo real em suas aplicações web.

Contexto ou Teoria

APIs (Interfaces de Programação de Aplicações) são conjuntos de definições e protocolos que permitem que diferentes softwares se comuniquem. Uma API RESTful é uma forma de construir APIs que usa os princípios do REST (Representational State Transfer), permitindo que os dados sejam acessados e manipulados através de requisições HTTP. O React é uma biblioteca de JavaScript desenvolvida pelo Facebook, focada na construção de interfaces de usuário. O Axios é uma biblioteca baseada em promessas que facilita o envio de requisições HTTP para APIs, oferecendo uma interface simples e intuitiva.

Ao combinar React e Axios, os desenvolvedores podem criar aplicações que buscão e exibem dados de maneira eficiente. Neste artigo, vamos construir uma aplicação simples que consome dados de uma API pública, exibindo esses dados em uma interface de usuário com React.

Demonstrações Práticas

Para começar, vamos criar uma aplicação React e integrar o Axios para consumir uma API. Usaremos a API pública do JSONPlaceholder, que fornece dados de exemplo. O primeiro passo é garantir que você tenha o Node.js instalado em sua máquina. Com isso, podemos iniciar um novo projeto React.

# Crie um novo aplicativo React
npx create-react-app meu-app
cd meu-app

# Instale o Axios
npm install axios

Agora que temos nosso aplicativo React configurado, vamos criar um componente que irá buscar e exibir uma lista de posts. Crie um arquivo chamado Posts.js dentro da pasta src e adicione o seguinte código:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Posts = () => {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchPosts = async () => {
            try {
                const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
                setPosts(response.data);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };

        fetchPosts();
    }, []);

    if (loading) return 
Carregando...
;
    if (error) return 
Ocorreu um erro: {error.message}
;

    return (
        

            
Lista de Posts
            

                {posts.map(post => (
                    

                        
{post.title}
                        
{post.body}
                    
                ))}
            
        
    );
};

export default Posts;

Vamos analisar este código:

• Importações: Importamos React, useEffect e useState do React, além do Axios.
• Estado: Utilizamos useState para gerenciar o estado dos posts, o estado de carregamento e o estado de erro.
• useEffect: Utilizamos o useEffect para buscar os posts assim que o componente é montado. A função fetchPosts é assíncrona e usa Axios para fazer uma requisição GET à API.
• Renderização: Se os dados ainda estão sendo carregados, exibimos uma mensagem de carregamento. Se ocorreu um erro, exibimos a mensagem de erro. Caso contrário, exibimos a lista de posts.

Agora, precisamos incluir este componente em nossa aplicação. Abra o arquivo App.js e modifique-o para incluir o componente Posts:

import React from 'react';
import Posts from './Posts';

const App = () => {
    return (
        

            
Meu Aplicativo com React e Axios
            
        
    );
};

export default App;

Após salvar as alterações, você pode iniciar o aplicativo executando:

npm start

Isso abrirá seu aplicativo no navegador, onde você verá a lista de posts sendo carregada a partir da API.

Dicas ou Boas Práticas

 
• Utilize sempre tratamento de erros ao fazer requisições HTTP. Isso garante que a aplicação não quebre caso a API não esteja disponível.

 

• Considere o uso de bibliotecas de gerenciamento de estado, como Redux, se sua aplicação crescer e precisar de um controle mais robusto do estado global.

 

• Evite fazer muitas requisições em um curto período. Use métodos de cache ou armazene dados localmente, se possível.

 

• Limite as dependências do useEffect para evitar chamadas desnecessárias. Neste caso, o array vazio [] significa que o efeito só roda uma vez após a montagem do componente.

Tags:

Angular, API REST, API RESTful, Aplicações, axios