Props no React: o que são e como usa-las?

Nesse artigo, você terá a oportunidade de explorar um recurso extremamente valioso do React: as props. Esse recurso desempenha um papel fundamental ao permitir que argumentos sejam passados para os nossos componentes, conferindo-lhes flexibilidade e dinamismo. Como resultado, a reutilização de componentes se torna uma tarefa mais simples e eficiente durante o processo de desenvolvimento.

Ao longo deste artigo, iremos mergulhar no universo das props no React, descobrindo sua importância e como utilizá-las de forma eficaz. Você terá a chance de compreender a essência dessa funcionalidade e explorar suas inúmeras possibilidades.

Por meio de exemplos práticos e elucidativos, você aprenderá passo a passo como passar e receber props em seus componentes React. Consequentemente, você estará capacitado a melhorar a modularidade e reutilização de seus componentes, promovendo um código mais organizado e escalável. Essas habilidades serão fundamentais para o sucesso do seu projeto React.

Requisitos desejáveis

• Conhecimento intermediário/avançado em JavaScript
• Conhecimento básico em CSS ou em algum outro pré-processador CSS (como SASS, por exemplo)
• Conhecimento básico em React

Requisitos obrigratórios

VS Code: Certifique-se de ter o Visual Studio Code instalado em sua máquina. Ele é uma ferramenta de desenvolvimento de código-fonte popular e amplamente utilizada.

Node.js: O Node.js é necessário para executar os comandos NPM (gerenciador de pacotes) e NPX (execução de scripts). Se você ainda não possui o Node.js em seu sistema, você pode baixá-lo aqui. Ao fazer a instalação, tanto o Node.js quanto o NPM serão instalados automaticamente.

Para verificar se eles foram instalados corretamente, siga estas etapas:

1. Abra o Visual Studio Code.
2. Abra o terminal do Visual Studio Code.
3. No terminal, execute o comando a seguir (sem as aspas): "node -v". Isso mostrará a versão atualmente instalada do Node.js.
4. Repita o mesmo procedimento para verificar a versão do NPM. Execute o comando a seguir no terminal (sem as aspas): "npm -v".

Passos iniciais

Vamos dar início a instalação do Vite em nosso ambiente de produção no VS Code. Para isso, vamos criar uma pasta raiz e nomear ela de Props, é nela onde ficaram todos os nossos arquivos de desenvolvimento. Com a nossa pasta criada vamos abrir o terminal do VS Code e seguir os seguintes passos:

Executar o comando: npm create vite@latest

Esse comando vai criar um novo projeto utilizando o Vite na sua versão mais recente, uma ferramenta de construção rápida e moderna para projetos em JavaScript. Fique a vontade para conhecer mais sobre a ferramenta nesse link.

Em seguida serão feitas algumas perguntas como:

• Nome do projeto: conhecendoProps
• Nome do pacote: conhecendoprops
• Selecionar framework: React
• Selecionar variação: JavaScript
  

Após a instalação do Vite, será necessário acessar a pasta com o nome do projeto com comando: cd conhecendoProps.

Agora que estamos dentro da pasta será necessário fazer a instalação dos arquivos que serão necessários para a produção em nosso ambiente de desenvolvimento (arquivos React). Execute o comando: npm install.

Deletando o que não iremos utilizar

Nesse caso em específico podemos fazer a exclusão de alguns arquivos que não serão necessários para a execução e aprendizado sobre props. Apague os seguintes arquivos:

• Dentro da pasta src, exclua os arquivos: App.css index.css
• Ainda dentro da pasta src, exclua as linhas de código.
• Dentro do arquivo main.jsx apague a linha 4 que contém: import './index.css’. Dentro do aquivo App.jsx apague todo o conteúdo.

Colocando a mão na massa

Agora vamos iniciar de fato nosso projeto para que possamos usar as props nele! Para estudar sobre esse tema, vamos desenvolver 3 pôsteres sobre jogos.

1) Primeiramente, vamos trabalhar no arquivo App.jsx. Dentro dele vamos criar a estrutura que será carregada na interface, importando para dentro desse arquivo os nossos componentes!

export default function App() {
  return (
    <>
    
    </>
  )
}

2) Agora, vamos criar dentro da pasta src uma nova pasta para nossos componentes que vai se chamar components. Dentro dessa pasta components vamos criar o nosso componente “Card” que vai ficar dentro de uma nova pasta que se chama Card e dentro dela vai conter um arquivo chamado index.jsx. Ainda dentro da pasta components, vamos criar um novo componente chamado Button que vai seguir a mesma ideia de criação do Card. Confira a estrutura de pastas:

Dentro da pasta Card, vamos trabalhar no arquivo index.jsx criando a estrutura principal e dentro da pasta Button vamos trabalhar nos botões de nossos pôsteres.

Arquivo index.jsx da pasta Button:

export default function Button() {
  return <button>Comprar agora</button>;
}

Arquivo index.jsx da pasta Card:

import Button from "../Button";

export default function Card() {
  return (
    <div>
      <img src="src/assets/zelda.png" alt="" />
      <div>
        <h3>Pôster The Legend of Zelda (The Wind Waker)</h3>
        <p>
          The Legend of Zelda: The Wind Waker" é um jogo icônico que cativou jogadores com seus visuais deslumbrantes e jogabilidade envolvente. Lançado para o console Nintendo GameCube em 2002,
          rapidamente se tornou um amado título na lendária série "Legend of Zelda
        </p>
        <Button></Button>
      </div>
    </div>
  );
}

Vamos fazer uma pausa e ver como está ficando nosso projeto dentro da interface? Para isso vamos acessar o terminal do VS Code e executar o comando npm run dev. Em seguida, acesse o link e veremos que a página está assim:

Estilizando o nosso pôster

Na pasta src crie uma pasta styles e dentro dela crie um arquivo chamado globals.css.

Dentro do arquivo main.jsx ficará assim:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./styles/globals.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Dentro do arquivo globals.css ficará assim:

* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: bisque;
}

Agora, dentro da pasta Card crie um novo arquivo chamado style.module.css. Faça o mesmo procedimento dentro da pasta Button.

Vamos estilizar o style.module.css do Card colocando o seguinte código:

.container {
  display: flex;
  align-items: center;
  margin: 0 30%;
  margin-top: 4rem;
  padding: 3rem;
  gap: 0 4rem;
  background-color: whitesmoke;
  border-radius: 1rem;
}

h3,
p {
  margin-bottom: 2rem;
}

Após fazer isso vamos importar essa estilização e adicionar as classes ao elementos no arquivo index.jsx do Card. Logo, o arquivo index.jsx do Card ficará assim:

import Button from "../Button";
import styles from "./style.module.css";

export default function Card() {
  return (
    <div className={styles.container}>
      <img src="src/assets/zelda.png" alt="" />
      <div>
        <h3>Pôster The Legend of Zelda (The Wind Waker)</h3>
        <p>
          The Legend of Zelda: The Wind Waker" é um jogo icônico que cativou jogadores com seus visuais deslumbrantes e jogabilidade envolvente. Lançado para o console Nintendo GameCube em 2002,
          rapidamente se tornou um amado título na lendária série "Legend of Zelda
        </p>
        <Button></Button>
      </div>
    </div>
  );
}

Vamos estilizar o style.module.css do Button colocando o seguinte código:

.button {
  padding: 0.6rem 0.8rem;
  color: #ffffff;
  background-color: black;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.button:hover {
  scale: 1.1;
}

Após fazer isso vamos importar essa estilização e adicionar as classes ao elementos no arquivo index.jsx do Button. Logo, o arquivo index.jsx do Button ficará assim:

import styles from "./style.module.css";

export default function Button() {
  return <button className={styles.btn}>Comprar agora</button>;
}

Conferindo como ficou a interface do pôster após a estilização:

Reutilizando o componente

Como foi dito anteriormente, o nosso objetivo é criar três pôsteres sobre 3 jogos diferentes mas temos apenas um. Logo, precisamos criar mais dois pôsteres e para fazer isso não iremos ter que escrever todo o código novamente (obviamente), então iremos usar um recurso muito utilizado no desenvolvimento com React: reutilização de componentes.

Para realizar esse procedimento é bem simples, basta seguir as etapas abaixo:

1) Acessar o arquivo App.jxs que está na pasta src.

2) Reutilizar o componente Card, replicando-o mais duas vezes dentro do nosso fragment.

Veja como vai ficar o arquivo App.jsx

Vamos dar uma olhada em como está ficando o nosso projeto por meio da interface, agora temos 3 pôsteres!

Trabalhando com as props

Estamos quase finalizando e agora chegamos na etapa em que irei explicar o que são e como usar as props no React.

O que são as props?

• De maneira simples, as props são mecanismos que permitem transmitir dados de um componente pai para um componente filho. Então, é possível dizer que elas são uma maneira eficiente de conectar componentes entre si.
• O uso de props é uma ótima maneira de tornar seus componentes mais flexíveis e reutilizáveis. Isso porque cada instância do componente pode receber props diferentes, o que resulta em comportamentos ou visualizações distintas. E o melhor de tudo é que as props são imutáveis, então os componentes não podem modificá-las. Isso garante um comportamento mais previsível e facilita muito o rastreamento de erros.
• Ao utilizar as props de forma adequada, os desenvolvedores podem criar componentes encapsulados e independentes, facilitando a manutenção, o teste e a compreensão do código. As props são um dos pilares do modelo de programação declarativo do React, que enfatiza a composição e a reutilização de componentes para construir interfaces de usuário flexíveis e escaláveis.

Como usar as props?

Essa etapa será 100% prática, então prepara o código!

Vamos começar seguindo algumas etapas:

1) A primeira coisa que devemos fazer é acessar o arquivo index.jsx do componente Card, e na função devemos passar como primeiro paramêtro o nome props (o nome a ser passado pode ser qualquer um mas por convenção é usado o nome props, e deve ser passado sempre como primeiro parâmetro da função que é destinado exclusivamente para essa funcionalidade).

