Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SmallComfort/react-vue
Run Vue in React and React Native
https://github.com/SmallComfort/react-vue
react react-native react-vue vue
Last synced: about 2 months ago
JSON representation
Run Vue in React and React Native
- Host: GitHub
- URL: https://github.com/SmallComfort/react-vue
- Owner: SmallComfort
- License: mit
- Fork: true (vuejs/vue)
- Created: 2017-04-24T03:02:34.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2018-06-24T14:17:49.000Z (over 6 years ago)
- Last Synced: 2024-10-29T23:12:37.173Z (2 months ago)
- Topics: react, react-native, react-vue, vue
- Language: JavaScript
- Homepage:
- Size: 18.6 MB
- Stars: 1,227
- Watchers: 44
- Forks: 62
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](#reactivity-system) of Vue to observer React component
* Use the [react-vue-loader](#vue-component) to run Vue component in React application
* Use the [react-vue-native-scripts](#native) 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
```
```javascript
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
{store.count}
;
}
}
```
[document](https://github.com/SmallComfort/react-vue/blob/dev/packages/react-vue/README.md)
### Vue Component
Introduce [react-vue-loader](https://github.com/SmallComfort/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
```
```javascript
// One.js
import React, { Component } from 'react';
import Two from './Two';
export default class One extends Component {
render() {
return Hello Vue;
}
}
```
```html
{{count}}
import Three from './Three'
export default {
components: { Three },
data () {
return {
count: 0
}
}
}
```
```javascript
// Three.js
import React, { Component } from 'react';
export default class Three extends Component {
render () {
return {this.props.children}
}
}
```
[document](https://github.com/SmallComfort/react-vue/blob/dev/packages/react-vue/COMPONENT.md)
### Native
Introduce [react-vue-native-scripts](https://github.com/SmallComfort/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](https://facebook.github.io/react-native/docs/view.html) exists as built-in components in Vue, you can use react native components as following
```html
Hello react vue
Hello animation
```
The similar JSX code is as follows
```javascript
import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';
export default class Demo extends Component {
render() {
return (
Hello react native
Hello animation
);
}
}
```
> You can use all the [React Native API](https://facebook.github.io/react-native/) in Vue component. The camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents
[document](https://github.com/SmallComfort/react-vue/blob/dev/packages/react-vue/COMPONENT.md)
## License
[MIT](http://opensource.org/licenses/MIT)