Ficha 01 · React fundamentos · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Exercício 1 · Setup e primeiro componente

Cria um novo projecto Vite chamado react-pratica. Substitui o conteúdo de App.jsx por um componente <Cartao /> que recebe nome, cargo e email como props e mostra-os formatados num cartão.

Resposta:

); }

function App() { return ( ); }

export default App;

</div>

### Exercício 2 · Lista de cartões

Cria um array de 3 utilizadores e renderiza um `<Cartao />` para cada um usando `.map()`. Não esqueças a `key`.

<div class="resposta">

Resposta:

</div>


  );
}

Exercício 3 · Contador com useState

Cria um componente <Counter /> com: - Display do número actual (começa em 0). - Botão "+1" para incrementar. - Botão "-1" para decrementar. - Botão "Reset" para voltar a 0.

Resposta:

); }

</div>

### Exercício 4 · Toggle light/dark

Cria um componente `<App />` com um botão que alterna entre tema claro e escuro. Quando dark, fundo preto e texto branco; quando light, o inverso.

<div class="resposta">

Resposta:

</div>


  );
}

Exercício 5 · Formulário controlado

Cria um formulário de registo com 3 campos: nome, email e idade. Ao submeter (preventDefault), mostra os valores num <pre> abaixo do form.

Resposta:

); }

</div>

### Exercício 6 · Lista de tarefas (Todo)

Cria uma aplicação Todo completa:
- Input + botão para adicionar tarefa.
- Lista de tarefas existentes.
- Checkbox para marcar como feita (texto riscado).
- Botão para remover cada tarefa.

<div class="resposta">

Resposta:

</div>


  );
}

Exercício 7 · Estado partilhado (lifting state up)

Cria dois componentes <Termometro />: um para Celsius, outro para Fahrenheit. Quando o user escreve em qualquer um deles, o outro actualiza com o valor convertido. Sobe o estado para o pai.

Fórmulas: - F = C × 9/5 + 32 - C = (F - 32) × 5/9

Resposta:

); }

function App() { const [celsius, setCelsius] = useState(""); const [fahrenheit, setFahrenheit] = useState("");

const handleCelsius = (val) => { setCelsius(val); if (val === "") { setFahrenheit(""); } else { const f = (Number(val) * 9/5) + 32; setFahrenheit(f.toFixed(2)); } };

const handleFahrenheit = (val) => { setFahrenheit(val); if (val === "") { setCelsius(""); } else { const c = (Number(val) - 32) * 5/9; setCelsius(c.toFixed(2)); } };

return (

); }

</div>

### Exercício 8 · Componente Modal reutilizável

Cria um componente `<Modal isOpen onClose>` que mostra um overlay com children no centro. Tem um botão "X" no topo direito que chama `onClose`. Usa-o numa app para mostrar/esconder uma mensagem de boas-vindas.

<div class="resposta">

Resposta:

</div>


    </div>
  );
}

function App() {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Abrir modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <h2>Bem-vindo!</h2>
        <p>Esta é uma mensagem do modal.</p>
      </Modal>
    </div>
  );
}

Nota: e.stopPropagation() impede que clique dentro do modal feche o overlay; onClick={onClose} no overlay permite fechar clicando fora.