Props e composição: conecte componentes React

Você terminou um cartão de produto, copiou a marcação para criar o segundo e parecia tudo certo. Então o texto de estoque mudou: você corrigiu uma cópia, esqueceu a outra e a tela passou a mostrar duas versões da mesma regra. Quanto mais cartões entram, mais lugares existem para corrigir.

É para evitar essa duplicação que a gente separa o molde dos dados. Em React, um componente é uma parte da interface descrita por uma função. Props, abreviação de properties, são as entradas que outra parte da aplicação passa para essa função. Primeiro entendemos esse contrato; depois vem a sintaxe.

Em um produto conhecido, esse reaproveitamento deixa de ser detalhe. Em 2017, a engenharia da Meta relatou mais de 30 mil componentes React no repositório principal do Facebook. Props e composição ajudam equipes assim a mudar uma peça sem copiar a mesma regra por milhares de telas.

Se JSX ainda parecer novo — a sintaxe que mistura a estrutura visual com expressões JavaScript — retome a aula anterior sobre componentes e JSX. Aqui vamos usar essa base para montar dois cartões com um só molde.

Por que passar props em vez de copiar o cartão?

Porque a estrutura fica em um lugar e cada uso fornece apenas o que muda. Assim, uma correção no molde alcança todas as ocorrências sem apagar as diferenças de nome, preço ou disponibilidade.

O componente que cria outro componente é chamado de pai; o componente criado é o filho. Quando o pai organiza filhos para formar uma tela, usamos o nome técnico composição. Não é uma relação de autoridade: esses nomes apenas descrevem posições na árvore da interface.

Pense assim: App é o atendimento de uma cozinha, Produto é o modelo da ficha que aparece no painel e as props são os campos preenchidos em cada pedido. O atendimento escolhe os valores; a ficha sabe apresentá-los. Mais adiante, um callback funcionará como o canal de retorno para a ficha avisar que houve uma ação. O limite da analogia é que não existe papel físico: React chama funções e calcula uma nova descrição da tela quando dados relevantes mudam.

Essa nova chamada é uma renderização: React executa o componente para saber qual interface ele descreve naquele momento. Para uma visão mais ampla da jornada, o guia de React conecta componentes, props, estado e renderização.

Como o filho recebe os dados do pai?

O pai escreve atributos no JSX do filho, e React reúne esses valores no objeto de props. O filho lê somente os campos necessários para cumprir uma responsabilidade pequena.

Comece pelo menor componente desta aula:

function Produto({ nome, preco, disponivel }) {
  return (
    <article>
      <h2>{nome}</h2>
      <p>R$ {preco.toFixed(2)}</p>
      <p>{disponivel ? 'Em estoque' : 'Indisponível'}</p>
    </article>
  );
}

Leia cada parte antes de avançar:

