dwqs / Vue To React
Licence: mit
🛠️ 👉 Try to transform Vue component to React component
Stars: ✭ 326
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue To React
Htmlviewer
The well-known Delphi/Lazarus HtmlViewer/FrameViewer
Stars: ✭ 287 (-11.96%)
Mutual labels: components
Bem Components
Set of components for sites development
Stars: ✭ 318 (-2.45%)
Mutual labels: components
Gatsby Themes
Gatsby themes for blazing fast sites. We are working on the next version of the Flex theme. See https://github.com/reflexjs/reflexjs
Stars: ✭ 275 (-15.64%)
Mutual labels: components
Weightless
High-quality web components with a small footprint
Stars: ✭ 284 (-12.88%)
Mutual labels: components
Base Components Recipes
A collection of base component recipes for Lightning Web Components on Salesforce Platform
Stars: ✭ 293 (-10.12%)
Mutual labels: components
Nutui
京东风格的移动端 Vue2、Vue3 组件库 (A Vue.js UI Toolkit for Mobile Web)
Stars: ✭ 3,870 (+1087.12%)
Mutual labels: components
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+4979.75%)
Mutual labels: components
Fractalistic
A framework agnostic, developer friendly wrapper around Fractal
Stars: ✭ 309 (-5.21%)
Mutual labels: transform
Chakra Ui
⚡️Simple, Modular & Accessible UI Components for your React Applications
Stars: ✭ 295 (-9.51%)
Mutual labels: components
Awesome List
Curated list of links on component-driven development and design systems
Stars: ✭ 271 (-16.87%)
Mutual labels: components
Coreui Vue
Over 90 Bootstrap based Vue.js components and directives. CoreUI React.js UI Components. CoreUI for Vue.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true Vue components, without jQuery and unneeded dependencies.
Stars: ✭ 318 (-2.45%)
Mutual labels: components
Go Starter Kit
[abandoned] Golang isomorphic react/hot reloadable/redux/css-modules/SSR starter kit
Stars: ✭ 2,855 (+775.77%)
Mutual labels: components
React Native Ui Lib
UI Components Library for React Native
Stars: ✭ 3,928 (+1104.91%)
Mutual labels: components
Vant
Lightweight Mobile UI Components built on Vue
Stars: ✭ 18,852 (+5682.82%)
Mutual labels: components
Cardslideview
一行代码实现ViewPager卡片效果,比ViewPager2更强大,底层同样是RecyclerView
Stars: ✭ 301 (-7.67%)
Mutual labels: transform
vue-to-react
🛠️ 👉 Try to transform Vue component(support JSX and SFC) to React component.
Since v0.0.8 support SFC
Preview screenshots
Transform JSX Component:
Transform SFC Component:
Install
Prerequisites: Node.js (>=8.0) and NPM (>=5.0)
$ npm install vue-to-react -g
Usage
Usage: vtr [options]
Options:
-V, --version output the version number
-i, --input the input path for vue component
-o, --output the output path for react component, which default value is process.cwd()
-n, --name the output file name, which default value is "react.js"
-h, --help output usage information
Examples:
$ vtr -i my/vue/component
The above code will transform my/vue/component.js
to ${process.cwd()}/react.js
.
$ vtr -i my/vue/component -o my/vue -n test
The above code will transform my/vue/component.js
to my/vue/test.js
.
Here is a demo.
Attention
The following list you should be pay attention when you are using vue-to-react to transform a vue component to react component:
- Not support class object syntax binding and class array syntax binding
// Not support
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
// support
<div v-bind:class="classes"></div>
computed: {
classes () {
// ...
return your-classes;
}
}
// ...
// react component
// ...
render () {
const classes = your-classes;
return (
<div class={classes}></div>
)
}
- Not support style object syntax binding and style array syntax binding
// Not support
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>
// support
<div v-bind:style="style"></div>
computed: {
style () {
return {
activeColor: 'red',
fontSize: 30
}
}
}
// ...
// react component
// ...
render () {
const style = {
activeColor: 'red',
fontSize: 30
};
return (
<div style={style}></div>
)
}
- Not support
watch
prop of vue component - Not support
components
prop of vue component if you are transforming a JSX component. See component tip. But supportcomponents
prop when you are transforming SFC. - Only supports partial built-in Vue directives(SFC):
v-if
,v-else
,v-show
,v-for
,v-bind
,v-on
,v-text
andv-html
. - Not support v-bind shorthand and v-on shorthand(SFC):
// Not support
<div :msg="msg" @click="clickHandler"></div>
// Support
<div v-bind:msg="msg" v-on:click="clickHandler"></div>
- Not support custom directives and filter expression(SFC).
- Only supports partial lift-cycle methods of vue component. Lift-cycle relations mapping as follows:
// Life-cycle methods relations mapping
const cycle = {
'created': 'componentWillMount',
'mounted': 'componentDidMount',
'updated': 'componentDidUpdate',
'beforeDestroy': 'componentWillUnmount',
'errorCaptured': 'componentDidCatch',
'render': 'render'
};
- Each computed prop should be a function:
// ...
computed: {
// support
test () {
return your-computed-value;
},
// not support
test2: {
get () {},
set () {}
}
}
// ...
- Computed prop of vue component will be put into the render method of react component:
// vue component
// ...
computed: {
// support
test () {
this.title = 'messages'; // Don't do this, it won't be handle and you will receive a warning.
return this.title + this.msg;
}
}
// ...
// react component
// ...
render () {
const test = this.state.title + this.state.msg;
}
// ...
Development
- Fork it
- Create your feature branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- Create new Pull Request
LICENSE
This repo is released under the MIT.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].