Duas Props
Parte da seção Fundamentos do Journey de React da Coddy — lição 18 de 42.
Componentes rotineiramente recebem várias props. Liste todas elas na desestruturação e misture-as no JSX:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// renders: Laptop costs $999Observe os tipos: name é uma string (aspas), price é um número (chaves). Manter números como números faz diferença no momento em que você realiza cálculos com eles.
Desafio
FácilCrie uma linha de produtos para a loja.
- Faça
Productreceber as propsnameepricee renderizar{name} costs ${price}em seu parágrafo. - Em App, renderize um Product com name
Laptope price999(como um número!). A página deve exibirLaptop costs $999.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React