Props em React.js

O conceito de props em React.js

William Marinho

​🧠 O que são Props?
Props é a abreviação de "properties" (propriedades). Elas são usadas para passar dados de um componente pai para um componente filho em React.




📌 Pense nas props como os parâmetros de uma função.

​🧠 O que são Props?
Props é a abreviação de "properties" (propriedades). Elas são usadas para passar dados de um componente pai para um componente filho em React.




📌 Pense nas props como os parâmetros de uma função.

​🧠 O que são componentes pai e filho?

No React, componentes são como blocos de construção. Você pode ter um componente dentro de outro. Quando isso acontece:

​O componente que contém outro é chamado de componente pai.

O componente que é incluído dentro de outro é o componente filho.

​📦 Exemplo prático em código

​1. Componente filho: Mensagem.jsx

​2. Componente pai: App.jsx

​App é o componente pai.

Mensagem é o componente filho.

O pai envia o valor da prop nome para o filho, e o filho usa esse valor para mostrar algo.

​🧠 Analogias
Imagine uma empresa:

O diretor (pai) delega tarefas aos funcionários (filhos) passando instruções.

Os funcionários (filhos) podem informar o resultado de volta ao diretor (pai) usando relatórios (funções de callback).

​🧠 O que são parâmetros de uma função?

​Parâmetros são variáveis que você define entre parênteses ao declarar uma função, e que servem para receber valores de entrada quando a função for executada.

📌 Parâmetros são os nomes usados na declaração da função.

📌 Argumentos são os valores reais passados na chamada da função.

​📦 Exemplo básico em JavaScript

​nome é um parâmetro.

​"Maria" é o argumento.

​🎯 Por que usar parâmetros?
Para reutilizar funções com valores diferentes.

Para deixar o código mais limpo e flexível. Para evitar repetição de código.

​🧠 Analogias para entender
Imagine que você está fazendo um suco numa máquina:

​A função fazerSuco usa o parâmetro fruta para se adaptar ao argumento passado.

​🎯 Por que usar Props?
Para tornar componentes reutilizáveis e dinâmicos.

Para manter uma estrutura organizada, separando a lógica e visualização.

Para comunicação entre componentes, especialmente do pai para o filho.

​🔧 Exemplo simples de uso de Props

Multiple Choice

O que são "props" em React?

• Dados que são passados de um componente para outro

• Um tipo de banco de dados usado no React

• Um método interno para atualizar a página

• Um evento que ocorre ao clicar em um botão

Multiple Choice

O que é um componente pai em React?

• Um componente que herda de outro componente

• Um componente que depende de um banco de dados

• Um componente que recebe dados de um servidor

• Um componente que contém outros componentes dentro dele

Multiple Choice

Qual das opções abaixo representa corretamente uma função com parâmetro em JavaScript?

• function soma = a + b;

• let resultado = soma(a, b);

• function soma(a, b) { return a + b; }

• if (a, b) return a + b;

Multiple Choice

Qual comando é usado para importar um componente no React?

• use Component from './App'

• require './Componente'

• include './Componente.jsx'

• import Componente from './Componente'