Props do React

Introdução

No React, props (abreviação de "properties" ou propriedades) são um conceito fundamental para passar dados de um componente para outro. Eles permitem que você crie componentes dinâmicos e reutilizáveis. Pense em props como argumentos que você passa para uma função; eles permitem que um componente pai configure seus componentes filhos. Props são somente leitura (read-only), 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 (destructuring) para tornar seu código mais limpo.
• Definir valores padrão para props.

Vamos começar!

Definir o parâmetro props no 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, este objeto é nomeado props.

Primeiro, vamos navegar até 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 Greeting.jsx.

Adicione o seguinte código ao seu arquivo recém-criado src/Greeting.jsx. 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 que fique 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 o valor da prop name="John" do componente pai

Nesta etapa, você aprenderá como passar dados do componente pai (App) para o componente filho (Greeting). Isso é feito usando uma sintaxe semelhante a um atributo no 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 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. Corrigiremos isso na próxima etapa.

Acessar a prop no componente 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 do pai. Você pode acessá-las usando notação de ponto, como props.nomeDaPropriedade.

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 a mensagem atualizada para "Hello, John!".

Isso demonstra o fluxo básico de dados no React: do pai para o filho através de 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 desempacotar 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á-la para obter name diretamente.

Atualize o arquivo para que ele fique assim:

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

export default Greeting;

Ao mudar de (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 necessária? O valor será undefined, o que pode levar a erros ou a uma interface de usuário 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ê deverá 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 completar 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 código mais limpo e legível.
• Definir valores padrão para props com defaultProps para tornar seus componentes mais robustos.

Props são um pilar do desenvolvimento React, e dominá-las é um passo fundamental na construção de aplicações complexas. Continue praticando esses conceitos à medida que você avança em sua jornada com React.