Se você trabalha com desenvolvimento web certamente já ouviu falar sobre Angular, Vue, React etc…

O assunto desse post é sobre o React js. Uma ferramenta de código aberto mantida pela equipe do Facebook e instagram. Ele é uma biblioteca para desenvolvimento de interfaces.

Web component

vamos começar pelo inicio. Web components são formas de fazer tags HTML personalizadas que tenham um estilo próprio, uma estrutura própria e um comportamento. Acho que a melhor forma de exemplificar isso seria pensar em um botão personalizado. Exemplo: botao curtir, botão comprar, botão cancelar. Todos eles tem uma formato tanto visual quanto lógico e um comportamento. A ideia do componente é reaproveitar o mesmo código em vários lugares. Logo, programando bem 1 componente de botão você consegue reaproveitar o mesmo código diversas vezes. O botão compartilhar do facebook é tão bem estruturado que ele se estende para fora do facebook, assim com outras botões de outras redes sociais.

O que é o React e o que ele faz ?

O React é uma biblioteca de código aberto mantido pelo facebook e instagram. Seu principal objetivo é colocar em prática o web component. Ele é uma ferramenta para cria componentes, nada mais do que isso!

O grande diferencial do React é o “virtual-dom”. O v-dom é uma tecnica muito simples mas muito complexa na prática. Trata-se de virtualizar o DOM original em uma grande árvore de componentes. O DOM nada mais é do que sua estrutura HTML ( to simplificando bastante rsrs ). Fazer a manipulação do DOM pode ser trabalhoso e lento além de causar grandes problemas na aplicação (Estamos falando de JS puro, sem nenhuma lib como JQ).

Para resolver esse problema os desenvolvedores do React.js criaram o V-DOM, que como já falei, é uma representação virtual do DOM original.

Mas como assim?

Basicamente, o que o React faz é pegar todo o dom e jogar tudo isso na memória. Claro, de uma forma que seja possível manipular.

O que muda com o V-DOM

O v-dom consegue agilidade na hora de manipular o DOM. Com o V-DOM só é necessário mudar o componente e não toda estrutura do DOM como geralmente é feito. Dessa forma a aplicação fica muito mais rápido no tempo de resposta. Ele funciona basicamente esperando uma ação, se essa ação modifica o V-DOM ele sincroniza com o DOM original e muda apenas aquele componente.

O React trabalha sozinho para construir aplicações incríveis ?

Falando sobre React.js você provavelmente já se deparou com aqueles cursos do YT dizendo “aprenda a fazer aplicações incríveis com React.js”. Na verdade não é somente React, existem outras ferramentas baseadas nessa lib que ajudam a construir uma aplicação legal ( talvez incrível). Isso tudo pode ser chamada de “Ecossistema react”. São diversos framewerks que ajudam a deixar a programação com React ainda mais fácil como React-redux, react-router-flux, libs de formulário e etc…

O que é possível fazer com React e todo seu ecossistema?

Da pra fazer de tudo com react da mesma forma que da pra fazer de tudo com js. Você consegue construir de sites simples a aplicações complexa. Além disso o React pode ser renderizado no lado do servidor, deixando a aplicação mais segura.

Isso é uma opinião pessoal: O React é muito legal de se trabalhar, mas preciso dizer isso. Ultimamente eu tenho visto aplicações muito simples sendo feitas com React, o que é muito legal. Mas vejo aplicações pequenas se tornando complexas desnecessáriamente. Não vejo a necessidade de usar o React para fazer uma lista de produtos, por exemplo. E isso ocorre !

Acho que o React pode funcionar muito melhor como uma ferramente de plug-in. Imagine que alguém te contratou para fazer uma localizador de lojas. Um APP bem comum em e-commerce. A ideia é lista todas as lojas e mostrar no Google Maps quando selecionada. Um App simples !

Imagina que isso virou um produto da sua empresa e outro cliente comprou seu app. É muito mais simples migrar de uma site para outro com React. Você só precisa colocar uma div com id=”meu-app” e plugar o JS e CSS !

Fontes: