Projeto 02 – Galeria de Componentes Dinâmicos 🎨
Neste projeto, você vai aplicar a componentização para criar uma galeria de produtos (como um e-commerce simplificado).
🎯 Objetivo
Desenvolver componentes reutilizáveis, organizar o projeto em pastas e utilizar props para exibir diferentes conteúdos na mesma estrutura visual.
🛠️ Requisitos
- Uso de Props para passar dados.
- Organização de componentes em uma pasta própria (
src/components). - Uso de CSS para estilização básica.
📝 Passo a Passo
1. Preparação
No seu projeto criado na Aula 01, crie uma pasta chamada components dentro da src.
2. Criação do Componente Item
Crie o arquivo src/components/CardProduto.jsx. Ele deve exibir:
- Uma imagem (pode usar https://via.placeholder.com/150).
- Nome do produto.
- Preço.
- Um botão "Comprar".
3. Implementação
No arquivo App.jsx, importe o CardProduto e chame-o pelo menos 4 vezes, simulando produtos diferentes (ex: Teclado, Mouse, Monitor, Headset).
4. Estilização
Crie um arquivo Card.css (ou use o App.css) para garantir que os cards fiquem um ao lado do outro e tenham uma borda ou sombra elegante.
✅ Critérios de Entrega
- O código deve estar limpo e sem avisos no terminal.
- A interface deve mostrar os 4 produtos diferentes de forma organizada.
- O aluno deve demonstrar que as informações mudam através das props, sem duplicar o código HTML inteiro do card.
Dica: Imagens Reais
Você pode usar o site Unsplash Source para carregar imagens reais de tecnologia nos seus cards!