2) Feito isso, iremos alterar o conteúdo da tag <h3></h3>. Dentro dela iremos acessar uma propriedade do objeto props. Como destinamos essa tag como título dos pôsteres vamos acessar o valor de uma propriedade chamada title (que vamos criar no próximo passo). Por enquanto o arquivo index.jsx do componente Card está assim:

3) Agora vamos criar e manipular o valor dessa propriedade title. Para fazer isso vamos acessar o arquivo App.jsx da pasta src. Nesse arquivo, vamos passar a propriedade title como um “atributo HTML” e manipular o seu valor, ficando dessa maneira:

4) Dessa maneira, cada pôster vai ter um título único! Portanto, a interface ficará dessa maneira:

5) Agora vamos aplicar essa mesma lógica para alterar as imagens! No arquivo index.jsx do componente Card vamos alterar o atributo src da tag img acessando o valor da propriedade image. Ficando dessa forma:

6) Voltando para o arquivo App.jsx será necessário fazer a importação das imagens para ser possível de manipular as imagem e passa-las como valor da propriedade image, na qual estamos acessando o seu valor no componente Card. Ficando dessa forma:

7) A interface do projeto está dessa forma!

8) Última etapa! Mudar a descrição de cada pôster. No arquivo index.jsx no componente Card vamos criar acessar o valor da propriedade que iremos criar, a text dentro da tag <p>. Ficando dessa forma:

9) Agora no arquivo App.jsx na pasta src, será necessário criar variáveis por uma questão de deixar o código mais limpo. Já imaginou passar textos enormes como sendo os valores das propriedades que ficam dentro de cada componente? De fato, não é errado mas ficaria um código poluído e difícil de compreender. Por isso criamos variáveis, cada uma para cada pôster e chamamos elas como sendo o resultado da propriedade que criamos, a text. Ficando dessa forma:

10) Interface finalizada! Acrescentei uma personalização ao redor das imagens por meio do CSS, fica como desafio para você!

Dicas

Simplificando as props

Além da maneira em que foi ensinada para acessar os valores das props também há uma outra forma de passar os parâmetros para as funções que irão receber as propriedades, que é por meio da desestruturação de objetos. Para fazer isso, basta usar a sintaxe de desestruturação e passar diretamente o nome das propriedades que iremos acessar. Logo, o arquivo index.jsx do componente Card ficará assim:

Conhecendo PropTypes

As PropTypes são uma forma de definir os tipos das propriedades (props) que são passadas para os componentes no React. Elas são usadas para especificar quais são os tipos de dados esperados para cada prop e ajudam a garantir a correta utilização dos componentes, além de fornecer mensagens de erro claras caso os tipos de dados não correspondam ao esperado.

As PropTypes são uma funcionalidade do pacote prop-types, que é um pacote separado do React, mas frequentemente usado em conjunto com ele. O prop-types fornece um conjunto de validadores predefinidos para verificar os tipos de dados, como strings, números, booleanos, objetos, arrays, entre outros.

1. Então, ainda dentro do arquivo index.jsx do componente Card vamos fazer a importação do PropTypes dessa maneira: import PropTypes from "prop-types";
2. Agora é necessário chamar a função que cria o componente Card, que nesse caso é a própria função Card e junto a ela vamos chamar o objeto estático .propTypes para que dentro dele possamos definir quais serão os tipos de valores esperados em cada props. Ficando dessa forma:
   

Conhecendo defaultProps

O defaultProps segue a mesma ideia que o PropTypes mas como seu próprio nome diz, serve para atribuir valores padrões, isto é, se o componente Card for reutilizado e não possuir nenhum valor em seus propriedades, seus valores passaram a ser o que foi atribuidos no defaultProps. Ficando o arquivo index.jsx do componente Card dessa forma:

Para vermos funcionando na prática é necessário reutilizar o componente Card no arquivo App.jsx, sem passar as propriedades. Ficando, respectivamente, o arquivo App.jsx e a interface dessa forma:

Finalização

Parabéns! Você concluiu com sucesso a leitura deste artigo abrangendo os conceitos fundamentais de props, PropTypes, defaultProps e algumas dicas extras para aprimorar sua experiência com o React. Esperamos que este guia tenha fornecido uma compreensão clara e útil sobre esses tópicos importantes.

Ao longo deste artigo, exploramos o poderoso sistema de props do React, que permite a passagem de dados de um componente pai para seus componentes filhos. Vimos como as props podem ser utilizadas para tornar nossos componentes dinâmicos e reutilizáveis, permitindo uma maior flexibilidade em nossas aplicações.

Além disso, discutimos a importância do uso de PropTypes. Com o auxílio do pacote prop-types, podemos definir os tipos de dados esperados para nossas props, garantindo a integridade e prevenindo erros inesperados em tempo de execução. Essa prática ajuda a tornar nosso código mais robusto, legível e facilita a detecção de possíveis erros durante o desenvolvimento.

Também mencionamos defaultProps, que nos permite definir valores padrão para as props caso elas não sejam fornecidas. Isso evita a necessidade de verificação de nulidade e torna nosso código mais limpo e conciso.

Espero que você tenha gostado deste artigo. Até a próxima!