Voltar para: Games com Phaser + Reactjs

Se componentes são os blocos de construção de uma interface em React, então Props são a forma de passar informações entre esses blocos.

Uma analogia útil: imagine componentes como peças de LEGO. Cada peça pode receber características diferentes. As props são essas características.

---

🎯 Objetivos da Lição

Ao final desta aula, o aluno será capaz de:

• Entender o que são props
• Passar dados de um componente para outro
• Receber props dentro de componentes
• Utilizar props para tornar componentes reutilizáveis
• Entender a diferença entre props e state
• Criar componentes parametrizados

---

📖 Parte 1 – O que são Props

Props significa:

Properties (Propriedades)

São valores enviados de um componente pai para um componente filho.

Exemplo simples:

<Botao texto="Iniciar" />

Aqui estamos enviando a propriedade texto para o componente Botao.

---

📖 Parte 2 – Recebendo Props no Componente

Dentro do componente, recebemos props como parâmetro da função.

const Botao = (props) => {
  return <button>{props.texto}</button>;
};

Se o componente for usado assim:

<Botao texto="Jogar" />

O resultado será:

[Jogar]

---

📖 Parte 3 – Fluxo de Dados no React

React segue um fluxo chamado:

One-way data flow

Significa que os dados sempre fluem:

Componente Pai → Componente Filho

Nunca o contrário diretamente.

Exemplo:

App
 └── Botao

O App envia dados para Botao.

---

📖 Parte 4 – Exemplo Completo

Componente Botao

const Botao = (props) => {
  return (
    <button>
      {props.texto}
    </button>
  );
};export default Botao;

---

Usando no App

import Botao from "./components/Botao";function App() {
  return (
    <div>
      <Botao texto="Iniciar" />
      <Botao texto="Opções" />
      <Botao texto="Créditos" />
    </div>
  );
}

Resultado:

[Iniciar]
[Opções]
[Créditos]

Note que o mesmo componente é reutilizado três vezes.

---

📖 Parte 5 – Destructuring de Props

Uma forma mais moderna de usar props é através de destructuring.

Em vez de:

const Botao = (props) => {
  return <button>{props.texto}</button>;
};

Usamos:

const Botao = ({ texto }) => {
  return <button>{texto}</button>;
};

Isso torna o código mais limpo e legível.

---

📖 Parte 6 – Múltiplas Props

Podemos enviar várias propriedades.

Exemplo:

<Botao texto="Jogar" cor="green" tamanho="grande" />

Componente:

const Botao = ({ texto, cor, tamanho }) => {  return (
    <button style={{ background: cor }}>
      {texto} - {tamanho}
    </button>
  );};

---

📖 Parte 7 – Props com Números

Props também podem ser números.

<Score pontos={100} />

Componente:

const Score = ({ pontos }) => {
  return <h1>Pontos: {pontos}</h1>;
};

---

📖 Parte 8 – Props com Boolean

<Usuario admin={true} />

Componente:

const Usuario = ({ admin }) => {
  return admin ? <p>Administrador</p> : <p>Usuário</p>;
};

---

📖 Parte 9 – Props com Funções

Também podemos enviar funções como props.

Isso é muito comum em React.

Exemplo:

<Botao onClick={iniciarJogo} />

Componente:

const Botao = ({ onClick }) => {
  return (
    <button onClick={onClick}>
      Iniciar
    </button>
  );
};

---

📖 Parte 10 – Props Children

React possui uma prop especial chamada:

children

Ela representa o conteúdo dentro da tag.

Exemplo:

<Card>
  <h2>Título</h2>
  <p>Conteúdo do card</p>
</Card>

Componente:

const Card = ({ children }) => {
  return (
    <div className="card">
      {children}
    </div>
  );
};

Resultado:

[ Card ]
Título
Conteúdo do card

---

📖 Parte 11 – Props são somente leitura

Props são imutáveis.

Não devemos modificar props dentro do componente.

Errado:

props.texto = "Novo texto";

Correto:

Props devem apenas ser usadas, não alteradas.

Se algo precisa mudar, usamos state.

---

📖 Parte 12 – Diferença entre Props e State

Característica	Props	State
Origem	Componente pai	Componente atual
Pode mudar?	Não	Sim
Uso	Configurar componentes	Dados dinâmicos

---

🎯 Atividade Prática – Criar Menu com Props

Vamos criar um menu reutilizando um componente de botão.

---

📁 Estrutura

src
 └ components
     ├ Botao.jsx
     └ Menu.jsx

---

Botao.jsx

const Botao = ({ texto }) => {  return (
    <button>
      {texto}
    </button>
  );};export default Botao;

---

Menu.jsx

import Botao from "./Botao";const Menu = () => {  return (
    <div>      <h1>Menu Principal</h1>      <Botao texto="Iniciar" />
      <Botao texto="Opções" />
      <Botao texto="Créditos" />    </div>
  );};export default Menu;

---

Usando no App.jsx

import Menu from "./components/Menu";function App() {
  return <Menu />;
}export default App;

---

🧠 Conceitos Fixados

Após esta aula o aluno compreende:

• o que são props
• comunicação entre componentes
• reutilização de componentes
• destructuring de props
• props com funções
• props children
• diferença entre props e state

---

📝 Critérios de Avaliação

Critério	Peso
Uso correto de props	2
Reutilização de componentes	2
Organização de código	2
Interface funcional	2
Boas práticas	2

Total: 10 pontos

---

🚀 Desafio Extra

Melhorias possíveis:

1️⃣ Criar componente Card

2️⃣ Criar botão com props:

cor
tamanho
texto

3️⃣ Criar menu dinâmico usando array

Exemplo:

const opcoes = ["Iniciar", "Opções", "Créditos"];

Renderizar usando .map().

---

🎓 Conclusão

Props permitem que componentes sejam:

• reutilizáveis
• configuráveis
• organizados

Sem props, componentes seriam fixos e pouco úteis.

Props tornam possível criar interfaces flexíveis e escaláveis.