Na linha export default Cards ({ itens, styles }) {
}
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Na linha export default Cards ({ itens, styles }) {
}
Opa Lucas, tudo certo?
Desestruturação em JavaScript é uma forma de extrair valores de objetos ou arrays para variáveis. Isso facilita a manipulação dos dados.
Por exemplo, imagine que temos um objeto chamado "carro", com as propriedades "cor" e "marca". Em vez de acessarmos as propriedades como carro.cor e carro.marca, podemos extraí-las para variáveis, como no exemplo abaixo:
var carro = {
cor: "amarelo",
marca: "fiat",
}
var {cor, marca} = obj
// Aqui estamos declarando as variáveis cor e marca que agora tem os valores: cor = "amarelo" e marca = "fiat"No React, as propriedades são passadas como objeto para os componentes. Usando a desestruturação, é possível extrair as propriedades diretamente para variáveis, facilitando sua utilização no JSX. Por exemplo: em vez de fazermos props.items e props.styles, podemos extraí-las diretamente como items e styles.
Oi, Lucas! Tudo bem?
É exatamente como o Gustavo explicou. Ao realizar a desestruturação o seu código fica mais bem organizado e legível. Imagine que ao invés de receber diretamente a propriedade itens ou styles você recebesse um objeto com as props, você teriar que utilizá-los em seu código assim:
props.itens
// ou
props.stylesCom a desestruturação você consegue extrair diretamente essas propriedades para variáveis e utilizá-las sem dificuldades.
Essa é uma prática recomendada ao se escrever código em React, e se você quiser saber mais sobre essas práticas eu recomendo que você leia este artigo que escrevi:
Bons estudos!