Props - Mllara/react-project GitHub Wiki

-As props são valores passados para componentes;

-Podemos deixá-los dinâmicos;

-Mudando a execução por causa do valor da prop;

-O valor é passado como um atributo na chamada do componente;

-E precisa ser resgatado dentro de uma propriedade/argumento chamada props na função de definição do componente

-As props são somente de leitura

*******Criar uma props:

-Criar arquivo dentro da pasta components respeitando aquele padrão, por ex: SayMyName

-Criar uma função e entre os () escrever props function SayMyName(props){

function SayMyName(props){

return(

    <div>

        <p> Fala ai {props.nome}, suave?</p>

    </div>
)

}

export default SayMyName

• Na pasta App.js vai importar e colocar no return:

import HelloWord from './Components/HelloWorld';

import './App.css';

import SayMyName from './Components/SayMyName';

function App() {

return (

<div className="App">

    <HelloWord/>

    <SayMyName nome="Márcia"/> //neste caso eu já passo o "valor" da props

</div>

);

}

export default App;

Outra opção é criar uma const fora do return e invocar depois:

function App(){

const nome = "Maria"

return(

---

Ao criar um arquivo com props:

function Pessoa(props){

return(

    <div>

        <img src={props.foto} alt={props.nome}/>

        <h2>Nome: {props.nome}</h2>

        <p>Idade: {props.idade}</p>

        <p>Profissão: {props.profissao}</p>

    </div>
)

}

export default Pessoa

->No App.js: import Pessoa from './Components/Pessoa'

No Return: <Pessoa nome="Rodrigo" idade="28" profissão="Programador" foto="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.bbc.com%2Fportuguese%2Fgeral-37268918&psig=AOvVaw2CQr6qc9PstUIzRPPZ9DjE&ust=1678563688863000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCPDropeP0v0CFQAAAAAdAAAAABAE" />

---

Para não ficar com muitas props no arquivo, tem essa seguinte opção:

function Pessoa(){nome, idade, profissão, foto} return(

Nome: {nome}

Idade: {idade}

Profissão: {profissao}

) }

export default Pessoa

Referência: https://www.youtube.com/watch?v=ZLtBdpwg8tI