Run Vue in React and React Native

React-Vue

React-Vue is designed to connect React and Vue. Which help you run Vue in React.

There are three uses.

• Use the reactivity system of Vue to observer React component
• Use the react-vue-loader to run Vue component in React application
• Use the react-vue-native-scripts to run Vue component in React Native

Reactivity System

Thanks to Vue’s clear hierarchical design, we can easily pull out the reactivity system (9 KB gzipped), and drive React component rendering.

npm install --save react-vue

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>;
  }
}

document

Vue Component

Introduce react-vue-loader, which compile the Vue component into a React component. As you might think, your previously written Vue components can run inside the React component, and your React components can also run inside the Vue component.

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

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

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

<!-- 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>

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

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

document

Native

Introduce react-vue-native-scripts, which start a server to compile the vue component into a react component.

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

All React Native Components exists as built-in components in Vue, you can use react native components as following

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

The similar JSX code is as follows

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>
    );
  }
}

You can use all the React Native API in Vue component. The camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents

document

License

MIT