Executando verificação de segurança...
34

Você NÃO sabe Reactjs - Parte I

Uma breve reflexão

Uma coisa que me incomoda profundamente nos dias de hoje são os vendedores de cursos que prometem empregos fáceis e ganhos exorbitantes, mas cujo conteúdo oferecido é tão raso e simplório que ensinam apenas as pessoas a serem meras espectadoras de código - olhar, copiar e colar. No entanto, nem sempre isso é culpa dos instrutores.

De fato, existem diversos cursos no mercado que são excelentes para dar um pontapé inicial e permitir que você se posicione rapidamente no mercado de trabalho - eu mesmo consegui isso através desse método.

Porém, muitos aspirantes a desenvolvedor (e alguns até mesmo com cargos de pleno/sênior) se contentam apenas em consumir esses conteúdos, replicar, fazer um todo-list e pronto. Eles não sabem o que acontece nos bastidores.

Não que entender as minúcias por trás de cada coisa seja essencial para trabalhar na área, mas com certeza é essencial para que você saia da média e se destaque como um desenvolvedor requerido no mercado de trabalho.

Tempos atrás, ajudei dois amigos a fazerem testes para um primeiro emprego que fizeram cursos que prometiam que você sairia full-stack em 4 semanas. É assustador ver que esses cursos fazem as pessoas concluírem 5 projetos diferentes e eles saem do curso sem saberem o básico.

É uma falsa sensação de aprendizado imensa, e o método é sempre o mesmo: você vê o cara codando um projeto x, faz igual enquanto assiste e pronto. Tem o seu primeiro sistema, fácil e simples como cozinhar um bolo.

Pensando nisso, resolvi escrever esse artigo para auxiliar - aqueles que querem sair da medíocridade - e para que os desenvolvedores de Reactjs entendam, pelo menos um pouco, o que faz o React por trás dos panos.

Bora?

Conceitos fundamentais do Reactjs

Você hoje saberia me dizer em poucas palavras o que é o React? - pare um minuto e tente responder com suas próprias palavras.

Não quero entrar em definições técnicas aqui, então utilizarei as minhas próprias palavras também.

React é uma biblioteca que permite você escrever códigos perfomáticos e fáceis de manter, através do conceito de componentes reutilizáveis, onde você consegue descrever interfaces de usuário de forma declarativa, sem se preocupar os detalhes da implementação.

Ficou difícil de entender? Vamos tentar uma definição mais fácil:

React é uma biblioteca foda para escrever UI's de forma declarativa perfomáticas e fáceis de se manter.

Programação declarativa vs imperativa

Mas o que seria uma forma declarativa de escrever uma UI?

A forma declarativa é a maneira que o React funciona. Basicamente, você declara o que gostaria que acontecesse na interface do usuário, quando determina ação é chamada.

Diferente da forma imperativa, que ao invés de descrever, você tem que mandar que aquilo seja feito.

Vamos utilizar um exemplo com o React (na forma declarativa) e o mesmo exemplo de como seria na forma imperativa.

Forma declarativa:

import { useState } from "react";

const MyApp = () => {
    const [isLoading, setIsLoading] = useState(false);
    
    const buttonClickHandler = () => {
        setIsLoading(true);
    }
    
    return (
        <button onClick={buttonClickHandler} disabled={isLoading}>
            {isLoading ? 'Loading...' : 'Click me'} 
        </buton>
    )
}

No exemplo acima, nós declaramos que quando o usuário clicar no botão, a interface do usuário deve atualizar o texto para loading e desativá-lo.

Nós não temos que nos preocupar a maneira que ele fará isso, apenas motrar pra ele qual a interface que queremos quando determinada ação ocorrer e ele irá se virar para fazer aquilo acontecer.

Como seria esse mesmo código acima de maneira imperativa?

const button = document.createElement('button');

const buttonClickHandler = () => {
    button.disabled = true;
    button.textContent = 'Loading...';
}

button.addEventListener('click', buttonClickHandler);

document.body.appendChild(button);

Precisamos nos preocupar com cada detalhe que queremos quando o usuário clica no botão, como desabilitar ele manualmente, trocar o texto dele manualmente, além de termos que criar o próprio botão e inserir ele no DOM.

Com nosso amigo React, toda essa lógica é abstraída.

HTML e o DOM

No final das contas, tudo que fazemos no React serve para um único propósito: renderizar no DOM (Document Object Model) elementos HTML.

O que é o DOM

O DOM é uma árvore hierárquica representativa de elementos HTML, utilizada pelos navegadores.

Falando de maneira mais simples, é tudo o que o usuário vê na tela do navegador.

São os <p>, <h1>, as <div> e <button> e seus respectivos filhos que você coloca em sua página.

