React Props: Passando Dados para Componentes

Introdução

No React, props (abreviação de "properties") são um conceito fundamental para passar dados de um componente para outro. Elas permitem que você crie componentes dinâmicos e reutilizáveis. Pense nas props como argumentos que você passa para uma função; elas permitem que um componente pai configure seus componentes filhos. As props são somente leitura, o que significa que um componente filho nunca deve modificar as props que recebe.

Neste laboratório, você aprenderá a:

Definir e passar props de um componente pai para um componente filho.
Acessar e usar props dentro de um componente filho.
Usar desestruturação para tornar seu código mais limpo.
Definir valores padrão para props.

Vamos começar!

Definir parâmetro de props em componente funcional

Nesta etapa, você criará um novo componente filho e o preparará para receber props. Componentes funcionais no React podem aceitar um único argumento, que é um objeto contendo todas as props passadas para ele. Por convenção, esse objeto é chamado de props.

Primeiro, vamos navegar para o diretório do nosso projeto. O script de configuração já criou um projeto chamado my-app.

cd ~/project/my-app

Em seguida, precisamos instalar as dependências do projeto.

npm install

Agora, vamos criar um novo arquivo de componente. No explorador de arquivos à esquerda, navegue até a pasta src. Crie um novo arquivo dentro de src e nomeie-o como Greeting.jsx.

Adicione o seguinte código ao seu arquivo src/Greeting.jsx recém-criado. Isso define um componente funcional simples que aceita um parâmetro props.

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

Em seguida, precisamos importar e usar este novo componente em nosso componente principal App. Abra o arquivo src/App.jsx e modifique-o para ficar assim:

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

Agora, vamos iniciar o servidor de desenvolvimento para ver nossa aplicação.

npm run dev -- --host 0.0.0.0 --port 8080

Após executar o comando, mude para a aba Web 8080 no canto superior esquerdo da interface. Você deverá ver sua aplicação em execução, exibindo "Welcome to My App" e "Hello, World!".

Passar valor de prop do pai como name="John"

Nesta etapa, você aprenderá como passar dados do componente pai (App) para o componente filho (Greeting). Isso é feito usando uma sintaxe semelhante a atributos em JSX.

Queremos passar o nome de uma pessoa para o nosso componente Greeting para que ele possa exibir uma mensagem personalizada.

Abra o arquivo src/App.jsx. Modifique a linha <Greeting /> para incluir uma prop name com o valor "John".

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

Aqui, name="John" é a prop. name é a chave da prop e "John" é o seu valor. Você pode passar qualquer expressão JavaScript como valor de uma prop envolvendo-a em chaves {}. Para strings, as aspas são suficientes.

Após salvar o arquivo, o servidor de desenvolvimento recarregará automaticamente. Se você verificar a aba Web 8080, a saída ainda não terá mudado. Isso ocorre porque passamos a prop, mas o componente Greeting ainda não a está utilizando. Vamos corrigir isso na próxima etapa.

Acessar prop no filho com props.name

Agora que o componente Greeting está recebendo a prop name, vamos usá-la. O objeto props no componente filho contém todas as propriedades passadas pelo pai. Você pode acessá-las usando a notação de ponto, como props.propertyName.

Abra o arquivo src/Greeting.jsx. Vamos modificá-lo para acessar props.name e exibir a saudação personalizada. Use chaves {} para incorporar a expressão JavaScript diretamente no seu JSX.

Atualize src/Greeting.jsx com o seguinte código:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Salve o arquivo. Agora, mude para a aba Web 8080. Você deverá ver que a mensagem foi atualizada para "Hello, John!".

Isso demonstra o fluxo básico de dados no React: do pai para o filho via props.

Desestruturar props no parâmetro da função

Escrever props.name, props.age, etc., pode se tornar repetitivo, especialmente se um componente recebe muitas props. Uma abordagem mais limpa e comum é usar a desestruturação do ES6 para extrair as propriedades do objeto props diretamente na lista de parâmetros da função.

Vamos refatorar o componente Greeting para usar desestruturação.

Abra src/Greeting.jsx e modifique a assinatura da função. Em vez de aceitar props, vamos desestruturá-lo para obter name diretamente.

Atualize o arquivo para ficar assim:

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Ao alterar (props) para ({ name }), estamos dizendo ao JavaScript para extrair a propriedade name do objeto passado para a função. Isso torna o corpo do componente mais limpo, pois agora podemos usar name diretamente em vez de props.name.

Salve o arquivo e verifique a aba Web 8080. A saída deve ser exatamente a mesma ("Hello, John!"), mas nosso código agora está mais conciso e legível.

Definir props padrão com parâmetro padrão

O que acontece se um componente pai não passar uma prop obrigatória? O valor será undefined, o que pode levar a erros ou a uma interface inesperada. Para evitar isso, você pode especificar valores padrão para as props.

Para componentes funcionais, você pode usar parâmetros padrão na assinatura da função.

Vamos definir um nome padrão para o nosso componente Greeting. Abra src/Greeting.jsx e modifique o parâmetro da função para incluir um valor padrão. Definiremos o nome padrão como "Guest".

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Agora, vamos testar isso. Abra src/App.jsx e adicione outro componente <Greeting />, mas desta vez, não passe uma prop name para ele.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

Salve ambos os arquivos. Vá para a aba Web 8080. Agora você deve ver duas saudações:

"Hello, John!" (do componente que recebeu a prop)
"Hello, Guest!" (do componente que usou a prop padrão)

Esta é uma maneira robusta de tornar seus componentes mais previsíveis e evitar erros.

Resumo

Parabéns por concluir o laboratório! Você aprendeu os fundamentos do uso de props no React para criar componentes reutilizáveis e dinâmicos.

Neste laboratório, você praticou:

Passar dados de um componente pai para um componente filho usando props.
Acessar props dentro de um componente filho usando o objeto props.
Usar desestruturação para escrever um código mais limpo e legível.
Definir valores padrão para props para tornar seus componentes mais robustos.

As props são um pilar do desenvolvimento React, e dominá-las é um passo fundamental para construir aplicações complexas. Continue praticando esses conceitos à medida que avança em sua jornada com o React.