React: praticando o consumo de APIs

Introdução ao Curso de React

Olá! Boas-vindas a mais este curso de React, no qual vamos praticar extensivamente o consumo de APIs em aplicações React.

Meu nome é Neilton, sou instrutor na Escola de FrontEnd.

Audiodescrição: Neilton é um homem de pele negra, com olhos e cabelos escuros. Ele usa óculos com armação retangular e está vestindo uma camisa amarela.

Objetivo do Curso

O objetivo principal deste curso é que pratiquemos o consumo de APIs no ambiente do React. O React possui uma abordagem distinta para trabalharmos com APIs e consumirmos serviços externos. Queremos que vocês tenham contato com essa abordagem, revisem o que será apresentado e apliquem nos exercícios práticos.

Projeto ClimaApp

O projeto que vamos desenvolver é a aplicação ClimaApp.

Esta é uma aplicação que consome um serviço de API de clima e exibe algumas informações, como o nome da cidade, a data atual, um ícone baseado na previsão do tempo para aquele dia e hora, além de mostrar a temperatura, mínimas e máximas, entre outras informações. A API que utilizaremos é a API brasileira chamada HG Brasil, que está no mercado há mais de 15 anos, fornecendo dados sólidos e seguros sobre o clima no Brasil.

Pré-requisitos e Estrutura do Curso

Para seguir neste curso, é recomendável ter uma boa base de React, compreender o funcionamento de componentes, props, states e conhecer alguns hooks, principalmente useState e useEffect. Isso é o necessário.

Este curso é voltado para a prática, e disponibilizaremos alguns exercícios. No próximo vídeo, faremos uma breve revisão sobre como consumir APIs no React. Nos vemos lá!

Introdução ao Projeto ClimaApp

Vamos começar a trabalhar na nossa aplicação ClimaApp, onde consumiremos uma API para obter informações climáticas. Primeiro, precisamos proteger nossa chave de API no front-end. Para isso, criaremos um arquivo chamado .env.local na pasta raiz do projeto.

// [05:39]
.env.local

Configuração da Chave de API

Dentro desse arquivo, definimos uma variável de ambiente para armazenar nossa chave de API. Usamos o prefixo VITE_ porque o Vite expõe variáveis de ambiente que começam com VITE_ no front-end.

// [06:26]
VITE_WEATHER_API_KEY=

Agora, atribuímos nossa chave de API a essa variável. Lembre-se de substituir <SUA_CHAVE_DE_API> pela sua chave real.

// [06:42]
VITE_WEATHER_API_KEY=<SUA_CHAVE_DE_API>

Importação e Uso da Chave de API

No arquivo app.jsx, fora do componente App, importamos a variável de ambiente para utilizá-la no nosso código.

// [07:29]
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

Configuração do Estado e Uso do useEffect

Para consumir serviços externos no React, utilizamos o hook useEffect. Antes disso, precisamos criar um estado para armazenar os dados do clima. Vamos criar um estado chamado weather e a função setWeather.

// [08:33]
const [weather, setWeather] = useState(null)

Certifique-se de importar o useState do React.

// [08:50]
import { useState } from "react";

Agora, vamos utilizar o useEffect, que será executado quando a aplicação for renderizada. Importamos também o useEffect.

// [08:56]
import { useState, useEffect } from "react";

Escrevemos o useEffect e passamos uma função de callback e uma lista de dependências vazia, para que ele seja executado apenas uma vez.

// [09:00]
useEffect(() => {
}, [])

Função Assíncrona para Buscar Dados da API

Dentro do useEffect, criaremos uma função assíncrona chamada fetchWeather para buscar os dados da API. Utilizaremos try-catch para lidar com possíveis erros.

// [09:22]
useEffect(() => {
    async function fetchWeather(){
        try {

    } catch (erro) {
        console.error("Erro ao buscar dados da API", erro);
    }
}


}, [])

Requisição à API e Atualização do Estado

No bloco try, faremos a requisição à API utilizando fetch. Passamos a URL da API como uma template string e interpolamos a chave da API.

// [10:13]
    const response = await fetch(
        `https://api.hgbrasil.com/weather?format=json-cors&${API_KEY}&city_name=São Luis, MA`
    );

Convertendo a resposta para JSON, armazenamos os dados em uma constante data.

// [10:17]
    const data = await response.json();

Verificamos se data.results existe e, se sim, atualizamos o estado weather.

// [10:29]
    if(data.results){
        setWeather(data.results)
    }

Chamamos a função fetchWeather dentro do useEffect para iniciar a busca dos dados.

// [10:56]
    fetchWeather();

Renderização das Informações Climáticas

Agora, vamos renderizar as informações na tela. Utilizamos uma renderização condicional para exibir os dados apenas se weather existir.

// [11:18]
{weather && (
    <>
        <h1>{weather.city}</h1>
        <WeatherCard weather={weather}/>
    </>
)}

Componente WeatherCard

No componente WeatherCard, recebemos a prop weather e exibimos as informações climáticas.

// [11:36]
const WeatherCard = ({ weather }) => {

Exibimos a data de hoje, a imagem do clima, a temperatura, a descrição, a umidade e as temperaturas mínimas e máximas.

// [11:49]
    <p>Hoje ({weather.forecast[0].date})</p>

// [12:07]
    <img src={`./icons-weather/${weather.condition_slug}.svg`} alt={weather.description}/>

// [12:14]
    <h2 className="temperature">{weather.temp}°</h2>

// [12:37]
    <p className="condition">{weather.description}</p>

// [12:49]
    <span>{weather.humidity}%</span>

// [13:10]
    <span>{weather.forecast[0].min}/{weather.forecast[0].max}°</span>

Teste e Correção de Erros

Após essas alterações, salvamos a aplicação e recarregamos a página no navegador. Se as informações de São Luís aparecerem corretamente, a API está funcionando. Caso contrário, verificamos o código para corrigir possíveis erros, como a falta de key= na URL da API.

// [18:19]
    const response = await fetch(
        `https://api.hgbrasil.com/weather?format=json-cors&key=${API_KEY}&city_name=São Luis, MA`
    );

Conclusão e Prática

Dessa forma, fazemos requisições para APIs e serviços externos utilizando React. Agora, é hora de praticar com os exercícios para consolidar os conhecimentos. Até mais!