🚀 Capítulo 10: Context API - Rede de Comunicação

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o problema do “Prop Drilling” (passar propriedades por muitos níveis) e saberá como usar a Context API para compartilhar um estado global entre vários componentes sem precisar passar props manualmente.

---

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

O alarme de invasão da Base Rebelde precisa ser ouvido por todos os componentes da nave! No entanto, o botão do alarme fica na cabine principal. Seu desafio é usar a Context API para fazer com que o status do alarme chegue a todos os componentes filhos instantaneamente!

---

🧠 Fundamentos: A Teoria Traduzida

Até agora, para passar um dado do Pai para o Filho do Filho, precisávamos passar a prop pelo Filho do meio (que nem usava o dado). Isso se chama Prop Drilling e é muito chato de fazer em projetos grandes.

A Context API funciona como uma rede de rádio da base:

1. createContext(): Cria a frequência de rádio (o contexto).
2. Provider: É o transmissor que envia o sinal para todos que estão dentro dele.
3. useContext(): É o radinho que o componente Filho usa para escutar a mensagem.

---

📖 Exemplo Guiado: Alarme da Base

Vamos criar o contexto do alarme.

🛠️ Passo a Passo (Criando o Contexto)

1. Crie um arquivo chamado AlarmeContext.jsx na pasta src:

import { createContext, useState } from 'react';
 
// 1. Criamos o contexto
export const AlarmeContext = createContext();
 
// 2. Criamos o Provider (Transmissor)
export function AlarmeProvider({ children }) {
  const [alarmeAtivo, setAlarmeAtivo] = useState(false);
 
  return (
    <AlarmeContext.Provider value={{ alarmeAtivo, setAlarmeAtivo }}>
      {children}
    </AlarmeContext.Provider>
  );
}

🛠️ Passo a Passo (Envolvendo a Aplicação)

Abra o App.jsx e envolva os componentes com o Provider:

import { AlarmeProvider } from './AlarmeContext';
import Cabine from './Cabine';
import Motor from './Motor';
 
function App() {
  return (
    <AlarmeProvider>
      <div>
        <h1>🚀 Sistemas da Nave</h1>
        <Cabine />
        <Motor />
      </div>
    </AlarmeProvider>
  )
}
 
export default App;

🛠️ Passo a Passo (Consumindo o Contexto)

Crie o componente Motor.jsx que precisa saber do alarme:

import { useContext } from 'react';
import { AlarmeContext } from './AlarmeContext';
 
function Motor() {
  // Usamos o radinho para ouvir a frequência do alarme
  const { alarmeAtivo } = useContext(AlarmeContext);
 
  return (
    <div style={{ background: alarmeAtivo ? 'red' : 'green', color: 'white' }}>
      <h3>Status do Motor</h3>
      <p>{alarmeAtivo ? '⚠️ Potência Máxima! Alarme Ativo!' : 'Operação Normal'}</p>
    </div>
  )
}
 
export default Motor;

🕹️ Como Executar e Testar no VS Code

1. Crie também o componente Cabine.jsx com um botão que usa setAlarmeAtivo(!alarmeAtivo).
2. Salve tudo e clique no botão na cabine. Você verá o componente Motor mudar de cor mesmo sem receber nenhuma prop direta do App!

---

🛠️ Prática Obrigatória 1

Crie o componente Cabine.jsx que consome o AlarmeContext e tem um botão escrito “Disparar Alarme” que altera o estado de alarmeAtivo.

---

🛠️ Prática Obrigatória 2

Adicione um novo valor no contexto chamado nivelAlerta (iniciando em “Baixo”). Crie um botão na cabine para mudar o nível para “Alto”.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No Cabine.jsx:

import { useContext } from 'react';
import { AlarmeContext } from './AlarmeContext';
 
function Cabine() {
  const { alarmeAtivo, setAlarmeAtivo } = useContext(AlarmeContext);
 
  return (
    <div>
      <h3>Cabine de Comando</h3>
      <button onClick={() => setAlarmeAtivo(!alarmeAtivo)}>
        {alarmeAtivo ? 'Desligar Alarme' : 'Disparar Alarme'}
      </button>
    </div>
  )
}

---

← Capitulo Anterior | Proximo Capitulo →