Blog

Como Usar Dados Falsos em React.js com APIDog

Usar dados fictícios é uma técnica poderosa para garantir que sua aplicação React.js seja robusta e confiável, mesmo antes do backend real estar pronto. Neste guia, iremos aprender mais sobre isso.

Miguel Oliveira

Miguel Oliveira

20 maio 2025

Como Usar Dados Falsos em React.js com APIDog

No desenvolvimento web moderno, aplicativos React.js geralmente dependem de APIs para dados. No entanto, o que acontece quando essas APIs não estão prontas ou disponíveis durante o desenvolvimento? É aqui que o mock de API se torna crucial. Ao usar ferramentas como Apidog, os desenvolvedores podem simular respostas de API, permitindo um desenvolvimento e teste eficientes.

Este guia o levará através do processo de uso de dados mock em seus projetos React.js com Apidog, garantindo um desenvolvimento tranquilo mesmo quando os serviços de backend estão indisponíveis.

O que é Mock API em React JS?

Mock de API envolve a criação de uma versão simulada de uma API que imita o comportamento de uma API real. Esta mock API pode retornar respostas predefinidas, permitindo que os desenvolvedores trabalhem independentemente da API real. Ao usar mocks de APIs, os desenvolvedores podem continuar a construir e testar suas aplicações sem atrasos.

Você deve mockar testes de API para React JS? Quais são os benefícios?

Configuração do Apidog com Dados Mock para Projeto React

Apidog é uma poderosa ferramenta de design, teste e mock de API. Com ela, você pode simular ou gerar dados realistas que pode personalizar ou editar para atender suas necessidades.

"Apidog Mock vs outras ferramentas"

Passo 1. Crie uma Conta no Apidog

Para começar, você pode usar a versão web do Apidog, você pode baixar o Apidog para o seu computador e começar o mock.

button

Passo 2. Crie um Novo Projeto

Depois de criar sua conta, o próximo passo será criar um novo projeto. Projetos são como pastas, que mantêm todos os seus arquivos em um só lugar. Crie um novo projeto usando o seguinte exemplo;

Como Mockar Rest API em React com APIDog: Criar um Novo Projeto
Como Mockar Rest API em React com APIDog: digite o nome do projeto

Enquanto cria seu projeto, o Apidog fornece alguns exemplos que você pode usar instantaneamente. Certifique-se de marcar a caixa 'Incluir Exemplos' para que esses exemplos sejam gerados para você. Depois de concluir isso, clique no botão Criar, e pronto!!!!! Você agora está tudo configurado!

Passo 3. Configure os Endpoints de Mock de API

Os dados fictícios que o Apidog gerou para nós já vêm com especificações de API, dados e todas as coisas que precisamos para testá-los.

Como Mockar Rest API em React com APIDog: Configure os Endpoints de Mock de API

Você pode editar essas APIs, brincar com as configurações deste projeto e mudar algumas coisas. Quando terminar, vamos clicar no botão Executar.

Passo 4. Teste sua Mock API

Se você clicar no botão Executar na parte superior da tela, você provavelmente verá um pequeno popup próximo a ele pedindo para você criar uma variável ambiental :)

Como Mockar Rest API em React com APIDog: Selecione o Ambiente

Passo 5. Ative o Servidor de Mock Local

Clique na variável de ambiente selecionada e selecione Mock Local. Com Mock Local você pode usar a URL local fornecida pelo Apidog para testar seus dados.

Como Mockar Rest API em React com APIDog: Ativar Servidor de Mock Local

Usando Dados Mock em uma Aplicação React.js

Agora, vamos integrar os dados mock do Apidog em uma aplicação React.js. Vamos percorrer um exemplo simples de como buscar detalhes do usuário da mock API.

Passo 1: Configure uma Aplicação React

Se você ainda não fez isso, configure uma nova aplicação React usando o Create React App:

npx create-react-app exemplo-dados-mock
cd exemplo-dados-mock
npm start

Passo 2: Crie um Serviço para Buscar Dados

Crie um novo arquivo apiService.js para lidar com as solicitações de API:

// src/apiService.js

