Crie um site simples com React, Axios e uma REST API desenvolvida com o MongoDB Atlas App Services
Nesta postagem do blog, mostrarei como podemos usar uma REST API que criei com a ajuda do Atlas App Services para acessar meus dados no MongoDB Atlas cluster e exibir o resultado da consulta em um site criado com o React.
No final deste tutorial, você terá um projeto React básico capaz de recuperar uma lista de países por meio de uma REST API e exibi-los em uma página da web.
Na próxima postagem do blog, usarei este projeto como ponto de partida. A lista de países se tornará um filtro para vários gráficos construídos com o MongoDB Charts que poderei importar para um website usando o SDK do MongoDB Charts. O resultado final será um painel do19 COVID-10} que será fácil de filtrar por país.
Verifique se suas versões de
node, npm e npx estão próximas das minhas versões:
No corpo desta postagem do blog, explicarei como criar esse aplicativo. Se você não quiser acompanhar e preferir pular para o projeto final, você pode clonar este repositório do Github:
O último comando deve abrir automaticamente uma nova guia em seu navegador favorito no endereço http://localhost:3000, e você deverá ver o logotipo padrão do React spinning. Antes de continuarmos, podemos simplificar o projeto removendo todos os arquivos desnecessários.
Agora temos uma tela limpa para a próxima etapa.
O Axios é um cliente HTTP baseado em promessas para Node.js e o cliente HTTP mais conhecido, até onde eu saiba, com atualmente mais de 14 milhões de downloads semanais. Vamos usá-la para consultar nossa REST API e recuperar a lista de países a serem exibidos.
Conforme mencionado na introdução, a REST API que vamos usar nesta publicação do blog já existe e foi criada usando o Atlas App Services para que possa ser dimensionada de forma fácil e automática. Essa REST API expõe metadados do Cluster de Dados Abertos19 da COVID- que disponibilizamos ao público. Confira todos os detalhesneste blog post .
Esta é a REST API que usaremos. Você pode abri-lo em uma nova guia no navegador ou usar o comando curl:
O resultado de acessar esta REST API é um JSON document que se parece com isto:
E contém a lista de países que eu quero, que é a lista de todos os países que existem no conjunto de dados da Universidade Johns Hopkins.
Agora que temos tudo o que precisamos para construir nosso site React, vamos programar!
Se você seguiu todas as instruções até agora, esta é a aparência de sua pasta de trabalho:
Vamos agora editar o conteúdo de
public/index.html. Nada muito sofisticado em comparação com a versão original que veio com o aplicativo de amostra. Apenas removi o que não era necessário.A única coisa que precisamos notar neste arquivo é o fato de que agora temos um
divvazio com um ID root que usaremos para injetar nosso conteúdo do React.Vamos criar um novo arquivo
src/index.js:Agora estamos injetando nosso conteúdo React em nosso site e o conteúdo será o que o novo componente
RestExample renderizará.Agora você pode iniciar o projeto com o comando:
Há algumas coisas que vale a pena explicar aqui se você é novo no React:
- Na linha 6, estamos criando um estado,
countries, que é inicializado para uma array vazia e uma funçãosetCountries()que pode alterar o valor dessa variável. Mais documentação aqui. - Com a ajuda da função
useEffect()(começando na linha 8) e da biblioteca Axios, podemos executar a função uma vez, extrair os países da resposta e definir os valorescountriesde nossa lista. Mais documentação aqui. - Finalmente, nosso componente de função renderizará o conteúdo retornado. A função
countries.map()itera sobre a lista de países e transforma cada uma das strings em uma marcação<li>para criar uma lista não ordenada em HTML.
O site final deve ficar assim:
Se você ficou confuso em algum momento e seu aplicativo não está funcionando, basta clonar o projeto final:
Nesta publicação do blog, você aprendera a criar um website básico do React que usa o Axios para recuperar dados de um cluster do MongoDB Atlas usando uma REST API implementada com o MongoDB Atlas App Services.
Na próxima postagem do blog desta série, estenderemos esse projeto para que possamos integrar alguns gráficos do MongoDB Charts. Mostraremos os dados do COVID-19 de um país e selecionaremos por qual país queremos filtrar. Fique atento!
Se tiver dúvidas, acesse o site da nossa comunidade de desenvolvedores, no qual os engenheiros e a comunidade do MongoDB ajudarão você a desenvolver sua próxima grande ideia com o MongoDB.
Avalie esse exemplo de código