Curso
React: Consumindo uma API
Neste curso daremos mais um passo no nosso aprendizado de React e veremos como construir uma aplicação capaz de consumir dados de uma API. A ideia é que a aplicação se conecte à internet para buscar dados a partir de uma API, ao invés de usar dados de coleções locais. Esse será seu primeiro passo na construção de sistemas FullStack.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
9 horas
(9 aulas)
Aula 1 - Introdução
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.
Aula 2 - Relembrando REST
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.
Aula 3 - Conhecendo o projeto
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
Aula 4 - Testando a API na prática
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
Aula 5 - Axios
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.
Aula 6 - Código do Projeto
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.
Aula 7 - Separando em Camadas
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.
Aula 8 - Try / Catch
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.
Aula 9 - Tratamento de erros
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
Veja outros cursos de React
React: Criando sua primeira aplicação FullStack
React: Trabalhando com coleções de dados
React: Componentização de aplicações com Props + useState