const API_BASE_URL = "http://127.0.0.1:3658/m1/602173-568233-default";

export const fetchPetData = async (id) => {
  try {
    const response = await fetch(`${API_BASE_URL}/pet/${id}`);
    if (!response.ok) {
      throw new Error(`Erro HTTP! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Falha ao buscar dados do pet:", error);
    throw error;
  }
};

Passo 3: Use os Dados Mock em um Componente React

Crie um componente React para buscar e exibir os dados do usuário:

// src/components/PetProfile.js

import React, { useEffect, useState } from "react";
import { fetchPetData } from "../apiService";

const PetProfile = ({ petId }) => {
  const [pet, setPet] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getPetData = async () => {
      try {
        setLoading(true);
        const petData = await fetchPetData(petId);
        setPet(petData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    getPetData();
  }, [petId]);

  if (loading) return <div>Carregando dados do pet...</div>;
  if (error) return <div>Erro: {error}</div>;
  if (!pet) return <div>Nenhum dado de pet disponível</div>;

  return (
    <div>
      <h2>Perfil do Pet</h2>
      <p>Nome: {pet.name}</p>
      <p>Status: {pet.status}</p>
      {pet.photoUrls && pet.photoUrls.length > 0 && (
        <img src={pet.photoUrls[0]} alt={pet.name} style={{ maxWidth: '200px' }} />
      )}
    </div>
  );
};

export default PetProfile;

Passo 4: Use o Componente em Sua Aplicação

Modifique o arquivo App.js para incluir o componente PetProfile:

// src/App.js

import React from "react";
import PetProfile from "./components/PetProfile";

function App() {
  return (
    <div className="App">
      <h1>Demonstração da Mock API de Pet Store</h1>
      <PetProfile petId="1" />
    </div>
  );
}

export default App;

Inicie sua aplicação React:

Você pode iniciar a aplicação React executando npm start. Sua aplicação React agora deve buscar e exibir dados de pets usando a mock API fornecida pelo Apidog.

O código-fonte completo do arquivo acima pode ser encontrado em CodeSandBox . Certifique-se de clonar e alterar a URL para a URL do seu próprio servidor, caso contrário, não funcionará!

Melhores Práticas para Mock de API com Aplicativos React

Melhores Práticas para Mock de API com Aplicativos React
Melhores Práticas para Mock de API com Aplicativos React
Para um fetching de dados mais robusto, considere usar bibliotecas como React Query ou SWR. Essas ferramentas oferecem caching, refetch automático e outros recursos avançados que podem melhorar o desempenho e a experiência do usuário da sua aplicação.

Conclusão

Usar dados mock é uma técnica poderosa para garantir que sua aplicação React.js seja robusta e confiável, mesmo antes de o backend real estar pronto. Ao alavancar o Apidog para criar e gerenciar mocks de APIs, você pode otimizar seus fluxos de trabalho de desenvolvimento e teste. Comece a usar o Apidog para suas necessidades de dados mock e melhore seu processo de desenvolvimento hoje.

Perguntas Frequentes sobre Mock de Rest API do React.js

Q1. Como mockar REST API em React?

Para mockar uma REST API em React, você pode:

Q2. Você pode criar uma REST API com React?

React em si é uma biblioteca de frontend e não pode criar uma REST API. No entanto, você pode:

Q3. O que são dados mock em React?

Dados mock em React referem-se a dados falsos ou de exemplo utilizados durante o desenvolvimento e teste. Eles permitem que os desenvolvedores:

Dados mock são geralmente armazenados em formato JSON e podem ser utilizados para preencher componentes, testar gerenciamento de estado e verificar a lógica de renderização.

Q4. Como criar mock REST API?

Para criar uma mock REST API:

Use JSON Server:

Use Express.js:

Use serviços online:

Use Mirage JS:

Esses métodos permitem que você crie uma API mock funcional com a qual sua aplicação React pode interagir durante as fases de desenvolvimento e teste.

button

Pratique o design de API no Apidog

Descubra uma forma mais fácil de construir e usar APIs

Cadastre-se gratuitamenteBaixar