Um pouco sobre ReactJs

Fala galera, nesse post vou falar um pouco sobre o React, o que ele é, qual o problema ele resolve e de que forma resolve!

Um pouco de história…

O React surgiu em 2011 e foi criado por engenheiros de software do Facebook. A primeira implementação do React foi na timeline do próprio Facebook no mesmo ano de 2011, um ano mais tarde também foi implementado no Instagram.

Hoje ele é open source e é utilizado pela Netflix, Airbnb, Pinterest, Twitter entre outros, aqui no Brasil a globo.com também utiliza em algumas sessões do site.

Tá, mas o que é esse tal de React?

O React é uma biblioteca JavaScript para construção de interfaces, simples assim, a única proposta dele é essa.

Por ter um objetivo muito bem definido, ele consegue fazer isso muito bem, principalmente em relação a manipulação do DOM (Document Object Model), afinal, em uma biblioteca focada em construção de interfaces, se tem uma coisa que ela vai fazer MUITO é manipular o DOM. É nesse quesito que o React se destaca e é por isso que ele é tão falado.

E como isso funciona?

Para entender como a manipulação do DOM com o React é poderosa, precisamos relembrar como fazemos hoje.

Para atualizar o valor de algum campo, usamos o famoso document.getElementById('idDoElemento').value = 'valor', ou com jQuery fazemos $('#idDoElemento').val('valor'), seja a forma que for, acessar a arvore do DOM e manipular (consultar ou alterar) seu valor é algo muito custoso para o browser, pode parecer escovação de bits se a gente considerar uma web app simples, com pouca iteração do usuário e manipulação de elementos, mas imagine uma dashboard com vários nodes, onde uma ação do usuário propaga uma reação em cadeia de botões, inputs, labels, gráficos e etc, é nesse momento que as várias manipulações do DOM são muito custosas

Para resolver esse problema, a galera do React utiliza o Virtual DOM, que basicamente é a representação do DOM real em memória. Sempre após a primeira renderização do seu componente no React, é gerado essa representação e somente após isso seu HTML é renderizado no DOM real. As próximas renderizações desse mesmo componente não vão novamente bater no DOM real diretamente, elas vão passar pelo algoritmo de diff do React.

Suponha que houve uma ação do usuário e você precisa renderizar novamente seu componente, com um novo item em uma lista ou um texto diferente para uma label por exemplo, assim que você mandar renderizar seu componente, o React irá utilizar a representação (HTML) que você renderizou anteriormente e que ele tem em memória e fazer um diff com a nova representação que você retornou, esse algoritmo de diff irá analisar o que é diferente e manipular somente isso no DOM real. Por exemplo:
Na primeira renderização, seu componente retornou um HTML como esse: ```

• item 1
• item 2
• item 3
• item 4

Nesse momento, o algoritmo de diff do React mantem intocado os primeiros 4 itens da lista, porque ele verificou que não houve nenhuma mudança no seu conteúdo e por isso não é necessário atualiza-lo, ele simplesmente adiciona o novo item (

E sabe qual a melhor parte? Você não precisa se preocupar com nada disso, você simplesmente manipula estado dentro do seu componente e o React cuida do resto pra você. Sem ele, você precisaria acessar o DOM pra consultar a

, criar uma nova
• e mandar um appendChild na
  passando a sua nova
  • como parâmetro, imagine isso em grande escala, seria beeem custoso para o browser e mais código pra você desenvolver e gerenciar. Percebeu o poder do React? :)

    👍

    Não se preocupe por enquanto com o código para fazer isso, no próximo post vou mostrar na pratica como isso tudo acontece e você vai ver que é bem simples, nesse momento é importe saber a teoria, depois vamos a prática :).

    Que f##, devo migrar todo o meu front-end pra React?

    Não. Essa é a hora daquele “clichezão” do desenvolvimento de software, o React não é uma bala de prata e não vai resolver todos os seus problemas.

    Primeiro tenha a certeza que você tem um problema, depois estude o React e veja se ele pode te ajudar. Um site institucional por exemplo, com uma página de contato, pouco (ou quase nenhum) conteúdo dinâmico baseado em interações do usuário, não precisa do React, lembre-se que ele será mais uma biblioteca JavaScript que seu time terá que aprender, por mais simples que seja.

    Quando a galera do Facebook criou o React, eles tinham um problema bem claro, a sua timeline. Imagine o tanto de coisas que acontecem ali, são requisições chegando (quando te enviam uma mensagem, por exemplo), vários botões, texto e imagens sendo manipuladas pelo usuário, componentizar tudo isso e olhar para performance era extremamente necessário. Se você lembrar o começo do post onde menciono quem utiliza o React, você vai notar que são projetos que tem isso em comum, a necessidade de componentizar e ser performáticos. Seu projeto não precisa ser do tamanho deles para utilizar o React, mas leve em consideração suas necessidades e os problemas que você de fato precisa resolver.

    No próximo post além de mostrar exemplos de como utilizar o React, vou apresentar outros benefícios que o fato de componentizar sua aplicação irá trazer.

    Curtiu? Alguma dúvida, sugestão ou critica? Não deixe de comentar, será muito importante para nós!