Usando componentes React diretamente nos componentes do Vue (com ou sem o datagrama) – Parte 1 – Visão geral

Cedric McKinnie Blocked Unblock Seguir Seguindo 9 de janeiro

Esta é uma visão geral da minha experiência com a integração do VueJS e ReactJS na mesma base de código, escrevendo todo o código com JSX e usando uma compilação do Webpack. Para um tutorial passo-a-passo mais aprofundado sobre como configurar isso sozinho. Por favor, veja minha Parte 2 – Tutorial Completo no qual eu forneço um passo-a-passo passo a passo de como configurar um projeto Vue que pode usar diretamente os componentes do React. Em seguida, destaque como usar alguns dos principais recursos do React nesse projeto do Vue.

Aviso Legal: Eu sugiro que você se familiarize com o Vue e o React individualmente antes de experimentar este conceito com muita profundidade. Além disso, é sempre uma boa ideia fazer sua lição de casa antes de enviar qualquer coisa para um ambiente de produção.

TLDR

  • O Vuera , uma biblioteca de código aberto no Github, pode ser usado para criar uma interoperabilidade relativamente simples entre o Vue e o React usando o JSX para escrever código consistente em ambas as ferramentas.
  • Ser capaz de usar os componentes Vue e React no mesmo projeto (e arquivo) abre a oportunidade de alavancar os recursos e componentes dos ecossistemas Vue e React.
  • Link para o repositório do Github com exemplos de código completo aqui

Motivação

Recentemente, um dos meus parceiros de negócios começou a criar um incrível aplicativo B2B usando o Vue e conseguiu fazer um monte de progresso. A certa altura, decidi começar a contribuir para o projeto dele e comecei a prototipar com o Vue. Consegui muito com o Vue, mas precisei de certos componentes mal conservados, um trabalho em andamento ou simplesmente não existiam. Isso não é de forma alguma uma falha do Vue como framework, mas, em vez disso, acredito que seja mais porque muitos dos mais populares e poderosos componentes do React foram feitos ou suportados por um dos gigantes da tecnologia, uma startup moderna ou uma inteligente. empresa de consultoria. Minha crença pessoal é que é apenas uma questão de tempo até que os usuários de alto orçamento adotem a Vue por várias razões, o que vai equilibrar o campo de jogo, mas essa é definitivamente uma conversa longa e especulativa para outra época. De qualquer forma, em vez de gastar o tempo para construir esses componentes do zero e lidar com a manutenção deles, decidi me aventurar em uma missão para ver se eu poderia integrar perfeitamente alguns dos mais avançados componentes React em nosso aplicativo Vue. Uma busca rápida me levou a apenas um resultado confiável, que é uma fascinante biblioteca de código aberto chamada Vuera. O Vuera oferece uma maneira brilhante de integrar os componentes do React aos componentes do Vue e vice-versa, sem perder uma tonelada de funcionalidades básicas específicas do Vue ou React. Embora o Vuera ainda esteja em seus estágios iniciais, ainda é uma forte solução em potencial para a antiga batalha Vue vs. React, que provocou uma tonelada de disputas no mundo de front-end.

Vuera e JSX

No início, acompanhei os documentos da Vuera completamente apenas para me familiarizar com a ferramenta. Eu achei a integração absolutamente fantástica, mas não funcionou diretamente com o JSX. Escrever Reação sem JSX é possível, mas absolutamente não é recomendado por praticamente ninguém que você pergunte na comunidade React. Como desenvolvedor empreendedor do React, meu primeiro instinto foi descobrir como integrar os componentes do React com o JSX no meu aplicativo Vue. Felizmente, o Vue oferece a capacidade de usar explicitamente as funções de renderização com o JSX como se opor aos SFCs ( Single File ComponentsComponentes de Arquivo Único ) que apresentam um DSL de modelo html. Como alguém que realmente gosta de usar a sintaxe JSX, prefiro muito mais ao sistema de templates Vue, mas reconheço os prós e contras de ambos. O truque é passar o componente pelas funções do invólucro do Higher-Order Component (HOC) fornecidas pela Vuera sem registrar seu componente na sua instância do Vue. A saída do HOC retorna exatamente o que o babel-plugin-transform-vue-jsx está esperando como uma entrada na sua função de renderização do Vue. Eu explico com detalhes e exemplos na minha parte 2 – Full Tutorial post. Observe que essa técnica específica funciona apenas para componentes React carregados de módulos externos. Todos os componentes que você escrever precisarão ser resolvidos com um pequeno ajuste não invasivo para a sua configuração do Vue Webpack que eu criei e detalharei abaixo.

JSX e Babel em poucas palavras

Sob o capô, tanto o Vue quanto o React aceitam HTML em um formulário tipo javascript e o processam de uma forma que parece mágica para o usuário. Ambos apenas fornecem ao usuário com o açúcar sintático para tornar todo o processo de criação de visualizações com javascript consistente, conciso, conveniente e organizado. A principal ferramenta responsável por essa transformação é o Babel . Basicamente, um dos principais objetivos do Babel é transpilar o código de uma forma para outra. Nesse caso, estamos alterando o JSX (a interface do usuário) para um código JavaScript compatível com navegador, compatível com versões anteriores e razoavelmente compatível (a interface da máquina). Se você não está familiarizado com o funcionamento do babel, eu recomendo que você faça alguns tutoriais para entender melhor a intuição exata por trás da minha explicação.

A Função Render e a Função 'h' do Vue

Outra parte importante do contexto para entender antes disso tudo fará sentido é a função 'h' de Vue. Você pode ler mais sobre os documentos do Vue:

Funções de renderização e JSX – Vue.js
A Vue recomenda o uso de modelos para construir seu HTML na grande maioria dos casos. Existem situações no entanto, onde… vuejs.org

