Componentes Dinâmicos e Listas em React
Área: Frontend | Nível recomendado: Iniciante
Vídeo
Link direto: https://youtu.be/mAXcFzFicdk
Tópicos
Introdução aos Componentes e Props:
Discussão sobre como os componentes permitem a reutilização de código e a modularização em React.
Explicação detalhada sobre como usar
props
para passar dados e eventos entre componentes.
Introdução ao Flexbox para Layouts Responsivos:
Introdução básica ao Flexbox, recomendando o jogo Flexbox Froggy como recurso interativo para aprendizagem.
Aplicação prática de Flexbox para arranjar múltiplos cards dentro de um contêiner, demonstrando o layout responsivo.
JavaScript e React: Manipulação de Arrays e Objetos:
Revisão sobre arrays e objetos em JavaScript, mostrando como essas estruturas são essenciais para gerenciar dados dentro dos componentes.
Demonstração de como transformar dados de array em componentes usando o método
map
.
Renderização Condicional em Componentes:
Introdução à renderização condicional em React, usando operadores como
&&
e ternário?:
para criar interfaces que respondem a diferentes estados ou condições.Exemplos práticos de como aplicar renderização condicional para melhorar a experiência do usuário.
Prática com Listas Dinâmicas e Renderização Condicional:
Criação de uma lista de componentes que são renderizados dinamicamente a partir de um array de dados.
Implementação de condições dentro da renderização para tratar listas vazias ou critérios específicos.
Material de Apoio
Repositório no GitHub
PDF para Download
Miro
Exercícios de Fixação
Exercícios de Validação
Desafio de Código
Adicione funcionalidade ao componente Card
para que ele exiba uma mensagem "Este item não evolui" quando a propriedade evoluiPara
for null
ou undefined
.
Implemente a renderização condicional no componente
Card
.
Revisão de Código
Analise o código a seguir, encontre e corrija o erro.
import React from 'react';
export default function App() {
const items = [
{ id: 1, nome: 'Java', imagem: 'https://example.com/java.png' },
{ id: 2, nome: 'Kotlin', imagem: 'https://example.com/kotlin.png' }
];
return (
<div>
{items.map(item => (
<Card key={item.id} nome={item.nome} image={item.imagem} />
))}
</div>
);
}
function Card(props) {
return (
<div className="card">
<h2>{props.item.nome}</h2>
<img src={props.item.imagem} width="200" />
</div>
);
}
Projeto Prático
Crie uma aplicação React que renderize uma lista de produtos em promoção. A lista de produtos deve ser armazenada em um estado e passada para os componentes filhos como props
. Além disso, implemente a funcionalidade para exibir o preço antigo e o novo preço com desconto. Se o produto não estiver em promoção, exiba uma mensagem "Produto não está em promoção".
Tarefas
Criação do Projeto:
Inicialize um novo projeto React.
Crie um componente
ProductCard
que recebaprops
e exiba o nome, a imagem, o preço antigo e o novo preço com desconto de um produto.
Implementação da Lista:
Crie um componente
App
que armazene a lista de produtos no estado e use o métodomap
para renderizar os cards.
Renderização Condicional:
Adicione renderização condicional para exibir a mensagem "Produto não está em promoção" se o produto não tiver desconto.
Last updated