React — Criando o primeiro componente - Parte 2
Olá pessoas, depois de umas semanas sumido, cá estou novamente.
Dessa vez, darei continuidade ao componente que estávamos fazendo, em React, se você não leu a primeira parte, recomendo que leia:
Então, sem mais delongas, vamos ao que interessa!
Refatorando nosso botão
Então no último artigo, nos havíamos criado nosso componente de botão, com um texto padrão e renderizamos ele no nosso App.js. Agora vamos deixar as coisas mais interessantes e começar a lidar com props, para deixar nosso botão dinâmico e podermos usar ele em várias ocasiões diferentes.
Para isso, precisamos entender esse novo conceito no React.
O que são props afinal?
Nada mais são que propriedades que passamos de um componente para outro, ou seja, passamos de um componente “pai”, para o componente “filho”, uma ou várias propriedades, que o filho terá acesso. Fica mais fácil ver no exemplo o funcionamento:
Veja na linha 9, definimos uma props para o componente de botão com o nome de “nome”, que dentro dela armazena a string “Clique aqui”.
Agora vamos usar essa props no nosso componente de botão, ou seja, teremos que ter acesso a essa propriedade e irei demonstrar os dois jeitos que eu particularmente mais uso para acessar:
Primeiro jeito:
Segundo jeito:
Se você fizer isso, e salvar, verá que o conteúdo do botão foi atualizado, com o nome que você passou para o componente.
Agora, vamos à um pouco de explicação do que está acontecendo, irei explicar um jeito de cada vez.
Primeiro jeito
Na primeira maneira de fazer, estamos recebendo como parâmetro na linha 3, nossas props que foram passadas la no App.js pelo componente <Button>. Então dentro dessa variável “props” (que se você der um console.log nela verá que é um objeto), possui a propriedade “nome”, que contém nosso texto “Clique aqui”.
Por ser um objeto, podemos acessar essa props por meio da notação de ponto, ou seja, props.nome , se tivéssemos mais propriedades, iriamos acessar sempre props.nomeDaSuaProps.
Aqui, cabe dois adendos, o nome “props” que demos na linha 3, poderia ser qualquer nome, mas usamos “props” por padrão, para sabermos que se trata de uma propriedade e lembre-se, sempre que quisermos usar javascript ou variáveis dentro do nosso JSX, colocamos em volta o “{ }”, como na linha 4.
Segundo jeito
Já na segunda maneira de acessar nossa props, usamos a tão famosa desestruturação, e podemos usá-la, porque como disse, a props é um objeto, então basta pegarmos as propriedades que queremos e não precisamos ficar repetindo “props” toda hora. Se você não sabe o que é desestruturação, já falei um pouco sobre ela, em outro artigo:
O poder da props
Com isso, você reparou o quão poderoso é esse recurso? Nós podemos definir um botão, com o estilo do nosso sistema por exemplo e receber como props o nome do nosso botão.
Com isso temos o poder de criarmos o botão uma única vez e depois chamamos ele aonde quisermos e passamos o nome que quisermos para ele, nada mais de ctrl+c e ctrl+v, só chamadas de componente.
E não para por aí, podemos passar coisas mais complexas por props, podemos passar objetos, arrays, funções e até outros componentes. Cara, isso é muito poderoso e abre muito caminho para coisas criativas, soluções novas, me anima só de pensar haha.
Lidando com funções
Bom, vamos voltar ao nosso App.js, porque esqueci de mencionar uma coisa:
na linha 9, em que passamos nossa props, demos o nome criativo à ela de “nome”, mas poderia ser qualquer outra denominação, como por exemplo “balrog”, só que lá no nosso componente de botão, teríamos que importar agora como props.balrog, certo?
Dito isso, vamos em frente.
Vamos implementar uma função para o botão, que ao ser clicado, exibe um alert e aqui temos duas abordagens de fazer isso, podemos fazer a função no nosso App.js e passar ela por props para o botão, ou podemos implementá-la diretamente no nosso componente de botão.
Nisso entramos no conceito de componentes de apresentação e container (Presentational components e Container components), ou nas gírias da rua, componente burro e componente esperto (dumb component e smart component). Não vou me estender nesse assunto, já que só esse assunto rende um artigo, então deixei os nomes em inglês e português, para caso queiram procurar mais sobre.
Mas resumindo, essa diferenciação se deve em que, o componente de apresentação é isso, ele só apresenta coisas, não lida com lógica, não altera props, não tem estado, é o conceito de função pura, quem lidaria com tudo isso e passaria as informações para ele, seria nosso container.
Falando por mim, eu prefiro essa abordagem, de separar as coisas, porque fica mais organizado e deixa nossos componentes mais reutilizáveis, já apanhei muito por deixar tudo misturado e resolvi começar a separar, e para mim, ficou mais produtivo, lembrando que é uma opinião minha, sugiro que você leia mais sobre, para formar sua opinião.
Então, no nosso caso, nosso componente de apresentação seria o button.js e o container, seria oApp.js.
Implementando a função
Vamos implementar um função simples então, que exibe um alert, vamos ao código:
Na linha 7, criamos uma variável que contém uma arrow function que exibe um alert, nesse ponto poderíamos também ter criado essa variável com uma função anônima, por exemplo:
Eu prefiro o método da arrow function, por achar que fica mais legível e por evitar problemas com linters, que não gostam muito de funções anônimas.
Nada novo de acontecendo até agora, tudo básico de javascript. Na linha 14, passamos essas função como props para o botão, com o nome de onClick (poderia ser qualquer nome) e veja que não usamos handleClick() já que não queremos que ela seja invocada imediatamente.
Agora vamos ao componente button.js:
Na linha 4, usamos o evento onClick (repare que eventos no React, são em camelCase) e passamos para esse evento nossa função onClick (o nome da props que demos lá no App.js), agora se você salvar e clicar no botão, verá que será exibido um alerta, com o texto que foi colocado na função.
Parabéns, se você seguiu até aqui, conseguiu criar seu primeiro componente, usar props e usar funções no React. Então agora, seu botão está mais componentizado ainda, podemos usá-lo em vários lugares, passar a função que quisermos para quando ele for clicado e o nome dele, olha o poder disso!
Antes de encerrar essa segunda parte, tem algumas coisas que queria falar sobre nossa aplicação até agora…
Functional components
Não se se você reparou, mas usamos apenas funções como nossos componentes, ou functional components, não chegamos a usar o conceito de class component do React, isso porque não precisamos em nenhum exemplo até agora do estado (há um jeito, já vou falar sobre isso) ou do construtor (para o usar o bind por exemplo).
E é nesses componentes funcionais, que se baseia o Hooks, não vou dar exemplo e nem me estender, porque não é uma coisa que domino, ainda estou estudando para trazer para vocês! Mas resumindo, hooks é uma nova atualização do React 16.8, que saiu no dia 6 de fevereiro de 2019, é um jeito de fazer seus componentes, sem usar classes, ou seja, só usando funções e podendo usar estados dentro dessas funções, algo que não podia ser feito antes, apenas se você tivesse um class component.
Vou deixar alguns artigos lá embaixo, explicando mais sobre classes e funções, e a diferença na hora de criar seus componentes.
Aqui se encerra a segunda parte, na próxima parte iremos começar a trabalhar com estados no React, criar uma class component, como funciona as atualizações de estados com setState e do virtual DOM.
Qualquer coisa também só me chamarem nas redes sociais abaixo, pra bater um papo, explicar algo que não ficou claro, não precisa ter medo haha! Vamos crescer cada vez a comunidade de React no Brasil!
Redes sociais
Linkedin: https://www.linkedin.com/in/leonardofalmeida/
Facebook: https://www.facebook.com/LFerreiraAlmeida
Github: https://github.com/leonardofalmeida
