Do React ao Vue, as diferenças entre os dois e porque aprender ambos
Neste artigo iremos analisar uma mesma aplicação em React.js e Vue.js para comparar as diferenças de como fazer coisas análogas nos dois.
Índice
- O que será abordado nesse artigo?
- Introdução
- Links auxiliares
- Conteúdos
- Conclusão
O que será abordado nesse artigo?
- Estrutura de um componente
- Declarações de variáveis e estados
- Declarações de métodos
- Propriedades (props)
- Estilização
- Renderização condicional e diretivos “v” do Vue
- “Ligação de dados de via dupla” (Two way data binding)
Introdução
Neste artigo vamos ver as diferenças entre React.js e Vue.js, comparando vários conceitos básicos de uma aplicação.
Este artigo visa explorar o modo como as coisas são feitas no Vue de uma ótica de alguém que já tem conhecimento de React, por isso é interessante (porém não obrigatório) que o leitor possua algum conhecimento de React.
O objetivo deste texto não é instruir como construir nenhuma aplicação específica, mas sim usar os exemplos apenas como referência para facilitar o entendimento do leitor quanto aos pontos discutidos.
Para poder fazer uma análise comparativa*, a mesma aplicação foi desenvolvida utilizando ambas as ferramentas para haver um ponto direto de comparação. Ambas as aplicações utilizam apenas um componente, o próprio “App” (App.js para o React e App.vue para o Vue) padrão dos projetos, para manter a simplicidade da aplicação e focar principalmente nas diferenças de código entre eles.
É interessante destacar também que no contexto do React estaremos falando apenas de componentes funcionais, não de classes, e em ambos os casos visando utilizar ES6+ em todo nosso uso de Javascript.
A aplicação desenvolvida consiste em uma barra de busca que tenta encontrar alguma obra de arte na API do Met Museum a partir do termo pesquisado e a mostra na tela acompanhada do seu título.
*Alguns dos snippets de código utilizados para ilustrar os conteúdos não estão no código do projeto.
Links auxiliares
Se você quiser entender melhor o código do projeto e ter mais contexto além dos snippets de código que estão no artigo, os projetos estão disponíveis para uso nas versões live e estudo com o código aberto no GitHub.
Estrutura de um componente
React:
A estrutura básica padrão de nosso componente se dá em 2 arquivos:
- Um para estrutura e lógica (um arquivo .js ou .jsx)
- Um para estilização (um arquivo .css, .scss ou similar)
Utilizando nosso arquivo App.js podemos notar que toda a estrutura e lógica do projeto está dentro de um arquivo .js ou .jsx.
Dentro desse arquivo há normalmente alguns imports (inclusive do arquivo separado de estilização),declarações e na sequência uma função, que é o nosso componente. A função contém declarações, métodos, entre outros elementos e na sequência tem o um bloco de retorno. O retorno do seu componente React utiliza o JSX, ele é uma forma de manipular dinamicamente a estrutura da página, assim o Javascript e HTML se “fundem” de certa forma e a lógica é permeada através do que parece ser HTML mas é na verdade JSX.
Vue:
A estrutura do componente é mais unificada, dentro de um arquivo .vue temos uma sintaxe similar ao HTML que é divida em 3 tags:
- <template>
Dentro desta tag é onde fica toda a estrutura do componente, sendo utilizado HTML normal dentro dele (com a adição dos diretivos-v, que falaremos sobre mais à frente). Tal qual o retorno de um componente funcional no React, a tag template deve retornar apenas um elemento HTML.
- <script>
Script é onde a lógica toda do componente vive, aqui é onde acontecerão, entre outras coisas, os imports, declarações de variáveis, métodos personalizados e também métodos próprios do ciclo de vida do Vue.
A estrutura padrão desta tag contém o export default de um objeto com um key-value pair “name” com o valor sendo o nome do componente.
- <style>
A tag style engloba a estilização do componente, de forma padrão o que vai dentro dela é CSS puro.
Ela pode ter um atributo “scoped” para ser uma estilização que é válida apenas para o arquivo onde está contida, e quando este atributo não aparece a estilização dentro da tag (como classes dentro dela) são utilizadas globalmente através da aplicação, geralmente isso é feito no próprio App.vue (que contém a parte “global” da aplicação em aplicações maiores).
Além disso outro possível atributo bastante comum é a linguagem (“lang”), podendo se utilizar ‘lang=”scss”’ por exemplo para utilizar Sass.
Declarações de variáveis e estados
React:
As variáveis podem ser declaradas normalmente com let e const e podem ser declaradas em qualquer lugar dentro da função fora do retorno da mesma.
Vue:
Embora não sejam exatamente variáveis, e sim propriedades da instância Vue, elas podem ser declaradas dentro da tag <script> utilizando uma função data e a declarando-as dentro do retorno dessa função. As variáveis declaradas dessa forma podem ser usadas similarmente aos estados no React, sendo globais e podendo ser usadas para manipular o HTML através dos diretivos-v próprios do Vue. Também podem ser declaradas variáveis locais dentro de cada um dos métodos criados e métodos próprios do lifecycle do Vue (i.e. mounted(), created(), etc).
Declarações de métodos
React:
Métodos podem ser declarados em qualquer lugar fora do retorno do componente.
Vue:
Métodos devem ser declarados dentro de um objeto que é chamado de “methods”, que é uma propriedade que pode ser adicionada ao objeto padrão dentro da tag <script>.
Propriedades (props)
React:
As propriedades são passadas pelo JSX (assim como propriedades padrão do HTML) do componente “pai” para o “filho”. Para declarar o “recebimento” dessa propriedade pode se usar a palavra reservada “props” ou desestruturar essas propriedades nos próprios argumentos do componente “filho” para acesso direto.
Vue:
Passar propriedades funciona da exata mesma forma que no React e no HTML, porém no recebimento o componente “filho” deve ter um objeto “props” com os nomes das propriedades recebidas. Também deve se informar o tipo da variável e há a opção de se informar um valor padrão para a mesma, similar à PropTypes e DefaultValues do React.
Estilização
React:
Pensando apenas no padrão “out-of-the-box” com create-react-app (sem instalação de pacotes como por exemplo sass ou opções CSS-in-JS como styled-components), a única opção é criar um arquivo CSS separado e importá-lo no seu componente ou utilizar inline-CSS (não recomendado).
Vue:
A estilização é feita dentro da tag <style> utilizando também CSS puro.
Renderização condicional e diretivos “v” do Vue
React:
Com a utilização de chaves ( {} ) no meio do JSX é possível utilizar variáveis e estados para realizar operações como renderização de listas, renderização condicional, etc.
Vue:
Diferentes diretivos servem para diferentes finalidades. Exemplo: onde no React se utilizaria o operador lógico AND (&&) para decidir se algo é renderizado no DOM, ou um operador ternário para optar entre duas possíveis opções, no Vue isso é feito a partir dos diretórios v-if (análogo à AND) e v-else (que “transformaria” o && em um ternário).
O diretório v-for é utilizado para rendelizar elementos em uma lista, é análogo ao uso de uma função map() dentro do JSX no React.
“Ligação de dados de via dupla” (Two way data binding)
React:
Na sua forma padrão o React utiliza “one-way-data-binding”, ou seja, uma ligação que vai apenas em uma direção, sendo necessário atualizar explicitamente o seu valor para poder mantê-lo sincronizado com um input de texto por exemplo.
Vue:
“Two-way-data-binding” no Vue é utilizada através do diretório v-model, que atualiza automaticamente o valor de uma variável de acordo com as mudanças feitas em um input.
Conclusão
Ambos tem suas vantagens e desvantagens, que devem ser medidas antes de se iniciar um projeto e levando em consideração as características do mesmo, enquanto o Vue dá ao desenvolvedor muitas opções que trazem facilidade e fácil estrutura e organização, ele também “engessa” um pouco a estrutura da aplicação quando comparado ao React, que permite que o desenvolvedor dite muito mais como as coisas serão feitas e organizadas (o que pode ser positivo ou negativo).
Não há uma opção objetivamente melhor, mas acredito que para quem já está habituado com React aprender Vue pode adicionar bastante e acrescentar uma outra opção para projetos ao arsenal do desenvolvedor front-end, além disso a transição do React para o Vue não é tão complicada, afinal os conceitos são muito análogos, apenas executados de formas diferentes.
Se você nunca se aventurou no mundo do Vue.js, um bom jeito de começar é analisando o código de uma aplicação simples, por isso os códigos e versões live dos projetos estão disponíveis nos links citados anteriormente na seção “Links auxiliares”.
Muito obrigado pela atenção, e bons estudos!
