Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alguém me dê uma breve explicação sobre o que é de fato o 'props' ?

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!

2 respostas
soluçã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.