A grande reconstrução: o teu site em React

Reescreve o teu site do Nível 1 em React. O mesmo site, pela terceira vez – desta vez como profissional.

A tua missão

Vais pegar no teu site dos Níveis 1–2 e construí-lo outra vez em React. Parece um passo atrás? Não é – é o melhor treino: já tens o conteúdo e o design resolvidos, por isso podes focar-te só na técnica nova. E no fim, vais ver a preto e branco porque os profissionais acham que vale a pena.

O plano de reconstrução

Divide o site em componentes. Pega em papel e lápis (a sério!) e esboça o teu site como caixas: Header, Gallery, Quiz, Footer… Cada caixa = um ficheiro em src/.
Move o HTML para componentes. Copia pedaço a pedaço dos teus ficheiros .html antigos para JSX. Cuidado com as diferenças habituais: class → className, cada componente devolve um elemento envolvente. Copia as tuas imagens para a pasta public/ no projeto Vite – assim caminhos como /images/team.jpg funcionam igual.
Move o CSS. Copia o conteúdo do teu style.css para src/App.css. Deve funcionar quase igual – CSS continua a ser CSS.
Tira os dados para arrays. Cartões, resultados, fotos da galeria – tudo o que se repete, transforma num array de objetos + .map(), como aprendeste na lição de componentes.

Reescreve os feitiços do Nível 2 como estado. Eis uma tabela de conversão:

Nível 2 (JavaScript simples)	React
`getElementById` + `textContent`	estado + `{value}` no JSX
`addEventListener("click", ...)`	`onClick={...}`
`classList.toggle` + CSS `.hidden`	estado booleano + `{condition && (...)}`
um contador com variável	`useState` com número

Vou mostrar-te: modo escuro à maneira React

Vamos reescrever um feitiço juntos, para veres a conversão em ação:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

E em Header.jsx, o botão recebe uma função como prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

Uma última coisa nova: uma prop também pode ser uma função. App tem o estado e empresta ao filho um botão para o alternar. Isto chama-se «o estado vive em cima» e é o padrão mais comum no React.

Lista de verificação da reconstrução

O site está dividido em pelo menos 4 componentes em ficheiros separados
Elementos repetidos (cartões, fotos…) nascem de um array via .map()
Pelo menos dois sítios interativos correm com useState
O modo escuro funciona e é lembrado (localStorage)
Sem erros na consola
Não há getElementById em lado nenhum do código 😉

💡

Ficar bloqueado faz parte do jogo. Esta lição é uma maratona, não um sprint – podes dividi-la por vários dias. Quando bloqueares: a consola (F12), a mensagem de erro do Vite e comparar com exemplos das lições anteriores. É assim que um profissional depura.

✅

Verifica tu: O teu site corre em localhost e parece (quase) igual ao de antes – mas por dentro é feito de componentes, dados e estado. Agora tenta adicionar um cartão ao array de dados e vê quanto pouco trabalho dá. Isso é toda a razão do React existir.

O que ficas a saber desta lição

A reconstrução: dividir em componentes → mover HTML e CSS → dados para arrays → feitiços para estado.
Uma prop pode ser função – um pai empresta aos filhos botões para controlar o seu estado.
O mesmo resultado, estrutura mais limpa: menos cópias, alterações mais fáceis. É progresso que se vê.