1. function Produto declara o componente. A inicial maiúscula diferencia um componente React de uma tag HTML comum.
2. ({ nome, preco, disponivel }) usa desestruturação, isto é, retira esses três campos do objeto de props e cria nomes locais para consultá-los.
3. return ( inicia a descrição em JSX que o componente entrega ao React; os parênteses permitem organizar essa descrição em várias linhas.
4. <article> agrupa o cartão como uma unidade de conteúdo.
5. <h2>{nome}</h2> usa chaves para ler a expressão JavaScript nome e colocar seu valor no título.
6. <p>R$ {preco.toFixed(2)}</p> chama toFixed(2) no número recebido para exibir duas casas decimais. Essa linha pressupõe que preco seja número.
7. O parágrafo seguinte usa o operador ternário: se disponivel for verdadeiro, mostra “Em estoque”; caso contrário, mostra “Indisponível”.
8. As últimas linhas fecham article, encerram o valor retornado e terminam a função. Elas delimitam exatamente o que pertence ao cartão.

Esses três campos formam a interface pública de Produto: o acordo mínimo sobre os dados de que ele precisa. “Interface” aqui significa contrato entre componentes, não uma tela nem a palavra-chave de TypeScript. A leitura detalhada de props no React aprofunda esse fluxo.

Como o pai usa o mesmo molde duas vezes?

O pai renderiza Produto mais de uma vez e muda somente os valores enviados. Cada ocorrência ganha seus próprios dados, enquanto a estrutura continua centralizada na função anterior.

Agora veja o pai:

function App() {
  return (
    <main>
      <h1>Produtos</h1>
      <Produto nome="Teclado" preco={180} disponivel={true} />
      <Produto nome="Mouse" preco={90} disponivel={false} />
    </main>
  );
}

Logo depois do código, percorra suas partes:

1. function App() declara o componente que organizará a página. Ele não recebe props neste exemplo.
2. return ( inicia a árvore que App entrega ao React.
3. <main> marca o conteúdo principal, e <h1>Produtos</h1> dá um título à lista.
4. A primeira ocorrência de Produto envia nome="Teclado" como texto, preco={180} como número e disponivel={true} como booleano.
5. A segunda ocorrência usa o mesmo componente, mas envia os valores de Mouse. Ela não copia o interior de Produto; apenas preenche outra ficha.
6. Aspas passam texto literal. Chaves abrem uma expressão JavaScript, por isso números e booleanos preservam seus tipos em vez de virar texto.
7. /> fecha cada componente sem conteúdo aninhado. As linhas finais fecham main, o retorno e a função App.

Na árvore resultante, App é pai de duas ocorrências independentes de Produto. Esse é o primeiro degrau da composição: uma tela maior formada por peças com contratos pequenos. Quando uma prop muda, React pode renderizar o componente de novo para descrever o novo estado visual.

Experimente você mesmo: o que muda no segundo cartão?

Antes de editar, anote sua previsão: o Teclado aparece disponível e o Mouse, indisponível. Agora troque apenas disponivel={false} por disponivel={true} no segundo cartão. Execute e confira se somente o texto do Mouse muda; nome, preço e primeiro cartão devem permanecer iguais.

Experimente você mesmo: o que acontece com o tipo errado?

Troque temporariamente preco={180} por preco="180". Antes de atualizar, preveja o problema: o valor passa a ser texto, mas Produto tenta usar o método numérico toFixed. Ao renderizar, a interface deixa de concluir esse trecho e o console mostra TypeError: preco.toFixed is not a function. O conserto é restaurar as chaves para enviar o número, não esconder a chamada que revelou o tipo incorreto.

Por que o filho não altera as próprias props?

Porque props representam a fotografia das entradas daquela renderização. O pai continua sendo a fonte desses valores e entrega outra fotografia quando algo muda.

Na cozinha da nossa analogia, a ficha não decide sozinha trocar o preço que o atendimento enviou. Tecnicamente, Produto não deve fazer uma atribuição como preco = preco + 10 para tentar reescrever a entrada. Isso mistura quem decide o dado com quem apenas o apresenta e torna o caminho da mudança difícil de seguir.

Quando uma interação precisa mudar a tela, algum componente mantém estado — a memória da interface que pode ser atualizada — e envia novas props. Nesta aula basta entender a fronteira: props entram; o filho as lê. A próxima aula mostrará como eventos e estado completam o ciclo.

Como o filho avisa o pai sobre um clique?

O pai pode passar uma função como prop, e o filho chama essa função quando a interação acontece. Essa função passada para ser executada depois recebe o nome técnico callback.

Veja o terceiro exemplo:

function BotaoComprar({ nome, aoComprar }) {
  const eventos = { onClick: () => aoComprar(nome) };

  return (
    <button type="button" {...eventos}>
      Comprar {nome}
    </button>
  );
}

Agora leia cada decisão:

1. function BotaoComprar({ nome, aoComprar }) declara o componente e retira duas props: o texto do produto e a função que representa a intenção de compra.
2. const eventos = { ... } cria um objeto de propriedades que será entregue ao botão. O nome é local e poderia reunir outros eventos no futuro.
3. onClick é a prop de evento de clique do React. Seu valor é uma função de seta, () => aoComprar(nome), criada agora para ser executada somente depois do clique.
4. Dentro dessa função, aoComprar(nome) chama o callback e envia qual produto originou a ação.
5. return ( inicia o JSX do botão.
6. type="button" evita que o botão envie um formulário por comportamento padrão quando estiver dentro de um.
7. {...eventos} usa o operador de espalhamento para copiar as propriedades do objeto para o elemento; neste caso, ele equivale a fornecer o onClick.
8. Comprar {nome} combina texto fixo com o valor da prop. As últimas linhas fecham botão, retorno e função.

Na analogia, o callback é a campainha instalada pelo atendimento: a ficha sabe acioná-la, mas não decide o que acontece na cozinha inteira. No React, o pai fornece a função e continua dono da consequência, como atualizar estado, abrir um painel ou iniciar uma operação. A função não “sobe dados sozinha”; o filho chama o canal que recebeu.

Isso reduz acoplamento, nome técnico para a quantidade de conhecimento e de dependências entre partes. BotaoComprar conhece nome e aoComprar; ele não precisa conhecer carrinho, rota, armazenamento e pagamento. Para uma pessoa iniciante: quanto menos detalhes externos uma peça precisa saber, menos lugares quebram quando uma regra muda.

Experimente você mesmo: quando o callback é chamado?

Preveja primeiro: com a função de seta, nada deve ser comprado durante a renderização; a ação só acontece após o clique. Depois substitua temporariamente o valor de onClick por uma chamada imediata a aoComprar(nome). A consequência passa a acontecer enquanto o componente renderiza; se ela atualiza estado, pode provocar novas renderizações em sequência. Restaure a função de seta para adiar a chamada até o evento.

Como o exemplo mínimo vira uma interface real?

O mecanismo permanece o mesmo: um catálogo, um painel de planos ou uma lista de tarefas repete componentes com dados diferentes. O que cresce é o cuidado com o contrato, os nomes e o lugar onde cada decisão mora.

No laboratório desta aula, App mantém o plano selecionado e passa quatro props a cada CartaoPlano: nome, preco, selecionado e aoSelecionar. O cartão apresenta os três primeiros valores e chama o quarto. Antes de clicar, preveja qual texto cada botão mostra; depois clique alternadamente e confirme que apenas um cartão reflete o plano guardado pelo pai.

Em um contexto real, prefira props que descrevam a intenção, como aoSelecionar, em vez de detalhes de aparência, como aoClicarBotaoRoxo. Teclado, toque ou outro controle podem acionar a mesma intenção. Se um componente recebe muitas props booleanas e conhece rede, navegação e armazenamento ao mesmo tempo, ele provavelmente acumulou responsabilidades.

Composição também não significa extrair qualquer três linhas de JSX. Extraia quando existe uma unidade com nome, repetição ou responsabilidade reconhecível. CartaoPlano representa uma ideia da interface; App reúne vários cartões e coordena a escolha. O artigo sobre eventos no React mostra outras formas de traduzir interações em callbacks.

O que você domina até aqui?

Até aqui, você separou um molde visual dos valores que mudam e acompanhou o caminho completo de uma interação. O pai envia dados; o filho apresenta esses dados e usa um callback para comunicar uma intenção.

• Componente é a função que descreve uma parte da interface.
• Props são entradas somente leitura daquela renderização.
• Composição é montar uma árvore maior a partir de componentes menores.
• Callback é uma função recebida agora para ser chamada depois.
• Acoplamento mede quantos detalhes uma parte precisa conhecer sobre as outras.

Faça a missão do frontmatter com três produtos. O critério de sucesso é objetivo: antes do clique, nenhum favorito; depois de cada clique, somente o item escolhido exibe “Favorito”. Se dois itens divergirem, procure estado duplicado nos filhos ou callbacks ligados ao item errado.

Na aula 3, sobre eventos e estado, você vai implementar a parte que ficou do outro lado do callback: guardar a escolha no pai e produzir uma nova renderização de forma previsível.