Todos os desafios podem aparecer incompletos por padrão. Eles incluem seções vazias onde você precisa adicionar o código necessário. Assim que todas as partes ausentes forem preenchidas corretamente, o código completo será renderizado na página ao vivo.

Cada desafio inclui dois botões de ajuda:
- **Dica**: mostra pequenas pistas para te orientar;
- **Solução**: abre a versão completa em uma nova aba.

Nota

Você também pode assistir ao breve vídeo tutorial abaixo para aprender como trabalhar com o CodeSandbox.

## Como trabalhar com o CodeSandbox

## Tarefa: Criando um Cartão de Produto
Crie um cartão de produto simples usando JSX e renderize-o no DOM. O cartão de produto deve incluir:
1. A imagem do produto (elemento `img`).
   - O atributo `src` deve ser igual à variável `imageUrl`.
   - O atributo `alt` deve ser igual à string `Computer`.
   - O atributo `width` deve ser igual a `256`.
2. O título do produto (elemento `h3`).
   - O conteúdo de texto deve ser `Computer`.
3. O preço do produto (elemento `span`).
   - O conteúdo de texto deve ser `Price: $129.99`.
4. A descrição do produto (elemento `p`).
   - O conteúdo de texto deve ser `New Model`.


1. O atributo `src` deve conter a variável `imageUrl` como valor. Utilize chaves `{}`.
2. O atributo `alt` deve conter a string `"Computer"` como valor. Coloque entre aspas duplas.
3. O atributo `width` deve conter o número `256` como valor. Utilize chaves `{}`.
3. Certifique-se de que os elementos `h3`, `span` e `p` possuam os valores corretos.

Explore como o React é utilizado para construir interfaces de usuário dinâmicas usando componentes, JSX e props. Gerencie estado e efeitos colaterais com hooks, renderize listas e interfaces condicionais, e aplique estilos a componentes reais. Configure um projeto React com Vite e compreenda como as aplicações são estruturadas.

Desafio: Renderizar um Elemento no React

Como trabalhar com o CodeSandbox

Tarefa: Criando um Cartão de Produto