React: Consumindo uma API

Nós vimos até esse momento a construção de sites estáticos, que utilizam coleções locais de dados. Também vimos na missão anterior o conceito de API. Vimos que a API possibilita a comunicação entre o sistema Front-end e o sistema Back-end.

Nosso objetivo nesta aula é relembrar o conceito de REST e como ele se aplica na construção de APIs. Ao final desta aula você será capaz de avançar para uma etapa mais prática, conhecendo o projeto que será desenvolvido.

Nós vimos até esse momento a construção de aplicações estáticas, que utilizam coleções locais de dados. Também vimos na missão anterior o conceito de API, e para que isso serve. Agora, vamos unificar esses conhecimentos e aprender a criar

Nesta aula vamos ver na prática todo o conteúdo que aprendemos anteriormente sobre API REST, como endpoints, verbos http e o formato JSON. Além disso, veremos como usar o Postman, uma ferramenta para testes de API, para consumir a API de UFs

Nesta aula vamos conhecer a biblioteca Axios, aprender a instalá-la e a usá-la em um projeto React / NextJS. O objetivo é entender como o uso do Axios facilita o consumo de APIs REST em projetos JavaScript.

Nesta aula vamos conhecer o código do nosso App de UFs e entender como usamos o retorno da API para exibir a lista de UFs na tabela HTML dentro do site. Ao final dessa aula você terá implementado o código principal da aplicação de API.

Nesta aula vamos organizar melhor o código do projeto separando o consumo da API do código principal da aplicação. A ideia é ter uma camada de serviço com o consumo da API e o arquivo principal com a listagem das UFs.

Nesta aula vamos conhecer uma estrutura de condição do JavaScript utilizada para tratamento de erros. Estamos falando do try / catch, estrutura que permite tratar e personalizar mensagens de erro caso algum problema ocorra no código.

Nesta aula vamos conhecer alguns dos principais erros que podem ocorrer no consumo de uma API e como resolvê-los. Ao final desta aula teremos usado estruturas condicionais e o try / catch para implementar um tratamento de erros do App de UFs