🚀 Capítulo 12: APIs - Holocron da Galáxia

🎯 Objetivo da Aula

Ao final desta aula, você saberá como conectar a sua aplicação React a uma API externa da internet usando o comando fetch combinado com o hook useEffect, permitindo trazer dados reais para a tela.

---

🏢 O Cenário Prático (Seu Desafio)

O Holocron é o banco de dados dos Jedi. Você precisa acessar o Holocron da Galáxia para listar os planetas reais do universo de Star Wars! Usaremos a API pública swapi.dev para buscar esses dados.

---

🧠 Fundamentos: A Teoria Traduzida

Até agora, usamos dados fixos (arrays que nós mesmos escrevemos). No mundo real, os dados vêm de um servidor (API).

Para buscar dados no React, usamos duas coisas juntas:

1. fetch(): É a função do JavaScript que vai até a internet buscar o arquivo JSON com os dados.
2. useEffect com []: Como não queremos que o React fique buscando os dados toda vez que a tela atualizar, usamos o useEffect com o array vazio para buscar apenas uma vez quando a tela carregar.

---

📖 Exemplo Guiado: Buscando Planetas

Vamos buscar a lista de planetas.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx e altere o código:

import { useState, useEffect } from 'react';
 
function App() {
  const [planetas, setPlanetas] = useState([]);
 
  useEffect(() => {
    // Função assíncrona para buscar os dados
    async function carregarPlanetas() {
      const resposta = await fetch('https://swapi.dev/api/planets/');
      const dados = await resposta.json();
      
      // Salvamos a lista de planetas no nosso estado
      setPlanetas(dados.results);
    }
 
    carregarPlanetas();
  }, []); // Array vazio = roda só uma vez
 
  return (
    <div>
      <h1>🪐 Holocron: Planetas da Galaxia</h1>
      
      <ul>
        {planetas.map((planeta, index) => (
          <li key={index}>
            <strong>{planeta.name}</strong> - Clima: {planeta.climate}
          </li>
        ))}
      </ul>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve o arquivo e veja o navegador.
2. Pode demorar um ou dois segundos (é o tempo de ir na internet buscar).
3. Uma lista com nomes como “Tatooine”, “Alderaan” e “Hoth” aparecerá na tela!

---

🛠️ Prática Obrigatória 1

Crie um estado const [carregando, setCarregando] = useState(true);. Enquanto os dados não chegam, mostre a mensagem <h2>Carregando dados do Holocron...</h2> na tela. Mude o estado para false assim que os dados forem salvos.

---

🛠️ Prática Obrigatória 2

Mude a URL do fetch para https://swapi.dev/api/people/ e liste o nome dos personagens em vez dos planetas.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No useEffect:

setPlanetas(dados.results);
setCarregando(false); // Desliga o carregando

No JSX:

if (carregando) {
  return <h2>Carregando dados do Holocron...</h2>;
}

---

← Capitulo Anterior | Proximo Capitulo →