Nessa altura do campeonato eu não compreendi muito bem o que é o props, sei que é uma nomenclatura padrão no desenvolvimento, e que aparece em vários lugares mas ao que ele está sendo usado, seja dentro de chaves ou colchetes, desde já agradeço!
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!
Solucionado
Nessa altura do campeonato eu não compreendi muito bem o que é o props, sei que é uma nomenclatura padrão no desenvolvimento, e que aparece em vários lugares mas ao que ele está sendo usado, seja dentro de chaves ou colchetes, desde já agradeço!
Olá Hugo, tudo bem?
"props" é uma abreviação de "properties" e é uma das maneiras que temos de passar informações para um componente filho. Quando utilizamos o nome "props", é apenas uma convenção como você mesmo pontuou, sendo que o nome poderia ser outro, como "propriedades". Quando fazemos isso, o compilador entende que estamos passando um objeto para o componente, e assim podemos acessar esses valores como em um objeto normalmente, como no exemplo a seguir:
Criação de um componentes e suas propriedades:
// Componente Filho (Botao)
function Botao(props) {
return <button>{props.texto}</button>;
}
Utilização do componente
// Componente Pai
function App() {
return (
<div>
<Botao texto="Clique aqui!" />
<Botao texto="Enviar" />
</div>
);
}
Podemos pensar que nas entrelinhas "props" se assemelha a algo do tipo, por exemplo:
props {
texto: "Enviar"
}
Em resumo, o "props" nada mais é do que um objeto e, por se tratar de um objeto, também podemos utilizar a desestruturação (destructuring) para explicitarmos o conteúdo. Nesse tipo de caso, vemos a utilização de chaves, que será utilizada como no exemplo a seguir:
// Componente Filho (Botao)
function Botao({ texto }) {
return <button>{texto}</button>;
}
No final das contas, como passamos as propriedades para um componente, seja passando diretamente o objeto e acessando seus campos como no primeiro exemplo, ou utilizando a desestruturação, é uma questão de preferência.
Espero que minha explicação faça sentido para voce. Caso tenha restado alguma outra dúvida, por favor, me diga. Bons estudos! :)
Obrigado Lucas, Eu só precisava de algo para refrescar a minha memória, a sua explicação foi de fácil entendimento. Além do mais terminando esse curso vou rever o que é props na exata aula que o professor implementa ele ao projeto.