🚀 Capítulo 03: Props - Mensagens do R2-D2

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de criar componentes reutilizáveis e passar informações de um componente Pai para um componente Filho usando as Props (Propriedades).

---

🏢 O Cenário Prático (Seu Desafio)

A Aliança Rebelde tem vários caças X-Wing. Em vez de criar um código novo para cada caça, seu desafio hoje é criar um único componente de Caça e usar o R2-D2 (as Props) para passar o nome do piloto e o número do caça para cada um deles!

---

🧠 Fundamentos: A Teoria Traduzida

No React, as Props são como os atributos que você passa para as tags HTML (como o src da tag img). Elas servem para enviar dados de um componente para outro.

Regras das Props:

1. Unidirecional: Os dados sempre vão do Pai para o Filho. O Filho apenas lê as props, ele não pode alterá-las.
2. Qualquer Dado: Você pode passar textos, números, booleanos, arrays e até funções pelas props.

---

📖 Exemplo Guiado: Criando o Componente Caça

Vamos criar um componente Filho e chamá-lo no nosso App.jsx.

🛠️ Passo a Passo (Criando o Filho)

1. Dentro da pasta src, crie um novo arquivo chamado Caca.jsx.
2. Adicione o seguinte código:

// O componente recebe as 'props' como argumento da função
function Caca(props) {
  return (
    <div style={{ border: '1px solid gray', margin: '10px', padding: '10px' }}>
      <h3>🛸 Caça: {props.nome}</h3>
      <p>Piloto: {props.piloto}</p>
    </div>
  )
}
 
export default Caca;

🛠️ Passo a Passo (Chamando no Pai)

Abra o arquivo src/App.jsx e use o componente Caca passando as props:

import Caca from './Caca'; // Importa o componente filho
 
function App() {
  return (
    <div>
      <h1>Líder do Esquadrão</h1>
      
      {/* Passando informações diferentes para cada caça */}
      <Caca nome="Red 5" piloto="Luke Skywalker" />
      <Caca nome="Red 2" piloto="Wedge Antilles" />
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve os arquivos e veja o navegador.
2. Você verá duas caixas cinzas na tela, cada uma com o nome do caça e do piloto que você passou nas props!

---

🛠️ Prática Obrigatória 1

Adicione uma nova prop chamada modelo no componente Caca. No App.jsx, passe o valor “X-Wing” para os dois caças.

---

🛠️ Prática Obrigatória 2

Crie um terceiro caça no App.jsx com seu próprio nome como piloto e passe o modelo como “Tie Fighter” (um caça capturado!).

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No Caca.jsx:

<p>Modelo: {props.modelo}</p>

No App.jsx:

<Caca nome="Red 5" piloto="Luke Skywalker" modelo="X-Wing" />

---

← Capitulo Anterior | Proximo Capitulo →