Como consumir dados de um arquivo .json com o ReactJS.

Nessa última semana me deparei com um desafio em uma aplicação que estava desenvolvendo utilizando o ReactJS, eu tinha que consumir dados externos, mas não eram dados de uma API como de costume, e sim de um arquivo .json. Então comecei algumas pesquisas e não encontrei quase conteúdo nenhum em pt-BR, e os que consegui em inglês, utilizavam apenas JavaScript puro. Com isso, resolvi criar esse meu primeiro post falando um pouco de como consumir esses dados no React em um texto em Português.

Passo 1 — Onde colocar o arquivo .json:

O arquivo .json deve ser guardado na pasta public do seu projeto React, assim ele ficará visível através do seu servidor local. Caso o arquivo não esteja nessa pasta, ele não ficará visível para o servidor e retornará um erro 404:

Arquivo users.json dentro da pasta public

O meu arquivo users.json possui a seguinte estrutura:

estrutura do JSON

Passo 2 — Utilizando a Fetch Api para consumir os dados do arquivo .json:

Aqui utilizaremos um recurso nativo do JavaScript para consumir os dados do .json, o método fetch() da Fetch API, esse método recebe como parâmetro uma string com o endereço do recurso que deseja consumir, nesse caso passamos o caminho para o arquivo .json que está guardado na pasta public do nosso projeto.

Vale mencionar que a pasta public é a pasta que nosso servidor enxerga, como se fosse a pasta base do projeto, quando efetuamos o build do projeto, os arquivos estáticos são gerados a partir do conteúdo que está na pasta src e salvos na pasta public para que possam ser enxergados e executados pelo navegador. Por isso podemos referenciá-la com o “./”

Método fetch() recebendo o caminho do .json

O segundo parâmetro é um objeto com as configurações da requisição, passaremos como argumento um objeto com o header da requisição, declarando qual tipo de objeto esperamos como resposta, nesse caso aceitaremos um JSON .

O argumento passado como segundo parâmetro é um objeto contendo as configurações da Requisição.

O método fetch nos retorna uma Promise e para tratá-la temos que utilizar o método .then(), ele recebe como parâmetro uma função de callback que irá tratar a resposta da Promise. Para isso vamos utilizar uma arrow function passando como argumento um objeto chamado res (de Resposta), esse objeto é do tipo ReadableStream, transformaremos essa resposta em um JSON com o método .json().

O Método then() recebe uma arrow function que trata a resposta da Promise.

O método .json() também nos retorna uma Promise, por isso concatenaremos um novo .then() para tratar esta resposta.

O console.log() exibe o JSON como mostrado na linha comentada.

e com isso podemos manipular essa reposta através de um useState na nossa aplicação em React.

No Exemplo abaixo temos um componente utilizando o useEffect para efetuar a requisição com a Fetch API assim que o componente for renderizado e atribuindo o Array com os dados dos usuários em uma variável users através do método setUsers criado com o useState.

Aqui eu termino meu primeiro post nesta plataforma, espero ter te ajudado com esse pequeno tutorial, estou aberto a dicas e críticas construtivas, caso este post tenha te ajudado pode deixar um comentário ou um “Clap”!