E esse tal de props?

E ae galera blz?

Como havia sido prometido. Vou falar um pouco mais de React e seu ecossistema. Em um post anterior mostrei como criar uma aplicação em React sem a necessidade de configurar o webpack, usando o create react app. Dando sequencia nessa linha de apresentar o universo do React, hoje vou falar das props.

O que são as props? O que elas fazem? Onde elas vivem, hoje no trilha frontend!!!

O que são as props? E como elas funcionam?

As props funcionam basicamente como os atributos no HTML, quando temos uma <div> e precisamos passar uma classe para essa tag, usamos o atributo class, da mesma forma, no React quando precisamos passar um atributo qualquer, passamos via props. Vou mostrar um exemplo bem simples.

Vamos criar um componente funcional chamado title:

Captura de Tela 2018-03-18 às 8.47.39 AM.png

Vamos ao passo a passo…

  1. Importar o React para o nosso componente
  2. Criar uma constante com o nome do nosso componente, essa constante será uma função. Utilizei a notação simplificada da arrow functions.
  3. Não vamos utilizar as chaves {}, mas sim os parênteses () em nossa função, pois no React essa notação trás o render e o return implícitos.
  4. Criamos a  <div> que vai conter nosso componente.
  5. Cria o <h1> que receberá o título
  6. Por ultimo e fundamental, temos que exportar nosso componente, para que ele possa ser utilizado em outros pontos da nossa aplicação.

Em App.js

Captura de Tela 2018-03-18 às 8.52.42 AM

Dentro do arquivo vamos fazer os seguintes passos:

  1. Importar o Title, para que ele possa ser usado.
  2. Dentro da div eu passo o Title como se fosse uma tag HTML, mas lembre-se isso é JSX, não html.

Rodando nossa aplicação teremos esse resultado:

Captura de Tela 2018-03-18 às 8.54.49 AM

Beleza Marcus… Mas e as props? Onde elas estão?

Calma… Vamos brincar com as props em nosso componente title.js ok? E faremos isso agora!!!

Eu não quero mais mostrar um simples “Olá mundo!!!”, eu quero receber um nome via props e mostrar “Olá (nome via props)!!!”, para fazer isso é bem simples. Em nosso componente title.js vamos adicionar um pouco de javascript para passar essa props:

Captura de Tela 2018-03-18 às 9.00.59 AM

Quando vamos utilizar código javascript dentro do JSX, temos que utilizar as chaves {}. No nosso código eu passei a props name para o componente title. Olha como é bem simples, apaguei o nome mundo, coloquei as chaves e dentro eu disse para o JSX que a props será chamada de name. Só isso.

Em App.js

Captura de Tela 2018-03-18 às 9.03.16 AM.png

Dentro de <Title /> eu posso passar agora o name como uma props e ela vai modificar a renderização em tela. Coloquei meu nome para exemplificar!!!

Captura de Tela 2018-03-18 às 9.04.34 AM

Simples né? Mas pensa comigo, se eu preciso passar a prop no Title e por um acaso eu esqueço de passar ela, o que vai acontecer?

Captura de Tela 2018-03-18 às 9.07.00 AM

Dupliquei o meu componente, mas dessa vez um ficou sem a props e outro com o meu nome. O que vocês acharam que o React fez? Bugou tudo? Parou a aplicação? Não… Ele simplesmente não renderiza nada na tela, já que não existe o que renderizar.

Captura de Tela 2018-03-18 às 9.08.59 AM

Mas seria legal, se houvesse uma forma de passar um props padrão, e caso eu esqueça a props, ele mostre algo para mim… Pois é, quando desenvolveram o React, também pensaram nisso e por isso temos a props default!!! E é super simples de usar…

Captura de Tela 2018-03-18 às 9.16.17 AM.png

Basta criar um (nome do componente).defaultProps e passar o par chave valor da props. É fundamental lembrar que no React, tudo é objeto, por isso o default props tem que ser passado como um objeto. Por isso as chaves e a notação chave valor dentro.

Agora que temos um props padrão, vamos ver como ele se comporta.

Captura de Tela 2018-03-18 às 9.18.36 AM

Mas uma props só? E se eu quiser passar várias pros.

Não muda nada, o padrão segue para N props. Assim como o default props tb.

Para exemplificar….

Captura de Tela 2018-03-18 às 9.24.05 AM.png

Em App.js criei várias simulações de casos… E ficou assim:

Captura de Tela 2018-03-18 às 9.25.08 AM.png

E o resultado final dessa brincadeira foi!!!!

Captura de Tela 2018-03-18 às 9.25.46 AM

Esse foi um papo rápido sobre props, espero que tenham curtido. É um post bem simples e introdutório, mas serve para aguçar a curiosidade de vocês em relação ao React.

Qualquer dúvida ou sugestão, estou aqui para ajudar!!!

Abração!!!

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s