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

Cada desafio inclui dois botões de ajuda:
- **Dica**: exibe pequenas pistas para 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 Code Sandbox

## Tarefa: Criando um Cartão de Produto
Criar um cartão de produto simples usando JSX e renderizá-lo no DOM. O cartão de produto deve incluir:
1. A imagem do produto (`img` element).
   - 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 (`h3` element).
   - O conteúdo de texto deve ser `Computer`.
3. O preço do produto (`span` element).
   - O conteúdo de texto deve ser `Price: $129.99`.
4. A descrição do produto (`p` element).
   - 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` tenham os valores corretos.

Explore os fundamentos da construção de interfaces de usuário com React. Foco em componentes, JSX, fluxo de dados, estado e efeitos colaterais utilizados em aplicações React do dia a dia.

Explore o que é o React e como ele renderiza interfaces de usuário. Foco em componentes, sintaxe JSX e exibição de elementos na tela.

Aprofundamento na passagem de dados entre componentes e controle da saída da interface do usuário. Ênfase em props, renderização condicional e renderização de listas de dados.

Aprenda como as interações do usuário e dados externos alteram a interface ao longo do tempo. Foco no gerenciamento de estado e no tratamento de efeitos colaterais com hooks do React.

Explore maneiras comuns de estilizar componentes React. Foco na aplicação de estilos utilizando estilos inline e CSS externo.

Aprenda como executar um projeto React e compreender sua estrutura. Foco em iniciar um projeto com Vite e navegar pelos arquivos do projeto.

Desafio: Renderizar um Elemento no React

Como trabalhar com o Code Sandbox

Tarefa: Criando um Cartão de Produto

Desafio: Renderizar um Elemento no React

Como trabalhar com o Code Sandbox

Tarefa: Criando um Cartão de Produto