Quando você escreve uma página HTML (ou os seus componentes em React, que no final das contas também serão uma página HTML) é assim que o seu navegador interpreta cada elemento:

Document Object Model

Isso é o DOM.

Mas por quê o React?

Javascript é a forma mais fácil e comum de manipular o DOM, seja para adicionar ou remover elementos, adicionar ou remover atributos, adicionar interatividade, entre outros.

Porém, o processo de interagir diretamente com o DOM e pintar essas interações na tela é muito custoso, o que pode trazer uma má experiência e muitos problemas de perfomance.

O React - além de facilitar nossa vida com a forma de programação declarativa e possibilidade de reutilização de componentes - possui um algorítmo muito inteligente de reconciliação aliado ao seu Virtual DOM, que consegue tornar esse processo muito mais perfomático, fazendo o mínimo de alterações possíveis diretamente no DOM do usuário.

Mas isso é um assunto para a parte II dessa série de artigos (se existir).

Comenta aí o que achou desse conteúdo, se gostou da forma como foi escrito e se deseja que eu continue escrevendo sobre.


Gostou desse artigo? Você pode se interessar por:
Meu novo portfólio (finalmente) - código disponível
Maximize seu aprendizado e produtividade com essa extensão para o Chrome

Carregando publicação patrocinada...
3

Muito legal o artigo e obrigado por trazer isso para o TabNews!

Uma pergunta: o React é declarativo na camada da apresentação (na parte do return do seu exemplo). Mas ele me parece até certo ponto imperativo no restante ou estou enganado? Por exemplo, quando você define que setIsLoading(true); ou qualquer outra coisa que o componente fizer, como uma chamada HTTP por fetch.

1

Opa, obrigado pelo comentário, Filipe!

Uma honta ter você aqui hahahaha.

Sim, estamos falando sobre a camada de apresentação em si, o que gera a nossa UI.

Se olharmos de forma separada, como você fez, podemos considerar a parte "lógica" como imperativa. Mas - na minha interpretação (que não significa nada hahahaha) - se olharmos o conjunto da obra em si (o React como um todo) podemos considerar que até mesmo o setIsLoading(true); é declarativo, pois o simples fato de executarmos essa linha de código evita que tenhamos que fazer outras ações de maneira imperativa:

button.disabled = true;
button.textContent = 'Loading...';

No outro exemplo que você deu de fazer uma chamada fetch, o React hoje possui um mecanismo próprio chamado createResource para lidar com a assincronicidade da chamada e não travar o UI do usuário enquanto aguarda pela resposta.

Para nós, basta que utilizemos o fetch, mas por trás dos panos o React abstrai lógicas que teríamos que fazer de maneira imperativa.

Novamente, é apenas a minha interpretação e a forma que eu vejo o React (o todo), mas a camada de apresentação definitivamente é declarativa.

2

Show! Então imagino que estamos bem alinhados e concordo 100% que a camada de apresentação é definitivamente declarativa (apesar de que lá também vejo que é possível colocar código imperativo) 🤝

[edit]

consertei o texto conforme sugestão do jgamaralv

1
2
2

Acredito tambem que React como um todo é de forma delcarativa. Esse repositorio explica a arquitetura fiber por traz do React:

https://github.com/acdlite/react-fiber-architecture

Aqui um outro otimo artigo sobre isso:

https://blog.logrocket.com/deep-dive-react-fiber/

Aqui um video bem deep sobre isso:
https://youtu.be/ZCuYPiUIONs

video resumo:
https://youtu.be/gsvHmZ3hXjo

Esse cara aqui deu uma palestra muito top em um meetup aqui em Berlin:
Teoria:
https://youtu.be/rKk4XJYzSQA
Inspecionando:
https://youtu.be/Zan16X8VvGM

Acrescentei referencias sobre react fiber architecture para ver como nosso codigo se torna mais declarativo pois por baixo do panos muitas coisas acontecem para a magica funcionar :)

1
2
2
2
2

Topico sensácional, desse tipo de tópico que precisamos, mas então vamos lá...
encontramos esse gap em várias lugares, o mais bad é ver essa galera que compra esses curso achando que está totalmente preparado pro mercado, sendo que existe o além doq ele aprendeu.

2
2
1
2

Eu acho esse assunto bem relevante, e cheguei a conclusão de que nem todo mundo quer tomar esse soco no estômago, e cair na real, do tipo: "Será que realmente eu aprendi, ou só copiei ?"

Seu cérebro vai buscar a comodidade a cima de tudo, então ele não gosta muito de pensar que talvez você não aprendeu, e que talvez uma boa coisa a se fazer seria realmente entender como determinada tecnologia funciona, aprender as bases. Quanto antes você tomar esse soco e mudar sua atitude, melhor.

2

Com certeza!

As pessoas precisam entender que quanto mais conhecimento elas adquirem, melhor será a qualidade de vida delas.

Quanto mais sabemos, maiores cargos e recompensas são alcançados.

Quando entendemos o que estamos fazendo e como as coisas funcionam "under the hood", mais os problemas se tornam simples. Paramos de trabalhar de forma volumosa para trabalhar de forma inteligente. Bugs e soluções que antes pareciam complexos e nos davam medo se tornam mais fáceis.

O conhecimento é o maior inimigo do burnout!

2

sensacional! por favor, manda uma lista de uns 10 artigos nessa pegada se possível, ainda que seja sobre outro framework/linguagem hahaha

1

Valeeu!

Sobre a lista de artigos, vou ficar te devendo, eu mesmo não conheço nenhuma, por isso que resolvi fazer essa série de posts hahahaha..

O que eu escrevo aqui é baseado nas documentações e experiências que tenho como desenvolvedor React ao longo de 6 anos.

Porém o nosso amigo @CarlosZiegler postou alguns vídeos muito interessantes sobre o React em si aqui

2
1
2

Ótimo conteúdo, parabéns. De uma forma simples e sucinta você descreveu bem a importância dessa biblioteca maravilhosa chamada React. Ah! E sim, continue com os artigos.

2
2

Concordo muito com você! Eu sou dev React a mais ou menos 1 ano e uma coisa que adorei foi ler a documentação e entender como funciona realmente funciona as coisas, saber o que a biblioteca React faz por baixo dos panos me ajudou na minha lógica e a me sentir até mais confiante em escrever os código. Enfim parabéns pelo tópico!

2

Respondendo sem terminar de ler...

React é uma lib javascript que permite:
escrever js e html no mesmo arquivo (css também se quiser);
componentizar o código pra facilitar a manutenção, organização e leitura; e
ele carrega os components/pages, mesmo aqueles que não estão abertos, para que a transição entre as páginas seja fluida.

Foi isso que me veio a mente.😅

1

Hahahaha, boa!

É sempre legal praticarmos o exercício de tentar explicar algo com o que nos vem na mente, sem tentar usar termos técnicos ou decorebas, até que cheguemos o mais próximo da realidade.

Um ponto importante que você mencionou é o carregamento de componentes e páginas mesmo que não estejam abertas. De fato, o React por si só, carrega toda a aplicação pelo lado do cliente (o que não é o ideal). Por isso, devemos utilizar técnicas de carregamentos como dynamic imports, route-based splitting, entre outras.

Essas técnicas que citei acima e outros benefícios, frameworks baseados no React, como o Nextjs, já nos dão de graça. Até mesmo por isso que a nova documentação do React sugere utilizar frameworks desse tipo, ao invés do falecido CRA (create react app).

2

nossa tomara que continue ksksksk sua didatica é boa e eu tava precisando muito de um artigo tipo esse pra ajudar com renderização do lado do servidor e pagina statica com o next js

(sei que ia demorar pq o fundamental do react viria antes mas se um dia chegar nesse topico ia ser foda ksksks)

1

Hahahaha, obrigado pelo elogio. Sempre achei que minha didática era horrível (ou que eu nem tinha uma)

Na real eu não pretendo tocar nesse assunto nessa série de artigos.

O final dela (se ele chegar) seria explicar como implementar um "mini React" e disponibilizar o código no Github.

Mas qual seria a sua dúvida? As vezes consigo ajudar :)

1
1

Post massa d+ jgamaralv, de fato já sabia de tudo o que foi abordado, mas é sempre bom dar uma revisada para relembrar e reforçar conhecimentos essenciais 👍😁

1
1

Muito obrigado por ter compartilhado esse seu ponto de vista, me ajudou muito a entender realmente em poucos parágrafos um pouco mais sobre essa tecnologia, que por sinal, estou aprendendo 😄

Aguardando a parte II

1

Muito bom o artigo! Tenho aproximadamente 2 anos como dev React e tive sorte que no meu curso o Mentor trabalhava com React do "jeito certo" e sempre nos trazendo conteudo atualizado, fiquei até que feliz por já saber tudo descrito acima hahaha!!

1

Brilhante!
Os vendedores de curso tem uma parcela de culpa quando o assunto é qualidade no desenvolvimento ou mesmo o mercado de trabalho. Mas creio que cabe a nós aplicarmos um filtro para aprendermos sem medo. Temos que ter curiosidade para descobrir como uma biblioteca React funciona, como o código é compilado (ou no caso, transpilado)? Porque existem erros com o nome Webpack ou babel? Creio que nossa curiosidade é o verdadeiro motivo que nos torna desenvolvedores.

1