Exercícios de Fixação – Aula 02 🧱

Consolide seus conhecimentos sobre JSX e a criação de Componentes Reutilizáveis.

---

🟢 Nível: Básico

Exercício 01: Sintaxe JSX

Corrija o código abaixo para que ele seja um JSX válido:

function MeuComponente() {
  return (
    <h1 class="sucesso">Título</h1>
    <p>Descrição</p>
    <img src="foto.jpg">
  )
}

Exercício 02: Letra Maiúscula

Por que o código <botao>Clique aqui</botao> pode não funcionar como esperado se o objetivo for renderizar um componente React personalizado chamado Botao?

---

🟡 Nível: Intermediário

Exercício 03: Passando Props

Crie um componente chamado Equipe que recebe uma prop quantidade. O componente deve exibir a frase: "Nossa equipe possui [quantidade] especialistas". No seu App.jsx, chame este componente duas vezes com valores diferentes.

Exercício 04: Destructuring de Props

Reescreva a função abaixo utilizando a técnica de destructuring para capturar nome e idade diretamente nos parâmetros da função:

function Perfil(props) {
  return (
    <div>
      <h3>Nome: {props.nome}</h3>
      <p>Idade: {props.idade}</p>
    </div>
  );
}

---

🔴 Nível: Desafio

Exercício 05: Composição de Cards

Crie um componente chamado VideoCard. Ele deve receber as props: thumbnail, titulo, canal e visualizacoes. 1. Estilize o card usando CSS simples (pode ser no App.css). 2. Tente usar o componente dentro de uma lista (mesmo que estática por enquanto) no App.jsx.