December 19, 2018

421 words 2 mins read

SmallComfort/react-vue

SmallComfort/react-vue

Run Vue in React and React Native

repo name SmallComfort/react-vue
repo link https://github.com/SmallComfort/react-vue
homepage
language JavaScript
size (curr.) 19498 kB
stars (curr.) 1151
created 2017-04-24
license MIT License

React-Vue

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

There are three uses.

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

comments powered by Disqus