Eles fazem um excelente trabalho explicando isso, então não vou entrar em muitos detalhes. Aqui está uma comparação básica de como o Vue e o React se parecem sem o açúcar da sintaxe JSX:

Por padrão, a definição da função de renderização do Vue espera que a função 'h' seja passada para o escopo. Esta função 'h' é na verdade apenas um pseudônimo abreviado comumente usado para 'createElement'. A função de renderização é simplesmente uma função que é registrada com um componente do Vue que permite especificar como a instância do Vue deve carimbar seus elementos no DOM. Pense nisso como um conjunto de instruções mais explícito do que usando modelos do Vue. Obviamente, os componentes internos do React são diferentes, mas o conceito de funções de renderização usadas para gerenciar o DOM é muito semelhante. Para ser mais eficiente, tanto o Vue quanto o React rastreiam e manipulam de maneira inteligente essas mudanças no DOM internamente, no que é chamado de Virtual DOM. Usando o plugin transform-vue-jsx babel, podemos criar o equivalente de nossos componentes acima com JSX:

Dependendo da versão do plug-in de transformação JSX do babel, no entanto, você deve fornecer 'h' como um argumento para sua função de renderização do Vue ou então as coisas irão quebrar porque 'h não está definido' e, portanto, não possui nenhuma função de fábrica para criar elementos Vue. Atualizações recentes do transform-vue-jsx fizeram com que ele auto-injetasse o 'h' como parâmetro, assim você não precisa mais fazer isso nos componentes do Vue, como na versão 3.4.0 do transform-vue-jsx :

vuejs / babel-plugin-transformar-vue-jsx
babel plugin para o vue 2.0 jsx. Contribua para o desenvolvimento do vuejs / babel-plugin-transform-vue-jsx criando uma conta em… github.com

Dito isso, quando o Webpack é carregado nos seus componentes Vue e React, ele procura por arquivos .jsx (ou .tsx se você estiver usando o typescript). Por padrão, o webpack é instruído a usar o carregador de babel para manipular o JSX, pois ele contém o plugin transform-vue-jsx babel. Como mencionado acima, este plugin é responsável por transformar o JSX em algo que o Vue possa entender. O problema é que, como os componentes Vue e React podem ter extensões de arquivo .jsx (ou .tsx), o Webpack não sabe qual plug-in de transformador JSX usar e tenta usar o transformador Vue para manipular os arquivos Vue e React. A ironia aqui é que o JSX do Vue e o JSX do React parecem quase 100% equivalentes, mas ainda assim falha. A única diferença é que o personagem pequeno engraçado 'h', que tem que estar disponível no escopo da sua função de renderização do Vue, para funcionar. Portanto, se o analisador Vue JSX tentar analisar seu arquivo React, ele quebrará com o erro 'h não está definido'. Tudo o que você precisa fazer para resolver isso é adicionar mais uma regra na sua configuração do Webpack para dizer ao carregador de babel como distinguir entre os arquivos JSX do Vue e do React.

Isso considera arquivos TSX também. Além disso, você precisará sufixar todos os arquivos do React em seu projeto com .react.jsx (ou .react.tsx). O que isto faz é dizer ao Webpack para associar seu carregador de babel ao transformador React JSX para arquivos .react.tsx ou .react.jsx, caso contrário, o padrão é usar o transformador do Vue JSX. Esta foi apenas uma solução não invasiva possível que eu criei, mas estou muito aberta a outras ideias, se alguém puder pensar em uma maneira melhor. Além disso, não se preocupe com os módulos externos do componente React. Você não precisa renomear nada para que eles funcionem. Claro, não se esqueça de adicionar reagir e reagir como dependências do seu projeto para que este processo funcione. Você também pode encontrar o seguinte erro ao usar o carregador do babel:

Erro de URIE: falha ao decodificar o parâmetro '/%3C%=%20BASE_URL%20%%3Efavicon.ico'

Falha ao decodificar o URL favicon.ico

Para resolver esse problema, você precisará renomear sua pasta pública (eu escolhi “vpublic” como em “vue-public”) e clone seu favicon.ico em uma pasta pública vazia em sua raiz. Eu realmente não gosto da idéia de ter que mudar o nome da pasta pública e eu entendo que muitas pessoas podem ser avessos a fazê-lo. No momento, estou procurando maneiras melhores de fazer isso, mas, se alguém tiver alguma recomendação para uma solução melhor, sinta-se à vontade para falar comigo! Sua estrutura de projeto resultante deve ficar assim:

Conclusão

A documentação do Vue indica especificamente que nem todos os componentes são melhor escritos usando modelos Vue. Então, enquanto eu reconheço que esta não é a solução definitiva para o debate entre frameworks, é simplesmente outro ângulo em como podemos usar essas ferramentas para alcançar nosso objetivo unificado de criar interfaces de usuário poderosas, reativas e robustas. Idealmente, sinto que isso é um meio de permitir que as equipes lidem de forma mais fluida com a transição entre estruturas, independentemente de seus interesses pessoais. Eu pessoalmente aprecio quando há maneiras de experimentar novas ferramentas e estruturas em um ambiente prático antes de fazer muito de um investimento inicial e essa biblioteca torna isso possível. Nós não temos que discutir mais sobre isso. Com um pouco de compromisso e apoio da comunidade, todos podem conseguir o que querem sem muito conflito se trabalharmos juntos.

PS Embora o Vuera seja realmente um nome realmente incrível, minha sugestão para um nome mais apropriado seria TruceJS, porque me parece um consenso entre os desenvolvedores do Vue e do React. Eu acho que muitos de nós podem concordar que a falta de consenso tem sido tanto um catalisador importante quanto um inibidor para o mundo do desenvolvimento de front-end.