🚀 Capítulo 16: Portals e Refs

🎯 Objetivo da Aula

Ao final desta aula, você entenderá como usar o Hook useRef para “tocar” diretamente em elementos do HTML (como focar em um campo de texto) e o conceito de Portals para desenhar elementos fora da árvore principal do componente (como janelas modais ou hologramas).

---

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

Você precisa de um Projetor Holográfico que mostre mensagens de alerta flutuando fora do painel principal da nave! Além disso, precisa que o cursor do teclado vá direto para o campo de digitação de coordenadas assim que a tela abrir (foco automático).

---

🧠 Fundamentos: A Teoria Traduzida

1. O que é o useRef?

No React, nós não usamos document.getElementById(). Para pegar a referência de uma tag HTML e mexer nela diretamente, usamos o useRef.

• Para que serve? Focar em um input, dar play em um vídeo, ou medir o tamanho de uma caixa sem precisar atualizar a tela.

2. O que são Portals?

Normalmente, todo componente que você cria fica dentro da <div> principal do seu aplicativo. Mas e se você quiser criar um aviso que fica por cima de tudo na tela (como um modal)? O Portal permite “teletransportar” o HTML do componente para outro lugar do arquivo index.html.

---

📖 Exemplo Guiado: Focando no Input com useRef

Vamos fazer o cursor focar no input automaticamente.

🛠️ Passo a Passo

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

import { useState, useRef } from 'react';
 
function App() {
  const [coordenadas, setCoordenadas] = useState('');
  
  // 1. Criamos a referência
  const inputRef = useRef(null);
 
  function focarNoInput() {
    // 3. Acessamos o elemento HTML direto e damos foco
    inputRef.current.focus();
    inputRef.current.style.borderColor = 'cyan';
  }
 
  return (
    <div>
      <h1>🚀 Coordenadas de Salto</h1>
      
      {/* 2. Ligamos a referência à tag HTML */}
      <input 
        ref={inputRef}
        type="text" 
        value={coordenadas}
        onChange={(e) => setCoordenadas(e.target.value)}
        placeholder="Digite as coordenadas..."
      />
 
      <button onClick={focarNoInput}>Focar Mira</button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Clique no botão “Focar Mira”. O cursor do teclado vai pular direto para dentro da caixa de texto e a borda ficará azul (cyan)!

---

🛠️ Prática Obrigatória 1

Use o useRef para criar um botão “Limpar e Focar”. Quando clicado, ele deve apagar o texto digitado e colocar o cursor de volta no campo.

---

🛠️ Prática Obrigatória 2

Pesquise sobre createPortal do pacote react-dom e tente criar uma mensagem que seja renderizada fora da div #root do seu HTML.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No App.jsx:

function limparEFocar() {
  setCoordenadas(''); // Limpa o estado
  inputRef.current.focus(); // Foca
}

---

← Capitulo Anterior | Proximo Capitulo →