Laryssa Magalhães/ outubro 16, 2018/ Blog/ 1 comments

Oi galera linda do meu coração <3

Pra quem não me conhece meu nome é  Laryssa Magalhães, sou desenvolvedora front end, formada em Análise e Desenvolvimento de Sistemas, apaixonadíssima por Harry Potter e video games <3. Comecei minha carreira muito cedo, com apenas 17 anos e desde então tenho o imenso prazer em poder compartilhar meus conhecimentos e ajudar a todos, principalmente mulheres e minorias de que todos podem programar!

Aposto que você já ouviu alguém falando de React né? A maioria das vagas para front end pedem essa tecnologia como requisito, não vai ficar de fora né? Vem entender React também!

Apesar de muitos confundirem o React não é um framework e sim uma biblioteca.

Tá. Mas qual a diferença entre framework e lib? — Framework é um conjunto de funções e módulos que resolvem vários problemas diferentes, por exemplo: o Angular resolve problemas de rotas e views ao mesmo tempo e mais uma porrada de outras necessidades… Diferentemente do React que foca em resolver o “problema” de renderização da View. Ué mas e se eu quiser usar rotas no React? — Simples, você terá que importar uma lib que resolve o problema de rota.

Conceito

Quando eu falo de React vem algumas coisas primordiais em mente (apesar de existirem outras).

1- Ele é focado na criação de interfaces componetizadas. Onde você vai criando componentes e vai compondo eles para criar a sua tela final.

2- Seguindo esse conceito tudo que a gente tiver codando vai ser um componente. (Ex: título, botão, menu, itens dentro do menu…).

3- Virtual DOM é uma representação virtual do DOM no JS. E o React tem um algoritmo de diff que só toca no DOM no nó que realmente teve alteração. Por exemplo, imagina uma página com vários componentes e eu acabei de alterar o componente <button />, ao invés de renderizar a página em toda ele vai renderizar somente o botão. (ISSO É MUITO FODA!!!)

 

Mas afinal o que é um componente?

Se você for no dicionário e pesquisar sobre o significado de componente vai ser exatamente esse aqui:

É o que compõe ou ajuda na composição de algo; que ou o que é parte constituinte de um sistema.

 

Imagina que estamos sentados brincando de lego… Nosso objetivo é montar um avião. Podemos comparar cada pecinha do lego como um componente, onde juntas iremos chegar no nosso “sistema”, ou seja, no nosso objetivo final (O avião). No React esse conceito é o mesmo, onde juntamos vários componentes para chegar no objetivo final: O sistema, site, ERP …

E o mais doido do React é você criar um componente e conseguir reutilizar em várias páginas do seu sistema.

 

Componentes Dumbs X Componentes Smarts

No React temos 2 tipos de componentes:

Os Dumbs, também conhecidos como burros que geralmente são apenas componentes visuais e que não possuem nenhuma regra de negócio. Daqui a pouco vou mostrar exemplos que vocês irão entender melhor.

E também temos o Smarts que são conhecidos também como Containers ou Componentes de alta ordem. Onde não são componentes visuais mas contém a regra de negócio e usam os dumbs components para construir a interface.

JSX

Antes de entrar nos exemplos de componentes dumbs e smarts eu vou mostrar essa sintaxe bem diferente que se chama JSX que no começo todo mundo acha estranha. É tipo TypeScript ou cê ama ou odeia. (No caso, i hate TypeScript rs).

O JSX, é esse “html” dentro do JS mas que na verdade não é um HTML, apesar de sua sintaxe ser 99% igual, na real ele é um XML…

Então quando você tá rodando seu projeto o que realmente está sendo compilado no browser é a API do React que é essa sitaxe bem diferente… Imagina que complexo escrever esse tanto de coisa apenas pra criar um botão? Por isso, o JSX veio para facilitar a nossa vida!

 

Então bora praticar?

Vou criar um botão e vou utilizar ele pra quase todos os exemplos pra ficar mais fácil 🙂

Esse botão é um dumb component, então ele é um componente sem nenhuma regra de negócio que renderiza apenas uma parte visual.

Mas perai, da onde esse botão tá reutilizável? Vocês concordam comigo que esse texto fixo “Salvar” não deveria ser dinâmico pra ele COMEÇAR ser reutilizável?

TCHÃN TCHÃN TCHÃN…

E ai que entra as Props!

• Propriedades (Props) são valores passados de pai para filho.
• Uma propriedade não pode ter seu valor alterado, é imutável.

Mas o que isso significa?

Lembram do conceito de Smart components e Dumbs components? Então vamos imaginar o seguinte cenário: Acabei de criar uma página de login no meu site, onde dentro dela possui um formulário com 2 inputs (login e senha) e um botão para “entrar”, porém ao invés de eu ter a label “salvar” (Que é a label que estamos usando atualmente no nosso componente <button /> eu quero altera-lá para “entrar”, quem irá passar o valor será o pai, ou seja, o container que está importando o botão (A página de login). E por conta disso o seu valor não poderá ser alterado dentro do próprio componente.

Agora vamos modificar o nosso <button/> para receber a sua label via props:

 

Esse {this.props} é o que você usa para referenciar que o valor passado será recebido via props. Já o text é o nome que dei para ela. Lembrando que é escolha do dev, poderia ser name, title, label…

E como é que usa (importa) um Dumb component dentro de um Smart component?

State

• O state é “escopado” por componente.
• Ele é mutável.
• Toda vez que o state é alterado o componente é renderizado novamente.

Mas o que isso significa?

Primeiramente, o estado de um componente não é global, ou seja, cada componente possui o seu estado. Diferentemente das props o state não necessita necessariamente que o seu “pai” passe o valor do state, ele pode sim ser alterado dentro do seu componente.

 

Nesse diagrama conseguimos visualizar melhor a ideia, ou seja, toda vez que alteramos o state do componente (Utilizamos o método setState para isso) o mesmo é renderizado e chama também outros métodos.

Agora vamos ver como funcionaria essa ideia dentro de um componente Smart.

Reparem que dentro do render estou setando o valor da minha props text para receber o valor do meu state. Que no primeiro momento está com o texto “Adicionar”. (Ver dentro do constructor).

Se olharmos para o componente <button /> podemos observar que tem um método sendo chamado no onClick do botão e que dentro desse método há um setState, alterando o valor da label para “adicionado com sucesso”.

 

Então seguindo a mesma linha de raciocínio o fluxo do nosso diagrama será esse acima.

E o resultado final será esse:

 

React LifeCycle

Lembra dos outros métodos que eu havia dito no primeiro diagrama do setState? Então… Um componente possui um ciclo de vida, que não é nada menos que métodos que você escreve no seu componente e eles possuem um ciclo (ou seja, uma ordem cronológica).

 

Esse diagrama é o mais atualizado do React, porque a ultima versão começou a depreciar alguns métodos antigos, mas esse diagrama é bem atualizado.

Temos 3 fases do ciclo de vida:

A primeira fase é a fase que é de Mouting, ou seja é a primeira vez que você renderiza “monta” o seu componente.

A segunda fase é a fase de Update, ela é chamada a partir de 3 formas: quando o componente recebe novas props, quando você altera o State(Que é exatamente o exemplo que dei acima) ou quando usa um método chamado de forceUpddate.

A terceira e última fase é quando o componente vai ser desmontado, Unmount. Um exemplo onde precisei utilizar esse método, foi quando criei um componente de upload de fotos que funcionava da seguinte forma: o usuário arrastava as fotos para dentro da tela e o upload começava, quando alterei de página (no qual não havia o componente de dragdrop) os eventos continuavam sendo chamados, a solução que encontrei foi remover esse eventos de dragdrop no método componentWillUnmount.

Ps: Lembrando que todos esse métodos são utilizados de acordo com a necessidade da regra de negócio e também da sua criatividade.

Como estilizamos componentes React?

A primeira maneira e a mais conhecida é criando uma folha de estilo chamando sua devida classe no componente. Conhecida como CSS in CSS

 

A segunda maneira é adicionando o atributo style no seu componente onde o mesmo espera um objeto com as propriedades CSS.

 

Bom gente, por hoje é só! Não sou nenhuma especialista em React, apenas queria passar uma ideia para quem nunca teve contato começar a sentir o gostinho dessa lib fantástica ❤

Se quiserem começar a brincar sem ter que preocupar em configurar nada, eu super recomendo a utilizar o create-react-app:

https://github.com/facebook/create-react-app

<Beijão ❤ />