Skip to content

sschiessl-bcp/react-vue

 
 

Repository files navigation

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

About

Run Vue in React and React Native

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.7%
  • Other 2.3%