React - Versão 19.2

18 - Props

Nesta aula, vamos aprender sobre Props no React. As Props (propriedades) servem para passar informações de um componente pai para um componente filho.

1. Exemplo básico

Vamos criar um componente que recebe nome, cidade e idade como props e exibe essas informações:

// Componente
function Props(props){

    // Retorno
    return(
        <>
            <h1>{props.nome}</h1>
            <h1>{props.cidade}</h1>
            <h1>{props.idade}</h1>
        </>
    );

}

// Exportar
export default Props;

Explicação:

• O componente Props recebe um objeto props automaticamente
• Cada propriedade enviada pelo componente pai pode ser acessada como props.nome, props.cidade, etc.
• Isso permite que componentes sejam reutilizáveis, recebendo valores diferentes sem precisar alterar seu código interno

---

2. Exemplo de uso do componente Props

No componente pai, podemos passar valores para o componente Props:

import Props from "./Props";

function App(){
    return(
        <div>
            <Props nome="Ralf" cidade="São Paulo" idade={28} />
            <Props nome="Daniela" cidade="Rio de Janeiro" idade={25} />
        </div>
    );
}

export default App;

Explicação:

• Cada chamada do componente <Props /> passa valores diferentes
• O componente Props exibe os valores recebidos sem precisar alterar seu próprio código

---

3. Dicas importantes

• Props são somente leitura: o componente filho **não deve alterar** os valores recebidos
• São muito úteis para criar componentes reutilizáveis e flexíveis
• Pode-se passar qualquer tipo de dado: string, número, boolean, array, objeto ou até funções

Agora você já sabe como passar informações entre componentes utilizando Props!

Abaixo compartilho o vídeo dessa aula: