Este é um tutorial para iniciantes sobre como usar adereços. É importante que você entenda o que é desestruturação e como usar/criar componentes antes de ler.

Props, abreviação de propriedades, props nos permitem enviar informações de componentes pais para componentes filhos, também é importante observar que eles podem ser de qualquer tipo de dados.

É fundamental entender a sintaxe para criar uma propriedade para qualquer um de seus componentes. No React, você deve usar a mesma sintaxe para escrever um atributo para uma tag html. A forma como especificamos uma propriedade é colocando-a dentro do nosso elemento assim:

ParentPlant() {
  return  
}

Uma boa regra a ser lembrada ao criar Props é: strings não precisam ter chaves em torno de seu valor, fazemos isso apenas para outros tipos de dados. Como você pode ver acima, podemos ter uma infinidade de adereços atribuindo-os ao componente pai. Quando temos nossos adereços em nosso componente, é importante saber que tecnicamente os estamos passando-os. Depois de passarmos nossos adereços, precisaremos ser capazes de recebê-los dentro do componente desejado. Neste caso, nosso componente ChildPlant.

Recebendo acessórios:

function ChildPlant(props) {
  return (
    
      {props.text} {props.number}
    >
  )
}

Estamos fazendo as coisas aqui: 1. Estamos recebendo nossa prop dentro do parâmetro de nosso componente ChildPlant, 2. Estamos desestruturando os valores de nossa prop por meio do nome de nossa prop. É importante saber que nossos adereços não são um parâmetro, mas sim funções semelhantes a um.

A única maneira de passar os dados do componente pai para o componente filho é por meio de adereços. Gosto de pensar nisso como o DNA, um componente parental contém aspectos de si mesmo que já existem dentro dele. Como essa criança também pode ter aspectos do DNA de seus pais, os adereços funcionam como o ativador que torna o cabelo da criança ruivo, preto ou loiro.

Os adereços são recebidos na função filho e enviados por meio da função pai, mas os adereços só podem ser enviados e nunca enviados de volta. Também podemos pensar nos adereços como objetos. Isso ocorre porque eles essencialmente contêm dados semelhantes a pares chave-valor. Para voltar ao motivo pelo qual eles são semelhantes aos parâmetros, eles armazenam vários objetos dentro deles. Gosto de pensar na área onde os adereços são recebidos como espaços reservados. Eles ocupam espaço para algum objeto que queremos compartilhar com nosso componente e trocam quando precisamos, por meio de desestruturação e notação de ponto.

Esta é uma boa maneira de visualizá-lo:

Aqui podemos visualizar adereços contendo tudo dentro de nossas caixas quadradas, cada um contendo seu respectivo valor de dados do nosso primeiro exemplo. Agora apenas usamos nosso método de desestruturação para obter o valor de nossa propriedade. E é assim que usar adereços em poucas palavras!