As you can see in the comparison table, React and Vue share many similarities. They both:
- Use a virtual DOM
- Provide reactive and dynamic view components
- Maintain focus in the core library, with routing and global state management handled by companion libraries.
Both React and Vue.js are similarly fast, so speed is unlikely to be a deciding factor in choosing between them. For specific metrics though, check out this 3rd party benchmark, which focuses on raw render/update performance with very simple component trees.
The folder structure
JSX or HTML?
Note: You can use JSX in Vue with the help of babel plugin.
Setting up a Component with Vue and React
- React uses JSX and Components can be statefull (can handle the state directy) or statless (can only receive props).
Here’s an example of a component between the two frameworks:
Updating Local State
To update local component state in React, you use the
setState method. To update it in Vue, you simply assign the property the new value.
The React way:
The Vue.Js way:
In React, you would usually use a ternary operator to conditionally render content. Vue introduces the
v-if keyword that you acts the same way.
Iterating Over Items
To iterate over an array of items in React, you usually
map over the values and return a string of what you’d like each ‘element’ to be. In Vue, you would use
These two frameworks are quite similar but you need to use the one that fits your needs for your project and your current skill-set.
You can find important resources here: