Se Você Passar Por Esses 5 Desafios, Você Aprendeu React JS

"Essa explicação do React foi fantástica, acho que até uma criança entenderia". . .

"Nunca tinha pensado dessa forma (sobre abrir o capô das tags), mas agora eu entendi, agora eu saquei". . .

"Caraca, Filipe! Nesse pouquinho que você ensinou foi fenomenal! !

! Entendi mais que em 2 horas em certas vídeo aulas! !

" Agora, neste vídeo, você vai aprender ou reaprender React da forma mais fácil que existe e de um jeito que vai te preparar para, em seguida, colocar no ar, num endereço de verdade na internet um site da forma mais moderna possível com altíssima performance, disponibilidade e tudo de graça! E sobre os comentários no início deste vídeo, o que aconteceu foi o seguinte. .

. No meio de um dos vídeos do canal, eu mostrei o meu jeito de explicar React e teve uma aceitação que foi além do que eu poderia imaginar. Mas tem margem para a gente se aprofundar mais e tem mais coisas que eu quero explicar que são massa e são muito importantes você entender nos dias de hoje.

Então, eu primeiro vou colocar todo mundo na mesma página com aquela explicação inicial, mas depois eu vou subir o nível de dificuldade e vamos ver até aonde você consegue chegar. Para isso, a gente tem dentro deste vídeo cinco desafios ordenados por dificuldade e o primeiro é entender a semelhança do React com tags HTML. Se você entende o mínimo de HTML, sensacional!

Porque você já aprendeu uma parte importante do React. Olha que massa. .

. No HTML, você tem coisas como uma tag <img>, e se você pensar bem essa tag é na verdade um componente autossuficiente. Se você quer que uma imagem apareça basta definir a propriedade source e atribuir um valor, um endereço que leva para uma imagem.

Feito isso, uma imagem vai aparecer, mas eu e você não fazemos a mínima ideia o que essa tag, esse componente teve que rodar internamente para baixar essa imagem e mostrar na tela. Você simplesmente declarou a tag com os valores, ela rodou a sua maquininha interna e funcionou. Componentes no React são exatamente a mesma coisa, só que agora você tem a oportunidade de abrir o capô desse componente e ver o que tem lá dentro de mexer na maquininha interna ou criar o seu próprio componente com qualquer comportamento que você queira.

E a boa notícia é que componentes são a base do React e se você conseguir aprender essa única coisa, você já está habilitado a fazer a maioria das coisas que quiser construir. Então, se você já sabe HTML e usar esse modelo mental, só falta agora você aprender a abrir esse capô e mexer na maquininha lá dentro. Não é algo fora do comum e esse é o nosso segundo desafio: Criar nosso primeiro componente React.

Vamos então criar um componente chamado CapsLock, que por si só não faz nada, não imprime nada, mas que qualquer texto passado para ele vai ser deixado tudo em caixa alta. E como agora a gente controla a maquininha interna, vamos fazê-la aceitar uma propriedade chamada "texto", assim como a propriedade "source" daquela imagem. E nessa propriedade texto, vamos colocar o valor de "Me deixe em Caps Lock por favor".

Agora, vamos abrir o capô desse componente para ver o que tem dentro e tem uma função JavaScript! Nada demais, não é mesmo? Até porque é só a casca por enquanto.

Mas isso é massa reforçar aqui: um componente React é uma função tradicional do JavaScript. Um dos motivos dessa biblioteca ter ganhado tanta popularidade é justamente isso, ela consegue reaproveitar o máximo der conhecimentos que você já tem em HTML e JavaScript. Claro, quanto mais você subir o nível de dificuldade, mais coisas proprietárias você vai encontrar, coisas que só servem para o React.

Super natural. Mas ele tenta ao máximo manter na base a semântica do que a gente já conhece por HTML ou JavaScript puro. E novamente, tentar evitar na medida do possível conhecimentos que só servem para o React.

Olha só que interessante. . .

A gente tem aqui em mãos o nosso componente. A gente abriu o capô e viu que a maquininha interna dele é uma simples função JavaScript que por enquanto está vazia. E a forma que essa maquininha tem de receber valores lá de fora, como o que está dentro da propriedade texto, é através dos parâmetros dessa função.

Olha que simples. . .

Só que ao invés de na assinatura da função ter um parâmetro para cada propriedade que vem lá de fora, o React agrega tudo em um único parâmetro chamado "props", "props" de "propriedades". Então, todas as nossas propriedades vão ser acessíveis por esse único parâmetro, que por sinal é um objeto JavaScript. A gente consegue facilmente extrair o valor em azul, acessando de formar tradicional a propriedade texto desse objeto e que é a mesma propriedade em vermelho no componente ali em cima.

E agora, eu posso usar JavaScript para fazer o que eu quiser com os valores que foram injetados, como por exemplo, deixar o texto em caixa alta. Mas até aí esse componente não está retornando nada ou melhor, não está visualmente retornando nada. Então, vamos fazê-lo retornar o HTML com uma div e o texto em caps lock ali no meio.

Super simples, basta adicionar um return com um HTML que represente a parte visual do nosso componente, injetar a variável ali dentro usando uma interpolação e pronto! Agora, toda vez que o componente for utilizado, ele vai retornar o valor em caps lock dentro de uma div. E você pode livremente criar componentes dentro de outros componentes, assim como tags HTML dentro de outras tags para formar um layout, formatar um texto, inserir uma imagem, o que você quiser!

E esse vai ser nosso próximo desafio: Acessar a propriedade Children de um componente. Porque vamos combinar, um componente CapsLock em que eu tenho que passar o texto através de uma propriedade não me parece uma usabilidade muito boa. Eu esperaria que usar esse componente fosse algo como a tag strong, em que você abre e fecha e o texto fica ali no meio, sabe?

Então, para a gente conseguir vencer esse desafio, primeiro eu vou passar as ilustrações anteriores para código real. E não se preocupe nesse momento em treinar junto, porque quando a gente chegar parte de colocar o nosso próprio site no ar, eu quero mostrar um negócio que facilita colocar a mão na massa e que vai explodir a sua cabeça. Então, por enquanto eu sugiro você prestar o máximo de atenção possível e conseguir passar mentalmente pelo desafios para daí você estar mais preparado para colocar o site no ar, fechado?

Massa! E para a gente usar o nosso componente e ver o resultado numa página web que está aqui na direita, eu vou escrever uma função mágica aqui chamada "Pagina( )" e tudo que eu retornar dela vai aparecer ali do lado automaticamente. Show!

E novamente, sobre essa função mágica, não se preocupa na parte de colocar o site no ar. Eu falo sobre ela em detalhes, é realmente muito massa. .

. Eu pelo menos acho, então se certifica de estar inscrito para não perder coisas assim, combinado? Bom, com isso funcionando, eu vou usar e retornar a primeira versão do nosso componente e.

. . Massinha!

Está tudo funcionando para a gente fazer a segunda versão, como eu falei antes. Então, olha a gente reaproveitando conhecimentos do HTML de novo e assim fica muito mais fácil. No HTML, quando você tem tags que envolvem um conteúdo, elas criam uma certa relação, um certo parentesco.

Nesse exemplo aqui, a tag strong engloba o texto que está dentro dela, correto? E que, por natureza, faz o texto ter um parentesco com essa tag. Um outro exemplo é um layout, onde essas divs aqui por fora são o pai e a mãe, ou seja, o "parent" em inglês e essas outras divs que estão aqui dentro são filhos, children, guarda esse nome: children.

Então, voltando para o nosso exemplo, se eu mudar para o jeito que a gente quer, o texto agora se tornou children do nosso componente, correto? E o time do React escolheu usar essa mesma relação e essa mesma nomenclatura para conseguir acessar esse valor que também é enviado pelo props. Então, nota que agora não existe mais a propriedade "texto" que antes era injetada no props da nossa função e que a gente conseguia acessar por aqui.

Só que como a gente vai puxar o que está no children desse componente? Fácil, como eu falei, o children também é inserido no props, então basta a gente acessar o que está dentro do props. children, salvar e vai aparecer o resultado como esperado.

Show! E tem uma coisa que eu quero reforçar. .

. O mais importante disso é você entender que tudo no React é um componente, um dentro do outro da mesma forma que um layout clássico, uma página clássica em HTML, por exemplo. Então, no caso do React, você pode ter um componente que abrace toda a página, que dentro tem um componente de menu e que dentro tem um componente de botão.

Mas que agora, além de você ter controle da parte visual desses elementos, você tem controle da maquininha interna, da funcionalidade interna de cada componente, caso você queira implementar funcionalidades junto, mas de qualquer forma, esse combo é carregado para lá e para cá junto com o componente. Então, você pode facilmente criar um monte de pecinhas de LEGO separadas e encaixar e reencaixar de várias formas diferentes para formar várias coisas diferentes. Só que espera, tem mais!

Um componente pode carregar mais coisas do que a parte visual e a parte da funcionalidade. Então, para isso, a gente vai subir um nível de dificuldade porque o desafio agora é fazer o componente ter memória (state). Então, por enquanto, a gente viu que um componente pode ter dentro de si a parte visual, que no nosso exemplo foi aquele HTML.

. . Pode ter a parte da funcionalidade, que foi o ato de a gente usar JavaScript para deixar tudo em caps lock e tem uma última parte que é o gerenciamento do estado, do state.

Um componente pode guardar memória dentro dele e isso significa que você pode implementar por exemplo um contador ou decidir se um componente de botão deveria estar ativo ou não na interface conforme alguma condição ou manter qualquer dado guardado em memória e esperando como o que foi digitado no formulário, por exemplo. Então, para a gente colocar o pé na água, eu vou criar um novo componente chamado "contador" e ele vai se auto fechar. .

. E da mesma forma que antes, vamos dar vida a ele através de uma função JavaScript tradicional. Nessa função, eu vou primeiro começar a trabalhar na parte visual e que para esse caso, eu quero retornar múltiplas linhas de HTML.

Para isso, eu preciso encapsular esse HTML entre parênteses e por enquanto. eu vou abraçar tudo com uma div. Dentro disso, eu vou fazer uma outra div com o número inicial do contador e um botão que cada vez que for clicado vai incrementar esse número, mas até agora não está fazendo nada.

Então, meio que a gente fez a parte visual, vamos colocar assim. . .

Bora agora implementar a funcionalidade. Primeira coisa que eu vou fazer é subir aqui antes da parte visual do componente e criar uma função tradicional do JavaScript que por agora a única coisa que ela vai fazer é o console. log de uma mensagem.

Mas ela declarada assim sozinha não vai fazer nada, então vamos vinculá-la ao evento de onClick do botão e esse ponto é importante. O onClick espera uma função JavaScript para executar toda vez que esse elemento for clicado. E no React, a forma de passar JavaScript para dentro da parte visual é por interpolação, usando chaves.

Massa! Agora aqui dentro, a gente pode explicitar qual função JavaScript deve ser executada, que vai ser a nossa função. E se eu abrir o console do navegador, a gente pode ver para cada clique que eu faço no botão, um log novo aparece.

. . Delicinha!

Nesse caso, parece até que ele já está somando o nosso contador ali, 1, 2, 3. . .

mas não isso é só o jeito que o Chrome tem que agregar numa mesma linha, mensagens de log que são idênticas. Bom, agora até certo ponto a gente já mexeu na funcionalidade do nosso componente, falta agora a gente mexer no estado, no state. E esse state é necessário, porque a gente precisa guardar o valor do contador em algum lugar, a gente precisa ir somando e aumentando o número, correto?

E esse lugar vai ser o state, dentro do componente. Agora, primeiro eu vou mostrar uma forma errada de fazer isso, que não usa state. .

. E depois, eu vou fazer uma que usa state do React. Guarda essas duas palavras: usa e state.

Então, para a forma que não usa state, eu vou criar uma variável "contador" que por enquanto começa com o valor 10 só para ser diferente do 1 que já está ali na direita. Agora, eu vou usar essa variável na parte visual do componente, então eu vou deletar esse 1 que está fixo aqui e substituir por uma interpolação que daí eu consigo colocar o código JavaScript, que para esse caso eu quero somente colocar a variável contador e. .

. Pimba! Apareceu o valor dela ali na direita como esperado.

Agora, eu vou te interromper, porque eu vou propor um novo desafio, mesmo não tendo completado o desafio anterior, que é entender o comportamento declarativo da parte visual. A gente vai matar dois desafios numa paulada só para encerrar este vídeo aqui com chave de ouro. Olha que massa e importante aprender isso.

Percebe que para esse 10 aparecer aqui, em nenhum momento dentro do componente eu precisei usar comandos JavaScript para ele localizar e selecionar essa div, e em seguida mudar o innerText para o valor que está na variável aqui em cima. Eu simplesmente declarei de forma passiva que quando esse treco for para o navegador, que ele vá com o valor que está nessa variável. E não se engane que naquela magia que eu estou usando aqui, quando eu altero o valor da variável e salvo, ela atualiza no navegador.

Novamente: tem magia e eu vou explicar em detalhes no próximo vídeo, mas por enquanto esse componente não usa state, essa atualização é falsa e o motivo dos dois últimos desafios se misturarem é esse. Bom, então se a parte visual é declarativa, basta eu declarar os valores no HTML e ele deveria sempre refletir o valor que está nessa variável. Eu vou testar isso incluindo na nossa função que a variável contador é o resultado do valor atual dela + 1.

E logo embaixo, eu vou fazer o log para acompanhar esse valor. Agora vou deixar o console do navegador aberto e quando eu clicar no botão, o número que está aqui em cima deveria atualizar para 6 e nos logs também devia marcar 6. Show!

Vou apertar o botão, 3, 2, 1 e. . .

Eita! O 5 aqui em cima está duro, mas está parecendo certo nos logs. O contador está contando, a variável dentro do escopo JavaScript está aumentando, porque isso não está se refletindo na interface, se única forma que eu tenho de colocar um valor lá é apenas declarando-o?

Ótima pergunta sim, você vai continuar só declarando-o e de fato, o valor da variável estava sendo atualizada, mas dessa forma o React não tem como saber quando que ele deve atualizar a parte visual do componente. Nesse caso aqui, uma das formas seria fazer como o jQuery faz, que é a cada clique localizar a div e de uma forma imperativa falar: "Troque o seu texto interno para 6, agora 7". .

. Mas isso quebra a beleza de você declarar interface e "pronto, deixa ela se atualizar sozinha". Inclusive, você vai ver ainda dentro deste vídeo, o benefício de ter separado a declaração da interface da sua funcionalidade, Mas de qualquer forma, outro jeito de resolver isso seria o React ficar atualizando a parte visual a todo momento a 60 atualizações por segundo, por exemplo.

. . Aí sim ia refletir o valor novo dentro dessa taxa de atualização.

Mas tem uma forma muito mais otimizada com um feedback mais rápido e que usa estado do jeito certo, chamado useState, que usa estado, useState. Isso é um hook, um gancho que o React fornece, que serve literalmente para você se enganchar num ponto da sua aplicação e falar: "Quando isso acontecer, atualiza o valor daquela variável". E agora, como tem esse hook, esse gancho no meio do seu componente, o React sabe: "Ah, é para atualizar essa variável aqui?

Show, atualizada. " "Ih, caramba! Preciso atualizar a interface também!

" Então, a primeira coisa que eu vou fazer é deletar toda a implementação anterior, deixando só a casca da função. Agora para usar estado do jeito certo, eu vou importar uma funcionalidade chamada useState do React, que é o hook que eu comentei. E a primeira coisa que eu vou fazer é chamar o useState, porque, novamente, eu quero que o meu componente use estado, tenha memória dentro dele.

E esse useState aceita um valor inicial, que no caso do nosso contador, vamos começar com o valor de 1. Show! Agora vem uma parte importante.

Ao executar essa função, ela vai retornar duas coisas: a variável que a gente vai usar o nosso contador, que inicialmente vai ser aquele 1, e uma função especializada em atualizar essa variável. O React vai ficar colado nessa função de atualizar, porque quando ela for chamada, ele sabe que precisa provavelmente atualizar a interface também. E para a gente se aproximar da convenção usada por outros programadores, vamos renomear essa função de atualizarContador( ) para setContador( ), de setar o valor que a gente quer.

Esse nome não muda o comportamento das coisas, é só convenção mesmo. Mas nota que eu escrevi nessa linha um JavaScript inválido. O useState retorna um array, onde nossa variável está na primeira posição e a função especializada em atualizar essa variável está na segunda posição.

E usando o negócio do próprio JavaScript chamado atribuição via desestruturação, a gente vai desestruturar esse array de duas posições e atribuir a cada posição em uma variável independente nessa ordem. Isso não tem nada a ver com o React, na verdade é só uma forma de extrair valores de dentro de uma variável, de um array nesse caso. .

. E atribuir diretamente em outras variáveis. O bom é que agora a gente tem a nossa variável contador, a mesma que está declarada na parte visual do nosso componente e a função especial setContador( ) para quando a gente quiser atualizar essa variável e informar ao React que a interface deve ser reavaliada.

E é isso que a gente vai fazer agora, eu vou chamar o setContador( ) aqui embaixo e como parâmetro eu vou colocar o valor atual do contador + 1. Vou salvar. .

. E nota que a interface vai atualizar com o valor inicial de 1, que a gente definiu no useState. E agora, toda vez que eu clico no botão, no fim das contas vai ser chamado o setContador com um novo valor que vai refletir na atualização da parte visual do componente.

E o mais massa é que dado a natureza declarativa da parte visual, a gente praticamente reimplementou toda a parte da funcionalidade sem tocar em uma linha da interface. Então, parabéns! Você completou os últimos dois desafios, mas tem mais.

E é agora que o bicho pega! Com esses conhecimentos, você consegue construir uma infinidade de páginas e utilitários, mas você eventualmente sempre vai chegar na mesma dúvida. .

. "Ok. .

. Na minha máquina funciona, mas como eu coloco isso na internet para todo mundo consegui ver e acessar através de um link? " Show!

E é por isso que eu vou mostrar neste vídeo aqui a forma mais moderna de pegar uma aplicação em React e colocar na internet. Turma, sério! É de um jeito que vai explodir a sua cabeça de tão fácil.

Fechado? Valeu!