React or Vue? How about both at the same time?

ByDiego Pinho in

Many JavaScript libraries and frameworks have emerged in recent years to create user interfaces. Among the most famous in the market, two have gained much prominence and often cause intrigue among developers. We are talking about React and Vue.

Both assumes that you know HTML, CSS and JavaScript. You are ready to use them. Despite the differences in functioning between them, both can be incorporated into the projects and have a very small learning curve. And with the recent license change from React, both are open source MIT.

To resolve the conflict between developers defending their libraries, a chinese company called SmallComfort did what seemed impossible: run the Vue inside the React / React Native. This is done through the react-vue library.

The project consists of several modules, and with this, offers three ways to use it:

  1. Using the Vue reactive-system to use reactivity in a React component
  2. Using the react-vue-loader to run Vue components in React
  3. Use react-vue-native-scripts to run Vue inside React Native

Let’s take a quick look at each case.

Reactivity System

One of Vue’s most distinctive features is its non-obstructive reactivity system. Thanks to the design of the Vue hierarchy, developers have been able to abstract this to use in rendering React components.

For this, the first step is to install the package by npm:

npm install --save react-vue

With this, we can already use the reactivity system in React. Just use the tag @observe.

import React, { Component } from 'react';
import Vue, { observer } from 'react-vue';

const store = new Vue({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increase () {
      this.count ++;
    }
  }
});

@observer
export default class Demo extends Component {
  render () {
    return <h1 onClick={store.increase}>{store.count}</h1>;
  }
}

Please note that with this code and data change, the view is updated. Most of the Vue’s magic is available from React, even though it’s Vuex. All API and documentation is available here. In addition, there is a great sample project that can be downloaded and run with an npm install and npm run dev. Just do the fork on the project here.

Vue Components

The second module, react-vue-loader, compiles the Vue component inside the React component. With this, it allows us to be able to roll the React components in the Vue and vice versa.

To do this, simply install the following npm packages:

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-loader

Once done, we can already play with component rendering. For example, we can have a React component with Vue and / or a Vue with React:

// Componente React (One.js) renderizando componente Vue (Two.vue)

import React, { Component } from 'react';
import Two from './Two';

export default class One extends Component {
  render() {
    return <Two>Hello Vue</Two>;
  }
}

// Componente Vue (Two.vue) renderizando um componente React (three.js)

<!-- Two.vue -->
<template>
  <div @click="count++">
    <three>{{count}}</three>
    <slot></slot>
  </div>
</template>

<script>
  import Three from './Three'
  export default {
    components: { Three },
    data () {
      return {
        count: 0
      }
    }
  }
</script>


// Componente React (Three.js)

import React, { Component } from 'react';

export default class Three extends Component {
  render () {
    return <span>{this.props.children}</span>
  }

Pretty incredible, is not it? All API and documentation are available here.

React Native

Last but not least, the react-vue-native-scripts module allows us to use Vue very easily inside React Native.

For this, we use the following packages by npm:

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-native-scripts

All React Native components exist as built-in components in the Vue. This means that you can use React Native like this:

<template>
  <view>
    <view>
      <text>Hello react vue</text>
    </view>
    <animated:view>
      <text>Hello animation</text>
    </animated:view>
  </view>
</template>

The same code in JSX would be:

import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';

export default class Demo extends Component {
  render() {
    return (
      <View>
        <View>
          <Text>Hello react native</Text>
        </View>
        <Animated.View>
          <Text>Hello animation</Text>
        </Animated.View>
      </View>
    );
  }

In addition to the documentation of the entire API, there is also a demonstration project called HackerNews, which shows how the module works. Just give a fork on the project and run it on your machine.

Conclusion

With the bursting of the JavaScript ecosystem, many libraries have emerged and will continue to emerge for quite some time. In the discussion of “which is the best”, we must remember that there is no perfect tool, but rather, the one that best suits the project. Both Vue and React are very strong and well – established libraries. It’s up to the developer to choose which one suits him best. Libraries such as react – vue or vuera – another alternative to working with React and Vue together-help the developer to take advantage of the better of the two technologies, and can even help smooth transition from one to another.

Leave a comment! 0

read more