4

Sou programador em C e recentemente comecei a estudar JavaScript, já tenho uma noção de programação mas como venho de uma linguagem relativamente "simples" estou enfrentando dificuldades em entender essa linguagem front-end.

Os comandos básicos e sintaxe já estou pegando o jeito mas quando vejo as pessoas falando sobre frameworks eu fico confuso. Dito isso, comecei a pesquisar sobre o React (que é um biblioteca, correto?), porém ainda não entendi o porquê das pessoas usarem ele, já programei em JavaScript puro e quando vou programar com React eu, particularmente, não vejo a diferença, além de tantas funções que estão lá e eu não compreendo.

Minha pergunta é: por que usar React? Qual a diferença entre JS puro e com bibliotecas, frameworks etc? Já me falaram que se você dominar um framework você não precisa saber muito sobre HTML e CSS, isso é verdade?

E se puderem me indicar materiais de estudo sobre esse tipo de coisa, agradeço. Eu gosto de programação mas às vezes fico assustado com a imensidão de coisas que existem nesse universo.

1

1 Resposta 1

9

O que é o React?

Como definido por seus criadores, React é “uma biblioteca JavaScript declarativa, eficiente e flexível para a criação de interfaces de usuário (UI)”.

Essa biblioteca surgiu em 2011, no Facebook, e passou a ser utilizada na interface do mural de notícias da rede social.

No ano seguinte, passou a integrar também a área de tecnologia do Instagram e de várias outras ferramentas da empresa. Em 2013, o código foi aberto para a comunidade, o que colaborou para sua grande popularização.

A imagem abaixo mostra uma comparação do uso do React em relação a outras tecnologias (Angular e Vue.js):

inserir a descrição da imagem aqui

Numa aplicação em React, você deve quebrar os diferentes elementos dela em pequenos componentes reutilizáveis. Cada vez que algo for complexo, quebre em pequenas partes e desenvolva esses componentes, essa técnica é chamada de Component Driven Development.

Mas e esse React? É tipo um Angular né?

Não! O Angular é um framework, ou seja, um conjunto de ferramentas para resolver vários tipos de coisas. Já uma biblioteca serve para resolver uma coisa em específico, no caso do React é renderizar componentes. Mas não vou entrar muito nesse assunto pois isso já foi respondido aqui.

Mas porque usar?

Exatamente por ter um objetivo específico, sua implementação é totalmente voltada para isso e consequentemente garante melhor performance e melhores formas de utilização.

O pessoal que criou o React fez um artigo bem completo falando o porquê deles terem criado e algumas de suas vantagens.

Resumindo:

  • Facilidade de se criar componentes pequenos e reutilizáveis;

  • Trabalhar com a abordagem do Virtual DOM, que é bem mais rápido que o DOM nativo. Pode ver melhor sobre isso aqui;

  • O React pode rodar no lado do servidor, permitindo um melhor SEO;

  • Unificar markup e a lógica da view, facilitando a extensão e manipulação.

Como funciona?

A principal mágica do React é de fato o uso do Virtual DOM, mas como ele funciona?

Como todos sabemos o DOM é super lento e devemos evitar ao máximo manipulá-lo em excesso, visto que precisaríamos fazer muitos repaints e reflows, que iriam custar muito para o nosso browser.

É aí que o React brilha!

Quando um componente é inicializado, o método render é chamado, gerando uma representação da view. Dessa representação, um markup é produzido e injetado no documento. Quando algum dado muda, o método render é chamado novamente e para que tenhamos uma atualização mais eficiente possível, o React faz um diferenciação (diff) do valor novo com o valor velho e aplica no DOM somente a nova mudança.

Segue um exemplo abaixo:

inserir a descrição da imagem aqui

Como podemos observar, ele inicialmente tem a cópia "original" do componente e o estado que ele deve ter depois, para isso ele faz uma diferenciação entre os 2 modelos no Virtual DOM, vê o que precisa mudar e mandar aplicar, somente após isso que as operações são feitas no DOM real.

Já me falaram que se você dominar um framework você não precisa saber muito sobre HTML e CSS, isso é verdade?

Tudo depende do contexto, existem inúmeros frameworks se ele atende tudo que irá fazer em seu projeto não é necessário uma grande habilidade em CSS, mas se em algum momento o mesmo tiver uma limitação - o que é bem comum - entra seu conhecimento em CSS. E esclarecendo melhor nesse caso o framework é apenas para o CSS, pois o HTML apenas cria a estrutura do site, então o HTML com certeza você terá que saber.

Concluindo

Tanto bibliotecas como frameworks são usadas para atender uma necessidade, e principalmente, para facilitar a vida do programador diminuindo muitas vezes o tempo que se gastaria fazendo o mesmo com o JS puro como é o caso citado.

Agora entrando nas vantagens de usar o React, uma das maiores vantagens que eu vejo é a API. Quem já tem experiência com JavaScript, que é a linguagem em que ela é escrita, consegue absorver toda a proposta do React facilmente.

Então eu acho que essa é uma das maiores vantagens, fácil de usar, bastante performática e traz diversas vantagens ainda na produtividade para quem está escrevendo, porque ela tem um nível de abstração muito bom. Isso consiste em ela dar realmente o que você precisa, e te deixar focado em resolver os problemas para o cliente, que é a real proposta dela.


Materiais de estudo

Alguns livros, caso prefira:

  • Primeiros Passos com React: Construindo Aplicações web;
  • JavaScript: O Guia Definitivo;

Referências:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .