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!
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.